/* ============ The Wiener Shop — storefront styles (font-refresh design) ============
   Source of truth: design-mockups/font-refresh/mockup.css
   Fonts: Lilita One (display) · Bungee (headline) · Baloo 2 (body) — loaded in index.html */
:root{
  --bun:#FFF0C8;
  --bun2:#FFF8DF;
  --ink:#2B170F;
  --soft:#75543E;
  --ketchup:#EF3E32;
  --mustard:#F8C440;
  --relish:#6DBB45;
  --sky:#4A87B8;
  --char:#7B4528;
  --radius:24px;
  --display:"Lilita One","Cooper Black",ui-rounded,system-ui,sans-serif;
  --headline:"Bungee",Impact,sans-serif;
  --body:"Baloo 2",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bun);color:var(--ink);font-family:var(--body);font-weight:600;overflow-x:hidden}
a{color:inherit}

/* ---- Loading gate (branded; shown only when the first clip isn't ready) ---- */
.site-loader{position:fixed;inset:0;z-index:200;background:var(--bun);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .45s ease}
.site-loader.is-done{opacity:0;pointer-events:none}
.site-loader__mascot{height:120px;width:auto;animation:loader-bounce 1s ease-in-out infinite;filter:drop-shadow(0 6px 0 rgba(43,23,15,.18))}
.site-loader__text{font-family:var(--headline);font-size:1.05rem;color:var(--ketchup);text-shadow:2px 2px 0 var(--mustard);margin:0;letter-spacing:.04em}
.site-loader__dots{display:flex;gap:8px}
.site-loader__dots span{width:11px;height:11px;border-radius:999px;border:2px solid var(--ink);background:var(--mustard);animation:loader-dot 1.1s ease-in-out infinite}
.site-loader__dots span:nth-child(2){animation-delay:.18s;background:var(--ketchup)}
.site-loader__dots span:nth-child(3){animation-delay:.36s;background:var(--relish)}
@keyframes loader-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes loader-dot{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion: reduce){.site-loader__mascot,.site-loader__dots span{animation:none}}

/* ---- NanoCart widget theme (official API — docs.nanocart.io → Theming).
   The widget's shadow DOM styles key off these --nc-* variables set on its
   #nanocart-widget host. Page CSS wins over portal settings and defaults. */
#nanocart-widget{
  --nc-bg:#FFF7DB;
  --nc-surface:#FFF0C8;
  --nc-border:#2B170F;
  --nc-text:#2B170F;
  --nc-text-muted:#75543E;
  --nc-text-dim:#75543E;
  --nc-text-strong:#2B170F;
  --nc-accent:#EF3E32;
  --nc-radius:18px;
  --nc-font:"Baloo 2",system-ui,sans-serif;
}

/* ---- Shop curtain (scrolls up over the scroll-world's fixed stage) ---- */
/* margin-top:-35vh overlaps the curtain with the END of the scrub run: the
   shop starts rising once the camera is INSIDE the shop (~78% through scene
   3, after the portal pass-through) while the flight settles — fluid, but
   the portal moment plays uncovered. */
.shop{position:relative;z-index:70;margin-top:-35vh;background:linear-gradient(180deg,var(--bun),#FFE6A3);box-shadow:0 -22px 60px rgba(43,23,15,.22);border-top:8px solid var(--ketchup)}
.shop::before{content:"";position:absolute;inset:0 0 auto;height:18px;background:repeating-linear-gradient(90deg,var(--ketchup) 0 28px,var(--mustard) 28px 56px,var(--relish) 56px 84px,var(--sky) 84px 112px)}
.shop-inner{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,42px) env(safe-area-inset-bottom)}

/* ---- Header ---- */
.shop-header{display:flex;align-items:center;gap:18px;padding:30px 0 18px;border-bottom:4px dotted rgba(43,23,15,.18);position:sticky;top:0;background:color-mix(in srgb,var(--bun) 88%,white);backdrop-filter:blur(9px);z-index:40}
.shop-logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ketchup);font-family:var(--headline);font-size:1.12rem;letter-spacing:.01em;text-shadow:2px 2px 0 var(--mustard)}
.shop-logo img{height:48px;width:auto;filter:drop-shadow(0 4px 0 rgba(43,23,15,.18))}
.shop-nav{margin-left:auto;display:flex;gap:10px}
.shop-nav a{font-family:var(--body);font-weight:900;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;color:var(--ink);background:#fff7db;border:2px solid rgba(43,23,15,.16);border-radius:999px;padding:9px 14px;box-shadow:0 4px 0 rgba(43,23,15,.16)}
.shop-nav a:hover{background:var(--mustard)}
.cart-button{position:relative;border:3px solid var(--ink);background:var(--ketchup);color:#fff;border-radius:999px;font-size:1.05rem;padding:10px 15px;cursor:pointer;box-shadow:0 5px 0 var(--ink)}
.cart-count{position:absolute;top:-9px;right:-9px;background:var(--mustard);color:var(--ink);font:900 .72rem var(--body);border:2px solid var(--ink);border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}

/* ---- Intro ---- */
.shop-intro{text-align:center;padding:clamp(44px,7vw,76px) 0 10px}
.shop-eyebrow{display:inline-flex;text-transform:uppercase;letter-spacing:.12em;font:900 .78rem var(--headline);color:#fff;background:var(--relish);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);border-radius:999px;padding:8px 15px;margin:0 0 18px}
.shop-intro h2{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.6rem);line-height:.9;margin:0;color:var(--ink);text-shadow:4px 4px 0 #fff,7px 7px 0 var(--mustard)}
.shop-intro h2 span{color:var(--ketchup)}
.shop-sub{color:var(--soft);font-size:1.2rem;margin:22px auto 0;max-width:650px}

/* ---- Products (rendered by store.js from the NanoCart API) ---- */
.products{padding:clamp(24px,5vw,52px) 0;display:grid;gap:28px}
.product-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,46px);background:#fff7db;border:4px solid var(--ink);border-radius:var(--radius);padding:clamp(20px,4vw,42px);box-shadow:0 12px 0 var(--ink),0 24px 45px rgba(43,23,15,.22);position:relative;overflow:hidden}
.product-card::before{content:"HOT MERCH";position:absolute;right:-40px;top:24px;rotate:18deg;background:var(--mustard);color:var(--ink);font:900 14px var(--headline);letter-spacing:.08em;padding:9px 52px;border:3px solid var(--ink)}
.product-media{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,var(--mustard),transparent 68%);border-radius:20px}
.product-media img{max-width:100%;height:auto;max-height:430px;filter:drop-shadow(0 9px 0 rgba(43,23,15,.18));border-radius:14px}
.product-info{display:flex;flex-direction:column;gap:14px;justify-content:center}
.product-flag{align-self:flex-start;background:var(--mustard);color:var(--ink);font:900 .75rem var(--headline);letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.product-info h3{margin:0;font-family:var(--display);font-size:clamp(2rem,4.5vw,3.3rem);line-height:.92;color:var(--ketchup);text-shadow:3px 3px 0 var(--mustard)}
.product-price{font:900 1.9rem var(--headline);color:var(--sky);margin:0;text-shadow:2px 2px 0 #fff}
.product-desc{color:var(--soft);margin:0;line-height:1.45;font-size:1.08rem}
.product-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.product-options label{font-weight:900;font-size:.95rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
.product-options select,.product-options input{font:800 1rem var(--body);padding:9px 12px;border-radius:14px;border:2px solid rgba(43,23,15,.28);background:#fff;min-width:82px}
.add-to-cart,.view-details,.newsletter button{font:900 1rem var(--headline);letter-spacing:.02em;border-radius:999px;padding:15px 28px;cursor:pointer;transition:transform .12s}
.add-to-cart{margin-top:8px;background:var(--ketchup);color:#fff;border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink)}
.add-to-cart:hover,.view-details:hover,.newsletter button:hover{transform:translateY(-2px)}
.view-details{margin-top:4px;background:#fff;color:var(--sky);border:3px solid var(--sky);box-shadow:0 5px 0 color-mix(in srgb,var(--sky) 60%,var(--ink))}

/* ---- Newsletter ---- */
.newsletter{
  text-align:center;
  background:
    radial-gradient(circle at 12% 18%, rgba(248,196,64,.58), transparent 30%),
    radial-gradient(circle at 90% 82%, rgba(239,62,50,.18), transparent 28%),
    linear-gradient(180deg,#fff8df 0%,#ffe8a6 100%);
  color:var(--ink);
  border:4px solid var(--ink);
  border-radius:var(--radius);
  padding:clamp(30px,5vw,54px);
  margin:24px 0 54px;
  box-shadow:0 12px 0 var(--ink),0 26px 50px rgba(43,23,15,.18);
  position:relative;
  overflow:hidden;
}
.newsletter::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(43,23,15,.045) 0 8px, transparent 8px 18px),
    linear-gradient(135deg, transparent 0 74%, rgba(109,187,69,.16) 74% 100%);
  pointer-events:none;
  mix-blend-mode:multiply;
}
.newsletter>*{position:relative}
.newsletter-badge{display:inline-flex;background:var(--ketchup);color:#fff;border:3px solid var(--ink);border-radius:999px;padding:8px 15px;font:900 .75rem var(--headline);box-shadow:0 4px 0 var(--ink);margin-bottom:18px;text-shadow:1px 1px 0 var(--ink)}
.newsletter h3{margin:0 0 8px;font-family:var(--display);font-size:clamp(2rem,5vw,3.4rem);line-height:.94;color:var(--ink);text-shadow:3px 3px 0 #fff,6px 6px 0 var(--mustard)}
.newsletter p{margin:0 0 20px;font-size:1.15rem;color:var(--soft);font-weight:900}
/* <nanocart-signup> — same visual language as the old form, applied through
   the element's official shadow parts (docs.nanocart.io/#widget-alerts). */
nanocart-signup{--nc-accent:var(--ketchup);--nc-radius:999px;--nc-font:var(--body);max-width:560px;margin:0 auto}
nanocart-signup::part(row){gap:12px;justify-content:center}
nanocart-signup::part(input){font:800 1rem var(--body);padding:14px 18px;border-radius:999px;min-width:280px;flex:0 1 auto;border:3px solid var(--ink);background:#fffdf2;color:var(--ink);box-shadow:inset 0 -3px 0 rgba(43,23,15,.08)}
nanocart-signup::part(button){font:900 1rem var(--headline);letter-spacing:.02em;border-radius:999px;padding:15px 28px;cursor:pointer;transition:transform .12s;background:var(--ketchup);color:#fff;border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);text-shadow:1px 1px 0 var(--ink)}
nanocart-signup::part(button):hover{transform:translateY(-2px)}
nanocart-signup::part(message){font-family:var(--body);font-weight:900;font-size:1rem;margin-top:12px}

/* ---- Footer ---- */
.shop-footer{display:grid;grid-template-columns:2fr 1fr;gap:28px;border-top:4px dotted rgba(43,23,15,.18);padding:40px 0 30px;color:var(--soft)}
.shop-footer h4{font-family:var(--display);font-size:1.8rem;margin:0 0 10px;color:var(--ketchup);text-shadow:2px 2px 0 var(--mustard)}
.cart-schedule{width:100%;border-collapse:collapse;font-size:1rem;background:#fff7db;border:3px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:0 7px 0 var(--ink)}
.cart-schedule th{text-align:left;color:var(--ink);font:900 .8rem var(--headline);letter-spacing:.08em;padding:10px 12px;background:var(--mustard);border-bottom:3px solid var(--ink)}
.cart-schedule td{padding:11px 12px;color:var(--soft);vertical-align:top;border-bottom:2px dashed rgba(43,23,15,.22)}
.cart-schedule td:first-child{font-weight:900;color:var(--ink);white-space:nowrap}
.cart-schedule tr:last-child td{border-bottom:0}
.socials{display:flex;flex-direction:column;gap:8px}
.socials a{color:var(--sky);text-decoration:none;font-weight:900;font-size:1.05rem}
.socials a:hover{color:var(--ketchup)}
.footer-fine{grid-column:1/-1;text-align:center;font-weight:800;font-size:.95rem;color:var(--soft);line-height:2}
.footer-credit a{color:var(--sky);text-decoration:none;font-weight:900}
.footer-credit a:hover{color:var(--ketchup)}

/* ---- Mobile ---- */
@media(max-width:760px){
  .shop-nav{display:none}
  .product-card{grid-template-columns:1fr}
  .shop-footer{grid-template-columns:1fr;text-align:center}
  .socials{align-items:center}
  .cart-schedule{font-size:.9rem}
  .shop-intro h2{text-shadow:3px 3px 0 #fff,5px 5px 0 var(--mustard)}
}