/* ════════════════════════════════════════════════════════════════════════
   SHOP · COMING SOON TILE (v81)
   A 2x2 announcement inside #shop-grid, right after the big 4. It is not a
   product card (no .pcard, no data-id), so filters, search, the count,
   quick add and favourites never see it. The page script (shop/index.html,
   placeSoon) shows it only in the plain view and keeps it in the DOM just
   before the 5th card; this file gives it its grid area.

   Desktop (> 860px, 4 columns): rows 2-3, columns 3-4. `contain:size`
   means the tile takes the height of the two card rows and never stretches
   them; its two picture panels flex to fill what is left.
   860px and below (2 columns): a full row right after the big 4, sized by
   its content, with the two panels side by side.

   Gradient budget (Doc 7, four permitted places): the eyebrow (3 of 4) and
   the hairline on top of the tile (4 of 4). Everything else is neutral.
   ════════════════════════════════════════════════════════════════════════ */

.shop-grid > .soon-tile{grid-column:3 / span 2;grid-row:2 / span 2;align-self:stretch;}
.shop-grid > .soon-tile[hidden],.soon-tile[hidden]{display:none!important;}

.soon-tile{
  position:relative;display:flex;flex-direction:column;gap:var(--s4);
  min-width:0;padding:var(--s5);
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);
  overflow:hidden;contain:size layout;
}
.soon-tile::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);}
/* same load-in as the cards around it (no stagger, .45s) */
.shop-grid .soon-tile{--r-delay:0ms!important;transition-duration:.45s,.45s!important;}

.soon-head{flex:0 0 auto;}
.soon-eyebrow{margin:0 0 6px!important;}
.soon-title{margin:0;font-size:clamp(1.4rem,2.1vw,2rem);font-weight:600;
  letter-spacing:-.025em;line-height:1.15;color:var(--c-ink);}

/* two picture panels; on desktop they share the height that is left */
.soon-items{flex:1 1 auto;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);}
.soon-item{margin:0;min-height:0;display:flex;flex-direction:column;
  border:1px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden;background:var(--c-card);}
.soon-media{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;}
.soon-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform var(--t-slow) var(--ease-out);}
.soon-item:hover .soon-media img{transform:scale(1.03);}
.soon-item-sprays .soon-media{background:#468AC3;}
.soon-item-new .soon-media{background:var(--grad-soft);}
.soon-item-new .soon-media img{object-fit:contain;transform:scale(1.45);}
.soon-item-new:hover .soon-media img{transform:scale(1.5);}
/* the mystery reads as intentional: a small question badge on the blur */
.soon-q{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:1.02rem;font-weight:800;line-height:1;
  background:rgba(12,12,12,.86);color:#fff;box-shadow:var(--sh-md);}
html.vp-dark .soon-q{background:#fff;color:#151515;}

.soon-cap{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:11px 14px;border-top:1px solid var(--c-line);background:var(--c-card);}
.soon-name{font-size:.9rem;font-weight:800;letter-spacing:.01em;text-transform:uppercase;color:var(--c-ink);
  min-width:0;line-height:1.25;overflow-wrap:anywhere;}
.soon-note{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-2);}
.soon-note i{position:relative;width:7px;height:7px;border-radius:50%;background:#2E4FA8;flex:0 0 auto;}
.soon-note i::after{content:'';position:absolute;inset:-7px;border-radius:inherit;background:inherit;
  --vp-ping-r0:3px;--vp-ping-r1:9.1px;clip-path:circle(3px at 50% 50%);
  animation:vpPing 2s cubic-bezier(0,0,.2,1) infinite;}
html.vp-dark .soon-note i{background:#6C9BF0;}

/* notify form */
.soon-form{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--s2);margin:0;}
.soon-body{margin:0;font-size:.9rem;font-weight:600;line-height:1.45;color:var(--c-ink-2);}
.soon-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;margin:0;}
.soon-row{display:flex;gap:var(--s2);align-items:stretch;}
.soon-row input{flex:1 1 auto;min-width:0;height:46px;margin:0;padding:0 14px;
  border:1.5px solid var(--c-line-2);border-radius:var(--r-sm);
  background:var(--c-page);color:var(--c-ink);font-family:var(--font);font-size:.92rem;font-weight:500;
  transition:border-color var(--t) var(--ease);}
.soon-row input::placeholder{color:var(--c-ink-3);opacity:1;}
.soon-row input:focus{border-color:var(--c-ink)!important;}
.soon-row input[aria-invalid="true"]{border-color:var(--c-bad)!important;}
.soon-row input:disabled{opacity:.6;}
.shop-grid .soon-btn{flex:0 0 auto;height:46px;padding:0 20px!important;}
.shop-grid .soon-btn:disabled{opacity:.55;cursor:default;transform:none!important;box-shadow:none!important;}
.soon-msg{margin:0;font-size:.84rem;font-weight:700;line-height:1.4;}
.soon-msg.is-ok{color:var(--c-ok);}
.soon-msg.is-bad{color:var(--c-bad);}
.soon-form.is-done .soon-row input{border-style:dashed;}

/* 860px and below: a full row after the big 4, sized by its content */
@media (max-width:860px){
  .shop-grid > .soon-tile{grid-column:1 / -1;grid-row:3;}
  .soon-tile{contain:none;padding:var(--s4);gap:var(--s3);}
  .soon-items{flex:none;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .soon-media{flex:none;aspect-ratio:1/1;}
  /* side by side, a caption has half the width: name over note */
  .soon-cap{flex-direction:column;align-items:flex-start;gap:5px;padding:10px 12px;}
}
@media (max-width:520px){
  .soon-name{font-size:.82rem;}
  .soon-q{width:28px;height:28px;font-size:.9rem;right:8px;top:8px;}
  .soon-row{flex-direction:column;}
  .shop-grid .soon-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .soon-note i::after{animation:none;}
  .soon-media img,.soon-item:hover .soon-media img{transition:none;}
}

/* ---- Volume pricing banner (v82): between the shop tools and the grid.
   The site's card (no gradient), a fan of real vials, the biggest real
   markdown at 10+ (vpVolumeBest), and a solid button. Tokens only. */
.shop-vol{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;
  margin:0 0 var(--s4);padding:14px 24px 14px 18px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-card);border:1px solid var(--c-line);color:var(--c-ink);text-decoration:none;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease-out);}
.shop-vol:hover{border-color:transparent;box-shadow:var(--sh-lg);transform:translateY(-2px);}
.shop-vol[hidden]{display:none;}
.shop-vol-art{display:flex;align-items:flex-end;height:104px;padding:0 10px 0 16px;}
.shop-vol-art img{height:98px;width:auto;margin-left:-9px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.14));
  transition:transform var(--t-slow) var(--ease-out);}
.shop-vol-art img:nth-child(1){transform:rotate(-9deg) translateY(4px);z-index:1;}
.shop-vol-art img:nth-child(2){transform:rotate(-3deg);z-index:2;}
.shop-vol-art img:nth-child(3){transform:rotate(3deg);z-index:3;}
.shop-vol-art img:nth-child(4){transform:rotate(9deg) translateY(4px);z-index:4;}
.shop-vol:hover .shop-vol-art img:nth-child(1){transform:rotate(-13deg) translate(-4px,2px);}
.shop-vol:hover .shop-vol-art img:nth-child(4){transform:rotate(13deg) translate(4px,2px);}
.shop-vol-copy{display:flex;flex-direction:column;gap:3px;min-width:0;}
.shop-vol-k{display:flex;align-items:center;gap:8px;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);}
.shop-vol-new{display:inline-block;padding:3px 8px 2px;border-radius:var(--r-pill);background:var(--c-accent);color:#FFFFFF;font-size:.58rem;letter-spacing:.12em;}
.shop-vol-h{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--c-ink);}
.shop-vol-h b{font-weight:800;color:var(--c-bad);}
.shop-vol-alt{display:none;}
.shop-vol:not(.has-pct) .shop-vol-up{display:none;}
.shop-vol:not(.has-pct) .shop-vol-alt{display:inline;}
.shop-vol-s{font-size:var(--fs-sm);color:var(--c-ink-2);line-height:1.45;}
.shop-vol-go{gap:8px;padding:12px 20px;font-size:.88rem;}
.shop-vol:hover .shop-vol-go{background:#0C0C0C!important;color:#FFFFFF!important;border-color:#0C0C0C!important;}
html.vp-dark .shop-vol:hover .shop-vol-go{background:#FFFFFF!important;color:#0C0C0C!important;border-color:#FFFFFF!important;}
@media (max-width:860px){
  .shop-vol{grid-template-columns:auto minmax(0,1fr);gap:8px 14px;padding:12px 14px 14px 10px;}
  .shop-vol-go{grid-column:1 / -1;width:100%;}
  .shop-vol-art{height:76px;padding-left:12px;}
  .shop-vol-art img{height:72px;margin-left:-8px;}
  .shop-vol-art img:nth-child(4){display:none;}
  .shop-vol-h{font-size:1.16rem;}
  .shop-vol-s{font-size:.8rem;}
}
@media (prefers-reduced-motion:reduce){.shop-vol,.shop-vol-art img{transition:none;}.shop-vol:hover{transform:none;}}