/* Coffee card rules shared by storefront and admin preview. */
.coffee-inner{
  max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(28px,5vw,80px); align-items:center;
}
.coffee.reverse .coffee-inner{ grid-template-columns:1.05fr 1fr; }
.coffee.reverse .photo-col{ order:2; }

/* photo: taped field photograph */
.photo-col{ position:relative; display:flex; justify-content:center; }
.polaroid{
  position:relative; margin:0; background:#f3ecda; padding:14px 14px 54px;
  box-shadow:0 26px 50px -22px rgba(36,25,12,.6), 0 2px 0 rgba(255,255,255,.5) inset;
  transform:rotate(-2.2deg); max-width:380px; width:100%;
  border:1px solid rgba(60,50,38,.18);
}
.coffee.reverse .polaroid{ transform:rotate(2.4deg); }
.polaroid .ph-frame{ position:relative; overflow:hidden; background:#1a140d; aspect-ratio:3/4.4; }
.polaroid .ph-frame img,
.polaroid .ph-frame image-slot{ width:100%; height:100%; display:block; object-fit:cover; }
.polaroid .ph-frame img{ filter:sepia(.34) saturate(.85) contrast(1.06) brightness(1.02);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.polaroid figcaption{ position:absolute; left:0; right:0; bottom:16px; text-align:center;
  font-family:var(--type); font-size:12.5px; letter-spacing:.12em; color:#5a4d3c; text-transform:uppercase; }
.tape{ position:absolute; width:108px; height:30px; background:rgba(214,196,150,.55);
  border:1px solid rgba(150,120,70,.25); box-shadow:0 2px 5px rgba(0,0,0,.12);
  backdrop-filter:blur(.5px); }
.tape.tl{ top:-14px; left:-22px; transform:rotate(-34deg); }
.tape.br{ bottom:30px; right:-24px; transform:rotate(-32deg); }

/* origin destination stamp on the photo */
.origin-stamp{
  position:absolute; z-index:4; right:-14px; top:-18px;
  font-family:var(--display); text-transform:uppercase; color:var(--rust-deep);
  border:4px solid var(--rust-deep); border-radius:6px; padding:7px 16px 5px;
  font-size:clamp(17px,1.7vw,24px); letter-spacing:.06em; transform:rotate(8deg);
  background:rgba(243,236,218,.5); box-shadow:inset 0 0 0 2px rgba(151,67,36,.3);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.03' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 -1.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.03' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 -1.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
.coffee.reverse .origin-stamp{ right:auto; left:-14px; transform:rotate(-8deg); }

/* info / manifest card */
.manifest{ position:relative; }
.manifest-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:clamp(10px,1.6vh,16px); }
.manifest-head .no{ position:relative; font-family:var(--display); color:var(--rust); font-size:clamp(20px,2.4vw,34px); letter-spacing:.04em; cursor:help; border-bottom:2px dotted rgba(151,67,36,.5); padding-bottom:1px; outline:none; }
.manifest-head .roast{ font-family:var(--type); text-transform:uppercase; letter-spacing:.22em;
  font-size:clamp(10px,1vw,12.5px); color:var(--ink-mute); white-space:nowrap; }
.manifest-head .roast::before{ content:''; display:inline-block; width:26px; height:1px; background:var(--ink-mute);
  vertical-align:middle; margin-right:10px; }
.coffee-name{ font-family:var(--display); text-transform:uppercase; color:var(--ink);
  line-height:.94; font-size:clamp(30px,4.2vw,60px); letter-spacing:.005em; margin:0 0 clamp(14px,2vh,20px); text-wrap:balance; }

.notes{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(16px,2.4vh,24px); }
.notes span{ font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(11px,1vw,13px); color:var(--ink-soft);
  border:1.5px solid rgba(60,50,38,.35); border-radius:30px; padding:6px 14px; background:rgba(255,250,238,.35); }

.desc{ font-family:var(--type); color:var(--ink-soft); line-height:1.85;
  font-size:clamp(13px,1.15vw,15.5px); max-width:52ch; margin:0 0 clamp(20px,3vh,28px); text-wrap:pretty; }

.specs{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(60,50,38,.25);
  border:1px solid rgba(60,50,38,.25); margin:0 0 clamp(22px,3.2vh,32px); }
.specs div{ background:var(--paper-warm); padding:11px 16px; }
.specs dt{ font-family:var(--type); text-transform:uppercase; letter-spacing:.2em;
  font-size:9.5px; color:var(--ink-mute); margin-bottom:3px; }
.specs dd{ font-family:var(--cond); font-weight:600; font-size:clamp(13px,1.2vw,16px); color:var(--ink); margin:0; }

.buy{ display:flex; align-items:center; gap:clamp(16px,2vw,26px); flex-wrap:wrap; }
.price{ font-family:var(--display); color:var(--ink); font-size:clamp(28px,3.4vw,46px); letter-spacing:.02em; white-space:nowrap; }
.price small{ font-family:var(--type); font-size:12px; letter-spacing:.16em; color:var(--ink-mute); margin-left:6px; }
.add-bag{ position:relative; }
.add-bag.added{ background:var(--ink); }

/* size / roast pickers (pills) — sit between specs and the buy row */
.variant-picker{ display:flex; flex-direction:column; gap:12px; margin:0 0 clamp(20px,3vh,26px); }
.vp-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.vp-label{ font-family:var(--type); text-transform:uppercase; letter-spacing:.2em;
  font-size:9.5px; color:var(--ink-mute); min-width:42px; }
.vp-opts{ display:flex; gap:8px; flex-wrap:wrap; }
.vp-opt{ font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(12px,1vw,14px); color:var(--ink-soft); cursor:pointer;
  border:1.5px solid rgba(60,50,38,.35); border-radius:30px; padding:7px 16px 6px;
  background:rgba(255,250,238,.35); transition:background .15s, color .15s, border-color .15s, transform .1s; }
.vp-opt:hover{ border-color:var(--rust); color:var(--ink); }
.vp-opt.is-on{ background:var(--rust); color:var(--cream); border-color:var(--rust-deep); }
.vp-opt:active{ transform:translateY(1px); }
.vp-opt:focus-visible{ outline:2px solid var(--rust); outline-offset:2px; }

@media (max-width:820px){
  .coffee-inner,
  .coffee.reverse .coffee-inner{ grid-template-columns:1fr; gap:36px; }
  .coffee.reverse .photo-col{ order:0; }
  .specs{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .specs{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .coffee-inner{ gap:30px; }
  .coffee-name{ font-size:clamp(34px,9.2vw,50px); }
  .desc{ font-size:14.5px; line-height:1.8; }
  .polaroid{ max-width:300px; }            /* hold it off the edges so tape + stamp stay on-screen */
  .origin-stamp{ font-size:20px; }
  .buy{ gap:18px; }
  /* origin-arc easter egg: now tap-to-open on phones (toggled in scroll.js) */
  .manifest-head .no{ cursor:pointer; }
}