@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Archivo:wght@400;600;700&display=swap");
:root{--ink:#111;--bone:#F4EDE0;--gold:#C9A227;--gold-d:#9A7A1A;--card:#fffdf8;--muted:#5c5348;--line:#e4d8c4}
*{box-sizing:border-box}html,body{margin:0;background:var(--bone);color:var(--ink);font-family:Archivo,system-ui,sans-serif;line-height:1.5}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
h1,h2,h3,.brand{font-family:"Bebas Neue",Impact,sans-serif;letter-spacing:.03em;margin:0;line-height:1}
.wrap{width:min(1100px,calc(100% - 32px));margin:0 auto}
.top{background:var(--ink);color:var(--bone);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:8px 12px}
header.site{position:sticky;top:0;z-index:20;background:rgba(244,237,224,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:16px}
.nav img.logo{height:58px;width:auto}
.nav-links{display:flex;gap:18px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.nav-links a:hover{color:var(--gold-d)}
.bag{border:2px solid var(--ink);padding:6px 10px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.bag span{background:var(--gold);color:var(--ink);border-radius:99px;padding:0 6px;margin-left:6px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:36px 0 20px}
.hero h1{font-size:clamp(48px,8vw,88px)}
.gold{color:var(--gold-d)}
.lead{font-size:18px;max-width:42ch;color:var(--muted)}
.btn{display:inline-block;background:var(--ink);color:var(--bone);padding:12px 18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;border:0;cursor:pointer}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-card{background:var(--card);border:1px solid var(--line);padding:18px}
.hero-card img{width:100%;background:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.card img{aspect-ratio:1;object-fit:cover;background:#fff}
.card .p{padding:14px}
.card h3{font-size:28px}
.meta{color:var(--muted);font-size:13px}
.price{font-weight:700}
.section{padding:36px 0}
.kicker{color:var(--gold-d);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.style{background:var(--ink);color:var(--bone);padding:22px;min-height:140px}
.style h3{font-size:36px;color:var(--gold)}
table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;font-size:14px}
th{background:var(--ink);color:var(--bone)}
.note{background:#fff;border-left:4px solid var(--gold);padding:12px 14px;color:var(--muted)}
label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:12px 0 6px}
select,input,textarea{width:100%;padding:10px;border:2px solid var(--ink);background:#fff;font:inherit}
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:28px 0}
.warn{color:#8a1f1f;font-weight:700}
.cart-line{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);padding:10px;margin-bottom:10px}
footer.site{background:var(--ink);color:var(--bone);margin-top:48px;padding:28px 0 90px}
footer.site a{color:var(--gold)}
.bottom{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:var(--bone);display:none;z-index:30}
.bottom a{flex:1;text-align:center;padding:10px 4px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bottom a.on{color:var(--gold)}
@media(max-width:800px){
.hero,.pdp,.styles{grid-template-columns:1fr}
.nav-links{display:none}
.bottom{display:flex}
footer.site{padding-bottom:100px}
}

/* Color swatches + finish chips (POD) */
.swatch-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 6px}
.swatch-row.compact{gap:5px;margin-top:8px}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid rgba(0,0,0,.25);cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.swatch.mini{width:14px;height:14px;cursor:default;pointer-events:none;display:inline-block;border-width:1px}
.swatch.on{outline:3px solid var(--gold);outline-offset:2px;border-color:var(--ink)}
.swatch.light{border-color:#bbb;box-shadow:inset 0 0 0 1px #ddd}
.finish-row{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.finish-chip{background:#fff;border:2px solid var(--ink);padding:8px 12px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;font-family:inherit}
.finish-chip.on{background:var(--gold);border-color:var(--gold-d)}
.badge-pod{display:inline-block;background:var(--ink);color:var(--gold);font-size:10px;font-weight:700;letter-spacing:.1em;padding:2px 6px;vertical-align:middle;margin-left:4px}

/* Embroidery design picker */
.design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:6px 0 8px}
.design-card{background:#fff;border:2px solid var(--ink);padding:8px;cursor:pointer;text-align:left;font-family:inherit;display:flex;flex-direction:column;gap:4px;position:relative}
.design-card img{width:100%;aspect-ratio:1;object-fit:cover;background:#fafafa}
.design-card .design-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.design-card .design-delta{font-size:11px;color:var(--muted)}
.design-card .design-tag{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--gold);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 5px}
.design-card.on{outline:3px solid var(--gold);outline-offset:2px;border-color:var(--gold-d);background:#fffdf0;box-shadow:0 0 0 2px var(--ink),0 8px 20px rgba(17,17,17,.12)}
.design-card.on .design-label{color:var(--gold-d)}
.design-card.on::after{content:"Selected";position:absolute;bottom:8px;right:8px;background:var(--gold);color:var(--ink);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px}
.callout{background:var(--card);border:1px solid var(--line);padding:18px 20px;margin:18px 0 8px}
.callout.patriotic{border-left:4px solid var(--gold)}

/* —— Shop filters —— */
.filters-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding:10px 0;position:sticky;top:68px;z-index:15;background:rgba(244,237,224,.96);backdrop-filter:blur(8px);border-bottom:1px solid transparent}
.filters-bar .btn.on,.btn.ghost.on{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.result-count{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--muted);margin:14px 0 8px}
.callout-compact{padding:14px 16px;margin:14px 0 4px}
.callout-compact .lead{font-size:15px;max-width:56ch}

/* Family cards */
.family-card{transition:transform .15s ease,box-shadow .15s ease;overflow:hidden}
.family-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(17,17,17,.08)}
.family-card .style-badge,.style-badge{display:inline-block;background:var(--ink);color:var(--gold);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;margin-bottom:6px}
.waitlist-card{border-style:dashed}
.empty-state{background:var(--card);border:1px solid var(--line);padding:28px 22px;margin-top:8px}
.empty-state h2{font-size:42px;margin:6px 0 10px}

/* Breadcrumbs */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.breadcrumb a{color:var(--ink)}
.breadcrumb a:hover{color:var(--gold-d)}

/* Price breakdown */
.price-breakdown{background:var(--card);border:1px solid var(--line);padding:12px 14px;margin:10px 0 6px;max-width:320px}
.price-line{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted);padding:3px 0}
.price-line.total{color:var(--ink);font-weight:700;font-size:18px;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}

/* Sticky PDP media */
.pdp-media .sticky-media{position:sticky;top:84px}
.family-note{margin:2px 0 8px}
.lead-compact{margin-top:12px;font-size:14px}
.pdp-details{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.pdp-details summary{cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pdp-details .meta{margin-top:8px}

/* Mobile sticky buy bar — sits above .bottom */
.buy-bar{display:none;position:fixed;left:0;right:0;bottom:52px;z-index:35;background:rgba(244,237,224,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 12px;box-shadow:0 -6px 20px rgba(0,0,0,.06)}
.buy-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(1100px,100%);margin:0 auto}
.buy-bar-price{font-weight:700;font-size:18px;display:block}
.page-pdp .bottom{display:none}
.page-pdp .buy-bar{bottom:0}
.page-pdp footer.site{padding-bottom:100px}

/* Design gallery */
.design-gallery{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.design-example img{aspect-ratio:1;object-fit:cover;background:#fff}
.design-example .row{margin-top:8px}
.design-example-open{display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;font:inherit;text-align:left;color:inherit}
.design-example-open.btn{display:inline-block;width:auto}

/* Designs studio — tabs → big preview → hat choice */
.logo-tabs{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 14px;margin:4px 0 8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.logo-tab{flex:0 0 auto;width:112px;background:#fff;border:2px solid var(--ink);padding:8px;cursor:pointer;text-align:left;font-family:inherit;display:flex;flex-direction:column;gap:6px;position:relative}
.logo-tab img{width:100%;aspect-ratio:1;object-fit:cover;background:#fafafa}
.logo-tab-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.logo-tab-tag{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--gold);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 5px}
.logo-tab.on{outline:3px solid var(--gold);outline-offset:2px;border-color:var(--gold-d);background:#fffdf0;box-shadow:0 0 0 2px var(--ink)}
.logo-tab.on .logo-tab-label{color:var(--gold-d)}

.design-preview-panel{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:start;margin:8px 0 10px}
.design-preview-media{padding:14px}
.design-preview-media img{width:100%;aspect-ratio:1;object-fit:cover;background:#fff}
.design-preview-copy{padding-top:4px}

.hat-choice-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 4px}
.hat-choice-card{display:flex;flex-direction:column;gap:8px;background:var(--card);border:2px solid var(--ink);padding:10px;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.hat-choice-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(17,17,17,.08);border-color:var(--gold-d)}
.hat-choice-img{width:100%;aspect-ratio:1;object-fit:cover;background:#fff;border:1px solid var(--line);display:block}
.hat-choice-line{align-self:flex-start;background:var(--ink);color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px}
.hat-choice-name{font-family:"Bebas Neue",Impact,sans-serif;font-size:26px;letter-spacing:.03em;line-height:1}
.hat-choice-meta{font-size:12px;color:var(--muted);line-height:1.3}
.hat-choice-cta{margin-top:2px;text-align:center;width:100%}

@media(max-width:800px){
.design-preview-panel{grid-template-columns:1fr}
.hat-choice-row{grid-template-columns:1fr;gap:14px}
.hat-choice-card{padding:12px}
.hat-choice-img{aspect-ratio:1;max-height:none}
.hat-choice-name{font-size:30px}
.logo-tab{width:100px}
.design-picker-block{scroll-margin-top:12px}
}

/* cache-bust v2 — hat-choice image cards */

@media(max-width:800px){
.filters-bar{top:0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;border-bottom-color:var(--line)}
.buy-bar{display:block}
.page-pdp footer.site{padding-bottom:110px}
.pdp-media .sticky-media{position:static}
.nav-links{gap:12px;font-size:12px}
}