/* =====================================================================
   SHOP page styles. Built only from site.css tokens and components.
   Page-only pieces: cart button + drawer, shop hero, drop bar,
   collection grid, size chips, filter, Keyholder banner, shipping notes.
   ===================================================================== */

/* holographic foil sweep (hero image, product media on hover, banner edge) */
.holo{position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:color-dodge;
  background:linear-gradient(112deg, transparent 32%, rgba(255,241,116,.55) 41%, rgba(255,93,0,.42) 46%, rgba(255,120,200,.34) 51%, rgba(120,215,255,.3) 56%, rgba(67,178,26,.22) 60%, transparent 68%);
  background-size:300% 100%; background-position:100% 0; animation:holoSweep 6.5s var(--ease) infinite}
@keyframes holoSweep{0%,40%{background-position:100% 0}80%,100%{background-position:0 0}}
@keyframes holoSlide{to{background-position:200% 0}}

/* header cart button: now shared in site.css (.cart-btn) */

/* ---------- hero ---------- */
.shop-hero{padding-bottom:clamp(44px, 5.4vw, 80px)}
.shop-hero__grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px, 4vw, 64px); align-items:center}
.shop-hero h1.juice-type{font-size:clamp(60px, 8.7vw, 134px); line-height:.86}
.shop-hero .hero-band__sub{max-width:44ch}
.shop-hero__cta{margin-top:30px}
.shop-hero__art{position:relative; display:block; justify-self:center; width:min(100%, 450px); margin-top:24px}
.shop-hero__frame{position:relative; display:block; aspect-ratio:588/708; border-radius:var(--r-lg); overflow:hidden; background:var(--yellow); box-shadow:var(--frame); transform:rotate(2.2deg); transition:transform .5s var(--ease)}
.shop-hero__art:hover .shop-hero__frame{transform:rotate(0) translateY(-6px)}
.shop-hero__frame img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.shop-hero__art:hover .shop-hero__frame img{transform:scale(1.04)}
.shop-hero__frame::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(11,11,11,.92), rgba(11,11,11,.25) 30%, transparent 46%)}
.shop-hero__tag{--jt-depth:var(--juice-deep); position:absolute; z-index:3; left:20px; right:20px; bottom:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; color:var(--text)}
.shop-hero__tag .chip{margin-bottom:10px}
.shop-hero__tag .juice-type{display:block; font-size:clamp(30px, 2.8vw, 42px)}
.shop-hero__tag .price{font-size:40px}
.shop-hero .sticker{position:absolute; z-index:4; top:-58px; right:-62px; width:150px; margin:0}

/* ---------- drop bar ---------- */
.dropbar{position:relative; overflow:hidden; background:#000; border-top:3px solid var(--ink); border-bottom:1px solid var(--line)}
.dropbar::before{content:"GET UNLOCKED · GET UNLOCKED · GET UNLOCKED"; position:absolute; left:-1%; top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--font-display); font-size:clamp(110px, 12vw, 180px); line-height:1; color:rgba(255,93,0,.07); pointer-events:none}
.dropbar__in{display:grid; grid-template-columns:minmax(0,1fr) 420px auto; gap:var(--gap); align-items:center; padding-block:30px}
.dropbar__copy{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.dropbar__title{font-family:var(--font-display); font-size:clamp(36px, 3.6vw, 52px); line-height:.9; text-transform:uppercase}
.dropbar__title span{color:var(--juice)}
.dropbar__copy p{color:var(--muted); font-size:15px}
.dropbar .countdown{background:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line-2); padding:12px 14px}
.dropbar .countdown__grid b{font-size:42px}

/* ---------- collections ---------- */
.coll-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap)}
.coll-grid .collection-tile{aspect-ratio:1/1; box-shadow:0 0 0 1px var(--line); transition:box-shadow .25s, transform .25s var(--ease)}
.coll-grid .collection-tile:hover{transform:translateY(-4px); box-shadow:0 0 0 2px var(--juice), 0 26px 60px -26px rgba(255,93,0,.8)}
.coll-grid .collection-tile img{position:absolute; inset:0}
.collection-tile .chip{position:absolute; z-index:2; left:14px; top:14px}
.ctile--wro{background:var(--yellow)}
.ctile--wro img{object-position:50% 18%}
.ctile--wro::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,11,11,.55), transparent 42%)}
.ctile__name{position:absolute; z-index:2; left:16px; bottom:10px; --jt-depth:var(--ink); font-size:clamp(46px, 4.6vw, 66px)}
.ctile--rep img{object-position:0 50%}
.ctile--hats, .ctile--coll{background:var(--juice)}
.ctile--hats img, .ctile--fits img, .ctile--coll img{object-position:50% 35%}
.ctile--hats::after, .ctile--fits::after, .ctile--coll::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,11,11,.6), transparent 45%)}
.product-card__media .product-card__alt{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s}
@media (hover:hover){ .product-card:hover .product-card__alt{opacity:1} }
.product-card.is-sold .product-card__media img{filter:grayscale(.85) brightness(.72)}
.product-card.is-sold .product-card__media::before{content:"SOLD OUT"; position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-8deg); padding:10px 18px 6px; border:3px solid var(--paper); border-radius:10px; font-family:var(--font-display); font-size:clamp(26px,3vw,40px); letter-spacing:.06em; color:var(--paper); background:rgba(11,11,11,.55); white-space:nowrap}
.product-card.is-sold .product-card__title a{color:var(--muted)}
.product-card.is-sold .price{text-decoration:line-through; text-decoration-thickness:2px; opacity:.7}
.btn.is-soldout{background:transparent; color:var(--dim); box-shadow:inset 0 0 0 2px var(--line-2); cursor:not-allowed}
.prod-grid--archive .product-card__media{background:#efe6d6}

/* ---------- product grid ---------- */
.shop-filter{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.shop-filter button{border:0; background:transparent; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:10px 14px; border-radius:999px; box-shadow:inset 0 0 0 2px var(--ink); color:var(--ink); transition:background .15s, color .15s}
.shop-filter button:hover{background:rgba(11,11,11,.12)}
.shop-filter button[aria-pressed="true"]{background:var(--ink); color:var(--juice)}
.shop-filter b{font-weight:700; opacity:.6; margin-left:4px}
.prod-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap)}
.prod-grid .product-card[hidden]{display:none}
.product-card__media::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:color-dodge;
  background:linear-gradient(112deg, transparent 32%, rgba(255,241,116,.5) 41%, rgba(255,93,0,.4) 46%, rgba(255,120,200,.3) 51%, rgba(120,215,255,.28) 56%, transparent 66%);
  background-size:300% 100%; background-position:100% 0; transition:background-position 1s var(--ease)}
.product-card:hover .product-card__media::after{background-position:0 0}
.product-card__media .chip{z-index:2}
.product-card__title a:hover{color:var(--cream)}
.sizes{border:0; margin:2px 0 0; padding:0; min-width:0}
.sizes legend{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; color:var(--dim); text-transform:uppercase; padding:0; margin-bottom:8px}
.sizes__row{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px}
.sizes label{position:relative; display:block}
.sizes input{position:absolute; opacity:0; width:1px; height:1px}
.sizes span{display:grid; place-items:center; height:38px; border-radius:10px; font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line-2); cursor:pointer; transition:background .15s, color .15s, box-shadow .15s}
.sizes label:hover span{color:var(--text); box-shadow:inset 0 0 0 1px var(--text)}
.sizes input:checked + span{background:var(--yellow); color:var(--ink); box-shadow:none}
.sizes input:focus-visible + span{outline:3px solid var(--cream); outline-offset:2px}
.sizes.is-missing span{box-shadow:inset 0 0 0 1px var(--juice); animation:nudge .4s}
@keyframes nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.size-hint{font-size:12.5px; color:var(--juice-bright); min-height:0}
.size-hint:empty{display:none}
.product-card .btn[data-add] svg{width:18px; height:18px}
.product-card .btn.is-added{background:var(--cream)}
.ask-form{display:flex; flex-direction:column; gap:10px; margin-top:auto}
.ask-form .input{height:46px; font-size:15px}
.ask-form .form-msg{color:var(--cream); font-weight:600}
.shop-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:clamp(24px, 3vw, 36px); font-weight:600}

/* ---------- Keyholder early-access banner ---------- */
.ka{position:relative; isolation:isolate; display:grid; grid-template-columns:300px minmax(0,1fr); gap:clamp(28px, 4.4vw, 72px); align-items:center; padding:clamp(28px, 4vw, 56px) clamp(24px, 4.4vw, 64px); border-radius:28px; overflow:hidden;
  background:radial-gradient(520px 460px at 14% 52%, rgba(255,93,0,.42), transparent 70%), linear-gradient(135deg, #170c05, #050403 62%);
  box-shadow:inset 0 0 0 1px rgba(255,93,0,.32)}
.ka::after{content:""; position:absolute; left:0; right:0; top:0; height:4px; z-index:2;
  background:linear-gradient(90deg, var(--juice), var(--cream), var(--yellow), #ff86c8, #7fd8ff, var(--leaf-glow), var(--juice)); background-size:200% 100%; animation:holoSlide 7s linear infinite}
.ka__pass .kpass{--kpass-w:260px; --kp-ground:#120a05; min-height:calc(var(--kpass-w) * 2.05)}
.ka__copy .lede{margin:16px 0 22px}
.ka .perk-list{margin-bottom:24px}
.ka-form{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto; gap:10px; align-items:end}
.ka-form .btn{height:54px}
.ka-form .fine{grid-column:1/-1}
.ka .keys-done{margin-top:4px}

/* ---------- shipping / returns ---------- */
.ship{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-radius:var(--r-lg); overflow:hidden; background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line)}
.ship > div{padding:26px 24px; border-right:1px solid var(--line)}
.ship > div:last-child{border-right:0}
.ship__ico{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:rgba(255,93,0,.13); color:var(--juice)}
.ship__ico svg{width:22px; height:22px}
.ship h3{font-family:var(--font-display); font-weight:400; font-size:30px; line-height:.95; text-transform:uppercase; margin:16px 0 8px}
.ship p{font-size:14px; color:var(--muted)}
.ship-note{display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap; margin-top:18px}

/* ---------- mini cart drawer ---------- */
.cart-scrim{position:fixed; inset:0; z-index:150; background:rgba(5,4,3,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .25s}
.cart-scrim.is-open{opacity:1}
.cart{position:fixed; z-index:160; top:0; right:0; bottom:0; width:min(440px, 100vw); display:flex; flex-direction:column; background:var(--ink-2); box-shadow:-1px 0 0 var(--line-2), -40px 0 120px -30px rgba(255,93,0,.5); transform:translateX(104%); transition:transform .34s var(--ease)}
.cart.is-open{transform:none}
.cart::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--juice), var(--cream), #ff86c8, #7fd8ff, var(--juice)); opacity:.8}
.cart__head{display:flex; align-items:center; gap:12px; padding:calc(18px + var(--sat)) 20px 16px 24px; border-bottom:1px solid var(--line)}
.cart__head h2{font-size:40px}
.cart__head .mono{font-size:11px; color:var(--dim); letter-spacing:.1em}
.cart__ka{display:flex; gap:10px; align-items:flex-start; margin:16px 20px 4px 24px; padding:12px 14px; border-radius:12px; background:rgba(255,217,2,.07); box-shadow:inset 0 0 0 1px rgba(255,217,2,.28); font-size:13px; line-height:1.45}
.cart__ka b{color:var(--yellow)}
.cart__list{list-style:none; margin:0; padding:4px 20px 4px 24px; overflow:auto; flex:1}
.cart-item{display:grid; grid-template-columns:78px minmax(0,1fr) auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line)}
.cart-item img{width:78px; height:78px; border-radius:12px; object-fit:cover; background:var(--yellow)}
.cart-item__name{font-family:var(--font-display); font-weight:400; font-size:23px; line-height:.95; text-transform:uppercase}
.cart-item__meta{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--dim); margin-top:5px}
.qty{display:inline-flex; align-items:center; margin-top:10px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-2)}
.qty button{width:32px; height:32px; border:0; border-radius:50%; background:none; font-size:16px; font-weight:700; color:var(--text)}
.qty button:hover{background:rgba(255,247,238,.1)}
.qty output{min-width:20px; text-align:center; font-family:var(--font-mono); font-size:13px; font-weight:700}
.cart-item__end{text-align:right; align-self:start; padding-top:2px}
.cart-item__price{font-family:var(--font-display); font-size:26px; line-height:1}
.cart-item__rm{margin-top:10px; border:0; background:none; padding:0; font-size:12px; color:var(--dim); text-decoration:underline; text-underline-offset:3px}
.cart-item__rm:hover{color:var(--text)}
.cart-item.is-off img{filter:grayscale(.85) brightness(.72)}
.cart-item.is-off .cart-item__name,.cart-item.is-off .cart-item__price{color:var(--muted)}
.cart-item__off{margin-top:8px; font-size:12.5px; font-weight:700; color:var(--yellow)}
.cart__empty{padding:40px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px}
.cart__empty img{width:120px; height:120px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--ink), 0 0 0 7px var(--juice)}
.cart__empty p{color:var(--muted)}
.cart__foot{display:flex; flex-direction:column; gap:12px; padding:18px 20px calc(20px + env(safe-area-inset-bottom)) 24px; border-top:1px solid var(--line)}
.cart__sub{display:flex; justify-content:space-between; align-items:baseline}
.cart__sub > span:first-child{font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--muted)}
.cart__sub b{display:block; font-family:var(--font-display); font-weight:400; font-size:42px; line-height:1; color:var(--text); text-align:right}
.cart__sub small{display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; color:var(--dim); text-align:right}
.cart__foot .form-msg{color:var(--cream); font-weight:600; text-align:center}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .dropbar__in{grid-template-columns:minmax(0,1fr) 400px}
  .dropbar__in > .btn{grid-column:1/-1; justify-self:start}
  .ship{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ship > div:nth-child(2){border-right:0}
  .ship > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .ka{grid-template-columns:260px minmax(0,1fr)}
  .ka__pass .kpass{--kpass-w:240px}
  .ka-form{grid-template-columns:1fr 1fr}
  .ka-form .btn{grid-column:1/-1}
}
@media (max-width:980px){
  .shop-hero__grid{grid-template-columns:1fr}
  .shop-hero__art{width:min(100%, 420px)}
  .prod-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ka{grid-template-columns:1fr; justify-items:stretch}
}
@media (max-width:760px){
  .shop-hero h1.juice-type{font-size:clamp(50px, 15.4vw, 66px); line-height:.88}
  .shop-hero__cta .btn{flex:1 1 auto}
  .shop-hero__art{margin-top:8px; width:calc(100% - 10px); justify-self:start}
  .shop-hero__frame{transform:rotate(1.4deg)}
  .shop-hero__tag{left:14px; right:14px; bottom:14px}
  .shop-hero__tag .price{font-size:32px}
  .dropbar__in{grid-template-columns:1fr; padding-block:24px 28px}
  .dropbar__in > .btn{width:100%}
  .coll-grid{grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:80%; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--gutter) * -1); padding:4px var(--gutter) 14px; scrollbar-width:none}
  .coll-grid > *{scroll-snap-align:center}
  .shop-filter{flex-wrap:nowrap; overflow-x:auto; margin:0 calc(var(--gutter) * -1) 20px; padding:0 var(--gutter) 4px; scrollbar-width:none}
  .shop-filter button{flex:none}
  .prod-grid{gap:12px}
  .prod-grid .product-card__body{padding:12px 12px 14px; gap:8px}
  .prod-grid .product-card__row{flex-direction:column; gap:4px}
  .prod-grid .product-card__title{font-size:22px}
  .prod-grid .price{font-size:24px; text-align:left; display:flex; align-items:baseline; gap:6px}
  .prod-grid .price small{display:inline; margin:0}
  .prod-grid .product-card__note{display:none}
  .prod-grid .product-card__media .chip{left:8px; top:8px; font-size:9.5px; padding:5px 7px}
  .sizes legend{font-size:9.5px; margin-bottom:6px}
  .sizes__row{gap:4px}
  .sizes span{height:32px; font-size:10.5px; border-radius:8px}
  .prod-grid .btn[data-add]{padding:11px 8px; font-size:13px}
  .prod-grid .btn[data-add] svg{display:none}
  .ask-form .input{height:42px; font-size:14px; padding:0 34px 0 12px; background-position:right 12px center}
  .ka{padding:28px 18px 24px; border-radius:22px}
  .ka__pass .kpass{--kpass-w:min(250px, 70vw)}
  .ka-form{grid-template-columns:1fr}
  .ship{grid-template-columns:1fr}
  .ship > div{border-right:0; border-bottom:1px solid var(--line); padding:20px; display:grid; grid-template-columns:46px 1fr; column-gap:16px}
  .ship > div:last-child{border-bottom:0}
  .ship__ico{grid-row:span 2}
  .ship h3{margin:0 0 4px; font-size:26px}
  .cart-item{grid-template-columns:64px minmax(0,1fr) auto; gap:12px}
  .cart-item img{width:64px; height:64px}
}
/* phones: one product per row so the size chips stay 44px tap targets */
@media (max-width:420px){
  .prod-grid{grid-template-columns:1fr; gap:var(--gap)}
  .prod-grid .product-card__body{padding:16px 16px 18px; gap:10px}
  .prod-grid .product-card__row{flex-direction:row; justify-content:space-between; align-items:flex-start; gap:12px}
  .prod-grid .product-card__title{font-size:27px}
  .prod-grid .price{font-size:27px; display:block; text-align:right}
  .prod-grid .price small{display:block; margin-top:3px}
  .sizes legend{font-size:10.5px; margin-bottom:8px}
  .sizes__row{gap:6px}
  .sizes span{height:44px; font-size:13px; border-radius:10px}
  .prod-grid .btn[data-add]{padding:14px 16px; font-size:15px}
  .prod-grid .btn[data-add] svg{display:block}
  .prod-grid .product-card--ink .product-card__media{aspect-ratio:16/10}
  .ask-form .input{height:50px; font-size:16px; padding:0 42px 0 16px; background-position:right 16px center}
}

/* drop bar: the visitor's own access line (DropAccessLine) */
.dropbar__copy .dropbar__you{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; color:var(--cream); font-size:15px}
.dropbar__you b{color:#fff}