/** Shopify CDN: Minification failed

Line 1979:0 Unexpected "}"

**/
/* ═══════════════════════════════════════════════════════════════════════
   PERCUP PDP v2 — direct port of Version 4.0 mockup.
   Single class family (.pdp2-*) with @media breakpoint for mobile.
   All rules scoped under .pdp2-root so Dawn theme CSS can't bleed in.
   ═══════════════════════════════════════════════════════════════════════ */

.pdp2-root {
  /* PRODUCT-INFO is an unknown custom element → browser defaults to
     display: inline. That makes any descendant position: sticky child
     anchor to an inline containing block and misbehave on long scrolls.
     Force block so .pdp2-sticky sticks within the full PDP. */
  display: block;
  --pdp2-red:        #902921;
  --pdp2-red-dk:     #6F1D17;
  --pdp2-red-lt:     #F7ECEA;
  --pdp2-caramel:    #CDA881;
  --pdp2-cream:      #F2EEE0;
  --pdp2-cream-mid:  #E8E2D0;
  --pdp2-cream-dk:   #D6CEB8;
  --pdp2-cream-light:#FBF8EE;
  --pdp2-choc:       #3B2621;
  --pdp2-dark:       #1C1613;
  --pdp2-stone:      #6F6354;
  --pdp2-stone-lt:   #9A8C75;
  --pdp2-white:      #FFFFFF;
  --pdp2-fd:         'Degular', 'DM Sans', Georgia, serif;
  --pdp2-fb:         'DM Sans', system-ui, sans-serif;
  --pdp2-ease:       cubic-bezier(.2,.7,.2,1);

  font-family: var(--pdp2-fb);
  font-weight: 400;
  line-height: 1.55;
  color: var(--pdp2-dark);
  -webkit-font-smoothing: antialiased;
}

.pdp2-root *,
.pdp2-root *::before,
.pdp2-root *::after {
  box-sizing: border-box;
}

/* Hide Dawn's original rendering of the product section and any classless
   fallbacks that might leak through while our new section renders. */
.pdp2-root .product__info-container,
.pdp2-root .product__info-wrapper,
.pdp2-root .product__media-wrapper { display: contents; }

/* ── HEADER "PILL" — always visible on product pages ──
   base.css strips the header shadow and the logo's drop-shadow while
   body-start is present (top of page, no scroll). Re-apply them on
   product pages so the scrolled-state pill + soft shadow shows from
   page load. We DO NOT re-apply the bottom border — the drop-shadow
   provides separation and the border would read as a harsh dark line
   under the cutout. Scoped to body.product so only PDPs are affected. */
body.product.body-start .shopify-section-header-sticky {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
}
body.product.body-start .header-wrapper--border-bottom {
  border-bottom: 0 !important;
}
body.product.body-start .header__heading-logo-wrapper img {
  filter: drop-shadow(2px 8px 3px rgba(0, 0, 0, 0.1)) !important;
}

/* ── STICKY MINI-CART BAR ───────────────────────────────────────────── */
.pdp2-sticky {
  background: var(--pdp2-white);
  border-top: 0;
  border-bottom: 1px solid var(--pdp2-cream-dk);
  padding: 10px 40px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: sticky;
  top: var(--pdp2-header-offset, 0);
  z-index: 90;
}
.pdp2-sticky__thumb {
  width: 40px; height: 40px;
  border-radius: 3px;
  overflow: hidden;
  border: 0.5px solid var(--pdp2-cream-dk);
  flex-shrink: 0;
  background: var(--pdp2-cream-mid);
}
.pdp2-sticky__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp2-sticky__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pdp2-sticky__name {
  font-family: var(--pdp2-fd); font-size: 14px; color: var(--pdp2-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdp2-sticky__sub { font-size: 10px; color: var(--pdp2-stone); }
.pdp2-sticky__price-col { margin-left: auto; text-align: right; flex-shrink: 0; }
.pdp2-sticky__price { font-family: var(--pdp2-fd); font-size: 17px; color: var(--pdp2-dark); }
.pdp2-sticky__lbl { font-size: 9px; color: var(--pdp2-red); }
.pdp2-sticky__cta {
  background: var(--pdp2-red);
  color: var(--pdp2-white);
  border: none;
  padding: 10px 22px;
  font-size: 11px;
  letter-spacing: 0.08em;
  border-radius: 11px;
  cursor: pointer;
  font-family: var(--pdp2-fb);
  font-weight: 600;
  transition: background 160ms var(--pdp2-ease);
}
.pdp2-sticky__cta:hover { background: var(--pdp2-red-dk); }

/* ── BREADCRUMB ─────────────────────────────────────────────────────── */
.pdp2-crumbs {
  background: var(--pdp2-white);
  padding: 14px 40px;
  font-size: 11px;
  color: var(--pdp2-red);
  letter-spacing: 0.04em;
  border-bottom: 0.5px solid var(--pdp2-cream-dk);
}
.pdp2-crumbs a { color: var(--pdp2-red); text-decoration: none; }
.pdp2-crumbs a:hover { text-decoration: underline; }
.pdp2-crumbs span.sep { margin: 0 6px; font-size: 10px; opacity: 0.6; }
.pdp2-crumbs .current { font-weight: 500; color: var(--pdp2-dark); }

/* ── PDP GRID ───────────────────────────────────────────────────────── */
.pdp2-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--pdp2-white);
  min-height: 700px;
  position: relative;
}
/* Vertical divider lives on the grid container as a pseudo-element so it
   spans the full grid row height — not truncated by either column's
   intrinsic content height. */
.pdp2-pdp::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--pdp2-cream-dk);
  pointer-events: none;
}
/* min-width:0 on grid children stops them from stretching to fit their
   widest descendant (a long horizontal scroll row blows the column out
   to its full scroll-width otherwise). */
.pdp2-pdp > * { min-width: 0; }

/* ── IMAGE COLUMN ───────────────────────────────────────────────────── */
/* Outer column stretches to full grid-row height (grid's default
   align-items: stretch). The inner wrapper does the sticky work, so the
   column acts as a full-height visual container while the image stays
   pinned as the user scrolls. */
.pdp2-img-col {
  background: transparent;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  border-top: 1px solid var(--pdp2-cream-dk);
  border-bottom: 1px solid var(--pdp2-cream-dk);
  border-left: 1px solid var(--pdp2-cream-dk);
}
.pdp2-img-col__sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 24px 32px;
}
.pdp2-img-badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  background: var(--pdp2-red);
  color: var(--pdp2-white);
  font-size: 9px;
  padding: 5px 10px;
  border-radius: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
  white-space: nowrap;
}
.pdp2-img-discount {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  background: var(--pdp2-red);
  color: var(--pdp2-white);
  font-size: 9px;
  padding: 5px 10px;
  border-radius: 11px;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
}
.pdp2-img-main-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  /* Lock aspect so swapping between images of different aspect ratios
     doesn't cause a visible layout shift. Images are contained inside. */
  aspect-ratio: 1 / 1;
  border-radius: 11px !important;
  overflow: hidden !important;
  background: var(--pdp2-cream-light);
  border: 0.5px solid var(--pdp2-cream-dk);
}
.pdp2-img-main {
  width: 100%;
  height: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 auto;
  padding: 0;
  border-radius: 11px !important;
  overflow: hidden !important;
}
.pdp2-img-main img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover;
  border-radius: 11px !important;
  display: block;
}
@media (max-width: 899px) {
  .pdp2-img-main { padding: 0 !important; }
}
.pdp2-img-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--pdp2-red);
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: color 160ms var(--pdp2-ease), transform 160ms var(--pdp2-ease);
}
.pdp2-img-arrow svg { width: 14px; height: 22px; }
.pdp2-img-arrow:hover { color: var(--pdp2-red-dk); transform: translateY(-50%) scale(1.1); }
.pdp2-img-arrow:focus-visible { outline: 2px solid var(--pdp2-red); outline-offset: 4px; border-radius: 2px; }
.pdp2-img-arrow--prev { left: 0; }
.pdp2-img-arrow--next { right: 0; }
@media (max-width: 899px) {
  .pdp2-img-arrow { width: 36px; height: 36px; }
  .pdp2-img-arrow svg { width: 12px; height: 18px; }
}
.pdp2-img-main img { max-width: 100%; max-height: 100%; object-fit: cover; border-radius: 11px !important; transition: opacity 180ms cubic-bezier(.2,.7,.2,1), transform 260ms cubic-bezier(.2,.7,.2,1); backface-visibility: hidden; }
.pdp2-img-dots { display: flex; gap: 7px; margin-top: 18px; }
.pdp2-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pdp2-cream-dk);
  cursor: pointer;
  transition: all 0.2s;
  border: none; padding: 0;
}
.pdp2-dot.on { background: var(--pdp2-red); width: 20px; border-radius: 4px; }
.pdp2-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.pdp2-thumb {
  width: 56px; height: 56px;
  border-radius: 11px;
  overflow: hidden;
  border: 1.5px solid transparent;
  cursor: pointer;
  background: var(--pdp2-cream-mid);
  transition: border-color 0.15s;
  padding: 0;
}
.pdp2-thumb.on { border-color: var(--pdp2-red); }
.pdp2-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ── INFO COLUMN ────────────────────────────────────────────────────── */
.pdp2-info {
  padding: 32px 40px 28px;
  display: flex;
  flex-direction: column;
  background: var(--pdp2-white);
  /* Center divider is on .pdp2-pdp::after; the info column gets its own
     top/right/bottom so both columns have matching bordered frames. */
  border-top: 1px solid var(--pdp2-cream-dk);
  border-right: 1px solid var(--pdp2-cream-dk);
  border-bottom: 1px solid var(--pdp2-cream-dk);
}
.pdp2-brand {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--pdp2-red);
  text-transform: uppercase;
  margin: 0 0 5px;
  font-weight: 500;
}
.pdp2-brand__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s var(--pdp2-ease);
}
.pdp2-brand__link:hover { color: var(--pdp2-red-dk); }
.pdp2-title {
  font-family: var(--pdp2-fd);
  font-size: 28px;
  font-weight: 500;
  color: var(--pdp2-dark);
  line-height: 1.15;
  margin: 0 0 3px;
}
.pdp2-subtitle {
  font-family: var(--pdp2-fd);
  font-style: italic;
  font-size: 14px;
  color: var(--pdp2-stone);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdp2-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.pdp2-stars { display: flex; gap: 3px; }
.pdp2-star { width: 14px; height: 14px; }
.pdp2-star path { fill: none; stroke: var(--pdp2-red); stroke-width: 1.2; }
.pdp2-star.filled path { fill: var(--pdp2-red); }
.pdp2-rating__text { font-size: 12px; color: var(--pdp2-stone); }
.pdp2-rating__link {
  font-size: 11px; color: var(--pdp2-red);
  text-decoration: underline; cursor: pointer;
  background: none; border: none; padding: 0; font-family: inherit;
}
.pdp2-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.pdp2-price { font-family: var(--pdp2-fd); font-size: 26px; color: var(--pdp2-red); font-weight: 500; }
.pdp2-price--regular { color: var(--pdp2-dark); }
.pdp2-price-compare { font-size: 16px; color: var(--pdp2-stone-lt); text-decoration: line-through; }
.pdp2-weight { font-size: 12px; color: var(--pdp2-stone); }
.pdp2-loyalty {
  font-size: 11px; color: var(--pdp2-stone);
  margin: 0 0 16px;
}
.pdp2-loyalty span { color: var(--pdp2-red); }

/* ── PROOF TILES ────────────────────────────────────────────────────── */
.pdp2-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 18px;
}
.pdp2-proof--3 { grid-template-columns: repeat(3, 1fr); }
.pdp2-proof--2 { grid-template-columns: repeat(2, 1fr); }
.pdp2-tile {
  background: var(--pdp2-cream-light);
  background-image: linear-gradient(#fbfaf6, #fbfaf6) !important;
  background-color: transparent !important;
  border: 0.5px solid #EBE4D0;
  border-radius: 11px;
  padding: 10px 5px;
  text-align: center;
}
.pdp2-tile svg {
  display: block;
  margin: 0 auto 5px;
  width: 22px; height: 22px;
  color: var(--pdp2-red);
}
.pdp2-tile-lbl { font-size: 12.5px; color: var(--pdp2-dark); line-height: 1.3; font-weight: 500; }
.pdp2-tile-sub { font-size: 10px; color: var(--pdp2-stone); margin-top: 2px; }

/* ── DIVIDER ────────────────────────────────────────────────────────── */
.pdp2-divider { border: none; border-top: 0.5px solid var(--pdp2-cream-dk); margin: 0 0 16px; }

/* ── PURCHASE OPTIONS ──────────────────────────────────────────────── */
.pdp2-pur-options { display: grid; gap: 8px; margin-bottom: 14px; }
.pdp2-pur-opt {
  border: 1.5px solid var(--pdp2-cream-dk);
  border-radius: 11px;
  padding: 14px 14px;
  min-height: 62px;
  cursor: pointer;
  transition: all 0.15s var(--pdp2-ease);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pdp2-white);
  margin: 0;
  box-sizing: border-box;
}
.pdp2-pur-opt:has(input:checked),
.pdp2-pur-opt.on {
  border-color: var(--pdp2-red);
  background: var(--pdp2-red-lt);
}
.pdp2-pur-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.pdp2-radio {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--pdp2-cream-dk);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s;
}
.pdp2-pur-opt:has(input:checked) .pdp2-radio,
.pdp2-pur-opt.on .pdp2-radio {
  border-color: var(--pdp2-red);
}
.pdp2-radio::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pdp2-red);
  opacity: 0;
  transition: opacity 0.15s;
}
.pdp2-pur-opt:has(input:checked) .pdp2-radio::after,
.pdp2-pur-opt.on .pdp2-radio::after {
  opacity: 1;
}
.pdp2-pur-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.pdp2-pur-name { font-size: 13px; color: var(--pdp2-dark); font-weight: 500; white-space: nowrap; }
.pdp2-save-tag { flex-shrink: 0; }
.pdp2-pur-opt:has(input:checked) .pdp2-pur-name,
.pdp2-pur-opt.on .pdp2-pur-name { color: var(--pdp2-red); }
.pdp2-pur-price-col { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pdp2-pur-price { font-size: 14px; color: var(--pdp2-red); font-weight: 500; }
.pdp2-pur-strike { text-decoration: line-through; color: var(--pdp2-stone-lt); font-size: 11px; }
.pdp2-save-tag {
  background: var(--pdp2-red);
  color: var(--pdp2-white);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ── SUBSCRIBE GROUP (radio + sub-box, visually stitched) ─────────── */
.pdp2-sub-group {
  border: 1.5px solid var(--pdp2-cream-dk);
  border-radius: 11px;
  overflow: hidden;
  transition: border-color 0.15s var(--pdp2-ease);
  background: var(--pdp2-white);
}
.pdp2-sub-group:has(.pdp2-pur-opt.on),
.pdp2-sub-group:has(input:checked) {
  border-color: var(--pdp2-red);
}
.pdp2-sub-group .pdp2-pur-opt--sub {
  border: none;
  border-radius: 0;
  margin: 0;
  background: var(--pdp2-white);
}
.pdp2-sub-group .pdp2-pur-opt--sub.on,
.pdp2-sub-group .pdp2-pur-opt--sub:has(input:checked) {
  background: var(--pdp2-red-lt);
  border: none;
}
.pdp2-sub-group .pdp2-pur-opt--sub + .pdp2-sub-box {
  border-top: 0.5px solid var(--pdp2-cream-dk);
}

/* ── SUBSCRIBE SUB-BOX ─────────────────────────────────────────────── */
.pdp2-sub-box {
  background: var(--pdp2-cream-light);
  background-image: linear-gradient(#fbfaf6, #fbfaf6) !important;
  background-color: transparent !important;
  border: 0.5px solid #EBE4D0;
  border-radius: 11px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.pdp2-sub-group .pdp2-sub-box {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}
.pdp2-freq-lbl { font-size: 11px; color: var(--pdp2-stone); margin-bottom: 16px; margin-top: 4px; }
.pdp2-freq-opts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pdp2-freq-btn {
  padding: 6px 12px;
  font-size: 11px;
  border: 1px solid var(--pdp2-cream-dk);
  border-radius: 11px;
  background: var(--pdp2-white);
  color: var(--pdp2-stone);
  cursor: pointer;
  font-family: var(--pdp2-fb);
  position: relative;
  margin-top: 10px;
  transition: all 0.15s var(--pdp2-ease);
  font-weight: 500;
  min-width: 90px;
  text-align: center;
}
.pdp2-freq-btn.on {
  border-color: var(--pdp2-red);
  color: var(--pdp2-red);
  background: var(--pdp2-red-lt);
  font-weight: 600;
}
.pdp2-freq-rec {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  background: var(--pdp2-red);
  color: var(--pdp2-white);
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pdp2-freq-rec--daily { background: var(--pdp2-stone-lt); }

.pdp2-ben { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.pdp2-ben:last-child { margin-bottom: 0; }
.pdp2-ben svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--pdp2-red);
}
.pdp2-ben-text { font-size: 11.5px; color: var(--pdp2-dark); line-height: 1.4; }
.pdp2-ben-text em {
  color: var(--pdp2-red);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pdp2-ben-sub { display: block; font-size: 10px; color: var(--pdp2-stone); margin-top: 1px; }

.pdp2-price-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--pdp2-red-lt);
  border-radius: 11px;
  padding: 10px 14px;
  margin-top: 14px;
}
.pdp2-pp-lbl { font-size: 11px; color: var(--pdp2-stone); }
.pdp2-pp-freq { font-size: 10px; color: var(--pdp2-red); margin-top: 1px; }
.pdp2-pp-price { font-family: var(--pdp2-fd); font-size: 20px; color: var(--pdp2-dark); font-weight: 500; }
.pdp2-pp-save { font-size: 10px; color: var(--pdp2-red); text-align: right; margin-top: 1px; }

/* ── VARIANT SELECTOR ───────────────────────────────────────────────── */
.pdp2-variants { margin-bottom: 14px; }
.pdp2-variant-row { margin-bottom: 10px; }
.pdp2-variant-selected {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pdp2-dark);
  font-weight: 500;
  margin-left: 4px;
}
.pdp2-select--swatch-shadow {
  /* Hidden helper that backs the visible swatches. Must NOT contribute any
     size to layout — without !important the base `.pdp2-select { width:100% }`
     rule wins and the select renders ~1440px wide, blowing out the page
     and creating horizontal scroll on mobile. */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Color swatches */
.pdp2-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.pdp2-swatch {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--pdp2-cream-dk);
  background-color: var(--pdp2-swatch-color, #d8d2c4);
  background-image: var(--pdp2-swatch-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  padding: 0;
  position: relative;
  outline: none;
  transition: box-shadow 160ms var(--pdp2-ease), transform 160ms var(--pdp2-ease);
}
.pdp2-swatch:hover { transform: scale(1.04); }
.pdp2-swatch--on {
  /* Inner white ring then outer red ring — matches old PDP color picker. */
  box-shadow: 0 0 0 2px var(--pdp2-bg, #fff), 0 0 0 4px var(--pdp2-red);
}
.pdp2-swatch--soldout { opacity: 0.55; }
.pdp2-swatch--soldout::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--pdp2-stone) 50%, transparent calc(50% + 1px));
  border-radius: 50%;
  pointer-events: none;
}
.pdp2-variant-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pdp2-stone);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.pdp2-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--pdp2-cream-dk);
  border-radius: 6px;
  background: var(--pdp2-white);
  padding: 12px 38px 12px 16px;
  font-family: var(--pdp2-fb);
  font-size: 14px;
  color: var(--pdp2-dark);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23902921' stroke-width='1.3' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  cursor: pointer;
  transition: border-color 160ms var(--pdp2-ease);
}
.pdp2-select:hover { border-color: var(--pdp2-stone-lt); }
.pdp2-select:focus {
  outline: none;
  border-color: var(--pdp2-red);
  box-shadow: 0 0 0 3px rgba(144, 41, 33, 0.1);
}

/* Coffee type selector (pill row) */
.pdp2-coffee-types { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pdp2-coffee-type {
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--pdp2-cream-dk);
  border-radius: 3px;
  background: var(--pdp2-white);
  color: var(--pdp2-stone);
  cursor: pointer;
  text-decoration: none;
}
.pdp2-coffee-type.on {
  border-color: var(--pdp2-red);
  background: var(--pdp2-red-lt);
  color: var(--pdp2-red);
}

/* ── ACTION ROW (qty + ATC) ────────────────────────────────────────── */
.pdp2-action-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 8px;
  min-height: 52px;
}
.pdp2-qty {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--pdp2-cream-dk);
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  height: 52px;
  box-sizing: border-box;
}
.pdp2-q-btn {
  width: 40px; height: 100%;
  background: transparent;
  border: none;
  color: var(--pdp2-dark);
  font-size: 18px;
  cursor: pointer;
  transition: background 160ms var(--pdp2-ease);
  flex-shrink: 0;
  padding: 0;
}
.pdp2-q-btn:hover { background: rgba(144, 41, 33, 0.08); color: var(--pdp2-red); }
.pdp2-q-val {
  width: 40px;
  min-width: 0;
  height: 100%;
  text-align: center;
  font-size: 14px;
  color: var(--pdp2-dark);
  background: transparent;
  font-family: var(--pdp2-fb);
  font-weight: 500;
  border: none;
  border-left: 1px solid var(--pdp2-cream-dk);
  border-right: 1px solid var(--pdp2-cream-dk);
  /* Hide the browser spinner arrows on number inputs. Firefox needs
     `-moz-appearance: textfield` (`appearance: none` does NOT strip the
     spinners in Firefox — well-known quirk). Chrome/Safari use the
     ::-webkit-*-spin-button rule below. */
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  -webkit-appearance: none !important;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}
.pdp2-q-val::-webkit-outer-spin-button,
.pdp2-q-val::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}
.pdp2-cta {
  flex: 1;
  background: var(--pdp2-red);
  color: var(--pdp2-white);
  border: 1px solid var(--pdp2-red);
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
  align-self: stretch;
  padding: 0 26px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 11px;
  cursor: pointer;
  font-family: var(--pdp2-fb);
  transition: background 160ms var(--pdp2-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pdp2-cta:hover:not([disabled]) { background: var(--pdp2-red-dk); }
.pdp2-cta:disabled { opacity: 0.55; cursor: not-allowed; }
.pdp2-cta > span { white-space: nowrap; }
.pdp2-cta-price {
  font-size: inherit;
  font-weight: 600;
  opacity: 1;
  white-space: nowrap;
  letter-spacing: inherit;
}
.pdp2-cta-price::before { content: '·'; margin: 0 6px; opacity: 0.7; }

/* OOS state: hide ATC, show Notify Me — JS toggles `.pdp2-cta--hidden`. */
.pdp2-cta--hidden { display: none !important; }
.pdp2-cta--loading { opacity: 0.7; cursor: progress; pointer-events: none; }
/* Note: chat-bubble-behind-cart rule moved to custom.css for site-wide effect. */

/* Klaviyo auto-injects a visible "Notify Me" button next to the product form
   when the variant is sold out. We render our own three (action row + two
   sticky bars) and forward their clicks to Klaviyo's button. Hide Klaviyo's
   visible button using the screen-reader-only pattern — keeps the element
   in the DOM (so .click() programmatically still triggers BIS) without
   contributing any size to layout. We do NOT touch descendants because
   recursing into Klaviyo's nested absolutely-positioned children with our
   own !important rules blows out horizontal layout on mobile. */
#klaviyo-bis-button-container {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.pdp2-cta--notify {
  background: var(--pdp2-red);
  color: var(--pdp2-white);
  border-color: var(--pdp2-red);
}
.pdp2-cta--notify:hover { background: var(--pdp2-red-dk); }
.pdp2-cta--notify .pdp2-cta-price { display: none; }

/* Sticky-bar Notify Me — inherits sticky CTA layout, just swaps copy. */
.pdp2-sticky__cta--notify,
.pdp2-matc__cta--notify {
  background: var(--pdp2-red);
  color: var(--pdp2-white);
  border-color: var(--pdp2-red);
}
.pdp2-sticky__cta--notify:hover,
.pdp2-matc__cta--notify:hover { background: var(--pdp2-red-dk); }

.pdp2-wishlist.wishlist-button,
.pdp2-root .pdp2-wishlist {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 52px !important;
  height: 52px !important;
  box-sizing: border-box !important;
  background: var(--pdp2-cream-light) !important;
  background-image: linear-gradient(#fbfaf6, #fbfaf6) !important;
  background-color: transparent !important;
  border: 1px solid var(--pdp2-cream-dk) !important;
  border-radius: 11px !important;
  color: var(--pdp2-red) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 160ms var(--pdp2-ease);
  padding: 0 !important;
  flex-shrink: 0;
  line-height: 1;
}
.pdp2-wishlist:hover { background: var(--pdp2-red-lt) !important; }
.pdp2-wishlist svg { width: 18px !important; height: 18px !important; }
/* Preserve theme's empty/fill toggle — empty visible by default, fill when .is-active */
.pdp2-wishlist .empty-icon,
.pdp2-wishlist .fill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--pdp2-red);
}
.pdp2-wishlist .fill-icon { display: none; }
.pdp2-wishlist.is-active .empty-icon { display: none; }
.pdp2-wishlist.is-active .fill-icon { display: inline-flex; }

.pdp2-vol-note {
  font-size: 11px;
  color: var(--pdp2-stone);
  text-align: center;
  margin: 0 0 14px;
}
.pdp2-vol-note strong { color: var(--pdp2-red); font-weight: 600; }

/* ── TRUST BADGES ───────────────────────────────────────────────────── */
.pdp2-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border-top: 0.5px solid var(--pdp2-cream-dk);
  border-bottom: 0.5px solid var(--pdp2-cream-dk);
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 3px 0;
}
.pdp2-t-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--pdp2-stone);
  padding: 0 12px;
  white-space: nowrap;
  /* line-height: 1 tightens the text's content box so the flex
     centering aligns the icon with the x-height midline of the text
     rather than the line-box (which includes leading above/below). */
  line-height: 1;
}
.pdp2-t-item svg {
  width: 12px; height: 12px;
  color: var(--pdp2-red);
  flex-shrink: 0;
  display: block;
}
.pdp2-t-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--pdp2-red);
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── KEY INFO BOX ───────────────────────────────────────────────────── */
.pdp2-keyinfo {
  border: 0.5px solid var(--pdp2-cream-dk);
  border-radius: 11px;
  overflow: hidden;
  margin-bottom: 20px;
}
.pdp2-keyinfo__head {
  background: var(--pdp2-cream);
  background-image: linear-gradient(#fbfaf6, #fbfaf6) !important;
  background-color: transparent !important;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--pdp2-red);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 0.5px solid var(--pdp2-cream-dk);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  width: 100%;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: var(--pdp2-fb);
}
.pdp2-keyinfo__chev {
  font-size: 14px;
  color: var(--pdp2-stone);
  transition: transform 220ms var(--pdp2-ease);
  line-height: 1;
}
.pdp2-keyinfo.open .pdp2-keyinfo__chev { transform: rotate(180deg); }
.pdp2-keyinfo__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms var(--pdp2-ease);
}
.pdp2-keyinfo.open .pdp2-keyinfo__body { max-height: 800px; }
.pdp2-keyinfo__head--static { cursor: default; }
.pdp2-keyinfo--always-on .pdp2-keyinfo__body { max-height: none; }
.pdp2-keyinfo__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--pdp2-cream-dk);
  gap: 16px;
}
.pdp2-keyinfo__row:last-child { border-bottom: none; }
.pdp2-keyinfo__key { font-size: 12px; color: var(--pdp2-stone); flex-shrink: 0; }
.pdp2-keyinfo__val { font-size: 12px; color: var(--pdp2-dark); text-align: right; max-width: 60%; }

/* ── TABS — boxed/contained ─────────────────────────────────────────── */
.pdp2-tabs {
  margin-top: 24px;
  border: 1px solid var(--pdp2-cream-dk);
  border-radius: 8px;
  background: var(--pdp2-white);
  overflow: hidden;
}
.pdp2-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--pdp2-cream-dk);
  overflow-x: auto;
  scrollbar-width: none;
  gap: 28px;
  padding: 0 28px;
}
.pdp2-tab-bar::-webkit-scrollbar { display: none; }
.pdp2-tab-btn {
  flex-shrink: 0;
  padding: 16px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pdp2-stone-lt);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--pdp2-fb);
  position: relative;
  transition: color 0.2s;
  white-space: nowrap;
}
.pdp2-tab-btn:hover { color: var(--pdp2-dark); }
.pdp2-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--pdp2-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.pdp2-tab-btn.on { color: var(--pdp2-red); }
.pdp2-tab-btn.on::after { transform: scaleX(1); }
.pdp2-panel { display: none; padding: 26px 28px 22px; }
.pdp2-panel.on { display: block; }

@media (max-width: 899px) {
  /* Mobile: pill-style tab header inside the boxed card */
  .pdp2-tabs { margin-top: 18px; border-radius: 8px; }
  .pdp2-tab-bar {
    background-image: linear-gradient(#fbfaf6, #fbfaf6) !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--pdp2-cream-dk);
    gap: 4px;
    padding: 6px;
  }
  .pdp2-tab-btn {
    flex: 1 1 0;
    text-align: center;
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pdp2-stone);
    border-radius: 11px;
    transition: background 0.2s, color 0.2s;
  }
  .pdp2-tab-btn::after { display: none; }
  .pdp2-tab-btn.on {
    background: var(--pdp2-red);
    color: var(--pdp2-white);
  }
  .pdp2-panel { padding: 18px 16px 14px; }
}

/* ── ABOUT TAB ──────────────────────────────────────────────────────── */
.pdp2-about__desc { font-size: 13px; color: var(--pdp2-stone); line-height: 1.85; margin-bottom: 20px; }
.pdp2-about__desc strong { color: var(--pdp2-dark); font-weight: 600; }
/* Flex (not grid) so each column's width is proportional to its content —
   short values like "USA" take less real estate, long values like
   "Real Lavender, Cane Sugar, Organic Agave Syrup" take more. `flex: 1 1 auto`
   lets items start at content width and share remaining space proportionally. */
.pdp2-about__attr-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  border-top: 0.5px solid var(--pdp2-cream-dk);
  padding-top: 20px;
  margin-bottom: 20px;
}
.pdp2-about__attr {
  flex: 1 1 auto;
  min-width: 120px;
  padding-right: 0;
}
.pdp2-about__attr-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pdp2-red);
  font-weight: 600;
  margin-bottom: 5px;
}
.pdp2-about__attr-value { font-size: 13px; color: var(--pdp2-dark); line-height: 1.4; }
.pdp2-about__flavor-row {
  border-top: 0.5px solid var(--pdp2-cream-dk);
  padding-top: 18px;
  margin-bottom: 20px;
}
.pdp2-about__flavor-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pdp2-red);
  font-weight: 600;
  margin-bottom: 14px;
}
.pdp2-about__flavor-icons { display: flex; gap: 16px; flex-wrap: wrap; }
.pdp2-about__chip { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 60px; }
.pdp2-about__chip-img {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--pdp2-cream-dk);
  background: var(--pdp2-cream);
  background-image: linear-gradient(#fbfaf6, #fbfaf6) !important;
  background-color: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}
.pdp2-about__chip-name { font-size: 11px; color: var(--pdp2-dark); text-align: center; line-height: 1.2; }
.pdp2-about__certs { display: flex; gap: 8px 14px; flex-wrap: wrap; }
.pdp2-about__cert {
  font-size: 11px; color: var(--pdp2-stone);
  display: inline-flex; align-items: center; gap: 6px;
}
.pdp2-about__cert::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--pdp2-red);
  flex-shrink: 0;
}

/* ── PREPARE TAB ────────────────────────────────────────────────────── */
.pdp2-prep {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 0.5px solid var(--pdp2-cream-dk);
}
.pdp2-prep__methods {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 0.5px solid var(--pdp2-cream-dk);
  padding: 16px 28px 16px 0;
}
.pdp2-prep__method-btn {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: none;
  border-bottom: 0.5px solid var(--pdp2-cream-dk);
  background: transparent;
  cursor: pointer;
  font-family: var(--pdp2-fb);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  position: relative;
  border-radius: 6px;
  transition: background 0.15s var(--pdp2-ease), color 0.15s var(--pdp2-ease);
}
.pdp2-prep__method-btn:hover {
  background: var(--pdp2-cream-light);
}
.pdp2-prep__method-btn:hover .pdp2-prep__method-name {
  color: var(--pdp2-red);
}
.pdp2-prep__method-btn:hover .pdp2-prep__method-arrow {
  opacity: 0.5;
  transform: translateX(0);
}
.pdp2-prep__method-btn:last-child { border-bottom: none; }
.pdp2-prep__method-left { display: flex; flex-direction: column; gap: 2px; }
.pdp2-prep__method-name { font-size: 13px; color: var(--pdp2-stone); transition: color 0.15s, font-weight 0.15s; }
.pdp2-prep__method-meta { font-size: 10px; color: var(--pdp2-stone-lt); letter-spacing: 0.04em; }
.pdp2-prep__method-arrow {
  font-size: 11px;
  color: var(--pdp2-red);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s;
  flex-shrink: 0;
}
.pdp2-prep__method-btn.on {
  background: var(--pdp2-red-lt);
}
.pdp2-prep__method-btn.on .pdp2-prep__method-name {
  color: var(--pdp2-red);
  font-weight: 600;
}
.pdp2-prep__method-btn.on .pdp2-prep__method-meta { color: var(--pdp2-red); opacity: 0.7; }
.pdp2-prep__method-btn.on .pdp2-prep__method-arrow { opacity: 1; transform: translateX(0); }
.pdp2-prep__steps-panel { padding: 18px 0 8px 28px; }
.pdp2-prep__steps-header { margin-bottom: 18px; }
.pdp2-prep__steps-title {
  font-family: var(--pdp2-fd);
  font-size: 17px;
  color: var(--pdp2-dark);
  margin-bottom: 3px;
  font-weight: 500;
}
.pdp2-prep__steps-meta {
  font-size: 10px;
  color: var(--pdp2-red);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.pdp2-prep__step-list { display: none; }
.pdp2-prep__step-list.on { display: block; }
.pdp2-prep__step { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 0.5px solid var(--pdp2-cream-dk); }
.pdp2-prep__step:last-of-type { border-bottom: none; }
.pdp2-prep__step-num {
  font-size: 10px;
  color: var(--pdp2-red);
  letter-spacing: 0.06em;
  min-width: 20px;
  flex-shrink: 0;
  font-weight: 600;
}
.pdp2-prep__step-text { font-size: 13px; color: var(--pdp2-stone); line-height: 1.55; }
.pdp2-prep__tip {
  margin-top: 14px;
  font-size: 12px;
  color: var(--pdp2-stone-lt);
  font-style: italic;
  line-height: 1.6;
}

/* ── SOURCING TAB ───────────────────────────────────────────────────── */
.pdp2-src__intro { font-size: 13px; color: var(--pdp2-stone); line-height: 1.8; margin-bottom: 20px; }
.pdp2-src__divider { border: none; border-top: 0.5px solid var(--pdp2-cream-dk); margin: 18px 0; }
.pdp2-src__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  margin-bottom: 8px;
}
.pdp2-src__grid--2 { /* kept for semantic parity; flex handles it */ }
.pdp2-src__field { flex: 1 1 0; min-width: 0; padding: 0; }
/* 4 fields → 2×2 grid */
.pdp2-src__grid:has(.pdp2-src__field:nth-child(4)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 18px;
}
.pdp2-src__grid:has(.pdp2-src__field:nth-child(4)) .pdp2-src__field { flex: none; }
/* 5+ fields → 3 cols, wraps to 2 rows */
.pdp2-src__grid:has(.pdp2-src__field:nth-child(5)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pdp2-src__field-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pdp2-red);
  font-weight: 600;
  margin-bottom: 6px;
}
.pdp2-src__field-value { font-size: 13px; color: var(--pdp2-dark); line-height: 1.4; }
.pdp2-src__field-sub { font-size: 11px; color: var(--pdp2-stone); margin-top: 2px; line-height: 1.5; }
.pdp2-src__pack-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 0.5px solid var(--pdp2-cream-dk);
  font-size: 11px;
  color: var(--pdp2-stone-lt);
  letter-spacing: 0.04em;
}

/* ── SHIPPING TAB ───────────────────────────────────────────────────── */
.pdp2-ship__intro { font-size: 13px; color: var(--pdp2-stone); line-height: 1.7; margin-bottom: 20px; }
.pdp2-ship__region { border-bottom: 0.5px solid var(--pdp2-cream-dk); }
.pdp2-ship__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--pdp2-fb);
  text-align: left;
}
.pdp2-ship__left { text-align: left; display: flex; flex-direction: column; gap: 2px; }
.pdp2-ship__name { font-size: 12px; color: var(--pdp2-dark); font-weight: 500; }
.pdp2-ship__time { font-size: 13px; color: var(--pdp2-dark); font-weight: 600; }
.pdp2-ship__icon {
  font-size: 15px;
  color: var(--pdp2-stone-lt);
  transition: transform 0.2s;
  line-height: 1;
}
.pdp2-ship__region.open .pdp2-ship__icon { transform: rotate(45deg); }
.pdp2-ship__body {
  display: none;
  padding-bottom: 12px;
  font-size: 12px;
  color: var(--pdp2-stone);
  line-height: 1.65;
}
.pdp2-ship__region.open .pdp2-ship__body { display: block; }
.pdp2-ship__region.featured .pdp2-ship__name { color: var(--pdp2-red); }
.pdp2-ship__note {
  margin-top: 16px;
  font-size: 11px;
  color: var(--pdp2-stone-lt);
  border-top: 0.5px solid var(--pdp2-cream-dk);
  padding-top: 14px;
  line-height: 1.65;
}

/* ── REVIEWS TAB ────────────────────────────────────────────────────── */
.pdp2-rev__empty { padding: 28px 0; }
.pdp2-rev__stars { display: flex; gap: 6px; margin-bottom: 12px; }
.pdp2-rev__star { width: 22px; height: 22px; }
.pdp2-rev__msg { font-size: 13px; color: var(--pdp2-stone); margin: 0 0 20px; }
.pdp2-rev__write-btn {
  background: var(--pdp2-red);
  color: var(--pdp2-white);
  border: none;
  padding: 11px 28px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--pdp2-fb);
  transition: background 160ms var(--pdp2-ease);
}
.pdp2-rev__write-btn:hover { background: var(--pdp2-red-dk); }

/* ── SEO "Know more about this product" ────────────────────────────── */
.pdp2-seo {
  margin-top: 20px;
  border-top: 0.5px solid var(--pdp2-cream-dk);
}
.pdp2-seo__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--pdp2-fb);
  text-align: left;
}
.pdp2-seo__label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
/* Info-circle icon removed — text is the only leading content. */
.pdp2-seo__icon { display: none; }
.pdp2-seo__text {
  font-size: 12.5px;
  color: var(--pdp2-red);
  font-weight: 500;
  line-height: 1;
}
.pdp2-seo__text strong { font-weight: 600; }
.pdp2-seo__chev {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp2-red);
  transition: color 200ms var(--pdp2-ease);
}
.pdp2-seo__chev svg { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; }
.pdp2-seo__chev { position: relative; }
.pdp2-seo__chev svg.pdp2-seo__chev-minus { display: none; }
.pdp2-seo:hover .pdp2-seo__chev { color: var(--pdp2-red-dk); }
.pdp2-seo.open .pdp2-seo__chev svg.pdp2-seo__chev-plus { display: none; }
.pdp2-seo.open .pdp2-seo__chev svg.pdp2-seo__chev-minus { display: block; }
.pdp2-seo.open .pdp2-seo__chev { color: var(--pdp2-red-dk); }
.pdp2-seo__body { display: none; padding-bottom: 22px; }
.pdp2-seo.open .pdp2-seo__body { display: block; }
.pdp2-seo__body h2 {
  font-family: var(--pdp2-fd);
  font-size: 16px;
  color: var(--pdp2-dark);
  font-weight: 500;
  margin: 18px 0 8px;
}
.pdp2-seo__body h2:first-child { margin-top: 2px; }
.pdp2-seo__body p {
  font-size: 13px;
  color: var(--pdp2-stone);
  line-height: 1.8;
  margin: 0 0 10px;
}
.pdp2-seo__body ul { padding-left: 18px; margin: 0 0 10px; }
.pdp2-seo__body li { font-size: 13px; color: var(--pdp2-stone); line-height: 1.75; margin-bottom: 4px; }
.pdp2-seo__body strong { color: var(--pdp2-dark); font-weight: 600; }

/* ── CROSS-SELL in info column — server-rendered + custom cards ───────
   Original full-width related-products section is kept hidden so it
   can't break the 2-col grid. Our cards are built inline in Liquid
   with minimal markup so no external CSS can collapse them. */
[id*="shopify-section"][id*="related-products"] { display: none !important; }
.recomendation_products { display: none !important; }

.pdp2-cs {
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 0.5px solid var(--pdp2-cream-dk) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.pdp2-cs__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  margin: 0 0 14px !important;
}
.pdp2-cs__lbl {
  font-family: 'Degular', 'DM Sans', serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--pdp2-dark) !important;
  margin: 0 !important;
  text-align: left !important;
}
.pdp2-cs__nav {
  display: inline-flex;
  gap: 8px;
}
.pdp2-cs__arrow {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--pdp2-cream-dk);
  color: var(--pdp2-red);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: border-color 160ms var(--pdp2-ease), color 160ms var(--pdp2-ease);
}
.pdp2-cs__arrow svg { width: 10px; height: 14px; }
.pdp2-cs__arrow:hover { border-color: var(--pdp2-red); color: var(--pdp2-red-dk); }
.pdp2-cs__arrow:disabled { opacity: 0.35; cursor: not-allowed; }

.pdp2-cs__scroller {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scroll-behavior: smooth;
  /* Small horizontal padding so the first/last card's 0.5px border
     isn't clipped by the scroll viewport when snapped to an edge. */
  padding: 2px 2px 4px !important;
  margin: 0 !important;
  -webkit-overflow-scrolling: touch;
}
.pdp2-cs__scroller::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

.pdp2-cs__slide {
  flex: 0 0 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  width: 190px !important;
  scroll-snap-align: start !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
}
.pdp2-cs__slide .wishlist-grid,
.pdp2-cs__slide .card-wrapper,
.pdp2-cs__slide .card {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
}

/* ── Compact theme-card styling within pdp2 cross-sell only ── */
/* Card shell: consistent height behavior + tight corner radius */
.pdp2-cs__slide .wishlist-grid,
.pdp2-cs__slide .card-wrapper,
.pdp2-cs__slide .card,
.pdp2-cs__slide .card__inner,
.pdp2-cs__slide .card__content,
.pdp2-cs__slide .card__information {
  min-height: 0 !important;
  height: auto !important;
}
/* When a .wishlist-grid wraps the .card-wrapper (fallback / AJAX reload
   path), let the outer .wishlist-grid be the card shell and keep the
   inner .card-wrapper transparent so we don't stack bordered boxes. */
.pdp2-cs__slide .wishlist-grid {
  background: var(--pdp2-white) !important;
  border: 0.5px solid var(--pdp2-cream-dk) !important;
  border-radius: 11px !important;
  overflow: visible !important;
  box-shadow: 0 1px 2px rgba(28, 22, 19, 0.03) !important;
  transition: box-shadow 200ms var(--pdp2-ease), border-color 200ms var(--pdp2-ease) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}
.pdp2-cs__slide .wishlist-grid:hover {
  box-shadow: 0 4px 14px rgba(28, 22, 19, 0.07) !important;
  border-color: rgba(144, 41, 33, 0.25) !important;
}
.pdp2-cs__slide .wishlist-grid .card-wrapper {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Primary path: when cards come in without an outer .wishlist-grid
   (Dawn's native product-recommendations AJAX), the .card-wrapper is
   itself the shell. The .wishlist-grid selector above resets the inner
   .card-wrapper to transparent when both exist, so these rules only
   kick in when .wishlist-grid is absent. */
.pdp2-cs__slide > .card-wrapper {
  /* Gradient form (not a solid background-color) — mirrors the theme's
     --gradient-background token the user referenced. Same visual as a
     flat #fbfaf6, but rendered as background-image so it layers like
     the rest of the theme's schemed surfaces. */
  background-image: linear-gradient(#fbfaf6, #fbfaf6) !important;
  background-color: transparent !important;
  border: 0.5px solid var(--pdp2-cream-dk) !important;
  border-radius: 11px !important;
  overflow: visible !important;
  box-shadow: 0 1px 2px rgba(28, 22, 19, 0.03) !important;
  transition: box-shadow 200ms var(--pdp2-ease), border-color 200ms var(--pdp2-ease) !important;
  display: flex !important;
  flex-direction: column !important;
}
.pdp2-cs__slide > .card-wrapper:hover {
  box-shadow: 0 4px 14px rgba(28, 22, 19, 0.07) !important;
  border-color: rgba(144, 41, 33, 0.25) !important;
}
.pdp2-cs__slide .card,
.pdp2-cs__slide .card .card__inner {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Kill theme's 1fr/max-content/1fr grid that creates huge vertical gaps */
.pdp2-cs__slide .card__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  grid-template-rows: none !important;
  padding: 12px 12px 12px !important;
  gap: 0 !important;
  flex-grow: 1 !important;
  row-gap: 0 !important;
}
.pdp2-cs__slide .card__information {
  padding: 0 !important;
  row-gap: 0 !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  flex: 1 1 auto !important;
}
.pdp2-cs__slide .card__information > * { margin-top: 0 !important; }

/* Vendor — small uppercase caption, centered, readable */
.pdp2-cs__slide .vendor,
.pdp2-cs__slide .card .vendor,
.pdp2-cs__slide a.vendor,
.pdp2-cs__slide .caption-with-letter-spacing,
.pdp2-cs__slide .card__vendor {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--pdp2-stone) !important;
  text-align: center !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  display: block !important;
  visibility: visible !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Keep the screen-reader-only "Vendor:" label hidden but do NOT hide
   the actual vendor text that may share a similar class. */
.pdp2-cs__slide .visually-hidden { display: none !important; }

/* Hide the per-unit price line (e.g. "RS. 93.73 / 5G") — it reads as
   a duplicate price in the narrow cross-sell card. Card already shows
   the variant's main price; the unit price belongs on the full PDP. */
.pdp2-cs__slide .unit-price,
.pdp2-cs__slide .price__unit,
.pdp2-cs__slide .price-item--unit { display: none !important; }

/* Title — bigger, cherry red, centered, serif display */
.pdp2-cs__slide .card__heading,
.pdp2-cs__slide .card__heading.h5 { margin: 0 0 8px !important; text-align: center !important; }
.pdp2-cs__slide .card__heading a,
.pdp2-cs__slide .card__heading {
  font-family: 'Degular', 'DM Sans', serif !important;
  font-size: 13.5px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--pdp2-red) !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve 2 lines so the price row below aligns across all cards,
     regardless of whether the title wraps to 1 or 2 lines. */
  min-height: calc(13.5px * 1.25 * 2);
}
.pdp2-cs__slide .card__heading a:hover { color: var(--pdp2-red-dk) !important; }

/* Price — prominent, centered */
.pdp2-cs__slide .price,
.pdp2-cs__slide .price__regular,
.pdp2-cs__slide .price-item,
.pdp2-cs__slide .price__sale,
.pdp2-cs__slide .price-item--regular,
.pdp2-cs__slide .price-item--sale {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  font-family: 'DM Sans', serif !important;
  color: var(--pdp2-dark) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  justify-content: center !important;
}
.pdp2-cs__slide .price {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.pdp2-cs__slide .price__container { display: contents !important; }
/* Let Dawn's "price--on-sale" / "price--no-compare" modifier hide the
   inactive price container. Only style the ACTIVE one. */
.pdp2-cs__slide .price:not(.price--on-sale) .price__sale,
.pdp2-cs__slide .price--no-compare .price__sale,
.pdp2-cs__slide .price.price--on-sale .price__regular {
  display: none !important;
}
.pdp2-cs__slide .price:not(.price--on-sale) .price__regular,
.pdp2-cs__slide .price.price--on-sale .price__sale {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
/* Hidden attribute fallback (Dawn uses it on some layouts) */
.pdp2-cs__slide .price__regular[hidden],
.pdp2-cs__slide .price__sale[hidden] { display: none !important; }
/* Compare-at (strikethrough) only — targets the regular price rendered
   inside the sale container, plus generic <s>/<del> tags */
.pdp2-cs__slide .price__sale .price-item--regular,
.pdp2-cs__slide .price s,
.pdp2-cs__slide .price del,
.pdp2-cs__slide .price-item.price-item--compare {
  font-size: 10.5px !important;
  font-weight: 400 !important;
  color: var(--pdp2-stone-lt) !important;
  text-decoration: line-through !important;
  order: 2 !important;
}
/* Actual price (sale or regular) stays bold + dark */
.pdp2-cs__slide .price__sale .price-item--sale,
.pdp2-cs__slide .price__regular .price-item--regular {
  order: 1 !important;
  text-decoration: none !important;
  color: var(--pdp2-dark) !important;
  font-weight: 600 !important;
}

/* Size/volume caption */
.pdp2-cs__slide .card__size,
.pdp2-cs__slide .product-size,
.pdp2-cs__slide .size-tag {
  font-size: 10px !important;
  color: var(--pdp2-stone) !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  margin: 2px 0 0 !important;
  line-height: 1.2 !important;
}

/* Badges + swiper pills overlay on image. Give the image container its
   own positioning context so absolute children anchor to the IMAGE,
   not to the outer .card__inner (which spans the whole card). */
.pdp2-cs__slide .card__media,
.pdp2-cs__slide .media,
.pdp2-cs__slide .card__inner,
.pdp2-cs__slide .wrapper-image-card,
.pdp2-cs__slide .hover-adj,
.pdp2-cs__slide .swiper,
.pdp2-cs__slide [class*="swiper-product-"] {
  position: relative !important;
}
/* Image container clips the absolute pills/badges cleanly.
   Tiny 3px gutter around the image (top/left/right) so the photo isn't
   flush with the card edge. Bottom stays at 0 so the swiper pagination
   and floating wishlist/quick-add buttons still sit flush and overlay
   the lower edge of the product photo. */
.pdp2-cs__slide .wrapper-image-card {
  overflow: hidden !important;
  border-radius: 12px !important;
  padding: 4px 4px 0 !important;
}
.pdp2-cs__slide .custom-badges-container,
.pdp2-cs__slide .custom-badges-container.badges-row {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  z-index: 3 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
}
.pdp2-cs__slide .custom-badges-container .badge,
.pdp2-cs__slide .custom-badges-container span.badge {
  font-size: 8.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: 3px !important;
  line-height: 1 !important;
  background: var(--pdp2-red) !important;
  color: var(--pdp2-white) !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  white-space: nowrap !important;
  /* inline-flex + align-items: center fixes the visually top-heavy text
     you get with inline-block (baseline sits below glyph center). */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 16px !important;
}
/* Keep sold-out badges dark; every other single/only badge (PRE-ORDER,
   EXCLUSIVE, DEAL, etc.) gets the brand cherry red. */
.pdp2-cs__slide .custom-badges-container .badge--soldout,
.pdp2-cs__slide .custom-badges-container .badge[class*="sold"] {
  background: var(--pdp2-dark) !important;
}
.pdp2-cs__slide .custom-badges-container .badge:first-child:only-child {
  background: var(--pdp2-red) !important;
}
/* ORGANIC / dietary label badges (smaller, outline style) */
.pdp2-cs__slide .custom-badges-container .badge--custom-label {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--pdp2-dark) !important;
  border: 0.5px solid var(--pdp2-cream-dk) !important;
}
.pdp2-cs__slide .card__badge,
.pdp2-cs__slide .price__badge { font-size: 9px !important; }
/* Shop Now button — warm tan (#cda881) bg, white text. Pinned to card
   bottom via margin-top auto so all buttons align across the row. */
.pdp2-cs__slide .button,
.pdp2-cs__slide .button--full-width,
.pdp2-cs__slide a.button.btn-cream,
.pdp2-cs__slide a.button.btn-outline-cream {
  padding: 9px 10px !important;
  min-height: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  border-radius: 9px !important;
  line-height: 1 !important;
  margin-top: 10px !important;
  width: 100% !important;
  background: var(--pdp2-red) !important;
  color: #ffffff !important;
  border: 1px solid var(--pdp2-red) !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background 160ms var(--pdp2-ease), border-color 160ms var(--pdp2-ease) !important;
}
.pdp2-cs__slide a.button.btn-cream:hover,
.pdp2-cs__slide .button:hover {
  background: var(--pdp2-red-dk) !important;
  border-color: var(--pdp2-red-dk) !important;
  color: #ffffff !important;
}
.pdp2-cs__slide a.button.btn-outline-cream {
  background: transparent !important;
  color: var(--pdp2-stone-lt) !important;
  border-color: var(--pdp2-cream-dk) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ── Wishlist button (bottom-RIGHT corner of image) ──
   Cream circular pill with a red heart inside. */
.pdp2-cs__slide .wishlist-btn-js,
.pdp2-cs__slide .wishlist-btn-js.wishlist-button,
.pdp2-cs__slide .wishlist-btn-js.wishlist-remove {
  position: absolute !important;
  /* Sit on the image itself, above the swiper pagination dots that live
     in the bottom strip of the card__inner. */
  bottom: 42px !important;
  right: 8px !important;
  left: auto !important;
  top: auto !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  background: #F2EEE0 !important;
  color: var(--pdp2-red) !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(28, 22, 19, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
  transition: transform 160ms var(--pdp2-ease), background 160ms var(--pdp2-ease) !important;
}
.pdp2-cs__slide .wishlist-btn-js:hover {
  transform: scale(1.08) !important;
  background: #E8E2D0 !important;
}
.pdp2-cs__slide .wishlist-btn-js svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}
.pdp2-cs__slide .wishlist-btn-js .empty-icon,
.pdp2-cs__slide .wishlist-btn-js .fill-icon {
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  color: var(--pdp2-red) !important;
}
/* Empty heart by default; filled heart when .is-active — not both */
.pdp2-cs__slide .wishlist-btn-js .empty-icon { display: inline-flex !important; }
.pdp2-cs__slide .wishlist-btn-js .fill-icon { display: none !important; }
.pdp2-cs__slide .wishlist-btn-js.is-active .empty-icon { display: none !important; }
.pdp2-cs__slide .wishlist-btn-js.is-active .fill-icon { display: inline-flex !important; }

/* ── Quick Add button (bottom-LEFT corner of image) ──
   Small circular icon-only button matching the wishlist pill. Position
   matches home-page product cards (bag icon left, heart right). */
.pdp2-cs__slide .quick-add,
.pdp2-cs__slide modal-opener,
.pdp2-cs__slide .wrapper-image-card modal-opener,
.pdp2-cs__slide .pdp2-cs__quickadd {
  position: absolute !important;
  /* Match wishlist — sit on the image above the swiper pagination. */
  bottom: 42px !important;
  left: 8px !important;
  right: auto !important;
  top: auto !important;
  z-index: 3 !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: opacity 160ms var(--pdp2-ease), transform 160ms var(--pdp2-ease) !important;
}
/* Desktop: hide quick-add until the card image is hovered. Mobile keeps
   it visible since there's no hover. */
@media (min-width: 900px) and (hover: hover) {
  .pdp2-cs__slide .quick-add,
  .pdp2-cs__slide modal-opener,
  .pdp2-cs__slide .wrapper-image-card modal-opener,
  .pdp2-cs__slide .pdp2-cs__quickadd {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .pdp2-cs__slide:hover .quick-add,
  .pdp2-cs__slide:hover modal-opener,
  .pdp2-cs__slide:hover .wrapper-image-card modal-opener,
  .pdp2-cs__slide:hover .pdp2-cs__quickadd,
  .pdp2-cs__slide .wrapper-image-card:hover .pdp2-cs__quickadd {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
.pdp2-cs__slide .quick-add__submit,
.pdp2-cs__slide button.quick-add-btn,
.pdp2-cs__slide .quick-add__submit.button,
.pdp2-cs__slide button.quick-add__submit.button--full-width,
.pdp2-cs__slide .pdp2-cs__quickadd {
  margin: 0 !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: #F2EEE0 !important;
  color: var(--pdp2-red) !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  box-shadow: 0 1px 3px rgba(28, 22, 19, 0.08) !important;
  cursor: pointer !important;
  transition: background 160ms var(--pdp2-ease) !important;
}
.pdp2-cs__slide .quick-add__submit:hover,
.pdp2-cs__slide button.quick-add-btn:hover {
  background: #E8E2D0 !important;
}
/* Hide the theme's text label — we render icon via an <img> inside the
   button (matches the home-page / mobile quick-add card icon). */
.pdp2-cs__slide .quick-add__submit > span,
.pdp2-cs__slide button.quick-add-btn > span {
  display: none !important;
}
.pdp2-cs__slide .quick-add__submit img,
.pdp2-cs__slide button.quick-add-btn img,
.pdp2-cs__slide .pdp2-cs__quickadd img {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  object-fit: contain !important;
  margin: 0 !important;
}
/* Injected buttons (pdp2-cs__quickadd) don't have an <img>; use the same
   bag PNG as a background so they look identical to Dawn-rendered ones.
   Specificity bumped (button.pdp2-cs__quickadd + doubled class) so this
   wins over the earlier shorthand `background: #F2EEE0 !important` rule
   that targets `button.quick-add-btn` (same spec). */
.pdp2-cs__slide button.pdp2-cs__quickadd.pdp2-cs__quickadd {
  background: #F2EEE0 url("/cdn/shop/files/untitled.png?v=1739618138") center/12px 12px no-repeat !important;
}
.pdp2-cs__slide button.pdp2-cs__quickadd.pdp2-cs__quickadd:hover {
  background-color: #E8E2D0 !important;
}
}
/* Keep the cart icon visible while adding — just dim + lock the button
   so rapid clicks can't double-fire. */
.pdp2-cs__slide .quick-add__submit .loading__spinner,
.pdp2-cs__slide .pdp2-cs__quickadd .loading__spinner { display: none !important; }
.pdp2-cs__slide .quick-add__submit.loading,
.pdp2-cs__slide button.quick-add-btn.loading,
.pdp2-cs__slide .pdp2-cs__quickadd.loading {
  opacity: 0.55 !important;
  pointer-events: none !important;
  cursor: default !important;
}
.pdp2-cs__slide .quick-add__submit.loading::before,
.pdp2-cs__slide button.quick-add-btn.loading::before,
.pdp2-cs__slide .pdp2-cs__quickadd.loading::before { display: block !important; }
/* Brief confirmation/error state feedback */
.pdp2-cs__slide .pdp2-cs__quickadd.added {
  background: #d8e9d5 !important;
  color: #2f6a2a !important;
}
.pdp2-cs__slide .pdp2-cs__quickadd.error {
  background: #f6d8d6 !important;
  color: var(--pdp2-red-dk) !important;
}

/* ── Icon row + location pin — SINGLE SOURCE OF TRUTH ──
   Location sits INSIDE this pill (user preference). Icons are kept
   small enough that even a 4-icon card + pin + country text fits in
   the card width.
   Sizing invariant (applies at every breakpoint):
     icon-child = 20×20
     gap        = 6
     padding    = 8 vertical / 10 horizontal
     min-height = 20 + 2*8 = 36 (with box-sizing: border-box the
                  padding is INSIDE min-height, so content area is
                  always 20px, matching the icon — icons cannot
                  touch the pill border).
   All other .product-item__icons rules below must keep this invariant;
   don't override padding/min-height without the corresponding child
   size change or the icons will touch the border again. */
.pdp2-cs__slide .product-item__icons {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  /* Tight margin + max-width + small padding + small gap so the worst
     case (4 icons + pin + long country like "Ethiopia") fits without
     truncation at the narrowest card width (~190px). */
  margin: 10px 4px 0 !important;
  min-height: 34px !important;
  padding: 7px 6px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(28, 22, 19, 0.04) !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: calc(100% - 8px) !important;
  overflow: hidden !important;
}
.pdp2-cs__slide .product-item__icons-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pdp2-cs__slide .product-item__icons-child img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  display: block !important;
}
.pdp2-cs__slide .featured_one_location,
.pdp2-cs__slide .featured_one_location.min-749 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 9px !important;
  letter-spacing: 0.04em !important;
  color: var(--pdp2-stone) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 !important;
}
.pdp2-cs__slide .featured_one_location img,
.pdp2-cs__slide .featured_one_location svg {
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 auto !important;
}
/* Prevent icon siblings from hogging the row so the location text has
   enough space for country names. Icons stay intrinsic, location shrinks
   only if absolutely needed. */
.pdp2-cs__slide .product-item__icons { flex-wrap: nowrap !important; min-width: 0 !important; }
.pdp2-cs__slide .product-item__icons > .product-item__icons-child { flex: 0 0 auto !important; }
.pdp2-cs__slide .featured_one_location img {
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 auto !important;
}
/* Desktop: show pin + country text, hide flag image variant.
   Mobile: hide pin + country text, show flag image (see media block). */
.pdp2-cs__slide .featured_one_location.max-749 { display: none !important; }
.pdp2-cs__slide .featured_one_location .text-with-icon__label {
  font-size: 9px !important;
  color: var(--pdp2-stone) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Flag image variant (mobile-only) — theme uses .max-749 with a
   country flag <img> from product.metafields.custom.flag */
.pdp2-cs__slide .featured_one_location.flag-content {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  max-width: none !important;
}
.pdp2-cs__slide .featured_one_location.flag-content img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

/* Hide color variant dots + custom swiper arrows in cross-sell cards.
   Image-slider pagination pills are kept and restyled in cherry red
   further down (see .pdp2-cs__slide .swiper-pagination rules). */
.pdp2-cs__slide .product-variants,
.pdp2-cs__slide .product-variants--select,
.pdp2-cs__slide .custom-swiper-button-prev,
.pdp2-cs__slide .custom-swiper-button-next { display: none !important; }

/* Swiper image-pagination pills — anchored to the image swiper
   container, sitting ~8px above the image bottom edge, centered.
   The positioning-context is the .swiper element (position: relative
   set above), so bottom-8px = 8px above image edge, NOT card bottom. */
.pdp2-cs__slide .swiper .swiper-pagination,
.pdp2-cs__slide [class*="swiper-product-"] .swiper-pagination,
.pdp2-cs__slide .swiper-pagination {
  position: absolute !important;
  bottom: 8px !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  z-index: 3 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  pointer-events: auto !important;
}
.pdp2-cs__slide .swiper-pagination-bullet {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid var(--pdp2-red) !important;
  opacity: 1 !important;
  margin: 0 !important;
  transition: transform 160ms var(--pdp2-ease), background 160ms var(--pdp2-ease) !important;
  cursor: pointer !important;
}
.pdp2-cs__slide .swiper-pagination-bullet-active,
.pdp2-cs__slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--pdp2-red) !important;
  transform: scale(1.15) !important;
}

/* ── Apply slide styling to Shopify's .grid__item rendered inside the
   AJAX-loaded <product-recommendations> (they don't have .pdp2-cs__slide
   class until our JS normalises them; and on slow networks the raw
   .grid__item may flash first). */
.pdp2-cs__scroller > .grid__item { display: none !important; }
.pdp2-cs__scroller > ul,
.pdp2-cs__scroller > .grid { display: contents !important; }

/* The <product-recommendations> host itself = our scroller */
product-recommendations.pdp2-cs__scroller {
  display: flex !important;
  min-height: 280px;
}
/* Kill any <h2> / section heading that Shopify's AJAX response may
   include — our own .pdp2-cs__lbl renders the "You might also like"
   title outside the scroller. Without this, on mobile the heading
   becomes a narrow flex cell and the text wraps character-by-character
   on the left edge before normaliseCards() removes it. */
product-recommendations.pdp2-cs__scroller > h2,
product-recommendations.pdp2-cs__scroller .related-products__heading,
product-recommendations.pdp2-cs__scroller > ul > h2,
.pdp2-cs__scroller > h2,
.pdp2-cs__scroller .related-products__heading { display: none !important; }
/* While loading, show a subtle placeholder row */
product-recommendations.pdp2-cs__scroller:empty::before {
  content: '';
  flex: 0 0 100%;
  min-height: 280px;
  background: linear-gradient(90deg,
    rgba(214, 206, 184, 0.12) 0%,
    rgba(214, 206, 184, 0.22) 50%,
    rgba(214, 206, 184, 0.12) 100%);
  background-size: 200% 100%;
  animation: pdp2csShimmer 1.4s linear infinite;
  border-radius: 8px;
}
@keyframes pdp2csShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* In-card tooltip is suppressed — a JS-driven floating tooltip is
   rendered at document.body level (see wireCsTooltips) so it escapes
   the scroller's overflow clipping. */
.pdp2-cs__slide .tooltip { position: relative !important; }
.pdp2-cs__slide .tooltip .tooltiptext,
.pdp2-cs__slide .tooltip .text-with-icon__label_mobile {
  display: none !important;
}
/* Arrow/caret pointing from tooltip down to the icon */
.pdp2-cs__slide .tooltip .tooltiptext::after,
.pdp2-cs__slide .tooltip .text-with-icon__label_mobile::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--pdp2-red);
}
/* Edge-anchor tooltips for icons near card borders so the bubble
   doesn't get clipped by the scroller. First icon → left-anchored,
   last icon → right-anchored. Middle icons stay centered. */
.pdp2-cs__slide .product-item__icons-child:first-child .tooltip .tooltiptext,
.pdp2-cs__slide .tooltip:first-of-type .tooltiptext {
  left: 0;
  right: auto;
  transform: none;
}
.pdp2-cs__slide .product-item__icons-child:first-child .tooltip .tooltiptext::after,
.pdp2-cs__slide .tooltip:first-of-type .tooltiptext::after {
  left: 14px;
  transform: none;
}
.pdp2-cs__slide .product-item__icons-child:last-child .tooltip .tooltiptext,
.pdp2-cs__slide .tooltip:last-of-type .tooltiptext {
  left: auto;
  right: 0;
  transform: none;
}
.pdp2-cs__slide .product-item__icons-child:last-child .tooltip .tooltiptext::after,
.pdp2-cs__slide .tooltip:last-of-type .tooltiptext::after {
  left: auto;
  right: 14px;
  transform: none;
}
/* Floating tooltip element injected at body level by wireCsTooltips().
   Lives OUTSIDE .pdp2-root, so CSS variables from that scope don't
   resolve here — hard-code the cherry-red brand color. */
.pdp2-cs-float-tip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: #902921 !important;
  color: #ffffff !important;
  padding: 7px 11px;
  border-radius: 4px;
  font-family: 'DM Sans', 'Degular', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 200px;
  box-shadow: 0 3px 10px rgba(144, 41, 33, 0.22);
  transition: opacity 140ms cubic-bezier(.2,.7,.2,1);
  text-transform: none;
  top: 0;
  left: 0;
}
.pdp2-cs-float-tip.show { visibility: visible; opacity: 1; }
/* Quick-add pills / size variants on cards */
.pdp2-cs__slide .card__variant,
.pdp2-cs__slide .card__size-variants,
.pdp2-cs__slide .size-variants { gap: 4px !important; margin: 2px 0 !important; }
.pdp2-cs__slide .card__variant button,
.pdp2-cs__slide .size-variants button {
  font-size: 9.5px !important;
  padding: 3px 6px !important;
  min-height: 0 !important;
}

@media (max-width: 899px) {
  /* 2+ cards visible per view — ~46% each leaves a peek of the next card */
  .pdp2-cs__slide {
    flex: 0 0 46% !important;
    min-width: 46% !important;
    max-width: 46% !important;
    width: 46% !important;
  }
  .pdp2-cs__scroller { gap: 10px !important; }
  /* More breathing room inside mobile cards — increased padding on all
     sides of the content block. */
  .pdp2-cs__slide .card__content { padding: 14px 14px 14px !important; }
  .pdp2-cs__slide .vendor,
  .pdp2-cs__slide .card .vendor { font-size: 9px !important; margin-bottom: 6px !important; }
  .pdp2-cs__slide .card__heading,
  .pdp2-cs__slide .card__heading a { font-size: 14px !important; line-height: 1.25 !important; }
  /* Reserve 2 lines for title on mobile so price aligns across all
     cards regardless of title wrap. Truncate with ellipsis at 2 lines. */
  .pdp2-cs__slide .card__heading {
    margin: 0 0 6px !important;
    min-height: calc(14px * 1.25 * 2) !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .pdp2-cs__slide .price,
  .pdp2-cs__slide .price-item,
  .pdp2-cs__slide .price-item--regular,
  .pdp2-cs__slide .price-item--sale { font-size: 14.5px !important; font-weight: 600 !important; margin: 0 !important; }
  /* Kill any leftover vertical gap between every card info child */
  .pdp2-cs__slide .card__information > *,
  .pdp2-cs__slide .card__content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  .pdp2-cs__slide .card__information .price { margin-top: 2px !important; }
  .pdp2-cs__slide .vendor,
  .pdp2-cs__slide .caption-with-letter-spacing { margin: 0 0 2px !important; }
  /* Bump size text */
  .pdp2-cs__slide .card__size,
  .pdp2-cs__slide .product-size,
  .pdp2-cs__slide .size-tag { font-size: 11.5px !important; }
  .pdp2-cs__slide .card__size,
  .pdp2-cs__slide .product-size,
  .pdp2-cs__slide .size-tag { font-size: 10px !important; }
  /* Intentionally NOT overriding .product-item__icons{ min-height/padding }
     on mobile — the desktop invariant above (44px height, 10px 14px
     padding, 24px icons) already fits at every breakpoint and keeps
     icons off the pill border. */
  .pdp2-cs__slide .product-item__icons-child img { width: 18px !important; height: 18px !important; }
  /* Mobile: hide pin + country text, show the flag image variant.
     Flag is centered with the other icons (no auto-right push, no
     border/background from theme). */
  .pdp2-cs__slide .featured_one_location.min-749 { display: none !important; }
  .pdp2-cs__slide .featured_one_location.max-749 {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    max-width: none !important;
  }
  .pdp2-cs__slide .featured_one_location.flag-content img {
    width: 18px !important;
    height: 18px !important;
    border-radius: 0 !important;
    border: 0 !important;
  }
  /* Keep the flag centered with other icons. Do NOT override padding or
     min-height here — single-source invariant lives in the base rule. */
  .pdp2-cs__slide .product-item__icons {
    justify-content: center !important;
  }
  .pdp2-cs__slide .button { padding: 8px 8px !important; font-size: 9.5px !important; margin-top: 8px !important; letter-spacing: 0.08em !important; }
}

/* ── AI GENERATED BADGE ────────────────────────────────────────────── */
.pdp2-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pdp2-stone-lt);
  background: rgba(154, 140, 117, 0.12);
  border: 0.5px solid rgba(154, 140, 117, 0.2);
  padding: 2px 7px;
  border-radius: 10px;
  cursor: help;
  line-height: 1.4;
  font-style: normal;
  font-family: var(--pdp2-fb);
  vertical-align: middle;
}
.pdp2-ai-badge::before {
  content: '✨';
  font-size: 9px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE (< 900px) — stacked layout, smaller sizes
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Phones hide the sticky bar; tablets & desktops keep it sticky. */
  .pdp2-sticky { display: none !important; }
}
@media (max-width: 899px) and (min-width: 768px) {
  /* Tablet — keep sticky visible and functional */
  .pdp2-sticky { display: flex !important; }
}
@media (max-width: 899px) {
  .pdp2-sticky__thumb { width: 30px; height: 30px; }
  .pdp2-sticky__text { flex: 1; min-width: 0; }
  .pdp2-sticky__name { font-size: 11px; }
  .pdp2-sticky__sub, .pdp2-sticky__price-col { display: none; }
  .pdp2-sticky__cta {
    padding: 7px 12px;
    font-size: 10px;
    margin-left: auto; /* push fully to right edge, away from centered logo */
    flex-shrink: 0;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* The centered PERCUP logo pill hangs ~30–35px below the header
     bottom on mobile, overlapping the breadcrumb's natural row. Push
     the breadcrumb down just enough to clear the pill's tip, keep it
     to a single line with ellipsis so long titles don't wrap and eat
     vertical space. */
  .pdp2-crumbs {
    padding: 45px 16px 6px;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pdp2-crumbs span.sep { margin: 0 4px; }

  .pdp2-pdp {
    grid-template-columns: 1fr;
  }
  .pdp2-pdp::after { display: none; }
  .pdp2-img-col {
    position: static !important;
    border-right: none;
    border-bottom: 0.5px solid var(--pdp2-cream-dk);
    padding: 16px 12px 14px;
    min-height: auto !important;
  }
  .pdp2-img-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .pdp2-img-main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .pdp2-img-main-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }
  .pdp2-img-arrow { top: 50%; }
  .pdp2-img-arrow--prev { left: 4px; }
  .pdp2-img-arrow--next { right: 4px; }
  .pdp2-info { padding: 18px 16px 20px; }
  .pdp2-title { font-size: 22px; }
  .pdp2-subtitle { font-size: 13px; margin-bottom: 10px; }
  .pdp2-price { font-size: 22px; }

  .pdp2-proof {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    justify-content: center;
    justify-items: stretch;
    margin-bottom: 14px;
  }
  .pdp2-proof--3 { grid-template-columns: repeat(3, 1fr); }
  .pdp2-proof--2 { grid-template-columns: repeat(2, 1fr); }
  .pdp2-tile { padding: 7px 4px; border-radius: 9px; }
  .pdp2-tile svg { width: 18px; height: 18px; margin-bottom: 4px; }
  .pdp2-tile-lbl { font-size: 9.5px; line-height: 1.2; }
  .pdp2-tile-sub { font-size: 9px; line-height: 1.25; margin-top: 4px; }
}

/* Narrow phones — extra-tight spacing so a 4-tile row breathes. */
@media (max-width: 480px) {
  .pdp2-proof { gap: 4px; }
  .pdp2-tile { padding: 6px 3px; border-radius: 8px; }
  .pdp2-tile svg { width: 16px; height: 16px; margin-bottom: 3px; }
  .pdp2-tile-lbl { font-size: 9px; line-height: 1.15; }
  .pdp2-tile-sub { font-size: 8.5px; line-height: 1.2; margin-top: 3px; }

  .pdp2-pur-opt { padding: 10px 12px; }
  .pdp2-pur-name { font-size: 12px; }
  .pdp2-pur-price { font-size: 13px; }

  .pdp2-sub-box { padding: 12px 14px; }
  .pdp2-freq-btn { padding: 5px 10px; font-size: 10px; min-width: 80px; }
  .pdp2-freq-rec { top: -12px; font-size: 7.5px; padding: 2px 6px; }
  .pdp2-ben-text { font-size: 10.5px; }
  .pdp2-ben-sub { font-size: 9px; }
  .pdp2-pp-price { font-size: 18px; }

  .pdp2-q-btn, .pdp2-q-val { height: 46px; }
  .pdp2-wishlist.wishlist-button,
  .pdp2-root .pdp2-wishlist { width: 46px !important; height: 46px !important; }
  .pdp2-qty { height: 46px; }
  .pdp2-action-row { min-height: 46px; }
  .pdp2-cta {
    height: 46px;
    min-height: 46px;
    font-size: 11px;
    padding: 0 10px;
    gap: 2px;
    letter-spacing: 0.05em;
    min-width: 0;
    flex-direction: column;
    line-height: 1.15;
  }
  .pdp2-cta > span { white-space: nowrap; }
  .pdp2-cta-price {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.95;
  }
  .pdp2-cta-price::before { content: none; margin: 0; }

  /* Phones: 4 trust items don't fit one row. Stack as 2×2 grid.
     - max-content columns size to longest item per column → no wrapping
     - justify-content: center centers the grid as a block
     - justify-items: start aligns items to their column's left edge
       (so the icons and text in column 1 line up, same for column 2)
     - column-gap controls visual breathing between the two columns
     - dot separators don't read in a stacked grid, hidden */
  .pdp2-trust {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: center;
    justify-items: start;
    column-gap: 22px;
    row-gap: 7px;
    padding: 10px 12px;
  }
  .pdp2-t-sep { display: none; }
  .pdp2-t-item {
    font-size: 10.5px;
    padding: 0;
    gap: 6px;
    line-height: 1.25;
    white-space: nowrap;
  }
  .pdp2-t-item svg { width: 11px; height: 11px; }

  .pdp2-keyinfo__head { padding: 10px 12px; font-size: 11px; }
  .pdp2-keyinfo__key, .pdp2-keyinfo__val { font-size: 11px; }

  .pdp2-about__attr-grid { gap: 14px 20px; padding-top: 16px; }
  .pdp2-about__attr { min-width: 100px; }
  /* 4+ fields on mobile → clean 2-col grid (desktop stays flex-wrap). */
  .pdp2-about__attr-grid:has(.pdp2-about__attr:nth-child(4)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
    column-gap: 20px;
  }
  .pdp2-about__attr-grid:has(.pdp2-about__attr:nth-child(4)) .pdp2-about__attr {
    flex: none;
    min-width: 0;
  }
  .pdp2-about__attr-value { font-size: 12px; }
  .pdp2-about__flavor-icons { gap: 12px; }
  .pdp2-about__chip-img { width: 42px; height: 42px; font-size: 18px; }
  .pdp2-about__chip-name { font-size: 10px; }

  .pdp2-prep { grid-template-columns: 1fr; }
  .pdp2-prep__methods {
    border-right: none;
    padding: 14px 0 0;
    margin-bottom: 16px;
  }
  .pdp2-prep__steps-panel {
    padding: 14px 0 8px;
    border-top: 0.5px solid var(--pdp2-cream-dk);
  }
  .pdp2-prep__steps-title { font-size: 15px; }

  /* Sourcing attrs: ≤3 fields stay single row; 4+ wrap to 2-col grid on mobile. */
  .pdp2-src__grid { gap: 12px 14px; }
  .pdp2-src__grid .pdp2-src__field { padding-right: 0; }
  .pdp2-src__field-value { word-break: break-word; }
  .pdp2-src__grid:has(.pdp2-src__field:nth-child(4)),
  .pdp2-src__grid:has(.pdp2-src__field:nth-child(5)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }

  .pdp2-cs__grid { grid-template-columns: repeat(2, 1fr); }
  .pdp2-cs__img { height: 100px; }
}

/* Hide cross-sell "You might also like" when product-info renders inside the
   quick-add modal — the modal is a compact ATC surface, not the full PDP. */
quick-add-modal .pdp2-cs {
  display: none !important;
}

/* Mobile AJAX "Add to cart" button injected per card — hidden on desktop
   (icons pill + SHOP NOW link cover that breakpoint). Uses brand colors. */
.pdp2-cs__mobile-atc {
  display: none;
}
@media (max-width: 899px) {
  .pdp2-cs__slide .product-item__icons {
    display: none !important;
  }
  .pdp2-cs__slide .pdp2-cs__mobile-atc {
    display: flex !important;
    width: calc(100% - 8px);
    margin: 10px auto 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--pdp2-fb);
    color: var(--pdp2-white);
    background: var(--pdp2-red);
    border: 1px solid var(--pdp2-red);
    border-radius: 7px;
    cursor: pointer;
    line-height: 1;
    transition: background 160ms var(--pdp2-ease), border-color 160ms var(--pdp2-ease);
  }
  .pdp2-cs__slide .pdp2-cs__mobile-atc:hover {
    background: var(--pdp2-red-dk);
    border-color: var(--pdp2-red-dk);
  }
  .pdp2-cs__slide .pdp2-cs__mobile-atc.loading {
    opacity: 0.65;
    pointer-events: none;
  }
  .pdp2-cs__slide .pdp2-cs__mobile-atc.added {
    background: #2f6a2a;
    border-color: #2f6a2a;
  }
  .pdp2-cs__slide .pdp2-cs__mobile-atc.added .pdp2-cs__mobile-atc-label::before {
    content: '\2713  ';
  }
  .pdp2-cs__slide .pdp2-cs__mobile-atc.error {
    background: var(--pdp2-red-dk);
    border-color: var(--pdp2-red-dk);
  }
  /* Hide the SHOP NOW link on mobile — the Add to cart button replaces it. */
  .pdp2-cs__slide a.button.btn-cream {
    display: none !important;
  }
}

/* ── Quick-Add modal compact overrides ──────────────────────────────
   Modal inner content is ~300–330px even on desktop — narrower than the
   mobile breakpoint assumes. Tighten action row, frequency pills, trust
   badges, and the Subscribe row spacing so nothing wraps awkwardly. */
/* Hide the mini-cart sticky bar inside the quick-add modal — its
   content is tied to the host PDP, renders as an empty strip when the
   modal's cloned product-info hydrates. */
quick-add-modal .pdp2-sticky { display: none !important; }
quick-add-modal .pdp2-matc { display: none !important; }

/* Cross-sell card Swiper dots — match main gallery pill style. */
.pdp2-cs .swiper-pagination-bullet {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #d1d1d1 !important;
  opacity: 1 !important;
  border: none !important;
  margin: 0 3px !important;
  transition: width 180ms ease, border-radius 180ms ease, background 180ms ease !important;
}
.pdp2-cs .swiper-pagination-bullet-active {
  width: 18px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: var(--pdp2-red) !important;
}

/* ── SCROLL-TRIGGERED BOTTOM ATC BAR ─────────────────────────────────
   Appears on all viewports once the page has scrolled past the first
   viewport (body.scroll-start, set globally in layout/theme.liquid).
   Slides up from the bottom with product image, title, live price, ATC. */
.pdp2-matc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  position: fixed;
  left: 50%;
  bottom: 20px;
  width: min(720px, calc(100% - 40px));
  z-index: 95;
  padding: 12px 16px 12px 12px;
  background: var(--pdp2-white);
  border: 1px solid var(--pdp2-cream-dk);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  transform: translate(-50%, calc(100% + 30px));
  transition: transform 320ms var(--pdp2-ease);
  pointer-events: none;
}
body.scroll-start .pdp2-matc {
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.pdp2-matc__thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 11px;
  overflow: hidden;
  background: var(--pdp2-cream-light);
  border: 0.5px solid var(--pdp2-cream-dk);
}
.pdp2-matc__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pdp2-matc__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pdp2-matc__name {
  font-family: var(--pdp2-fd);
  font-size: 15px;
  line-height: 1.2;
  color: var(--pdp2-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp2-matc__price {
  font-family: var(--pdp2-fd);
  font-size: 17px;
  color: var(--pdp2-red);
  line-height: 1;
}
.pdp2-matc__cta {
  flex-shrink: 0;
  background: var(--pdp2-red);
  color: var(--pdp2-white);
  border: none;
  padding: 14px 40px;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-family: var(--pdp2-fb);
  font-weight: 600;
  border-radius: 11px;
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 160ms var(--pdp2-ease);
}
.pdp2-matc__cta:hover,
.pdp2-matc__cta:focus-visible { background: var(--pdp2-red-dk); }
.pdp2-matc__cta:disabled { opacity: 0.7; cursor: default; }

/* Qty stepper — matches main PDP qty styling in miniature. */
.pdp2-matc__qty {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--pdp2-cream-dk);
  border-radius: 11px;
  overflow: hidden;
  height: 44px;
  background: var(--pdp2-white);
}
.pdp2-matc__qty .pdp2-q-btn {
  width: 36px;
  height: 100%;
  background: transparent;
  border: 0;
  color: var(--pdp2-dark);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--pdp2-fb);
  padding: 0;
}
.pdp2-matc__qty .pdp2-q-btn:hover { color: var(--pdp2-red); }
.pdp2-matc__qty .pdp2-q-val {
  width: 32px;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--pdp2-fd);
  font-size: 14px;
  color: var(--pdp2-dark);
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}
.pdp2-matc__qty .pdp2-q-val::-webkit-outer-spin-button,
.pdp2-matc__qty .pdp2-q-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Mobile-only promo line (10% Off Today / 15% Off With Subscription).
   Hidden on desktop/tablet; on phone it breaks to its own row below the
   main row, centered, at a smaller font. */
.pdp2-matc__vol-note { display: none; }

/* Reserve space below the final section (footer) so the floating bar
   doesn't cover the last bit of content when you scroll to page end. */
body.scroll-start { padding-bottom: 96px; }

@media (max-width: 767px) {
  .pdp2-matc {
    gap: 10px;
    bottom: 12px;
    width: calc(100% - 20px);
    padding: 10px 12px;
    border-radius: 14px;
  }
  .pdp2-matc__thumb { width: 44px; height: 44px; }
  .pdp2-matc__name { font-size: 13px; }
  .pdp2-matc__price { font-size: 15px; }
  .pdp2-matc__vol-note {
    display: block;
    flex-basis: 100%;
    width: 100%;
    margin: 2px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--pdp2-cream-dk);
    text-align: center;
    font-size: 10px;
    line-height: 1.25;
    color: var(--pdp2-stone, #5b5b5b);
    font-family: 'DM Sans', serif;
    letter-spacing: 0.01em;
  }
  .pdp2-matc__vol-note strong {
    color: var(--pdp2-red);
    font-weight: 600;
  }
  /* Title can now use the full row width — no longer sharing with promo. */
  .pdp2-matc__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pdp2-matc__qty { height: 40px; border-radius: 10px; }
  .pdp2-matc__qty .pdp2-q-btn { width: 28px; font-size: 16px; }
  .pdp2-matc__qty .pdp2-q-val { width: 24px; font-size: 13px; }
  .pdp2-matc__cta { padding: 12px 16px; font-size: 11px; letter-spacing: 0.05em; }
  body.scroll-start { padding-bottom: 80px; }

  /* Lift the Shopify Inbox chat toggle above the floating sticky ATC on
     mobile so the chat bubble never covers the Add to Cart button. The
     widget is a custom element `<inbox-online-store-chat>` pinned at
     bottom: 0 with the maximum z-index — override its `bottom` while the
     sticky is visible. Shadow-DOM internals (`.chat-app`/`.chat-toggle`)
     aren't reachable from here, but moving the host element lifts
     everything inside it with it. */
  body.scroll-start inbox-online-store-chat,
  body.scroll-start inbox-online-store-chat#ShopifyChat {
    bottom: 110px !important;
    transition: bottom 320ms var(--pdp2-ease);
  }
}

quick-add-modal .pdp2-action-row { gap: 4px !important; min-height: 44px !important; }
quick-add-modal .pdp2-wishlist.wishlist-button,
quick-add-modal .pdp2-root .pdp2-wishlist {
  width: 44px !important; height: 44px !important;
  margin-right: 0 !important;
}
quick-add-modal .pdp2-wishlist svg { width: 16px !important; height: 16px !important; }
quick-add-modal .pdp2-qty { height: 44px !important; }
quick-add-modal .pdp2-q-btn,
quick-add-modal .pdp2-q-val { height: 44px !important; }
quick-add-modal .pdp2-q-btn { width: 30px !important; }
quick-add-modal .pdp2-q-val { width: 32px !important; font-size: 13px !important; }
quick-add-modal .pdp2-cta {
  height: 44px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  gap: 0 !important;
  /* Stack CTA text and price vertically — cleaner in narrow modal. */
  flex-direction: column !important;
  line-height: 1.15 !important;
  min-width: 0 !important;
}
quick-add-modal .pdp2-cta > span,
quick-add-modal .pdp2-cta .pdp2-cta-price {
  white-space: nowrap !important;
  width: 100% !important;
  text-align: center !important;
}
quick-add-modal .pdp2-cta-price {
  font-size: 9px !important;
  font-weight: 600 !important;
  opacity: 0.95 !important;
}
/* Drop the `·` separator that turns the stacked line into "· RS. X" */
quick-add-modal .pdp2-cta-price::before { content: none !important; margin: 0 !important; }

/* Frequency pills: 3 pills on one row inside the modal. Drop the 80px
   min-width that forced wrapping at narrow widths. */
quick-add-modal .pdp2-freq-opts { flex-wrap: nowrap !important; gap: 6px !important; }
quick-add-modal .pdp2-freq-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 5px 6px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
quick-add-modal .pdp2-freq-rec {
  font-size: 7px !important;
  padding: 2px 5px !important;
  top: -10px !important;
}

/* Subscribe row: more breathing room between SAVE tag and the right
   price column so they don't visually merge at narrow widths. */
quick-add-modal .pdp2-pur-opt { padding: 10px 10px !important; gap: 8px !important; }
quick-add-modal .pdp2-pur-info { gap: 6px !important; }
quick-add-modal .pdp2-pur-name { font-size: 12px !important; }
quick-add-modal .pdp2-save-tag { font-size: 8px !important; padding: 2px 5px !important; }
quick-add-modal .pdp2-pur-price { font-size: 12.5px !important; }
quick-add-modal .pdp2-pur-strike { font-size: 10px !important; }
quick-add-modal .pdp2-pur-price-col { margin-left: 4px; }

/* Trust badges: single line. Aggressive shrink so all four items
   (Secure checkout · Ships within 24 hrs · Free over AED 200 · Easy
   returns) fit without wrapping or clipping in a ~320px modal. */
quick-add-modal .pdp2-trust {
  flex-wrap: nowrap !important;
  padding: 8px 0 !important;
  gap: 0 !important;
  justify-content: center !important;
}
quick-add-modal .pdp2-t-item {
  font-size: 8px !important;
  padding: 0 3px !important;
  gap: 2px !important;
  line-height: 1 !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}
quick-add-modal .pdp2-t-item svg { width: 8px !important; height: 8px !important; }
quick-add-modal .pdp2-t-sep { width: 2px !important; height: 2px !important; margin: 0 2px !important; flex-shrink: 0 !important; }

/* Tabs: allow horizontal scroll in the modal to avoid REVIEWS clipping. */
quick-add-modal .pdp2-tab-bar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
quick-add-modal .pdp2-tab-bar::-webkit-scrollbar { display: none; }
quick-add-modal .pdp2-tab-btn { white-space: nowrap; flex-shrink: 0; }

/* Hide the standalone `related-products` section on product pages — our
   pdp2-cs cross-sell inside the PDP column already covers the same
   recommendations. The section instance has to stay in product.json
   (Shopify's AJAX fetches its rendered HTML via data-section-id), but we
   don't want it displayed a second time below the PDP. Scope to .product
   body so other pages using this section are unaffected. */
body.product > main .recomendation_products,
body.product > main #shopify-section-related-products {
  display: none !important;
}

/* ── JUDGE.ME WIDGET — compact styling to match PDP typography ─────────
   Scoped to both the REVIEWS tab and the bottom reviews block so the
   widget shrinks to PDP-compact sizes in both placements. */
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-widget,
.pdp2-reviews-block .jdgm-widget {
  font-family: var(--pdp2-fb) !important;
  font-size: 14px !important;
}
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-rev-widg__title,
.pdp2-reviews-block .jdgm-rev-widg__title {
  font-size: 22px !important;
  font-family: var(--pdp2-fd) !important;
  font-weight: 500 !important;
  margin-bottom: 18px !important;
  text-align: center !important;
}
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-rev-widg__summary-text,
.pdp2-reviews-block .jdgm-rev-widg__summary-text {
  font-size: 13px !important;
  color: var(--pdp2-stone) !important;
}
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-rev-widg__summary-stars,
.pdp2-reviews-block .jdgm-rev-widg__summary-stars,
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-rev__header .jdgm-star,
.pdp2-reviews-block .jdgm-rev__header .jdgm-star,
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-histogram__stars .jdgm-star,
.pdp2-reviews-block .jdgm-histogram__stars .jdgm-star {
  font-size: 14px !important;
}
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-rev-widg__summary-average,
.pdp2-reviews-block .jdgm-rev-widg__summary-average {
  font-size: 20px !important;
  font-family: var(--pdp2-fd) !important;
  font-weight: 500 !important;
}
body .pdp2-panel[data-pdp2-panel="reviews"] .jdgm-widget a.jdgm-write-rev-link.jdgm-write-rev-link,
body .pdp2-reviews-block .jdgm-widget a.jdgm-write-rev-link.jdgm-write-rev-link {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 32px !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border-radius: 999px !important;
  background: #902921 !important;
  background-color: #902921 !important;
  background-image: none !important;
  border: 1px solid #902921 !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-family: var(--pdp2-fb) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
body .pdp2-panel[data-pdp2-panel="reviews"] .jdgm-widget a.jdgm-write-rev-link.jdgm-write-rev-link:hover,
body .pdp2-reviews-block .jdgm-widget a.jdgm-write-rev-link.jdgm-write-rev-link:hover {
  background: #7a221b !important;
  background-color: #7a221b !important;
  color: #fff !important;
}
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-rev__title,
.pdp2-reviews-block .jdgm-rev__title {
  font-size: 15px !important;
  font-weight: 600 !important;
}
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-rev__body,
.pdp2-reviews-block .jdgm-rev__body {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--pdp2-dark) !important;
}
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-rev__author,
.pdp2-reviews-block .jdgm-rev__author {
  font-size: 15px !important;
  font-weight: 500 !important;
}
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-rev__timestamp,
.pdp2-reviews-block .jdgm-rev__timestamp {
  font-size: 12px !important;
  color: var(--pdp2-stone-lt) !important;
}
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-histogram,
.pdp2-reviews-block .jdgm-histogram {
  font-size: 13px !important;
}
.pdp2-panel[data-pdp2-panel="reviews"] .jdgm-sort-dropdown,
.pdp2-reviews-block .jdgm-sort-dropdown {
  font-size: 13px !important;
}

/* ── Bottom reviews block container ─────────────────────────────────── */
.pdp2-reviews-block {
  width: min(1200px, 100% - 40px);
  margin: 24px auto;
  padding: 20px 16px;
  border-radius: 11px;
  background-color: #f2eee0;
}
.pdp2-reviews-block__heading {
  font-family: var(--pdp2-fd);
  font-size: 22px;
  font-weight: 500;
  color: var(--pdp2-dark);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
@media (max-width: 899px) {
  .pdp2-reviews-block__heading { font-size: 18px; margin-bottom: 12px; }
}