.catalog{padding:3rem 1.5rem}
.catalog-head{text-align:center;margin-bottom:2rem}
.catalog-head h1{font-size:clamp(2.2rem,5vw,3.4rem)}
/* Width fits the longest category blurb in 2 lines; min-height reserves the
   2-line space so the header doesn't jump between categories (incl. empty). */
.catalog-intro{color:var(--text-light);max-width:76ch;margin:.75rem auto 0;
  line-height:1.6;min-height:3.2em}
/* ── Catalog layout: category sidebar + main ── */
.catalog-layout{display:grid;grid-template-columns:200px 1fr;gap:2.5rem;align-items:start}
/* Let both columns shrink below their content so the mobile category scroller
   (.catalog-cats, overflow-x) scrolls instead of widening the page. */
.catalog-layout > *{min-width:0}
.catalog-sidebar{position:sticky;top:130px}
.catalog-sidebar-title{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1rem}
/* Only categories WITH a facet row reserve the extra height so the list lines
   up with the grid; categories without facets keep the heading near the top. */
.catalog-layout.has-facets .catalog-sidebar-title{margin-bottom:1.5rem;min-height:35px;display:flex;align-items:center}
.catalog-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem}
.catalog-cat{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font:inherit;font-size:.98rem;color:var(--text-light);padding:.5rem .8rem;border-radius:9px;
  transition:background .18s,color .18s}
.catalog-cat:hover{background:rgba(201,169,110,.1);color:var(--tea-dark)}
.catalog-cat.is-active{background:var(--gold);color:var(--text);font-weight:600}
.catalog-cat:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── Facet bar (top of main) ── */
.catalog-facets{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;margin-bottom:1.5rem;align-items:center}
/* No facets in this category → no row at all, so products sit at the top. */
.catalog-layout:not(.has-facets) .catalog-facets{display:none}
/* Facets exist → reserve one row so JS-added facets don't shift the grid and
   the sidebar list lines up with it. */
.catalog-layout.has-facets .catalog-facets{min-height:35px}
.facet-group{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem}
.facet-label{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);margin-right:.2rem}
.facet-chip{background:none;cursor:pointer;font:inherit;font-size:.82rem;color:var(--text-light);
  padding:.32rem .8rem;border:1px solid var(--gold-light);border-radius:50px;
  transition:background .18s,color .18s,border-color .18s}
.facet-chip:hover{border-color:var(--gold);color:var(--tea-dark)}
.facet-chip.is-active{background:var(--gold);border-color:var(--gold);color:var(--text);font-weight:600}
.facet-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.catalog-empty{padding:2rem 0;color:var(--text-light);text-align:center}
@media(prefers-reduced-motion:reduce){.catalog-cat,.facet-chip{transition:none}}

/* Mobile: sidebar becomes a horizontal category scroller above the grid */
@media(max-width:768px){
  .catalog-layout{grid-template-columns:1fr;gap:1.5rem}
  .catalog-sidebar{position:static}
  .catalog-sidebar-title{display:none}
  .catalog-cats{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:.5rem;padding-bottom:.4rem;-webkit-overflow-scrolling:touch}
  .catalog-cat{width:auto;white-space:nowrap;border:1px solid var(--gold-light);border-radius:50px;padding:.45rem 1rem}
  .catalog-cat.is-active{border-color:var(--gold)}
}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.75rem}
.product-card{display:block;background:var(--warm-white);border-radius:16px;overflow:hidden;
  border:1px solid var(--gold-light);transition:transform .3s ease,box-shadow .3s ease}
.product-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(61,74,53,.12)}
.product-thumb{position:relative;aspect-ratio:1;overflow:hidden;background:var(--cream)}
.product-thumb img{width:100%;height:100%;object-fit:cover}
.product-card-link{container-type:inline-size}
.product-card-link h3{padding:1rem 1rem 0;font-size:1.2rem;text-wrap:balance}
/* Short titles (<=25 chars) shrink to fit one line on the card too. */
.product-card-link h3.fit-title{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(.82rem, calc(168cqi / var(--tch)), 1.2rem);
}
/* Long titles (past the one-line fit-title cutoff always wrap to 3 lines):
   drop a step and cap at two lines so cards stay even. Short fit-title
   titles keep their size. */
.product-card-link h3:not(.fit-title){
  font-size:1rem;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;
}
.product-region{padding:0 1rem;color:var(--text-light);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.product-price{padding:.4rem 1rem 1.2rem;color:var(--gold);font-weight:600;margin-top:auto}
.product-price .per{color:var(--text-light);font-weight:400;font-size:.85rem}
.product-card.sold-out{opacity:.7}
.product-thumb .badge{position:absolute;top:.8rem;left:.8rem;background:var(--tea-dark);color:var(--cream);
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;border-radius:4px}
.product-thumb .badge-featured{left:auto;right:.8rem;
  background:rgba(253,252,248,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--gold-deep);border:1px solid rgba(201,169,110,.55);
  box-shadow:0 2px 8px rgba(61,74,53,.08);font-weight:600}
@media(max-width:560px){.product-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.product-card-link h3{font-size:1.05rem}
/* 2-up cards are too narrow to fit titles on one line legibly — let them wrap. */
.product-card-link h3.fit-title{white-space:normal;overflow:visible;text-overflow:clip;font-size:1.05rem}
/* Narrow 2-up cards can't fit a long title in two lines without clipping the
   name — let long titles wrap fully here instead of the desktop 2-line clamp. */
.product-card-link h3:not(.fit-title){-webkit-line-clamp:unset;line-clamp:unset;display:block;overflow:visible}}

/* ── Hover-scrub dot indicators (desktop only) ── */
.hover-scrub-dots {
  position: absolute;
  bottom: .55rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .35rem;
  z-index: 3;
  pointer-events: none;
}
.hover-scrub-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(253,252,248,.55);
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.hover-scrub-dot.is-active {
  background: var(--gold);
  transform: scale(1.25);
}
@media (hover: none) {
  .hover-scrub-dots { display: none; }
}

.product-detail{padding:2.5rem 1.5rem 4rem}
.back-link{font-size:.85rem;letter-spacing:.06em;color:var(--text-light)}
.breadcrumbs{margin:0 0 .25rem}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .45rem;margin:0;padding:0;font-size:.8rem}
.breadcrumbs li{display:inline-flex;align-items:center;color:var(--text-light)}
.breadcrumbs li+li::before{content:"/";margin-right:.45rem;color:var(--gold-light)}
.breadcrumbs a{color:var(--text-light);text-decoration:none;transition:color .15s}
.breadcrumbs a:hover{color:var(--gold)}
.breadcrumbs [aria-current="page"]{color:var(--text)}
.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:1.5rem;align-items:start}
/* Let the columns shrink below their content's min size, so the thumbnail
   strip scrolls (overflow-x) instead of widening the whole page on mobile. */
.product-detail-grid > *{min-width:0}
.product-detail-media img{width:100%;border-radius:18px;object-fit:cover}
/* Negative left margin offsets the serif cap's side bearing so the big title
   optically lines up with the meta line above and the body below. */
/* Bottom margin matches .product-meta-top's .8rem so the title sits evenly
   between the meta line above and the description below. */
/* -.4rem top pulls the big serif cap onto the same optical line as the
   "For the best experience" eyebrow in the opposite column */
.product-detail-info h1{font-size:clamp(1.9rem,4.4vw,3rem);margin:-.4rem 0 .8rem;margin-left:-5px;text-wrap:balance}
/* Short titles (<=25 chars, --tch set by Twig) shrink to fit one line: font
   size ≈ column width / char count via container-query units. Longer titles
   keep the rule above and wrap normally. */
.product-detail-info h1.fit-title{
  white-space:nowrap;
  font-size:clamp(1.45rem, calc(185cqi / var(--tch)), 3rem);
}
.product-price-lg{color:var(--gold);font-size:1.5rem;font-weight:600;margin-bottom:1.5rem}
.product-price-lg .per{color:var(--text-light);font-size:1rem;font-weight:400}
.product-body{line-height:1.8;margin-bottom:2rem}
.order-actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn-order{background:var(--gold);color:var(--text);padding:.95rem 2.3rem;border-radius:50px;
  font-weight:600;letter-spacing:.1em;font-size:.82rem;text-transform:uppercase;box-shadow:0 1px 2px rgba(61,74,53,.05);
  transition:letter-spacing .55s var(--ease-silk),transform .55s var(--ease-silk),box-shadow .55s var(--ease-silk),background-color .4s ease}
.btn-order:hover{background-color:var(--gold-deep);transform:translateY(-2px);letter-spacing:.15em;box-shadow:0 14px 34px -10px rgba(201,169,110,.5);color:var(--text)}
.btn-order:active{transform:translateY(-1px)}
.btn-order-secondary{background:transparent;color:var(--tea-dark);border:1px solid var(--tea-green);
  padding:.95rem 2.3rem;border-radius:50px;font-weight:600;letter-spacing:.1em;font-size:.82rem;text-transform:uppercase;
  transition:letter-spacing .55s var(--ease-silk),background-color .45s var(--ease-silk),border-color .45s var(--ease-silk),color .45s var(--ease-silk)}
.btn-order-secondary:hover{background-color:var(--tea-dark);border-color:var(--tea-dark);color:var(--cream);letter-spacing:.15em}
.sold-out-note{color:var(--tea-dark);font-weight:600;border:1px solid var(--gold-light);
  display:inline-block;padding:.7rem 1.4rem;border-radius:8px}
/* Mobile single-column reorder lives later in the file (after the base flex
   rule for .product-detail-media), so it can override display: flex. */

/* ── Product detail: meta/brew blocks ── */
.product-meta-block,
.product-brew-block {
  margin-bottom: 1.5rem;
}

/* ── Taste profile (star-rated traits) ── */
.product-profile-block { margin-bottom: 1.6rem; }
.taste-profile {
  display: grid;
  grid-template-columns: auto auto; /* label | stars, both rows share the columns */
  justify-content: start;
  align-items: center;
  gap: .5rem 1.25rem;
  margin: .2rem 0 0;
}
.taste-row { display: contents; }
.taste-label {
  font-size: .92rem;
  color: var(--text-light);
}
.taste-stars { display: inline-flex; align-items: center; gap: .22rem; margin: 0; }
.taste-star {
  width: 16px; height: 16px;
  flex-shrink: 0;
  fill: var(--gold-light); /* empty */
}
.taste-star.is-on { fill: var(--gold); } /* filled */
.taste-num {
  font-size: .85rem;
  line-height: 1; /* no line box beyond the glyph — keeps flex centering true to the 16px stars */
  color: var(--text-light);
  margin-left: .3rem;
  font-variant-numeric: tabular-nums;
}
/* Wide info column (PC): two trait columns, stars right-aligned within each. */
@container (min-width: 460px) {
  .taste-profile { grid-template-columns: 1fr 1fr; gap: .6rem 2.5rem; }
  .taste-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
  }
}

/* Details moved above the title — acts as a contextual meta line */
.product-meta-top { margin-bottom: .8rem; }
.product-meta-heading {
  font-family: 'Source Sans 3', sans-serif;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: .75rem;
  font-weight: 600;
}
.product-meta-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.5rem;
  margin: 0;
  /* Match the eyebrow heading's line box (~18px) so the Region/Type row lines
     up with "For the best experience" in the opposite column instead of sitting
     a few px lower (its default 1.7 line-height made the row taller). */
  line-height: 1.25;
}
.product-meta-grid .meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
}
.product-meta-grid dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-light);
  font-weight: 500;
}
.product-meta-grid dd {
  font-size: .92rem;
  color: var(--text);
  font-weight: 500;
  margin: 0;
}
.product-meta-grid dd.meta-links a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--gold-light);
  transition: color .15s, border-color .15s;
}
.product-meta-grid dd.meta-links a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ── Brewing heading "?" hint ── */
.product-brew-block .product-meta-heading {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.brew-hint { position: relative; display: inline-flex; }
.brew-hint-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  padding: 0;
  border: none;
  background: none;
  color: var(--gold-deep);
  cursor: help;
  border-radius: 50%;
  transition: color .2s var(--ease-silk), transform .2s var(--ease-silk);
}
/* Invisible 44px hit area around the small "?" for comfortable tapping. */
.brew-hint-btn::after { content: ""; position: absolute; inset: -13px; }
.brew-hint-btn svg { width: 16px; height: 16px; }
.brew-hint-btn:hover,
.brew-hint-btn:focus-visible { color: var(--gold); transform: translateY(-1px); }
.brew-hint-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.brew-hint-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: max-content;
  max-width: 250px;
  padding: .7rem .85rem;
  background: var(--tea-dark);
  color: var(--cream);
  font-family: 'Source Sans 3', sans-serif;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(61, 74, 53, .22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s var(--ease-silk), transform .25s var(--ease-silk), visibility .25s;
  z-index: 20;
}
.brew-hint-pop::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--tea-dark);
}
.brew-hint:hover .brew-hint-pop,
.brew-hint:focus-within .brew-hint-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Narrow screens: anchor to the right edge of the "?" so the bubble can't
   spill off the viewport. */
/* Phones: the bubble can't reliably fit beside a small "?" near the right edge,
   so show it as a bottom snackbar (full width, above the sticky add-to-cart
   bar). Robust to any "?" position or heading length. */
@media (max-width: 560px) {
  .brew-hint-pop {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: auto;
    bottom: calc(94px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    transform: translateY(8px);
  }
  .brew-hint-pop::after { display: none; }
  .brew-hint:hover .brew-hint-pop,
  .brew-hint:focus-within .brew-hint-pop { transform: translateY(0); }
}

/* ── Brewing infographic (icon stat tiles) ── */
/* Tiles adapt to the info COLUMN width (not viewport): 4-up when the column
   is wide, 2-up when narrow — via a container query so the two-column page
   layout and small phones both land cleanly. */
/* Both columns are size containers so the brew tiles / taste profile adapt to
   whichever column they sit in (profile + brewing now live in the left column). */
.product-detail-info,
.product-detail-media { container-type: inline-size; }
/* Left column stacks the gallery and the brewing block with even spacing. */
.product-detail-media { display: flex; flex-direction: column; gap: 1.9rem; }
.product-detail-media > .product-brew-block { margin-bottom: 0; }
/* Mobile: one column in natural reading order. Flatten the left column
   (display: contents) and use order so the info block (name · desc · taste
   profile · order) follows the gallery, with the brewing block last. Info
   keeps its container-type so the buy-row container query still works. */
@media (max-width: 760px) {
  .product-detail-grid { display: flex; flex-direction: column; gap: 1.75rem; align-items: stretch; }
  .product-detail-media { display: contents; }
  .product-detail-media > .product-gallery,
  .product-detail-media > .gallery-placeholder { order: 1; }
  .product-detail-info { order: 2; }
  .product-detail-media > .product-brew-block { order: 3; }
}
.brew-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  margin: 0;
}
@container (min-width: 420px) {
  .brew-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.brew-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .4rem;
  padding: 1rem .55rem .85rem;
  background: var(--warm-white);
  border: 1px solid var(--gold-light);
  border-radius: 14px;
}
.brew-stat-ic {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(201, 169, 110, .13);
  color: var(--gold);
}
.brew-stat-ic svg { width: 21px; height: 21px; }
.brew-stat-value {
  order: 2;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.brew-stat-label {
  order: 3;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 500;
  color: var(--text-light);
}
/* Temperature °C value with a light °F tooltip on hover */
.temp-conv {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--gold-deep);
}
.temp-f {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--tea-dark);
  color: var(--cream);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  padding: .22rem .5rem;
  border-radius: 7px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(61, 74, 53, .22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s var(--ease-silk), transform .18s var(--ease-silk), visibility .18s;
  z-index: 15;
}
.temp-f::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--tea-dark);
}
.temp-conv:hover .temp-f,
.temp-conv:focus-visible .temp-f {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .temp-f { transition: opacity .18s; transform: translateX(-50%); }
}

/* ── Qty stepper on product page ── */
.product-qty-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.product-qty-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-light);
  white-space: nowrap;
}
.pdp-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--gold-light);
  border-radius: 50px;
  overflow: hidden;
}
.pdp-qty-btn {
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}
.pdp-qty-btn:hover { background: var(--gold-light); }
.pdp-qty-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.pdp-qty-input {
  width: 48px;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-left: 1px solid var(--gold-light);
  border-right: 1px solid var(--gold-light);
  padding: .4rem 0;
  background: transparent;
  color: var(--text);
  -moz-appearance: textfield;
  appearance: textfield;
}
.pdp-qty-input::-webkit-outer-spin-button,
.pdp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-qty-input:focus { outline: none; border-color: var(--gold); }

/* ── Sticky add-to-cart bar (mobile only) ── */
.pdp-sticky-bar {
  display: none; /* shown by media query */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cream);
  border-top: 1px solid var(--gold-light);
  padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
  z-index: 100;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 -4px 20px rgba(44,36,22,.1);
}
.pdp-sticky-info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.pdp-sticky-name {
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp-sticky-price {
  font-size: .82rem;
  color: var(--gold);
  font-weight: 600;
}
.pdp-sticky-btn {
  padding: .7rem 1.4rem;
  font-size: .8rem;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 44px;
}
@media (max-width: 768px) {
  .pdp-sticky-bar { display: flex; }
  .product-detail { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
}

/* ── Product variants (packaging form + size selector) ── */
.pdp-variants {
  margin: 0; /* spacing to the buy row comes from the container gap alone */
  flex-basis: 100%; /* own full-width line inside the flex order-controls row */
  /* Two columns: the label column auto-sizes to the widest label (so it works
     in any language), and every row's right side (price / size select) lines
     up at the same x. */
  display: grid;
  /* label column hugs the widest label; right column sizes to content but may
     shrink (so the select narrows instead of overflowing on tiny screens). */
  grid-template-columns: auto minmax(0, auto);
  justify-content: start;
  align-items: center;
  /* row-gap .6rem; column-gap gives the price/size some breathing room from the
     packaging name (applies to both the inline text and the size <select>, so
     they stay aligned). */
  gap: .6rem 1.5rem;
}
.pdp-variants-label {
  grid-column: 1 / -1;       /* heading spans both columns */
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-light);
  margin-bottom: -.1rem;
}
/* The form is just a logical wrapper; its label + right element flow straight
   into the parent grid so they align across rows. */
.pdp-variant-form {
  display: contents;
}
.pvf-radio {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--text);
  /* Match the select row's height so every row is equal-height and the vertical
     gaps between rows are consistent (inline-text rows would otherwise be
     shorter than the row holding the size <select>). */
  min-height: 40px;
}
.pvf-radio input {
  accent-color: var(--gold);
  width: 1.05rem;
  height: 1.05rem;
}
.pvf-name { white-space: nowrap; }
.pvf-inline {
  color: var(--text-light);
  font-weight: 400;
  min-width: 0;
  /* Indent by the size <select>'s inner offset (border 1px + padding .6rem) so
     the first digit of "10 silk…" lines up with the first digit inside the
     select ("100 g…") in the Loose Leaf row. */
  padding-left: calc(.6rem + 1px);
}
/* Silk-pyramid variant: a dotted hint that hovering reveals a photo preview. */
.pvf-inline-preview {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--gold-deep);
}
.pvf-preview {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 180px;
  max-width: 82vw;
  padding: 6px;
  background: var(--cream);
  border: 1px solid var(--gold-light);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(61, 74, 53, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s var(--ease-silk), transform .22s var(--ease-silk), visibility .22s;
  z-index: 30;
  pointer-events: none;
}
.pvf-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
/* The filling preview (silk pyramids, on the right) reads better 50% larger
   than the compact package previews on the left. */
.pvf-inline-preview .pvf-preview { width: 270px; }
.pvf-inline-preview:hover .pvf-preview,
.pvf-inline-preview:focus-within .pvf-preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Package name (left column): hovering the packaging type reveals a photo of
   the package itself (the filling preview stays on the "silk pyramids" text). */
.pvf-name-preview {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--gold-deep);
}
.pvf-name-preview:hover .pvf-preview,
.pvf-name-preview:focus-within .pvf-preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* On the 2-column desktop layout the inline sits toward the right, so anchor
   the preview to the right and let it grow leftward to stay on screen. */
@media (min-width: 761px) {
  .pvf-preview { left: auto; right: 0; }
  /* The package name sits in the left column, so anchor its preview left and
     let it grow rightward instead. */
  .pvf-name-preview .pvf-preview { left: 0; right: auto; }
}
/* Hover preview is a pointer-only nicety: on small/touch layouts drop it
   entirely (it can't be triggered and otherwise widens the page). */
@media (max-width: 760px) {
  .pvf-preview { display: none; }
  .pvf-inline-preview,
  .pvf-name-preview { border-bottom: none; cursor: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  .pvf-preview { transition: opacity .22s; transform: none; }
}
.pvf-size {
  padding: .4rem .6rem;
  border: 1px solid var(--gold-light);
  border-radius: .4rem;
  background: var(--warm-white);
  font-size: 1rem; /* ≥16px avoids iOS Safari auto-zoom on focus */
  color: var(--text);
  cursor: pointer;
  min-height: 40px;
  width: 100%;     /* fill the right column; shrinks with it on small screens */
  min-width: 0;
}
.pvf-size[hidden] {
  display: none;
}
/* Narrow phones: a long label + a content-width select can't share one row, so
   stack each label and its price/select; the select then gets full width. */
@media (max-width: 560px) {
  .pdp-variants { grid-template-columns: 1fr; row-gap: .25rem; }
  .pdp-variant-form + .pdp-variant-form .pvf-radio { margin-top: .7rem; }
}
.price-from {
  font-size: .85em;
  color: var(--text-light);
}

/* ── Touch devices: enlarge small tap targets (catalog/product) ── */
@media (any-pointer: coarse), (max-width: 768px) {
  .facet-chip { min-height: 40px; display: inline-flex; align-items: center; }
  .pvf-radio { min-height: 40px; }
  .pvf-size { min-height: 44px; }
  /* give inline secondary links a taller hit row without changing their look */
  .breadcrumbs a,
  .product-meta-grid dd.meta-links a { padding-block: .35rem; }
  .breadcrumbs ol { gap: .1rem .6rem; }
}

/* Group/badge labels: keep at least 12px even though they're uppercase eyebrows */
.facet-label { font-size: .75rem; }

/* Ingredient auto-links inside product description (server-rendered chips) */
.ingredient-chip { display: inline-block; padding: 0 .45em; border-radius: 999px;
  background: rgba(122,139,110,.12); border: 1px solid rgba(122,139,110,.35);
  color: var(--tea-dark); text-decoration: none; line-height: 1.5; }
.ingredient-chip:hover { border-color: var(--gold); background: rgba(201,169,110,.15); }

/* "Choose options" card link: same pill as add-to-cart, sliders icon instead
   of the bag (same Lucide stroke style, currentColor mask) */
/* buttons default to the browser UI font; pin it on both <button> and <a>
   so the two pills always share one face */
.btn-add-to-cart { font-family: system-ui, sans-serif; line-height: normal; }
/* pin the pill to the card's bottom edge so buttons align across a row even
   when fit-title sizing makes card content heights differ slightly */
.product-card-wrapper .btn-add-to-cart { margin-top: auto; }
a.btn-add-to-cart { text-decoration: none; text-align: center; }
a.btn-add-to-cart::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Topline: breadcrumbs in the left column, region/type meta in the right —
   mirroring the detail grid below, so the meta sits directly above the title */
.pdp-topline { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline;
  gap: .5rem 3rem; margin-bottom: .5rem; }
@media (max-width: 760px) {
.pdp-topline { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
}
.pdp-topline .breadcrumbs { margin: 0; }
/* crumbs share the meta values' face (.92rem / 500) so the row reads as one */
.pdp-topline .breadcrumbs ol { font-size: .92rem; font-weight: 500; }
.pdp-topline-meta { display: flex; gap: 1.5rem; margin: 0; }