/* ============================================================
   BERUNDA — Product pages (Arjuna · Gajendra · Dhrona)
   The crimson velvet ground, nav, footer, brew tiles, format
   toggle, qty and Add come from collection.css +
   collection-modal.css; this sheet adds only what a full page
   needs: breadcrumb, the buy block, the origin band, gallery
   slots and The Other Cups.
   ============================================================ */

/* ---- The velvet ground — the page paints it once, edge to edge ---- */
/* ---- The velvet ground — paint the theme's fixed backdrop layer too
       (parity.css sets a parchment crest letterhead on .col::before) ---- */
.col.pp::before {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bloom, rgba(138, 18, 24, 0.42)), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, var(--ground-2, #3a0508), var(--ground, #2a0206) 46%, var(--ground, #2a0206));
}
.pp {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bloom, rgba(138, 18, 24, 0.42)), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, var(--ground-2, #3a0508), var(--ground, #2a0206) 46%, var(--ground, #2a0206));
  min-height: 100vh;
  /* .col::before (inherited) is a page-wide position:fixed layer with no clip —
     on mobile Safari that reflows/zooms every time the URL bar shows or hides
     (see CLAUDE.md's iOS-safe note + the collection/home fixes for this same
     bug class). clip-path: inset(0) bounds the fixed ::before to THIS box
     instead of the live viewport, which stops the reflow without giving up
     the sticky/parallax hold — the same mechanism already shipped for
     .bf-collection. .pp already has position:relative (via .col) so this is
     the only change needed. */
  clip-path: inset(0);
}

/* ---- Buy block ---- */
.pp-buy { padding: clamp(4px, 0.6vw, 10px) 0 clamp(48px, 5vw, 88px); }

/* ---- Back link ---- */
.pp-back-row { margin-bottom: clamp(4px, 0.5vw, 9px); }
.pp-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 10.5px;
  color: var(--ivory-400);
  text-decoration: none;
  transition: color 0.3s var(--ease-standard);
}
/* the link's own box is 17px tall; an invisible expander reaches 44px without
   padding, which would push the buy grid down. -14px measured 41px in Chrome;
   -15px clears 44 with a pixel to spare. */
.pp-back::before {
  content: "";
  position: absolute;
  inset: -15px 0;
}
.pp-back:hover,
.pp-back:focus-visible { color: var(--gold-300); }
/* colour alone is not a focus indicator */
.pp-back:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 4px; }
.pp-back-arrow {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.3s var(--ease-standard);
}
.pp-back:hover .pp-back-arrow,
.pp-back:focus-visible .pp-back-arrow { transform: translateX(-3px); }
.pp-buy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(28px, 4.4vw, 72px);
  align-items: start;
}

.pp-figure { position: sticky; top: calc(75px + clamp(4px, 0.6vw, 10px)); }
.pp-figure-slot {
  position: relative;
  aspect-ratio: 4 / 4.4;
  overflow: hidden;
  background: linear-gradient(180deg, #1c0205, #140103);
  border: 1px solid var(--hair);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(239, 217, 166, 0.08);
}
.pp-figure-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- Detail column ---- */
.pp-detail { display: flex; flex-direction: column; align-items: flex-start; }
.pp-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ivory-100, #f4ecdc);
  font-size: clamp(42px, 4.6vw, 66px);
  line-height: 1.0;
  letter-spacing: 0.015em;
  margin: 10px 0 0;
  text-wrap: balance;
}
.pp-price { margin: 14px 0 0; }
.pp-price .col-modal-price-value {
  font-size: clamp(28px, 2.8vw, 38px);
  letter-spacing: 0.03em;
}

/* ---- Buy-column rhythm ----
   Eight blocks stack here: identity, format, prose, cue, specs, brew, buy,
   hint. They used to sit 6–22px apart, near enough uniform that nothing
   grouped and the whole column read as one dense list. The separators between
   decisions are now clearly larger than the gaps inside one, so the eye can
   chunk it: choose a format → read → check the specs → choose a brew → buy. */
.pp-block {
  width: 100%;
  margin-top: clamp(22px, 3.2vh, 38px);
  padding-top: clamp(14px, 2vh, 26px);
  border-top: 1px solid var(--hair);
}
.pp-detail .col-modal-formats { margin-top: clamp(20px, 3vh, 34px); }
.pp-detail .col-modal-desc { margin-top: clamp(16px, 2.4vh, 28px); }

.pp-specs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px clamp(16px, 2vw, 28px);
}
.pp-spec dt {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  /* was 9px — the tightest-tracked label on the page, and mobile already
     rendered it at 11px, so desktop was the outlier */
  font-size: 10.5px;
  color: var(--ivory-400);
}
.pp-spec dd {
  margin: 3px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--ivory-100, #f4ecdc);
  letter-spacing: 0.015em;
}

.pp-detail .col-brewstep { width: 100%; padding-top: clamp(14px, 2vh, 26px); border-top: 1px solid var(--hair); }
/* the primary action gets the widest separator on the column */
.pp-detail .col-modal-buy { width: 100%; margin-top: clamp(24px, 3.6vh, 42px); }

/* Drip bag variants are a plain selector and only appear while the Drip
   format is active. Shopify supplies the available bag counts and prices. */
.pp-drip-bags {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300, #e3bd6e);
}
.pp-drip-bags[hidden] { display: none; }
.pp-drip-bags select {
  min-height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: #210307;
  color: var(--ivory-100, #f4ecdc);
  font: inherit;
  letter-spacing: 0.08em;
}
.pp-drip-bags select:focus-visible { outline: 2px solid var(--gold-300, #e3bd6e); outline-offset: 2px; }

/* ---- Head row — name and price at left, the pair offer boxed beside them ---- */
.pp-head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(18px, 2.4vw, 34px);
}
.pp-head-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1 1 auto; }
.pp-head .pp-name { font-size: clamp(34px, 3.4vw, 62px); overflow-wrap: anywhere; max-width: 100%; }

/* ---- Pair offer — a boxed consumer CTA at the right of name + price ---- */
.pp-head #pp-deal {
  flex: 0 0 auto;
  width: clamp(166px, 15vw, 206px);
  max-width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 5px;
  margin: 10px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--gold-500, #c6871b);
  border-radius: 3px;
  background:
    radial-gradient(140% 200% at 0% 0%, rgba(227, 189, 110, 0.15), rgba(227, 189, 110, 0) 58%),
    linear-gradient(180deg, rgba(30, 10, 6, 0.9), rgba(20, 4, 6, 0.94));
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(239, 217, 166, 0.1);
}
.pp-head #pp-deal:hover,
.pp-head #pp-deal:focus-visible {
  border-color: var(--gold-300, #e3bd6e);
  background:
    radial-gradient(140% 200% at 0% 0%, rgba(227, 189, 110, 0.24), rgba(227, 189, 110, 0) 58%),
    linear-gradient(180deg, rgba(38, 14, 8, 0.94), rgba(24, 6, 8, 0.96));
  transform: translateY(-1px);
}
.pp-deal-head {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 9.5px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--gold-300, #e3bd6e);
}
.pp-deal-sub {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  color: var(--ivory-100, #f4ecdc);
}
.pp-deal-sub s { color: var(--ivory-500, #a89a7c); opacity: 0.6; font-size: 14px; }
.pp-deal-sub strong { font-weight: 700; font-size: clamp(17px, 1.5vw, 21px); color: var(--gold-200, #efd9a6); }
.pp-deal-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 11px;
  border-radius: 2px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ground, #2a0206);
  background: linear-gradient(180deg, var(--gold-300, #e3bd6e), var(--gold-500, #c6871b));
}
.pp-deal-arrow { transition: transform 0.35s var(--ease-standard, ease); }
.pp-head #pp-deal:hover .pp-deal-arrow,
.pp-head #pp-deal:focus-visible .pp-deal-arrow { transform: translateX(3px); }
@media (max-width: 560px) {
  .pp-head { flex-direction: column; gap: 0; }
  .pp-head #pp-deal { width: 100%; margin-top: clamp(18px, 2.4vh, 24px); }
}

/* the plain-words gate hint */
.pp-hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ivory-400);
  margin: 10px 0 0;
}
.pp-hint.is-urgent {
  color: var(--gold-200, #efd9a6);
  animation: pp-hint-nudge 0.5s var(--ease-standard);
}
@keyframes pp-hint-nudge {
  0%, 100% { transform: none; }
  25% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
}

/* ---- More from the Collection ---- */
.pp-others { padding: clamp(56px, 6vw, 96px) 0 clamp(64px, 7vw, 110px); }
.pp-others-head { text-align: center; }
.pp-others-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ivory-100, #f4ecdc);
  font-size: clamp(26px, 2.6vw, 38px);
  letter-spacing: 0.015em;
  margin: 0;
}
.pp-others-grid {
  display: flex; /* horizontal scroll row — add products, row just extends */
  overflow-x: auto;
  justify-content: center; /* centered while few; scrolls once row overflows */
  gap: clamp(16px, 1.8vw, 26px);
  max-width: 920px;
  margin: clamp(28px, 3.4vw, 48px) auto 0;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(198, 135, 27, 0.35) transparent;
}
/* shorter frame than the collection mosaic — these are a footnote, not the shelf */
.pp-others-grid .col-card-figure { aspect-ratio: 1 / 1; }
.pp-more-card { flex: 0 0 clamp(180px, 22vw, 240px); scroll-snap-align: center; box-shadow: none; }
.pp-more-card:hover, .pp-more-card:focus-visible { box-shadow: 0 0 0 1px rgba(214, 162, 63, 0.16); }

/* ---- Responsive ---- */
@media (max-width: 940px) {
  .pp-buy-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-figure { position: static; }
}
@media (max-width: 640px) {
  .pp-others-grid { max-width: none; justify-content: flex-start; padding-inline: 24px; }
}

/* ---- Read-on cue — tells the buyer the story continues below ---- */
.pp-cue {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin-top: clamp(4px, 0.8vh, 10px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(227, 189, 110, 0.42);
  padding-bottom: 5px;
  transition: color 0.28s ease, border-color 0.28s ease;
}
.pp-cue:hover, .pp-cue:focus-visible { color: var(--gold-200); border-bottom-color: var(--gold-200); }
.pp-cue:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 4px; }
/* 23px tall including its rule; padding would move the border-bottom that makes
   it read as a link, so the hit box grows through an invisible expander */
.pp-cue::before {
  content: "";
  position: absolute;
  inset: -11px 0;
}
@media (max-width: 680px) { .pp-cue { margin-top: 12px; font-size: 10px; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }



/* ============================================================
   parity — format toggle, brew step, pair offer, buy row
   ============================================================ */
/* ============ POPUP — three formats, whole beans default ============ */
/* 2-part tab labels (name + size): desktop inline with an interpunct */
.col-modal-format { display: inline-flex; align-items: baseline; gap: 4px; }
.col-modal-format[hidden] { display: none; }
.col-modal-format-size::before { content: "· "; }
.col-modal-formats[hidden] { display: none; }

/* Mobile: full-width segmented control — equal tabs, name over a small
   size line, so no single option stretches into a long odd-looking bar. */
@media (max-width: 560px) {
  .col-modal-formats { display: flex; width: 100%; border-radius: 18px; }
  .col-modal-format {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 8px;
    border-radius: 13px;
    font-size: 10.5px;
    letter-spacing: 0.09em;
  }
  .col-modal-format[hidden] { display: none; }
  .col-modal-format-name { white-space: nowrap; }
  .col-modal-format-size { font-size: 10px; letter-spacing: 0.12em; opacity: 0.78; }
  .col-modal-format-size::before { content: none; }
  .col-modal-format[aria-checked="true"] .col-modal-format-size { opacity: 0.85; }
}

/* ---- fixed-brew row (Dhrona): one pre-set tile, not clickable ---- */
.col-brewrow[hidden] { display: none; }
.col-brewrow--fixed { grid-template-columns: repeat(3, 1fr); pointer-events: none; }
.col-brewrow--fixed .col-brewtile-sq { cursor: default; }

/* ---- drip pair offer (a real button: one click adds the pair) ---- */
.col-modal-deal {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  width: fit-content;
  max-width: 100%;
  margin: clamp(20px, 2.6vh, 30px) 0 0;
  padding: 12px 16px;
  border: 1px solid var(--gold-500, #c6871b);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(227, 189, 110, 0.14), rgba(227, 189, 110, 0.04));
  transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
}
.col-modal-deal:hover,
.col-modal-deal:focus-visible {
  border-color: var(--gold-300, #e3bd6e);
  background: linear-gradient(180deg, rgba(227, 189, 110, 0.22), rgba(227, 189, 110, 0.08));
  transform: translateY(-1px);
}
.col-modal-deal:focus-visible { outline: 1px solid var(--gold-300, #e3bd6e); outline-offset: 3px; }
.col-modal-deal[hidden] { display: none; }

/* ---- brew-step head: swappable label ---- */
.col-brewstep-sub { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.col-brewstep-req[hidden] { display: none; }

/* ---- pinned buy row: price/qty/Add sit at the same spot in every view ---- */
.col-modal-buy { margin-top: auto; }
.col-modal-deal:not([hidden]) { margin-top: auto; }
.col-modal-deal:not([hidden]) ~ .col-modal-buy { margin-top: clamp(24px, 3vh, 34px); }
@media (max-width: 560px) {
  .col-modal-buy { margin-top: clamp(28px, 3.6vh, 40px); }
  .col-modal-deal:not([hidden]) { margin-top: clamp(20px, 2.6vh, 30px); }
  .col-modal-deal:not([hidden]) ~ .col-modal-buy { margin-top: clamp(28px, 3.6vh, 40px); }
}



/* ============================================================
   mobile (≤680px) — product page + sticky buy bar
   ============================================================ */
@media (max-width: 680px) {
  /* ---------------- Product page (pp) ---------------- */
  .pp-name { font-size: 34px; }
  .pp-price .col-modal-price-value { font-size: 23px; }
  .col-modal-format { min-height: 50px; font-size: 11px; letter-spacing: 0.1em; }
  .col-modal-desc { font-size: 17px; line-height: 1.6; }
  .col-modal-sub { font-size: 11px; }
  .pp-spec dt { font-size: 11px; }
  .pp-spec dd { font-size: 15.5px; }
  .col-brewtile-name { font-size: 12px; letter-spacing: 0.12em; }
  .col-brewguide-btn { min-height: 44px; }
  .col-qty-btn { width: 44px; height: 44px; }
  .col-add { min-height: 52px; white-space: nowrap; }
  .col-add span { font-size: 12.5px; letter-spacing: 0.18em; }
  .pp-hint { font-size: 14px; }
  html.m-has-buybar .pp { padding-bottom: 76px; }

  /* Required-brew pulse (mobile.js adds .m-pulse when Add is gated) */
  @keyframes m-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 162, 63, 0); } 40% { box-shadow: 0 0 0 3px rgba(214, 162, 63, 0.55); } }
  .col-brewstep.m-pulse { animation: m-pulse 0.9s ease 2; border-radius: 4px; }

  /* Sticky buy bar (mobile.js injects .m-buybar on PDPs) */
  .m-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 59; display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(28, 4, 8, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(198, 135, 27, 0.35); transform: translateY(104%); transition: transform 0.45s var(--ease-entrance, ease); }
  .m-buybar.is-show { transform: none; }
  .m-buybar-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .m-buybar-name { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-300, #e3bd6e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-buybar-price { font-family: var(--font-body); font-size: 16px; color: var(--ivory-300, #e9ddc6); }
  .m-buybar-add { flex: none; min-height: 46px; padding: 0 24px; border: none; border-top: 1.5px solid #d8a648; cursor: pointer; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #1e1206; background-color: #b27617; background-image: linear-gradient(180deg, rgba(255, 233, 172, 0.5) 0%, rgba(255, 233, 172, 0) 50%), linear-gradient(102deg, #b67c1c 0%, #d7a23e 30%, #c88f27 56%, #aa6e15 100%); box-shadow: inset 0 1px 0 rgba(255, 240, 202, 0.5); }
  .m-buybar-add:active { transform: scale(0.97); }

  /* "More from the Collection" — snapping shelf with a visible peek */
  .pp-others-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-inline: 24px 44px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pp-others-grid::-webkit-scrollbar { display: none; }
  .pp-others-grid .pp-more-card { flex: 0 0 68vw; max-width: 270px; scroll-snap-align: center; }
  .pp-others-title { font-size: 26px; }
}