/* ============================================================
   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: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--bronze);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: .7rem;
  line-height: 16px;
  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%;
  /* Variant switch is a uniform crossfade (Marko 2026-09-02 "they all
     animate differently"): the per-format transforms below apply
     INSTANTLY under the fade, never tweened - tweening them played a
     different morph for every pair of formats (shrink vs vertical
     slide) because each render trims a different amount of transparent
     canvas. JS adds .switching, swaps src+data-f at the fade's bottom. */
  transition: opacity .28s ease;
  filter: drop-shadow(var(--sun-shadow-soft));
  pointer-events: none;
}
.p-stage img.switching { opacity: 0; transition-duration: .16s; }
/* Match physical size by the shared stone cap. In the small-format renders
   that cap is 506px wide versus 260px in the 0,7 render, so equal canvas
   heights make the small bottles almost twice too large. Each translate
   removes that render's transparent pixels below the glass, putting the
   visible bottle base on the stage floor instead of aligning the canvases. */
.p-stage[data-f="f07"] img { transform: translateY(3.83%); }
.p-stage[data-f="f02"] img { transform: translateY(3.31%) scale(.514); }
.p-stage[data-f="f01"] img { transform: translateY(10.13%) scale(.514); }
.p-stage.static { cursor: default; }
.p-hint {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: -3.8rem; /* clear of the ground pool hanging under the floor */
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
  white-space: nowrap;
  transition: bottom .5s var(--ease-settle);
}
.p-stagewrap { position: relative; }
/* faded monogram ghost behind the glass (Marko 2026-09-02): big, quiet,
   a watermark not a graphic - the gold png at 7% on the white sheet */
.p-ghost {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: min(46vw, 620px);
  opacity: .07;
  pointer-events: none;
}
.p-ghost img { width: 100%; height: auto; }
/* ground pool: the baked landing pool reused as the floor (Marko
   2026-09-02: the rock slab "looks weird and out of place" - a side-lit
   rock photo squashed with scaleY distorts its texture and its
   perspective never matched the straight-on renders). The pool's warm
   ellipse is centred in its canvas; translate(-50%,50%) parks that
   centre ON the floor line, scaleY flattens it into a contact wash.
   Bottle (z2) in front, pool (z1), ghost (z0). */
.p-pedestal {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%) scaleY(.42);
  width: min(44vw, 620px);
  height: auto;
  z-index: 1;
  pointer-events: none;
}
.p-ghost { z-index: 0; }
.p-stage { position: relative; z-index: 2; }
@media (max-width: 860px) {
  /* phone: pool wide enough to read under the glass; and the
     absolute drag hint hangs into the flow below - reserve room */
  .p-pedestal { width: min(86vw, 420px); }
  .p-stagewrap { margin-bottom: 4.2rem; }
  .p-ghost { width: 74vw; }
  /* below the pool's under-floor half, on the paper, never inside it */
  .p-hint { bottom: -6rem; }
}

/* The old desktop "editorial lift" (small formats floated at -18/-19%)
   died with the ground pool (2026-09-02): a bottle hovering above its
   own floor wash reads as levitation. Every format stands on the pool's
   centre line; the ghost + pool carry the space the lift used to fill. */
@media (min-width: 861px) {
  .p-grid {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    /* wider spread (Marko 2026-09-02: "push it to the right, too close
       to the bottles"): bigger gutter, wider container, and the details
       column rides the RIGHT edge of its cell instead of hugging the
       stage */
    gap: clamp(4rem, 8vw, 7.5rem);
    width: min(1260px, 100%);
  }
  .p-details { margin-left: auto; }
  .p-stage[data-f="f02"] img { transform: translateY(3.31%) scale(.6); }
  .p-stage[data-f="f01"] img { transform: translateY(10.13%) scale(.6); }
}

.p-details { max-width: 33rem; }
/* bolder cut across the product page (Marko 2026-09-02): Cinzel 700
   (Dcroat-patched) on every display glyph, bigger title */
.p-title {
  font-size: clamp(3.2rem, 2.2rem + 3.6vw, 5rem);
  font-weight: 700;
  line-height: 1;
  margin: .4rem 0 .3rem;
}
.p-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
.p-marks {
  font-family: var(--font-mono);
  font-size: .88rem;
  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-weight: 700;
  font-size: 1rem;
  letter-spacing: .14em;
  padding: .8rem 1.5rem;
  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: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
.p-buyrow { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; }
/* the ask carries the column now: bigger add-to-cart */
.p-buyrow .btn { font-size: 1.05rem; padding: 1.15rem 2.6rem; }
.p-details .eyebrow { font-size: .85rem; }
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(34, 34, 31, .3);
}
.qty button {
  width: 52px;
  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: 1.05rem;
}
.p-desc {
  margin-top: 2.4rem;
  font-size: 1.25rem;
  line-height: 1.7;
}
.p-facts {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
  display: grid;
  gap: .7rem;
  font-family: var(--font-mono);
  font-size: .92rem;
  letter-spacing: .1em;
  opacity: .78;
}
.p-facts li::before { content: "· "; color: var(--bronze-deep); }
.p-storylink {
  display: inline-block;
  margin-top: 2.2rem;
  font-family: var(--font-mono);
  font-size: .88rem;
  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; }
}

/* On phones the model and product identity must read as one first-screen
   composition. The tablet-sized 46vh stage pushed the 0,7 title below the
   fold and left an oversized empty cavity above the two smaller formats. */
@media (max-width: 600px) {
  .product-band { padding-top: clamp(5rem, 9vh, 6rem); }
  .p-grid { gap: 2.25rem; }
  .p-stage,
  .p-stage img { height: min(35vh, 300px); }
  /* -6rem, same as the 860px block: the ground pool hangs under the
     stage floor and -1.8rem parked the hint inside its wash */
  .p-hint { bottom: -6rem; }
}

/* ---------- 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: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
.p-specs dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  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 {
  font-weight: 700;
  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. Base = the no-JS fallback: three mono-numbered steps on
   one line (desktop). scripts/product.js adds .rd-on for the card deck. */
.p-ritual { margin-top: clamp(3.6rem, 8vh, 5.5rem); }
.p-ritual .eyebrow { margin-bottom: .7rem; }
.p-ritual h3 {
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  font-weight: 700;
  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: .72rem;
  letter-spacing: .18em;
  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: .74rem;
  letter-spacing: .08em;
  opacity: .62;
  max-width: 20ch;
}
@media (max-width: 640px) {
  .ritual-steps { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- ritual card deck (Marko 2026-09-02) ----------
   One paper card per step, dealt as a pile: pos-0 on top, pos-1 and
   pos-2 fanned behind with small offsets + rotations. Clicking the top
   card throws it out (.leaving) and product.js reassigns positions, so
   it slides to the back of the pile while the next step surfaces.
   All rules gated on .rd-on - without JS the grid above stands. */
.p-ritual.rd-on .ritual-steps {
  display: grid;
  /* reset the 3-column fallback grid: the deck is ONE cell, all cards
     stacked in it (they were piling into column 1, off-centre) */
  grid-template-columns: 1fr;
  gap: 0;
  width: min(400px, 86vw);
  margin: 0 auto;
  min-height: 240px;
}
.p-ritual.rd-on .ritual-steps li {
  grid-area: 1 / 1;
  display: grid;
  gap: .6rem;
  justify-items: center;
  align-content: center;
  padding: 2.2rem 1.8rem 2rem;
  background: var(--paper);
  border: 1px solid rgba(139, 109, 76, .28);
  box-shadow: var(--sun-shadow-soft);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .5s var(--ease-settle), opacity .4s var(--ease-settle);
}
.p-ritual.rd-on .ritual-steps li:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.p-ritual.rd-on .ritual-steps b {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.p-ritual.rd-on .ritual-steps small {
  font-size: .78rem;
  max-width: 26ch;
  opacity: .68;
}
.p-ritual.rd-on li.pos-0 { transform: none; z-index: 3; }
.p-ritual.rd-on li.pos-1 { transform: translate(14px, 14px) rotate(2.2deg); z-index: 2; }
.p-ritual.rd-on li.pos-2 { transform: translate(-11px, 26px) rotate(-2.6deg); z-index: 1; }
.p-ritual.rd-on li.pos-1, .p-ritual.rd-on li.pos-2 { cursor: default; }
/* thrown card: out to the right with a flick, then product.js drops it
   to pos-2 (transition covers the return trip too) */
.p-ritual.rd-on li.leaving {
  transform: translate(58%, -4%) rotate(7deg);
  opacity: 0;
  z-index: 4;
}
.r-hint {
  /* the pile's back cards hang ~26px + shadow below the grid box
     (transforms don't grow layout) - stay clear of them */
  margin-top: 3.6rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
}
.r-hint[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .p-ritual.rd-on .ritual-steps li { transition: opacity .25s var(--ease-settle); }
}
.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 ----
   Commerce premium pass 2026-09-03: the buy row must speak the display
   voice at a real scale - the old .68rem mono chip read as debug chrome
   under the cinematic slate stage. Price sits in Cinzel like the product
   page's .p-price; the quick-add is a modest step below .btn, never a chip. */
.format .f-link { color: inherit; text-decoration: none; }
.format .price {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .12em;
  color: var(--bronze);
  margin-top: .45rem;
  min-height: 1em;
}
.btn.mini {
  font-size: .82rem;
  letter-spacing: .18em;
  padding: .9rem 2rem;
  margin-top: .9rem;
}

/* ---------- 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.1rem;
  padding-right: .2rem;
}
.cart-line {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
  align-items: center;
}
/* entries on the sheet: hairline rules between lines, like a ledger,
   instead of floating card rows (commerce premium pass 2026-09-03) */
.cart-line + .cart-line {
  border-top: 1px solid rgba(34, 34, 31, .12);
  padding-top: 1.1rem;
}
.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: .74rem;
  letter-spacing: .14em;
  opacity: .7;
  margin-top: .15rem;
}
.cart-line .cl-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: .55rem;
}
/* the qty stepper loses its box: bare bronze glyphs either side of a
   Cinzel count read as marginalia on the sheet, not webshop chrome */
.cart-line .qty { border: 0; gap: .1rem; }
.cart-line .qty button {
  min-height: 36px;
  width: 30px;
  color: var(--bronze-deep);
  transition: color .3s var(--ease-settle);
}
.cart-line .qty button:hover { color: var(--charcoal); }
.cart-line .qty .qty-n { font-family: var(--font-display); font-size: .95rem; }
.cart-line .cl-price { font-family: var(--font-display); font-size: .92rem; margin-left: auto; }
.cl-remove {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  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: .78rem;
  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: .72rem;
  letter-spacing: .1em;
  text-align: center;
  opacity: .7;
  margin: .9rem 0 0;
}
/* keyboard focus carries the carved language too, not the UA default */
.cart-close:focus-visible,
.cl-remove:focus-visible,
.cart-line .qty button:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}
/* the drawer itself takes programmatic focus on open (cart.js), so no
   control lights up before the visitor touches the keyboard */
.cart-drawer:focus,
.cart-drawer:focus-visible { outline: none; }
/* checkout feedback line (uskoro / age gate / network), injected by cart.js */
.cart-status {
  font-size: .85rem;
  line-height: 1.45;
  text-align: center;
  color: var(--bronze-deep);
  margin: .8rem 0 0;
}
.cart-status[hidden] { display: none; }
@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));
}

/* ---------- naplata.html: custom checkout v2 (Marko 2026-09-03
   "go all in and make it shine") ----------
   Split screen: dark slate order panel (shop-stone + crush overlay,
   cream text) | the cart sheet's torn edge, full height | paper-warm
   form panel. Element interiors are themed in scripts/naplata.js. */
.ck-body { background: var(--paper-warm); }
.checkout {
  display: grid;
  grid-template-columns: minmax(360px, 43%) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---- left: the order on stone ---- */
.ck-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(2.4rem, 4.5vw, 4.2rem) clamp(2rem, 4vw, 4rem);
  padding-right: clamp(3rem, 5vw, 5rem); /* room for the tear overhang */
  background: #171714 url("../assets/shop-stone.webp") center / cover no-repeat;
  color: #efe7d6;
}
.ck-summary::before {
  /* crush the slate under the content, same move as the shop wall */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 38% 42%, rgba(16, 16, 13, .82) 0%, rgba(16, 16, 13, .55) 55%, rgba(16, 16, 13, .3) 100%);
}
.ck-summary > * { position: relative; }
.ck-brand { display: block; margin-bottom: clamp(2rem, 5vh, 3.6rem); }
.ck-brand img {
  width: 74px;
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5));
}
.ck-summary .eyebrow { color: var(--bronze); opacity: .95; }
.ck-lines { margin-top: 1.4rem; }
.ck-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1.1rem;
  align-items: center;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(239, 231, 214, .14);
}
.ck-thumb {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 74px;
}
.ck-thumb img {
  max-height: 74px;
  width: auto;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55));
}
.ck-lname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .05em;
  line-height: 1.35;
}
.ck-lname .ck-lqty {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .6;
  margin-top: .3rem;
}
.ck-lamt {
  font-family: var(--font-body);
  font-size: .95rem;
  white-space: nowrap;
}
.ck-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.4rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .05em;
}
.ck-total span:first-child { font-size: 1rem; opacity: .85; }
.ck-total span:last-child { font-size: 1.7rem; color: var(--bronze); }
.ck-fine {
  font-size: .8rem;
  opacity: .55;
  margin: .9rem 0 0;
}
.ck-edit {
  display: inline-block;
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 155, 123, .45);
  padding-bottom: .25rem;
  width: fit-content;
}
.ck-edit:hover { border-bottom-color: var(--bronze); }
.ck-quote {
  margin-top: auto;
  padding-top: 3rem;
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .06em;
  line-height: 1.6;
  opacity: .55;
  max-width: 24rem;
}

/* ---- right: the paper sheet ---- */
.ck-pay {
  position: relative;
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.6rem, 5vw, 5rem);
  background: var(--paper-warm);
}
.ck-tear {
  /* the cart drawer's torn left edge, grown to full page height; hangs
     over the slate so the paper reads as laid on top of it */
  position: absolute;
  top: 0;
  bottom: 0;
  left: -26px;
  width: 40px;
  pointer-events: none;
}
.ck-tear svg { width: 100%; height: 100%; display: block; }
.ck-tear-m { display: none; }
.ck-pay-inner { width: min(540px, 100%); }
.ck-pay h1 {
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1.05;
  margin: .5rem 0 2.2rem;
}
.naplata-state { margin: 1.5rem 0; }
.naplata-state .btn { margin-top: 1.2rem; }
.naplata-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
  margin: 0 0 .45rem;
}
.naplata-email {
  width: 100%;
  padding: .85rem .9rem;
  margin-bottom: 1.3rem;
  border: 1px solid rgba(34, 34, 31, .28);
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: .95rem;
}
.naplata-email:focus { outline: none; border-color: var(--bronze); }
#address-element { margin-bottom: 1.3rem; }
#payment-element { margin-bottom: 1.5rem; }
.naplata-error {
  color: #a04b3c;
  font-size: .9rem;
  margin: 0 0 1rem;
}
.naplata-error[hidden] { display: none; }
.ck-paybtn {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.02rem;
  padding: 1.15rem 2.6rem;
}
.ck-trust {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-align: center;
  opacity: .6;
  margin: 1rem 0 0;
}
.ck-form[hidden] { display: none; }

/* empty cart / hard errors: no order to display, so the slate panel
   would sit there blank - collapse to the paper sheet alone */
.checkout.stateonly { grid-template-columns: 1fr; }
.checkout.stateonly .ck-summary,
.checkout.stateonly .ck-tear { display: none; }

@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
  .ck-summary {
    padding: 1.8rem 1.4rem 3.4rem;
    min-height: 0;
  }
  .ck-brand { margin-bottom: 1.4rem; }
  .ck-brand img { width: 56px; }
  .ck-thumb { height: 58px; }
  .ck-thumb img { max-height: 58px; }
  .ck-quote { display: none; } /* keep the phone summary tight */
  .ck-tear { display: none; }
  .ck-tear-m {
    /* horizontal tear: the paper tears UP over the slate above it */
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 44px;
    transform: scaleY(-1);
    pointer-events: none;
  }
  .ck-tear-m svg { width: 100%; height: 100%; display: block; }
  .ck-pay { padding-top: 3.4rem; }
}