:root{
  --bg:#0b1512;
  --bg-2:#0f1c18;
  --glass:rgba(241,234,214,0.045);
  --glass-brd:rgba(241,234,214,0.10);
  --cream:#f1ead6;
  --muted:#8fa89b;
  --en:#e8c468;
  --en-deep:#8a6a2c;
  --jp:#e8735c;
  --jp-deep:#8f3f2c;
  --foil-cyan:#63e6e0;
  --foil-magenta:#e85cc4;
  --ok:#7fd9a4;
  --warn:#e8a468;
  --bad:#c97a7a;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1000px 550px at 10% -10%, rgba(232,196,104,0.07), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(232,115,92,0.06), transparent 55%),
    var(--bg);
  color:var(--cream);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
a{color:inherit;}

/* ===== HEADER ===== */
header{padding:72px 0 40px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--en); display:flex; align-items:center; gap:9px; margin-bottom:20px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--en);box-shadow:0 0 0 3px rgba(232,196,104,0.18);}
h1{
  font-family:'Fraunces', serif; font-weight:600;
  font-size:clamp(36px, 5.4vw, 64px); line-height:1.03; letter-spacing:-0.01em;
  margin:0 0 20px; max-width:16ch;
}
h1 em{
  font-style:italic; font-weight:500;
  background:linear-gradient(100deg, var(--en), var(--jp) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
header p.lede{font-size:16.5px; line-height:1.6; color:var(--muted); max-width:58ch; margin:0 0 28px;}

/* ===== TABS ===== */
.tabs{
  display:inline-flex; gap:2px; padding:4px;
  background:var(--glass); border:1px solid var(--glass-brd);
  border-radius:100px; margin-bottom:8px;
}
.tab{
  font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:500;
  padding:10px 20px; border-radius:100px; border:none; cursor:pointer;
  background:transparent; color:var(--muted);
  transition:color .2s ease; position:relative; z-index:1;
}
.tab.active{color:var(--bg);}
#tabBg{
  position:absolute; top:4px; bottom:4px; left:4px;
  width:150px; border-radius:100px;
  background:linear-gradient(100deg, var(--en), #f0d68a);
  transition:transform .3s cubic-bezier(.65,0,.35,1), width .3s cubic-bezier(.65,0,.35,1), background .3s ease;
  z-index:0;
}

.count-note{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted); margin:18px 0 6px;}
.state-note{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--muted); padding:40px 0; text-align:center;}

/* ===== CONTROLS ===== */
.controls{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:18px;}
.toggle{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--muted);
  user-select:none;
}
.toggle input{
  appearance:none; width:32px; height:18px; border-radius:100px;
  background:rgba(241,234,214,0.12); border:1px solid var(--glass-brd);
  position:relative; cursor:pointer; transition:background .18s ease; flex-shrink:0;
}
.toggle input::before{
  content:""; position:absolute; top:1px; left:1px; width:14px; height:14px; border-radius:50%;
  background:var(--cream); transition:transform .18s ease;
}
.toggle input:checked{background:var(--en);}
.toggle input:checked::before{transform:translateX(14px); background:var(--bg);}
.toggle:has(input:checked) span{color:var(--cream);}
.link-btn{
  background:none; border:none; cursor:pointer;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--foil-cyan);
  padding:0;
}
.link-btn:hover{text-decoration:underline;}

/* ===== FAVORITE HEART ===== */
.fav-btn{
  position:absolute; top:12px; right:12px; z-index:3;
  width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,0.28); color:rgba(255,255,255,0.75); font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.fav-btn:hover{transform:scale(1.08);}
.fav-btn.active{background:rgba(232,196,104,0.9); color:#1b2420;}

/* ===== STORE LIST (inside "Alle butikker" modal) ===== */
.store-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 16px; border-radius:12px; text-decoration:none; color:var(--cream);
  background:rgba(241,234,214,0.03); border:1px solid var(--glass-brd);
  transition:border-color .18s ease, background .18s ease;
}
.store-row:hover{border-color:rgba(241,234,214,0.28); background:rgba(241,234,214,0.06);}
.store-row-name{font-weight:500; font-size:14px;}
.store-row-count{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--muted);}
.store-row-arrow{color:var(--muted); font-size:14px;}

/* ===== GRID ===== */
.grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  padding:20px 0 70px;
}
@media (max-width:940px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .grid{grid-template-columns:1fr;} }

.pack{
  border-radius:16px; overflow:hidden; cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-brd);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  display:flex; flex-direction:column;
}
.pack:hover{transform:translateY(-5px); border-color:rgba(241,234,214,0.22); box-shadow:0 20px 40px -18px rgba(0,0,0,0.55);}
.pack:focus-visible{outline:2px solid var(--foil-cyan); outline-offset:2px;}

.pack-top{position:relative; padding:20px 22px 26px; isolation:isolate; overflow:hidden;}
.pack-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:1; opacity:0; transition:opacity .3s ease;
}
.pack-photo.loaded{opacity:1;}
.pack-top.has-photo .pack-art{display:none;}
.pack-top.has-photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.68) 100%);
}
.pack-art{width:100%; height:76px; display:block; margin-bottom:14px; position:relative; z-index:2; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.25));}
.pack.lang-en .pack-art .stop1{stop-color:#f0d68a;}
.pack.lang-en .pack-art .stop2{stop-color:var(--en);}
.pack.lang-jp .pack-art .stop1{stop-color:#f0967f;}
.pack.lang-jp .pack-art .stop2{stop-color:var(--jp);}
.pack:hover .pack-art{transform:translateY(-2px); transition:transform .22s ease;}
.pack.lang-en .pack-top{background:linear-gradient(150deg, var(--en-deep), #4a3a1c 75%);}
.pack.lang-jp .pack-top{background:linear-gradient(150deg, var(--jp-deep), #3a231c 75%);}
.pack-top::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.28) var(--holo-x,50%), rgba(99,230,224,0.22) calc(var(--holo-x,50%) + 6%), transparent 65%);
  opacity:0; transition:opacity .25s ease; mix-blend-mode:overlay;
}
.pack:hover .pack-top::before{opacity:1;}
.pack-series{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(241,234,214,0.65); position:relative; z-index:2; margin-bottom:10px;
}
.pack-name{
  font-family:'Fraunces', serif; font-weight:600; font-style:italic;
  font-size:26px; line-height:1.1; position:relative; z-index:2; margin:0;
  color:var(--cream);
}

.tear{height:13px; background:var(--bg-2);
  clip-path:polygon(0% 0%,4% 100%,8% 0%,12% 100%,16% 0%,20% 100%,24% 0%,28% 100%,32% 0%,36% 100%,40% 0%,44% 100%,48% 0%,52% 100%,56% 0%,60% 100%,64% 0%,68% 100%,72% 0%,76% 100%,80% 0%,84% 100%,88% 0%,92% 100%,96% 0%,100% 100%,100% 0%);
}
.pack.lang-en .tear{background:linear-gradient(150deg, var(--en-deep), #4a3a1c 75%);}
.pack.lang-jp .tear{background:linear-gradient(150deg, var(--jp-deep), #3a231c 75%);}

.pack-body{background:var(--bg-2); padding:18px 20px 20px; flex-grow:1; display:flex; flex-direction:column;}
.pack-blurb{font-size:13px; line-height:1.55; color:var(--muted); margin:0 0 16px; flex-grow:1;}
.pack-meta{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--muted);
  border-top:1px solid var(--glass-brd); padding-top:12px; margin-bottom:14px;
}
.pack-price-summary{font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--cream);}
.pack-price-summary .amount{font-weight:600; font-size:17px;}
.pack-price-summary .label{display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:2px;}
.pack-cta{font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:500; display:flex; align-items:center; gap:6px; color:var(--en);}
.pack.lang-jp .pack-cta{color:var(--jp);}
.pack-cta::after{content:"→"; transition:transform .18s ease;}
.pack:hover .pack-cta::after{transform:translateX(3px);}
.cta-row{display:flex; justify-content:space-between; align-items:center;}

/* ===== MODAL ===== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,10,9,0.72); backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:100;
}
.modal-backdrop.open{opacity:1; pointer-events:auto;}
@media (min-width:720px){ .modal-backdrop{align-items:center;} }

.modal{
  background:var(--bg-2); border:1px solid var(--glass-brd);
  border-radius:20px 20px 0 0; width:100%; max-width:620px; max-height:86vh;
  overflow-y:auto; padding:30px 26px 34px;
  transform:translateY(24px); transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
@media (min-width:720px){ .modal{border-radius:20px; margin:20px;} }
.modal-backdrop.open .modal{transform:translateY(0);}

.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:6px;}
.modal-series{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
.modal-title{font-family:'Fraunces', serif; font-weight:600; font-style:italic; font-size:30px; margin:4px 0 0;}
.modal-close{background:var(--glass); border:1px solid var(--glass-brd); color:var(--cream); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:16px; flex-shrink:0;}
.modal-blurb{font-size:13.5px; line-height:1.6; color:var(--muted); margin:14px 0 24px;}

.offer-list{display:flex; flex-direction:column; gap:10px;}
.offer{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:12px; text-decoration:none; color:var(--cream);
  background:rgba(241,234,214,0.03); border:1px solid var(--glass-brd);
  transition:border-color .18s ease, background .18s ease;
}
.offer:hover{border-color:rgba(241,234,214,0.28); background:rgba(241,234,214,0.06);}
.offer.cheapest{border-color:var(--ok); background:rgba(127,217,164,0.07);}
.offer-info{flex-grow:1; min-width:0;}
.offer-store{font-weight:500; font-size:14.5px; display:flex; align-items:center; gap:8px;}
.best-badge{
  font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.04em; text-transform:uppercase;
  background:var(--ok); color:#0b1512; padding:2px 7px; border-radius:5px; font-weight:600;
}
.offer-format{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--muted); margin-top:2px;}
.offer-status{font-family:'IBM Plex Mono', monospace; font-size:10.5px; margin-top:4px; display:inline-flex; align-items:center; gap:5px;}
.dot{width:6px;height:6px;border-radius:50%;}
.status-in_stock .dot{background:var(--ok);}
.status-in_stock{color:var(--ok);}
.status-out_of_stock .dot{background:var(--bad);}
.status-out_of_stock{color:var(--bad);}
.status-unknown .dot{background:var(--warn);}
.status-unknown{color:var(--warn);}
.offer-price{font-family:'IBM Plex Mono', monospace; font-size:17px; font-weight:600; white-space:nowrap;}
.offer-price small{display:block; font-size:9.5px; font-weight:400; color:var(--muted); text-transform:uppercase;}
.offer-price.unknown-price{font-size:11px; font-weight:500; color:var(--muted);}
.offer-arrow{color:var(--muted); font-size:15px;}

.modal-foot{margin-top:22px; padding-top:16px; border-top:1px solid var(--glass-brd); font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); line-height:1.6;}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--glass-brd); padding:36px 0 64px; color:var(--muted); font-size:12.5px; line-height:1.7;}
footer a{color:var(--foil-cyan);}
footer code{background:rgba(241,234,214,0.06); padding:1px 6px; border-radius:4px; font-family:'IBM Plex Mono', monospace; font-size:11.5px;}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.001ms !important; animation-duration:0.001ms !important;}
}