/* ============================================================
   S778 commerce surfaces: product page + cart drawer
   Liquid port: product page rules -> templates/product.liquid
   asset, cart drawer -> snippets/cart-drawer.liquid asset (the
   drawer will ride Shopify's AJAX cart; markup contract is in
   scripts/cart.js). Loaded AFTER main.css on both pages; only
   commerce-specific rules live here, tokens + seams + buttons
   come from tokens.css/main.css.
   ============================================================ */

/* ---------- header: cart button (both pages) ---------- */
.header-tools { display: flex; align-items: center; gap: .4rem; }
.cart-btn {
  position: relative;
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
  color: inherit;
}
.cart-btn svg { display: block; }
.cart-count {
  position: absolute;
  top: .05rem;
  right: -.1rem;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--bronze);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: .58rem;
  line-height: 15px;
  text-align: center;
}

/* ---------- product band ---------- */
.product-band {
  /* extra floor: the cream story band below rises over this white sheet
     with its up-tear, and content must never sit under the tear */
  padding-top: clamp(6rem, 12vh, 8rem);
  padding-bottom: clamp(9rem, 18vh, 13rem);
}
.p-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  width: min(1200px, 100%);
  margin: 0 auto;
  align-items: center;
}
.p-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* fixed box = the largest format, so switching variants rescales the
     bottle on a still ground line instead of reflowing the page */
  height: min(58vh, 520px);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.p-stage.dragging { cursor: grabbing; }
.p-stage img {
  height: min(58vh, 520px);
  width: auto;
  max-width: none;
  /* variant switch rescales via transform, not height: the stage is a
     fixed-height box and nothing reads the image's layout size, so the
     resize can stay off the layout pass entirely. Origin at the ground
     line keeps the bottles standing on the same floor. */
  transform-origin: 50% 100%;
  transition: transform .5s var(--ease-settle);
  filter: drop-shadow(var(--sun-shadow-soft));
  pointer-events: none;
}
/* true relative scale, same ratios as the shop trio (1 : .699 : .545) */
.p-stage[data-f="f02"] img { transform: scale(.699); }
.p-stage[data-f="f01"] img { transform: scale(.545); }
.p-hint {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: -2.2rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
  white-space: nowrap;
}
.p-stagewrap { position: relative; }

.p-details { max-width: 30rem; }
.p-title {
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: 1.05;
  margin: .4rem 0 .2rem;
}
.p-sub {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
.p-marks {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  opacity: .7;
  margin: 1.1rem 0 1.8rem;
}
.p-variants { display: flex; gap: .6rem; flex-wrap: wrap; }
.p-variants .variant {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .14em;
  padding: .6rem 1.15rem;
  border: 1px solid var(--bronze);
  background: transparent;
  color: var(--charcoal);
  cursor: pointer;
  transition: background .3s var(--ease-settle), color .3s var(--ease-settle);
}
.p-variants .variant[aria-checked="true"] {
  background: var(--bronze);
}
.p-price {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: .06em;
  margin: 1.4rem 0 1.2rem;
}
/* price pending client numbers: quiet, deliberate, not broken-looking */
.p-price.pending {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
.p-buyrow { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; }
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(34, 34, 31, .3);
}
.qty button {
  width: 44px;
  height: 100%;
  min-height: 44px;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: inherit;
  cursor: pointer;
}
.qty .qty-n {
  min-width: 2ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .9rem;
}
.p-desc { margin-top: 2rem; }
.p-facts {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  opacity: .78;
}
.p-facts li::before { content: "· "; color: var(--bronze-deep); }
.p-storylink {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: .35em;
}
.p-storylink:hover { color: var(--bronze-deep); }

@media (max-width: 860px) {
  .p-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .p-stage { height: min(46vh, 420px); }
  .p-stage img { height: min(46vh, 420px); }
  .p-details { max-width: 34rem; margin: 0 auto; text-align: center; }
  .p-variants, .p-buyrow { justify-content: center; }
}

/* ---------- product page: spec strip (quiet editorial fact table) ------ */
.p-specs {
  width: min(1200px, 100%);
  margin: clamp(4rem, 9vh, 6rem) auto 0;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(34, 34, 31, .14);
  border-bottom: 1px solid rgba(34, 34, 31, .14);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem 2rem;
}
.p-specs .spec { display: grid; gap: .35rem; }
.p-specs dt {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
.p-specs dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: .98rem;
  letter-spacing: .05em;
}
@media (max-width: 860px) {
  .p-specs { grid-template-columns: repeat(2, 1fr); text-align: center; }
}

/* ---------- product page: story band + footer ---------- */
.p-story { text-align: center; align-items: center; }
/* ---------- product page: botanika photo band ----------
   The berba grove photo (Larisa in the field) full-bleed behind the nine
   names. Photo world: charcoal scrim + paper ink + soft text shadow, the
   same treatment the horizon section uses. The band is the INNER sheet of
   the sandwich - the white product sheet tears over its top, the cream
   ritual sheet over its bottom - so its paddings must clear both torn
   overhangs (seam height caps at 200px). */
.p-botanika-band {
  padding-top: clamp(11rem, 24vh, 16rem);
  padding-bottom: clamp(11rem, 24vh, 16rem);
  color: var(--paper);
  background: var(--charcoal);
}
.p-botanika-band .pb-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 62%: drop the crop a touch so Larisa stands whole and the ground
     texture runs under the cream up-tear */
  object-position: 50% 62%;
  max-width: none;
}
/* Larisa walks the CENTRE of the frame, and the photo's 1.48 aspect means
   the cover crop at wide viewports is vertical-only - no object-position
   can move her off centre-x. So the ink moves instead: the content block
   is LEFT-aligned and she owns the right half of the band. The scrim is
   therefore directional too: heavy behind the text, thin over her. */
.p-botanika-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(34, 34, 31, .66), rgba(34, 34, 31, .38) 48%, rgba(34, 34, 31, .12) 78%),
    linear-gradient(rgba(34, 34, 31, .38), rgba(34, 34, 31, .12) 45%, rgba(34, 34, 31, .42));
}
/* scrim is a generated child painted after the photo; the content lifts
   above both. Sections themselves stay z-auto (round-3 seam law). */
.pb-inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin: 0 auto;
}
.p-botanika-band .eyebrow { color: var(--bronze); }
.p-botanika-band h2 {
  text-shadow: 0 1px 10px rgba(34, 34, 31, .45);
  /* two lines ("Devet biljaka, / savršeno usklađenih."), never three */
  max-width: 21ch;
}

/* the nine, names only (Marko 2026-08-30 cut the per-herb notes; the
   story page's hover callouts keep them) */
.p-botanika {
  list-style: none;
  padding: 0;
  width: min(620px, 100%);
  margin: 2.6rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
}
.p-botanika li {
  border-top: 1px solid rgba(250, 247, 240, .35);
  padding-top: .85rem;
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .09em;
  text-shadow: 0 1px 8px rgba(34, 34, 31, .5);
}
@media (max-width: 640px) {
  .p-botanika { grid-template-columns: repeat(2, 1fr); gap: 1.3rem 1.4rem; }
}

/* serve ritual: three mono-numbered steps on one line (desktop) */
.p-ritual { margin-top: clamp(3.6rem, 8vh, 5.5rem); }
.p-ritual .eyebrow { margin-bottom: .7rem; }
.p-ritual h3 {
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem);
  margin: 0 0 1.8rem;
}
.ritual-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem 2.4rem;
}
.ritual-steps li { display: grid; gap: .35rem; justify-items: center; }
.ritual-steps .r-n {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  color: var(--bronze);
}
.ritual-steps b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .95rem;
  letter-spacing: .06em;
}
.ritual-steps small {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .08em;
  opacity: .62;
  max-width: 20ch;
}
@media (max-width: 640px) {
  .ritual-steps { grid-template-columns: 1fr; gap: 1.5rem; }
}
.p-story .signature-quote {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .9rem + .8vw, 1.4rem);
  letter-spacing: .06em;
  max-width: 34rem;
  margin: 2rem auto 0;
  opacity: .85;
}
.p-footer { position: relative; background: var(--charcoal); }
/* the cream band's down-tear hangs over the footer's top: the signature
   must start below the deepest torn lobe at any viewport */
.p-footer .site-footer { padding-top: clamp(10rem, 22vh, 15rem); }

/* ---------- shop section (08): price + quick add on the format cards ---- */
.format .f-link { display: block; color: inherit; text-decoration: none; }
.format .price {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-top: .45rem;
  min-height: 1em;
}
.btn.mini {
  font-size: .68rem;
  letter-spacing: .16em;
  padding: .55rem 1.15rem;
  margin-top: .8rem;
}

/* ---------- cart drawer (both pages, injected by scripts/cart.js) ------ */
.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(34, 34, 31, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease-settle);
}
.cart-scrim.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  width: min(430px, 90vw);
  background: var(--paper-warm);
  color: var(--charcoal);
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem 1.4rem;
  transform: translateX(110%);
  transition: transform .55s var(--ease-settle);
  /* NO box-shadow here: the panel is a straight rectangle, so its shadow
     drew a straight dark band behind the torn edge and gave the real
     edge away (Marko caught it). The tear SVG's feDropShadow is the only
     shadow - it follows the torn line. */
}
.cart-drawer.open { transform: translateX(0); }
/* the drawer IS a cream sheet, so its exposed edge is torn like every
   other sheet edge on the site: a vertical tear hanging off the left side,
   unique seed (12553), fiber rim riding the line */
.cart-tear {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -31px;
  width: 32px;
  pointer-events: none;
}
.cart-tear svg { display: block; width: 100%; height: 100%; }
.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.4rem;
}
.cart-head h3 {
  font-size: 1.15rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0;
}
.cart-close {
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.3rem;
  cursor: pointer;
  padding: .5rem .7rem;
}
.cart-lines {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding-right: .2rem;
}
.cart-line {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
  align-items: center;
}
.cart-line .cl-thumb img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(6px 9px 10px rgba(34, 34, 31, .22));
}
/* the hidden attribute must beat the explicit display values below */
.cart-lines[hidden], .cart-empty[hidden], .cart-foot[hidden] { display: none; }
.cart-line .cl-name { display: block; font-family: var(--font-display); font-size: .95rem; letter-spacing: .06em; }
.cart-line .cl-format {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  opacity: .65;
  margin-top: .15rem;
}
.cart-line .cl-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: .55rem;
}
.cart-line .qty button { min-height: 34px; width: 34px; }
.cart-line .cl-price { font-family: var(--font-mono); font-size: .78rem; margin-left: auto; }
.cl-remove {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: inherit;
  opacity: .55;
  text-decoration: underline;
  text-underline-offset: .3em;
  cursor: pointer;
}
.cl-remove:hover { opacity: 1; }
.cart-empty {
  flex: 1;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1.2rem;
}
.cart-empty p { margin: 0; }
.cart-foot { border-top: 1px solid rgba(34, 34, 31, .18); padding-top: 1.1rem; }
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .1em;
  margin-bottom: 1rem;
}
.cart-total .t-pending {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
.cart-foot .btn { display: block; width: 100%; text-align: center; }
.cart-note {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-align: center;
  opacity: .6;
  margin: .9rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .cart-drawer, .cart-scrim, .p-stage img { transition: none; }
}

/* the REAL harvest basket (nano-banana off the berba grove photo, magenta
   key + hole-kill, 14-kosarica pipeline) greets an empty košarica. It is
   an OBJECT on the paper, so it casts the house one-sun shadow - unlike
   the drawer panel itself, which carries none. */
.cart-empty .basket-photo {
  display: block;
  margin: 0 auto;
  width: min(270px, 74%);
  height: auto;
  filter: drop-shadow(12px 18px 20px rgba(34, 34, 31, .25));
}