/* Core Layout & Reset */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family:'Outfit', system-ui, sans-serif; background:#0f1115; color:#e9edf2; font-size:18px; }
body { line-height:1.6; -webkit-font-smoothing:antialiased; }
img, picture, video, canvas { max-width:100%; display:block; }
input, button { font:inherit; }
/* iOS viewport height fix variable (set via JS) */
:root { --vh: 100%; }

:root {
  --bg: #0f1115;
  --bg-alt: #161a21;
  --panel: #1f252e;
  --panel-alt:#272f3a;
  --border: #2f3a46;
  --text: #e9edf2;
  --text-dim: #b5c0cc;
  --brand: #2f9dff;
  --accent: #ff4fa3;
  --accent-alt:#ff9ddd;
  --warn:#ffc400;
  --gradient-accent: linear-gradient(135deg,#ff4fa3,#ff9ddd 60%);
  --radius-xs:4px;
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:18px;
  --shadow-sm:0 2px 4px -1px rgba(0,0,0,.4);
  --shadow:0 4px 14px -4px rgba(0,0,0,.5);
  --focus:0 0 0 3px #12263a,0 0 0 5px #2f9dff;
  /* Layout scale vars (desktop baseline) */
  --container-max:1240px; /* 24" comfortable width baseline */
  --measure:68ch;         /* ideal readable line length */
}

.container { width:min(var(--container-max),100% - 3rem); margin-inline:auto; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:2rem; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; backdrop-filter: blur(14px); background:rgba(15,17,21,.72); border-bottom:1px solid var(--border); padding-top:25px; }
.brand { font-size:1.55rem; font-weight:700; letter-spacing:.5px; text-decoration:none; background:linear-gradient(90deg,#fff,#d7e3f1); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.brand .digit-three { color:var(--accent); background:none; -webkit-background-clip:initial; background-clip:initial; }
.brand .last-d { color:var(--warn); background:none; }
.brand.small { font-size:1.15rem; }
.brand-wrapper { position:relative; display:flex; align-items:flex-end; gap:.65rem; }
.brand-mascot { position:absolute; bottom:85%; left:55%; height:110px; width:auto; transform:translate(-50%,10%) translateY(-4px) rotate(-6deg); filter:drop-shadow(0 6px 14px rgba(0,0,0,.7)); pointer-events:none; transition:left .4s ease, transform .4s ease; }
@media (max-width: 680px){
  .brand-mascot { height:84px; bottom:90%; transform:translate(-50%,18%) translateY(-4px) rotate(-6deg); }
}

.main-nav { position:relative; }
.nav-toggle { display:none; background:var(--panel); color:var(--text); padding:.6rem .9rem; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; }
.nav-menu { list-style:none; margin:0; padding:0; display:flex; gap:1.4rem; white-space:nowrap; flex-wrap:nowrap; }
.nav-menu a { text-decoration:none; color:var(--text-dim); font-weight:500; font-size:1rem; position:relative; }
.nav-menu a:hover, .nav-menu a:focus { color:#fff; }
.nav-menu a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--accent); transition:.3s; }
.nav-menu a:hover::after, .nav-menu a:focus::after { width:100%; }

.header-actions { display:flex; gap:.75rem; }
.cart-btn { position:relative; display:inline-flex; align-items:center; gap:.4rem; }
.cart-icon { font-size:1.05rem; }
.cart-count { background:var(--accent); color:#fff; font-size:.75rem; font-weight:600; line-height:1; padding:4px 6px 3px; border-radius:20px; min-width:20px; text-align:center; box-shadow:0 0 0 2px rgba(15,17,21,.8); }

/* Cart Panel */
.cart-panel, .cart-head, .cart-items, .cart-foot, .checkout-btn, .cart-close { display:none !important; }
.cart-panel { position:fixed; top:0; right:0; width:340px; max-width:100%; height:100%; background:var(--panel); border-left:1px solid var(--border); box-shadow:-4px 0 18px -6px rgba(0,0,0,.6); display:flex; flex-direction:column; transform:translateX(105%); transition:.4s ease; z-index:140; }
.cart-panel.open { transform:translateX(0); }
/* Promo discount lines in cart */
.cart-item.promo { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.5rem; padding:.4rem .2rem; border-top:1px dashed var(--border); }
.cart-item.promo .ci-name { font-size:.75rem; color:var(--text-dim); }
.promo-row td { font-size:.8rem; }
.cart-head { display:flex !important; align-items:center; justify-content:space-between; padding:1rem 1rem .75rem; border-bottom:1px solid var(--border); }
.cart-head h3 { margin:0; font-size:1.05rem; letter-spacing:.5px; }
.cart-close { display:inline-flex !important; background:var(--panel-alt); border:1px solid var(--border); color:#fff; width:34px; height:34px; border-radius:50%; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; }
.cart-items { flex:1; overflow:auto; padding:1rem; display:block !important; }
.cart-item { display:grid; grid-template-columns:1fr auto auto; gap:.5rem .75rem; align-items:center; background:var(--panel-alt); border:1px solid var(--border); padding:.75rem .65rem; border-radius:var(--radius-sm); font-size:.9rem; margin-bottom:.8rem; }
.cart-item .ci-name { font-weight:600; }
.cart-item .ci-qty { display:flex; gap:.35rem; align-items:center; }
.qty-btn { background:var(--panel); border:1px solid var(--border); width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:4px; cursor:pointer; }
.ci-remove { background:none; border:none; color:var(--accent); cursor:pointer; font-size:.85rem; }
.cart-foot { display:block !important; border-top:1px solid var(--border); padding:1rem; }
.cart-total-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; font-size:1rem; }
.order-form { display:grid; gap:.75rem; }
.order-form input { background:var(--panel-alt); border:1px solid var(--border); padding:.6rem .7rem; border-radius:var(--radius-sm); color:var(--text); width:100%; }
.order-form input:focus { outline:none; box-shadow:var(--focus); border-color:var(--brand); }
.place-order-btn { width:100%; justify-content:center; }
.order-note { font-size:.8rem; opacity:.75; margin:0; }
.order-feedback { font-size:.85rem; min-height:18px; }
.cart-toast { position:absolute; top:6px; right:0; background:var(--panel); padding:.6rem .95rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.85rem; letter-spacing:.5px; color:var(--text-dim); max-width:300px; line-height:1.4; box-shadow:var(--shadow-sm); animation:fadeSlide .5s ease; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* Add to cart hero button variant already uses .solid; ensure spacing */
.add-cart { position:relative; }
.add-cart::after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.15); border-radius:inherit; pointer-events:none; }

/* Search Bar */
.search-bar-wrapper { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(22,26,33,.8); backdrop-filter: blur(10px); }
.search-form { display:flex; gap:.75rem; padding:.9rem 0; }
.header-search { padding:0; }
.header-search input { min-width:200px; }
.search-form input { flex:1; background:var(--panel); border:1px solid var(--border); color:var(--text); padding:.75rem 1rem; border-radius:var(--radius-sm); }
.search-form input:focus { outline:none; box-shadow:var(--focus); border-color:var(--brand); }
.search-form .search-btn { background:var(--gradient-accent); color:#fff; border:none; padding:.75rem 1.1rem; border-radius:var(--radius-sm); cursor:pointer; font-weight:600; }
.search-form .search-btn:hover { filter:brightness(1.08); }

/* Announcement bar */
.announcement-bar { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#13171d; font-size:.8rem; }
.announce-inner { display:flex; align-items:center; gap:1.25rem; padding:.3rem 0; flex-wrap:nowrap; white-space:nowrap; }
.announce-inner > * { flex:0 0 auto; }
.announce-inner .ticker { flex:1 1 auto; min-width:0; }
.weekly-stops { list-style:none; display:flex; gap:1.2rem; padding:0; margin:0; }
.weekly-stops li { display:flex; gap:.4rem; align-items:center; background:var(--panel); padding:.35rem .65rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-weight:500; }
.weekly-stops .day { color:var(--accent); font-weight:600; }
.announce-note { opacity:.65; }
/* Ticker */
.ticker { position:relative; flex:1 1 auto; overflow:hidden; min-width:240px; }
.ticker__track { display:inline-block; padding-left:100%; white-space:nowrap; animation:marquee 24s linear infinite; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-100%); } }

/* Quick category links (reuse announcement pills, improve accent visibility) */
.weekly-stops.quick-cats { gap:1rem; }
.weekly-stops.quick-cats li { padding:0; background:transparent; border:none; }
.weekly-stops.quick-cats a { display:block; background:var(--panel); border:1px solid var(--border); padding:.35rem .65rem; border-radius:var(--radius-sm); color:var(--text-dim); text-decoration:none; font-weight:600; letter-spacing:.2px; }
.weekly-stops.quick-cats a:hover { color:#fff; border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,79,163,.15) inset; }
.weekly-stops.quick-cats a[aria-current="page"] { color:#fff; border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,79,163,.2) inset; }

/* Buttons */
.btn { --btn-bg: var(--panel); --btn-color: var(--text); border:1px solid var(--border); padding:.8rem 1.15rem; border-radius:var(--radius-sm); font-size:1rem; font-weight:700; cursor:pointer; background:var(--btn-bg); color:var(--btn-color); display:inline-flex; align-items:center; gap:.5rem; line-height:1.1; }
.btn.ghost { background:var(--panel); color:var(--text-dim); }
.btn.ghost:hover { color:#fff; }
.btn.solid { background:var(--gradient-accent); border:none; color:#fff; box-shadow:var(--shadow-sm); }
.btn.solid:hover { filter:brightness(1.1); }
.btn:focus-visible { outline:none; box-shadow:var(--focus); }

/* Hero */
.hero { padding:4rem 0 3.2rem; background:radial-gradient(circle at 30% 25%,rgba(255,79,163,.18),transparent 60%),radial-gradient(circle at 80% 10%,rgba(47,157,255,.18),transparent 70%); }
.hero-grid { display:grid; gap:3.5rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:center; }
.hero-text h1 { font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.08; margin:0 0 1rem; background:linear-gradient(90deg,#fff,#b9c6d4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-text p { max-width:var(--measure); font-size:1.05rem; color:var(--text-dim); margin:0 0 1.5rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.showcase-grid { display:grid; grid-template-columns:repeat(3, 120px); grid-auto-rows:150px; gap:14px; }
.card.placeholder { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); position:relative; overflow:hidden; }
.card.placeholder::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(255,79,163,.08),rgba(47,157,255,.05)); mix-blend-mode:overlay; pointer-events:none; }
.gif-wrap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:4px; }
.gif-wrap img { width:100%; height:100%; object-fit:cover; border-radius:calc(var(--radius) - 2px); filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.hero-title { font-family:'Cinzel','Outfit',serif; letter-spacing:.8px; }
.hero-title .line { display:block; }
.hero-title .primary { font-size:clamp(2.1rem,4.8vw,3.2rem); text-shadow:0 2px 18px rgba(255,79,163,.25); }
.hero-title .secondary { font-size:clamp(1.4rem,3.2vw,2.3rem); background:linear-gradient(90deg,#ff4fa3,#ffc400 70%); -webkit-background-clip:text; background-clip:text; color:transparent; margin-top:.25rem; position:relative; }
.hero-title .secondary::after { content:""; position:absolute; left:0; bottom:-6px; width:160px; height:3px; background:linear-gradient(90deg,#ff4fa3,#ffc400); border-radius:2px; }

/* Product side image */
.hero-product { display:flex; justify-content:center; }
.hero-product figure { margin:0; position:relative; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:.75rem .75rem 1.1rem; box-shadow:0 8px 28px -6px rgba(0,0,0,.55); transition:.5s; cursor:zoom-in; max-width:380px; }
.hero-product figure::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 60% 35%,rgba(255,79,163,.18),transparent 70%); opacity:.7; pointer-events:none; mix-blend-mode:overlay; }
.hero-product img { width:100%; height:auto; border-radius:var(--radius-sm); display:block; filter:contrast(1.05) saturate(1.08); transition:.5s; }
.hero-product figcaption { margin:.65rem 0 0; font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); }
.hero-product figure:hover img { transform:scale(1.04); }

/* Lightbox */
.lightbox-backdrop { position:fixed; inset:0; background:rgba(5,7,10,.85); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; z-index:120; opacity:0; pointer-events:none; transition:.35s; }
.lightbox-backdrop.active { opacity:1; pointer-events:auto; }
.lightbox-content { max-width:min(98vw,1600px); max-height:92vh; position:relative; }
.lightbox-content img { width:100%; height:100%; object-fit:contain; border-radius:var(--radius); box-shadow:0 12px 40px -8px rgba(0,0,0,.75); }
.lightbox-close { position:absolute; top:-44px; right:0; background:var(--panel); color:#fff; border:1px solid var(--border); width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:1.25rem; cursor:pointer; box-shadow:var(--shadow); }
.lightbox-close:hover { background:var(--panel-alt); }

/* Shimmer */
.shimmer { position:relative; overflow:hidden; }
.shimmer::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.07) 45%,rgba(255,255,255,0) 80%); animation:shimmer 2.2s linear infinite; }
@keyframes shimmer { from { transform:translateX(-60%); } to { transform:translateX(60%); } }

/* Sections */
.section { padding:3.2rem 0; }
.section, section { scroll-margin-top: 140px; }
.section.alt { background:var(--bg-alt); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.8rem; }
.section-head h2 { margin:0; font-size:1.6rem; letter-spacing:.5px; }
.view-all { color:var(--accent); text-decoration:none; font-weight:600; font-size:.85rem; }
.view-all:hover { text-decoration:underline; }

/* Categories Grid */
.categories-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
/* Modern category cards */
.categories-modern .category-card { text-decoration:none; color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; gap:.65rem; box-shadow:var(--shadow-sm); transition:transform .22s cubic-bezier(.4,.8,.3,1), box-shadow .25s ease, border-color .25s ease; will-change:transform; }
.categories-modern .category-card:hover,
.categories-modern .category-card:focus-visible { transform:translateY(-24px); box-shadow:0 18px 36px -12px rgba(0,0,0,.7), 0 8px 18px -6px rgba(0,0,0,.55); border-color:var(--accent); position:relative; z-index:5; }
@media (prefers-reduced-motion: reduce) {
  .categories-modern .category-card { transition:none; }
  .categories-modern .category-card:hover,
  .categories-modern .category-card:focus-visible { animation:none; transform:none; }
}
.categories-modern .category-card .thumb { width:100%; aspect-ratio:16/10; background:var(--panel-alt); border-bottom:1px solid var(--border); overflow:hidden; }
.categories-modern .category-card .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; filter:contrast(1.05) saturate(1.08); }
.categories-modern .category-card:hover .thumb img { transform:scale(1.03); }
.categories-modern .category-card .info { padding:0 .9rem .95rem; }
.categories-modern .category-card .info h3 { margin:.2rem 0 .15rem; font-size:1.05rem; letter-spacing:.4px; }
.categories-modern .category-card .info p { margin:0; font-size:.82rem; color:var(--text-dim); letter-spacing:.3px; }
.categories-modern .category-card.simple { align-items:center; text-align:center; }
.categories-modern .category-card.simple .icon { font-size:1.6rem; padding:1.2rem 0 .3rem; }

/* Ensure all categories fit one row on wider screens */
@media (min-width: 1100px) {
  .categories-modern { grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: .9rem; }
  .categories-modern .category-card .thumb { aspect-ratio: 3/2; }
  .categories-modern .category-card .info { padding: 0 .7rem .7rem; }
  .categories-modern .category-card .info h3 { font-size: .95rem; }
  .categories-modern .category-card .info p { font-size: .75rem; }
}

/* Carousel */
.carousel { overflow:hidden; }
.track { display:flex; gap:1.1rem; scroll-behavior:smooth; }
.model-card { flex:0 0 220px; height:180px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); position:relative; }
.model-card img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.slider-controls { display:flex; gap:.5rem; }
.ctrl { background:var(--panel); border:1px solid var(--border); color:var(--text); width:36px; height:36px; border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:1.2rem; }
.ctrl:hover { background:var(--panel-alt); }

/* Collections */
.collections-grid { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.collection-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem; display:flex; gap:1rem; align-items:flex-start; position:relative; overflow:hidden; }
.collection-card .thumb { width:80px; height:80px; border-radius:var(--radius-sm); background:var(--panel-alt); border:1px solid var(--border); }
.collection-card h3 { margin:.2rem 0 .4rem; font-size:1rem; }
.collection-card .meta { margin:0; font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); }
/* How It's Made video cards */
.how-videos { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.how-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.how-card video { width:100%; height:180px; object-fit:cover; display:block; background:#000; }
.how-card .info { padding:.7rem .8rem; display:flex; align-items:center; justify-content:space-between; }
.how-card .info .btn { padding:.4rem .7rem; font-size:.8rem; }

/* CTA */
.section.cta { background:linear-gradient(135deg,rgba(255,79,163,.14),rgba(47,157,255,.14)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cta-inner { display:flex; justify-content:center; }
.cta-text { max-width:760px; text-align:center; }
.cta-text h2 { font-size:2.2rem; margin:0 0 1rem; }
.cta-text p { margin:0 0 1.6rem; color:var(--text-dim); font-size:1.05rem; }
.cta-actions { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* Footer */
.site-footer { background:#0b0d10; border-top:1px solid var(--border); margin-top:2rem; font-size:.85rem; }
.footer-grid { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); padding:2.8rem 0 2.4rem; }
.site-footer h4 { margin:0 0 .9rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.8px; color:var(--text-dim); }
.foot-links { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.foot-links a { text-decoration:none; color:var(--text-dim); }
.foot-links a:hover { color:#fff; }
.newsletter-form { display:flex; flex-direction:column; gap:.6rem; }
.newsletter-form input { background:var(--panel); border:1px solid var(--border); padding:.65rem .8rem; border-radius:var(--radius-sm); color:var(--text); }
.newsletter-form input:focus { outline:none; box-shadow:var(--focus); border-color:var(--brand); }
.legal-bar { border-top:1px solid var(--border); background:#090b0d; }
.legal { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; flex-wrap:wrap; }
.inline-links { list-style:none; margin:0; padding:0; display:flex; gap:1.3rem; }
.inline-links a { color:var(--text-dim); text-decoration:none; }
.inline-links a:hover { color:#fff; }
.foot-note { margin:.9rem 0 0; font-size:.75rem; color:var(--text-dim); line-height:1.4; }

/* Utilities */
.hidden { display:none !important; }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
.anchor-highlight { outline:2px solid var(--brand); box-shadow:0 0 0 4px rgba(47,157,255,.25); border-radius:var(--radius); transition:box-shadow .6s ease; }

/* Responsive nav */
@media (max-width: 860px) {
  .nav-toggle { display:block; }
  .nav-menu { position:absolute; top:110%; right:0; background:var(--panel); flex-direction:column; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:var(--radius); min-width:200px; box-shadow:var(--shadow); display:none; }
  .nav-menu.open { display:flex; }
}

@media (max-width:600px){
  .hero { padding:3.2rem 0 2.6rem; }
  .hero-grid { gap:2.5rem; }
  .showcase-grid { grid-template-columns:repeat(3, 90px); grid-auto-rows:110px; }
}

/* Enhancements: This Week pill and larger ticker text */
.announce-inner.thisweek-row { gap:1rem; }
.thisweek-pill { position:relative; display:inline-flex; align-items:center; justify-content:center; padding:.5rem 1.15rem .55rem; min-height:2.25rem; border-radius:14px; font-weight:700; letter-spacing:.65px; font-size:clamp(.85rem,1.5vw,1rem); text-transform:uppercase; color:#f2f7f9; background:
  linear-gradient(140deg, rgba(34,54,74,.9), rgba(30,72,58,.85) 35%, rgba(46,103,86,.85) 55%, rgba(40,60,92,.9) 80%),
  radial-gradient(circle at 18% 25%, rgba(111,255,199,.25), transparent 60%),
  radial-gradient(circle at 82% 70%, rgba(47,157,255,.22), transparent 62%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 14px -6px rgba(0,0,0,.65), 0 2px 6px -2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  text-decoration:none; white-space:nowrap; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  overflow:hidden; isolation:isolate; transition:box-shadow .45s ease, transform .4s cubic-bezier(.4,.85,.25,1), border-color .45s ease; }
.thisweek-pill::before { content:""; position:absolute; inset:0; background:
  linear-gradient(125deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.18) 72%, rgba(255,255,255,0) 100%);
  mix-blend-mode:overlay; opacity:.55; animation:twSheen 7.5s linear infinite; }
.thisweek-pill::after { content:""; position:absolute; top:0; left:-40%; width:40%; height:100%; background:linear-gradient(100deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.4) 45%, rgba(255,255,255,0) 85%); transform:skewX(-20deg) translateX(0); opacity:.0; animation:twGlint 5.5s ease-in-out infinite 1.1s; }
@keyframes twSheen { 0% { transform:translateX(0);} 100% { transform:translateX(-30%);} }
@keyframes twGlint { 0%,60% { transform:skewX(-20deg) translateX(0); opacity:0;} 70% { opacity:.0;} 78% { opacity:.55;} 85% { transform:skewX(-20deg) translateX(220%); opacity:0;} 100% { opacity:0;} }
.thisweek-pill:hover, .thisweek-pill:focus-visible { box-shadow:0 10px 34px -14px rgba(0,0,0,.8), 0 6px 18px -6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12); transform:translateY(-3px); border-color:rgba(255,255,255,.2); }
.thisweek-pill:active { transform:translateY(-1px) scale(.985); }
.thisweek-pill:focus-visible { outline:none; box-shadow:0 0 0 3px #12263a,0 0 0 5px #2f9dff, 0 10px 34px -14px rgba(0,0,0,.8); }
.ticker { align-self:center; height:2.2rem; display:flex; align-items:center; }
.ticker__track { font-size:clamp(.95rem,1.8vw,1.15rem); line-height:1; }

/* How It's Made header gear accent */
.how-title { display:flex; align-items:center; gap:.6rem; }
.how-title .gear { width:28px; height:28px; display:inline-block; background:conic-gradient(from 0deg, #3ab3ff, #ff4fa3, #ffc400, #3ab3ff); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 8.4A3.6 3.6 0 1 0 12 15.6 3.6 3.6 0 1 0 12 8.4zm9.6 3.6l-2.08.36c-.16.52-.38 1.02-.64 1.5l1.24 1.74-1.7 1.7-1.74-1.24c-.48.26-.98.48-1.5.64L15.6 21.6h-3.2l-.36-2.08c-.52-.16-1.02-.38-1.5-.64L8.8 20.12l-1.7-1.7 1.24-1.74c-.26-.48-.48-.98-.64-1.5L5.6 12l2.08-.36c.16-.52.38-1.02.64-1.5L7.08 8.4l1.7-1.7 1.74 1.24c.48-.26.98-.48 1.5-.64L12.4 5.6h3.2l.36 2.08c.52.16 1.02.38 1.5.64L19.2 7.88l1.7 1.7-1.24 1.74c.26.48.48.98.64 1.5L21.6 12z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 8.4A3.6 3.6 0 1 0 12 15.6 3.6 3.6 0 1 0 12 8.4zm9.6 3.6l-2.08.36c-.16.52-.38 1.02-.64 1.5l1.24 1.74-1.7 1.7-1.74-1.24c-.48.26-.98.48-1.5.64L15.6 21.6h-3.2l-.36-2.08c-.52-.16-1.02-.38-1.5-.64L8.8 20.12l-1.7-1.7 1.24-1.74c-.26-.48-.48-.98-.64-1.5L5.6 12l2.08-.36c.16-.52.38-1.02.64-1.5L7.08 8.4l1.7-1.7 1.74 1.24c.48-.26.98-.48 1.5-.64L12.4 5.6h3.2l.36 2.08c.52.16 1.02.38 1.5.64L19.2 7.88l1.7 1.7-1.24 1.74c.26.48.48.98.64 1.5L21.6 12z"/></svg>') center/contain no-repeat; border-radius:6px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); animation:gearSpin 12s linear infinite; }
@keyframes gearSpin { from { transform:rotate(0); } to { transform:rotate(360deg); } }

/* Frosted overlay for Halloween hero panel */
.hero-panel[data-panel="halloween"] { position:relative; overflow:hidden; }
.hero-panel[data-panel="halloween"]::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(10,12,16,.36), rgba(10,12,16,.32)), /* dark glass base */
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)), /* frosty wash */
    radial-gradient(1200px 50% at 20% -10%, rgba(255,79,163,.10), transparent 60%),
    radial-gradient(1000px 60% at 80% 0, rgba(47,157,255,.08), transparent 65%);
  backdrop-filter: blur(20px) saturate(140%) contrast(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(140%) contrast(1.05);
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.hero-panel[data-panel="halloween"] > .container,
.hero-panel[data-panel="halloween"] .hero-grid { position:relative; z-index:1; }

/* ================= Mobile & Touch Enhancements (Added) ================= */
/* Consolidated mobile refinements without altering original desktop layout */
@media (max-width: 860px){
  .site-header { padding-top:18px; }
  .nav-toggle { padding:.75rem 1rem; font-size:1rem; border-radius:12px; }
  .nav-menu { width: min(260px, 85vw); }
  .nav-menu a { padding:.55rem .25rem; font-size:.95rem; }
}
@media (max-width: 600px){
  html, body { font-size:16px; }
  .container { width: min(100% - 1.4rem, 100%); }
  .footer-grid { gap:1.6rem; }
  .foot-links a { padding:.35rem 0; display:inline-block; }
  .hero-product figure { max-width:100%; }
  .categories-modern .category-card { gap:.5rem; }
  .categories-modern .category-card .info h3 { font-size:1rem; }
  .categories-modern .category-card .info p { font-size:.75rem; }
  .cart-panel { width:100%; }
}
/* Allow using safe viewport height (e.g., min-height: calc(var(--vh) * 100) on future sections) */
/* Improve tap targets for generic buttons & links */
button, .btn, .nav-menu a, .foot-links a { -webkit-tap-highlight-color: rgba(255,255,255,.1); }
@media (hover: none) and (pointer: coarse){
  .btn, .nav-menu a { padding-inline: clamp(.75rem, 4vw, 1.2rem); }
}
/* Progressive image enhancement for lazy assets */
img[loading="lazy"] { filter: blur(2px); transition: filter .4s ease; }
img[loading="lazy"].loaded { filter: blur(0); }
/* ====================================================================== */

/* =================== Large Desktop / Wide Monitor Enhancements =================== */
/* 24" typical width ~1920px: expand container moderately, increase grid density */
@media (min-width: 1400px){
  :root { --container-max: 1440px; }
  .hero { padding:5rem 0 4rem; }
  .hero-grid { grid-template-columns: clamp(380px, 42%, 560px) 1fr; gap:4.5rem; }
  .hero-product figure { max-width:480px; }
  .categories-modern { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); }
  .collections-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
  .footer-grid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
  .section { padding:4.2rem 0; }
}
/* 32" / Ultra-wide (2560px+) – introduce expanded content width and multi-pane hero */
@media (min-width: 1800px){
  :root { --container-max: 1680px; }
  body { font-size:19px; }
  .hero-title .primary { font-size:clamp(2.4rem,3.2vw,3.8rem); }
  .hero-title .secondary { font-size:clamp(1.8rem,2.4vw,2.6rem); }
  .hero-grid { gap:5rem; }
  .hero-product figure { max-width:540px; }
  .categories-modern { gap:1.1rem; }
  .categories-modern .category-card { transition:transform .3s cubic-bezier(.35,.85,.3,1); }
  .categories-modern .category-card:hover { transform:translateY(-28px); }
  .collections-grid { gap:1.8rem; }
  .footer-grid { gap:3.5rem; }
  .section-head h2 { font-size:1.85rem; }
  .hero-text p { font-size:1.08rem; }
}
/* Extreme ultra-wide (≥2100px) – cap measure, gently scale imagery but keep readable lines */
@media (min-width: 2100px){
  :root { --container-max: 1880px; }
  .hero-product figure { max-width:600px; }
  .hero { padding:5.2rem 0 4.4rem; }
  .hero-text p { font-size:1.12rem; }
  .categories-modern .category-card .info h3 { font-size:1.08rem; }
  .collections-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
}
/* ================================================================================ */