/* ===================================================================
   PRODUCT DETAIL PAGE — v7.0 "Clean Pharmacy Shelf"
   -------------------------------------------------------------------
   Evolves the apothecary base into a cleaner pharmacy product page:
   quieter meta bar, no countdown urgency, emerald brand accents,
   RTL-first Persian typography via Vazirmatn.
   =================================================================== */


/* ============================================================
   1. Design Tokens
   ============================================================ */
:root {
  /* Paper & Ink — cooler, cleaner shelf (v7) */
  --pdp-paper:            #f5f7f6;   /* soft cool page bg */
  --pdp-paper-2:          #eef2f0;   /* slightly deeper for stage */
  --pdp-canvas:           #ffffff;   /* pure white for containers */
  --pdp-ink:              #14171b;   /* deep ink for display type */
  --pdp-ink-2:            #4b5560;   /* secondary text */
  --pdp-ink-3:            #7a8290;   /* tertiary text, labels */
  --pdp-ink-4:            #b6bcc4;   /* disabled / dividers on white */

  /* Structural accents — emerald-led, brass secondary */
  --pdp-brass:            #0f5f4a;
  --pdp-brass-hover:      #094134;
  --pdp-hairline:         rgba(15, 95, 74, 0.12);
  --pdp-hairline-strong:  rgba(15, 95, 74, 0.22);
  --pdp-hairline-ink:     rgba(20, 23, 27, 0.10);

  /* Apothecary emerald — the site brand green, deepened */
  --pdp-emerald:          #0f5f4a;
  --pdp-emerald-2:        #094134;
  --pdp-emerald-soft:     rgba(15, 95, 74, 0.08);
  --pdp-emerald-line:     rgba(15, 95, 74, 0.24);

  /* Alerts (rare, for pharmaceutical hazards) */
  --pdp-vermilion:        #b4302e;
  --pdp-vermilion-soft:   rgba(180, 48, 46, 0.08);

  /* Elevation — very restrained, close-to-page shadows */
  --pdp-shadow-0:  0 1px 0 rgba(20, 23, 27, 0.04);
  --pdp-shadow-1:  0 1px 2px rgba(20, 23, 27, 0.05), 0 1px 1px rgba(20, 23, 27, 0.03);
  --pdp-shadow-2:  0 4px 12px -6px rgba(20, 23, 27, 0.10), 0 2px 4px rgba(20, 23, 27, 0.04);
  --pdp-shadow-3:  0 14px 40px -18px rgba(20, 23, 27, 0.22), 0 4px 10px rgba(20, 23, 27, 0.05);
  --pdp-shadow-stage: 0 24px 60px -30px rgba(20, 23, 27, 0.28), inset 0 0 0 1px var(--pdp-hairline);

  /* Type */
  --pdp-font-display: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pdp-font-body:    'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Scale (fluid) */
  --pdp-fs-eyebrow:   0.72rem;
  --pdp-fs-label:     0.78rem;
  --pdp-fs-body:      0.98rem;
  --pdp-fs-lg:        1.05rem;
  --pdp-fs-price:     clamp(2.4rem, 1.6rem + 3vw, 3.4rem);
  --pdp-fs-title:     clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem);

  /* Motion */
  --pdp-e-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --pdp-e-inout:   cubic-bezier(0.65, 0, 0.35, 1);
  --pdp-t-fast:    180ms;
  --pdp-t-med:     320ms;
  --pdp-t-slow:    520ms;

  /* Radii — small and consistent, not "bubbly" */
  --pdp-r-xs:  2px;
  --pdp-r-sm:  4px;
  --pdp-r-md:  8px;
  --pdp-r-lg:  14px;

  /* Safe areas */
  --pdp-safe-bottom: env(safe-area-inset-bottom, 0px);
}


/* ============================================================
   2. Page Frame
   ============================================================ */
body.product-page {
  background: var(--pdp-paper);
}

.pdp-product-page-wrapper {
  width: 100%;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(15, 95, 74, 0.06), transparent 55%),
    var(--pdp-paper);
  color: var(--pdp-ink);
  font-family: var(--pdp-font-body);
  overflow-x: hidden;
  padding-bottom: calc(120px + var(--pdp-safe-bottom));
  position: relative;
}

.pdp-product-page-wrapper *,
.pdp-product-page-wrapper *::before,
.pdp-product-page-wrapper *::after { box-sizing: border-box; }

@media (min-width: 992px) {
  .pdp-product-page-wrapper { padding-bottom: 64px; }
}

/* Kill the huge green hero gradient from the template's block — we
   only keep the semantic <section> for the breadcrumb; style it flat. */
.pdp-product-hero-section {
  position: relative;
  background: transparent;
  padding: 20px 0 8px;
  overflow: visible;
  border-bottom: 1px solid var(--pdp-hairline);
}


/* ============================================================
   3. Breadcrumb — thin, quiet, hairline-underlined
   ============================================================ */
.pdp-product-breadcrumb-nav {
  margin: 0;
}

.pdp-breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--pdp-ink-3);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.pdp-breadcrumb-list::-webkit-scrollbar { display: none; }

.pdp-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pdp-breadcrumb-item a {
  color: var(--pdp-ink-2);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--pdp-t-fast) var(--pdp-e-out);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pdp-breadcrumb-item a:hover { color: var(--pdp-brass); }
.pdp-breadcrumb-item i { font-size: 0.7rem; opacity: 0.65; }

.pdp-breadcrumb-sep {
  color: var(--pdp-ink-4);
  font-size: 0.55rem;
}

.pdp-breadcrumb-current {
  color: var(--pdp-ink);
  font-weight: 700;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ============================================================
   4. Brand strip — replaces the ORIGINAL badge from v4
   ============================================================ */
.pdp-brand-badge {
  display: none; /* the eyebrow inside the info column carries this now */
}


/* ============================================================
   5. Main container
   ============================================================ */
.pdp-product-main-container {
  position: relative;
  padding: 24px 16px 0;
  max-width: 1360px;
  margin-inline: auto;
}
@media (min-width: 992px) {
  .pdp-product-main-container { padding: 40px 32px 0; }
}


/* ============================================================
   6. Product Card — the exhibit
   ============================================================ */
.pdp-product-card {
  background: var(--pdp-canvas);
  border: 1px solid var(--pdp-hairline);
  border-radius: var(--pdp-r-lg);
  box-shadow: var(--pdp-shadow-2);
  overflow: hidden;
  margin-bottom: 32px;
  position: relative;
}

/* The signature brand hairline across the top of the card */
.pdp-product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--pdp-emerald) 12%,
    #008c69 50%,
    var(--pdp-emerald) 88%,
    transparent 100%);
  opacity: 0.85;
}


/* ============================================================
   7. Gallery — the "specimen stage"
   ============================================================ */
.pdp-product-gallery {
  position: relative;
  background:
    radial-gradient(ellipse 65% 55% at 50% 42%, #ffffff 0%, rgba(255,255,255,0) 72%),
    linear-gradient(160deg, #f7faf8 0%, #eef3f0 100%);
  padding: 48px 40px;
  display: flex;
  /* Top-aligned, not centred: the panel is as tall as the whole card, so
     centring dropped the product photo below the fold and cost the LCP
     element its position. The gradient carries the space beneath it. */
  align-items: flex-start;
  justify-content: center;
  min-height: 440px;
  overflow: hidden;
  border-inline-end: 1px solid var(--pdp-hairline);
  /* The flex item here is the Bootstrap column that wraps this element, not
     this element, so align-self:stretch was inert: the panel rendered ~477px
     tall inside an ~1124px card, leaving a tall band of bare white beneath it
     and stranding the corner ticks and the dividing rule halfway down the
     card. height:100% is what actually fills the column. */
  height: 100%;
}
@media (max-width: 991.98px) {
  .pdp-product-gallery {
    border-inline-end: none;
    border-bottom: 1px solid var(--pdp-hairline);
    min-height: 0;
    padding: 20px 16px 24px;
  }
}

/* Corner rules — the four brass corner ticks that frame the exhibit */
.pdp-product-gallery::before,
.pdp-product-gallery::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--pdp-brass);
  opacity: 0.55;
  pointer-events: none;
}
.pdp-product-gallery::before {
  top: 20px; inset-inline-start: 20px;
  border-top: 1px solid; border-inline-start: 1px solid;
}
.pdp-product-gallery::after {
  bottom: 20px; inset-inline-end: 20px;
  border-bottom: 1px solid; border-inline-end: 1px solid;
}

/* Gallery Badges — top-left in reading order (visual left in RTL: end) */
.pdp-gallery-badges {
  position: absolute;
  top: 20px;
  inset-inline-end: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 20;
}

.pdp-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--pdp-r-sm);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
  background: var(--pdp-canvas);
  color: var(--pdp-ink);
  border: 1px solid var(--pdp-hairline-strong);
  box-shadow: var(--pdp-shadow-0);
}

.pdp-badge-tag i {
  font-size: 0.72rem;
  color: var(--pdp-brass);
}

.pdp-badge-original { color: var(--pdp-emerald); }
.pdp-badge-original i { color: var(--pdp-emerald); }

.pdp-badge-featured { color: var(--pdp-brass-hover); }
.pdp-badge-featured i { color: var(--pdp-brass); }

.pdp-badge-sale {
  color: var(--pdp-vermilion);
  border-color: rgba(180, 48, 46, 0.32);
}

/* Gallery Main Image — the specimen on the stage.
   position:sticky was tried here so the image would track the much taller
   info column, but three ancestors clip overflow (.pdp-product-gallery,
   .pdp-product-card, and .pdp-product-page-wrapper's site-wide
   overflow-x:hidden), each of which is a scroll container that neutralises
   sticky. Unpicking all three risks reintroducing horizontal scroll, so the
   image simply centres in the full-height panel — which reads correctly now
   that the panel fills the card, with the badges and zoom chip anchoring the
   top and bottom of the stage. */
.pdp-gallery-main {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  padding: 8px;
  z-index: 1;
}

/* higher specificity than img[width] to win against optimized_image attrs */
.pdp-product-page-wrapper img.pdp-product-image-main,
.pdp-gallery-main .pdp-product-image-main {
  max-width: 92%;
  max-height: 440px;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: var(--pdp-r-sm);
  background: var(--pdp-canvas);
  padding: 14px;
  box-shadow:
    0 22px 44px -18px rgba(20, 23, 27, 0.30),
    0 2px 4px rgba(20, 23, 27, 0.05),
    inset 0 0 0 1px var(--pdp-hairline);
  transition:
    transform var(--pdp-t-slow) var(--pdp-e-out),
    box-shadow var(--pdp-t-med) var(--pdp-e-out);
}

.pdp-gallery-main:hover .pdp-product-image-main {
  transform: scale(1.025);
  box-shadow:
    0 30px 60px -20px rgba(20, 23, 27, 0.36),
    0 4px 10px rgba(20, 23, 27, 0.08),
    inset 0 0 0 1px var(--pdp-hairline-strong);
}

/* Zoom Button — hairline chip, not a big colored button */
.pdp-gallery-zoom-btn {
  position: absolute;
  bottom: 20px;
  inset-inline-start: 20px;
  width: auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(20, 23, 27, 0.86);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f1ecdf;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--pdp-t-fast) var(--pdp-e-out);
  z-index: 10;
}
.pdp-gallery-zoom-btn::after {
  content: 'بزرگ‌نمایی';
}
.pdp-gallery-zoom-btn:hover {
  background: var(--pdp-ink);
  border-color: var(--pdp-brass);
  color: #fff;
}
.pdp-gallery-zoom-btn i { font-size: 0.75rem; color: var(--pdp-brass); }


/* ============================================================
   8. Product Info column
   ============================================================ */
.pdp-product-info {
  padding: 44px 40px 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  /* One rhythm for the whole buy column. Each block used to carry its own
     margin, and the resulting gaps measured 22 / 26 / 28 / 30 / 32px down the
     stack — close enough to look accidental rather than intentional, which is
     a large part of why the blocks read as loosely scattered. Spacing is owned
     by the container now; the blocks own none of it. */
  gap: 24px;
}
/* Two classes deep on purpose: the per-block rules further down this file
   (.pdp-rx-strip, .pdp-price-card, …) are single-class selectors that would
   otherwise tie on specificity and win on source order, leaving their margins
   stacked on top of the container gap instead of replaced by it. */
.pdp-product-card .pdp-product-info > * {
  margin-block: 0;
}
/* The eyebrow, title and Latin subtitle are one masthead unit, so they sit
   tighter than the 24px section rhythm rather than drifting apart. */
.pdp-product-card .pdp-product-info > .pdp-eyebrow { margin-bottom: -10px; }
.pdp-product-card .pdp-product-info > .pdp-product-title { margin-bottom: -16px; }
@media (max-width: 991.98px) {
  .pdp-product-info { padding: 32px 24px; }
}

/* Eyebrow — the small label above the title */
.pdp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--pdp-fs-eyebrow);
  font-weight: 700;
  color: var(--pdp-emerald);
  text-transform: none;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.pdp-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--pdp-emerald);
  opacity: 0.7;
  border-radius: 1px;
}

/* Legacy — the old brand tag still ships if data present but restyled */
.pdp-product-brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--pdp-hairline-strong);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pdp-ink-2);
  margin-bottom: 12px;
  transition: color var(--pdp-t-fast) var(--pdp-e-out),
              border-color var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-product-brand-tag i { color: var(--pdp-brass); font-size: 0.72rem; }
.pdp-product-brand-tag:hover {
  color: var(--pdp-brass);
  border-color: var(--pdp-brass);
  background: transparent;
  transform: none;
}

/* Title */
.pdp-product-title {
  font-family: var(--pdp-font-display);
  font-size: var(--pdp-fs-title);
  font-weight: 900;
  color: var(--pdp-ink);
  line-height: 1.18;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* English subtitle — small caps, brass */
.pdp-product-subtitle {
  font-size: 0.9rem;
  color: var(--pdp-ink-3);
  margin: 0 0 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   9. Key facts strip under the title
   ============================================================ */
.pdp-rx-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: none;
  margin: 4px 0 26px;
  padding: 0;
  background: transparent;
}

.pdp-rx-cell {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(15, 95, 74, 0.10);
  border-radius: 12px;
  background: #f7faf8;
  text-align: start;
  min-width: 0;
}
.pdp-rx-cell:first-child { padding-inline-start: 12px; }
.pdp-rx-cell:last-child {
  border-inline-end: 1px solid rgba(15, 95, 74, 0.10);
  padding-inline-end: 12px;
}

.pdp-rx-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--pdp-ink-3);
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp-rx-value {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--pdp-ink);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* word-break:break-word here split values mid-token in a ~90px cell —
     an expiry read "2027/0 / 8" over two lines. overflow-wrap only breaks a
     word that genuinely cannot fit, and leaves atomic values intact. */
  word-break: normal;
  overflow-wrap: break-word;
}

/* Atomic values — dates, codes, quantities. These must never be split, and in
   an RTL paragraph they need their own isolate so digits and separators keep
   their internal left-to-right order. */
.pdp-rx-value.pdp-rx-num,
.pdp-rx-value.pdp-rx-sku {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
}
.pdp-rx-value.pdp-rx-sku {
  letter-spacing: 0.03em;
  /* Product ids are long and opaque; the full value stays available via the
     title attribute rather than wrapping the cell to three lines. */
  font-size: 0.8rem;
}
.pdp-rx-value.pdp-rx-verified {
  color: var(--pdp-emerald);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pdp-rx-value.pdp-rx-verified::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pdp-emerald);
  box-shadow: 0 0 0 3px rgba(15, 95, 74, 0.15);
  display: inline-block;
}

@media (max-width: 575.98px) {
  .pdp-rx-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 0;
    padding: 14px 0;
  }
  .pdp-rx-cell {
    padding: 8px 12px;
    border-inline-end: 1px solid var(--pdp-hairline);
  }
  .pdp-rx-cell:nth-child(2n) { border-inline-end: none; padding-inline-end: 0; }
  .pdp-rx-cell:nth-child(1),
  .pdp-rx-cell:nth-child(2) { border-bottom: 1px solid var(--pdp-hairline); padding-bottom: 14px; }
  .pdp-rx-cell:nth-child(3),
  .pdp-rx-cell:nth-child(4) { padding-top: 6px; }
}


/* ============================================================
   10. Rating — inline text, no yellow banner
   ============================================================ */
.pdp-rating-block {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: none;
  margin-bottom: 22px;
  box-shadow: none;
  border-radius: 0;
}
.pdp-rating-block::before { display: none; }

.pdp-rating-stars {
  display: inline-flex;
  gap: 2px;
}
.pdp-rating-stars i {
  color: var(--pdp-brass);
  font-size: 0.98rem;
  filter: none;
  transition: none;
}
.pdp-rating-stars i.pdp-empty { color: var(--pdp-ink-4); }
.pdp-rating-stars i:hover { transform: none; }

.pdp-rating-text {
  font-size: 0.85rem;
  color: var(--pdp-ink-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pdp-rating-text strong {
  font-weight: 800;
  color: var(--pdp-ink);
  margin-inline-end: 2px;
}


/* ============================================================
   11. Expiry callout — inline hairline chip
   ============================================================ */
.pdp-expiry-badge {
  /* now folded into the rx-strip; hide the legacy chip if it still ships */
  display: none;
}


/* ============================================================
   12. Price — editorial, no colored card
   ============================================================ */
.pdp-price-card {
  position: relative;
  background: transparent;
  border-radius: 0;
  padding: 20px 0 22px;
  margin: 0 0 28px;
  overflow: visible;
  box-shadow: none;
  border-top: 1px solid var(--pdp-hairline);
  border-bottom: 1px solid var(--pdp-hairline);
}
.pdp-price-card::after { display: none; }

.pdp-price-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--pdp-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-bottom: 6px;
}

.pdp-price-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}

.pdp-price-value {
  font-family: var(--pdp-font-display);
  font-size: var(--pdp-fs-price);
  font-weight: 900;
  color: var(--pdp-ink);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}
.pdp-price-currency {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--pdp-brass);
  letter-spacing: 0.02em;
}

.pdp-price-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 4px;
}

.pdp-price-feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  border: none;
  font-size: 0.75rem;
  color: var(--pdp-ink-2);
  font-weight: 600;
  transition: color var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-price-feature:hover { color: var(--pdp-brass); transform: none; background: transparent; }
.pdp-price-feature i { color: var(--pdp-brass); font-size: 0.72rem; }


/* ============================================================
   13. Cart Section — restrained, dark, high-contrast
   ============================================================ */
.pdp-cart-section {
  margin-bottom: 24px;
}

.pdp-quantity-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.pdp-quantity-label {
  font-weight: 700;
  color: var(--pdp-ink-2);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.pdp-quantity-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--pdp-hairline-strong);
  border-radius: var(--pdp-r-md);
  overflow: hidden;
  background: var(--pdp-canvas);
  transition: border-color var(--pdp-t-fast) var(--pdp-e-out);
  box-shadow: none;
}
.pdp-quantity-selector:focus-within {
  border-color: var(--pdp-ink);
  box-shadow: 0 0 0 3px var(--pdp-emerald-soft);
}

.pdp-qty-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: var(--pdp-ink);
  cursor: pointer;
  transition: background var(--pdp-t-fast) var(--pdp-e-out),
              color var(--pdp-t-fast) var(--pdp-e-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-qty-btn:hover { background: var(--pdp-paper); color: var(--pdp-emerald); }
.pdp-qty-btn:active { background: var(--pdp-paper-2); }

.pdp-qty-input {
  width: 56px;
  height: 44px;
  border: none;
  border-inline-start: 1px solid var(--pdp-hairline);
  border-inline-end: 1px solid var(--pdp-hairline);
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--pdp-ink);
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.pdp-qty-input:focus { outline: none; background: var(--pdp-paper); }
/* remove native number spinners */
.pdp-qty-input::-webkit-inner-spin-button,
.pdp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-qty-input[type=number] { -moz-appearance: textfield; }

/* Add to Cart — solid ink-black with brass under-rule */
.pdp-btn-add-to-cart {
  width: 100%;
  min-height: 56px;
  padding: 16px 24px;
  font-family: var(--pdp-font-display);
  font-size: 1rem;
  font-weight: 800;
  background: var(--pdp-ink);
  background-image: none;
  background-size: auto;
  color: #f7f3ea;
  border: 1px solid var(--pdp-ink);
  border-radius: var(--pdp-r-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: var(--pdp-shadow-2);
  transition:
    background var(--pdp-t-fast) var(--pdp-e-out),
    color var(--pdp-t-fast) var(--pdp-e-out),
    transform var(--pdp-t-fast) var(--pdp-e-out),
    box-shadow var(--pdp-t-med) var(--pdp-e-out);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
}
.pdp-btn-add-to-cart::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--pdp-brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--pdp-t-med) var(--pdp-e-out);
}
.pdp-btn-add-to-cart:hover {
  background: var(--pdp-emerald);
  border-color: var(--pdp-emerald);
  transform: translateY(-1px);
  color: #f8f4e9;
  box-shadow: 0 12px 28px -12px rgba(15, 95, 74, 0.55), var(--pdp-shadow-2);
}
.pdp-btn-add-to-cart:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.pdp-btn-add-to-cart:active { transform: translateY(0); }
.pdp-btn-add-to-cart:disabled {
  background: var(--pdp-ink-4);
  border-color: var(--pdp-ink-4);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.pdp-btn-add-to-cart i {
  font-size: 1rem;
  color: var(--pdp-brass);
  transition: transform var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-btn-add-to-cart:hover i { transform: translateX(2px); color: #fff; }


/* ============================================================
   14. Trust strip — one hairline row, no colored icon boxes
   ============================================================ */
.pdp-trust-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 8px 0 22px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--pdp-hairline);
}

.pdp-trust-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 12px 8px 0;
  background: transparent;
  border: none;
  border-inline-end: 1px solid var(--pdp-hairline);
  border-radius: 0;
  transition: none;
  cursor: default;
}
.pdp-trust-feature:last-child { border-inline-end: none; padding-inline-end: 0; }
.pdp-trust-feature:hover { background: transparent; box-shadow: none; transform: none; }

.pdp-feature-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.95rem;
  background: transparent !important;
  color: var(--pdp-brass) !important;
  box-shadow: none !important;
  flex-shrink: 0;
  transition: none;
}
.pdp-trust-feature:hover .pdp-feature-icon { transform: none; }

.pdp-feature-text {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--pdp-ink);
  line-height: 1.4;
  letter-spacing: 0;
}

@media (max-width: 575.98px) {
  .pdp-trust-features { grid-template-columns: repeat(2, 1fr); }
  .pdp-trust-feature:nth-child(2n) { border-inline-end: none; padding-inline-end: 0; }
  .pdp-trust-feature:nth-child(1),
  .pdp-trust-feature:nth-child(2) { border-bottom: 1px solid var(--pdp-hairline); padding-bottom: 14px; margin-bottom: 6px; }
}


/* ============================================================
   15. Action buttons (share / support) — text links with underline
   ============================================================ */
.pdp-action-buttons {
  display: flex;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--pdp-hairline);
}

.pdp-action-btn {
  flex: 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pdp-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color var(--pdp-t-fast) var(--pdp-e-out);
  position: relative;
}
.pdp-action-btn::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--pdp-brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-action-btn:hover {
  color: var(--pdp-brass);
  background: transparent;
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
.pdp-action-btn:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.pdp-action-btn i { color: var(--pdp-brass); font-size: 0.85rem; }
.pdp-action-btn:hover i { transform: none; }


/* ============================================================
   16. Tabs — clean segmented product info
   ============================================================ */
.pdp-product-tabs {
  background: #ffffff;
  border: 1px solid rgba(15, 95, 74, 0.12);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20, 23, 27, 0.04);
  overflow: hidden;
  margin-bottom: 40px;
}

.pdp-tabs-nav {
  display: flex;
  background: #f7faf8;
  border-bottom: 1px solid rgba(15, 95, 74, 0.12);
  padding: 8px;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pdp-tabs-nav::-webkit-scrollbar { display: none; }

.pdp-tab-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 14px;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pdp-ink-3);
  cursor: pointer;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: color var(--pdp-t-fast) var(--pdp-e-out),
              background var(--pdp-t-fast) var(--pdp-e-out);
  position: relative;
}
.pdp-tab-btn:hover:not(.pdp-active) {
  color: var(--pdp-ink);
  background: rgba(255, 255, 255, 0.7);
}

.pdp-tab-btn.pdp-active {
  color: var(--pdp-emerald);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 23, 27, 0.06);
}
.pdp-tab-btn.pdp-active::after { display: none; }
.pdp-tab-btn i { color: inherit; font-size: 0.85rem; }

.pdp-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  background: var(--pdp-emerald-soft);
  color: var(--pdp-emerald);
  font-size: 0.7rem;
  font-weight: 800;
  border: 1px solid rgba(15, 95, 74, 0.14);
  border-radius: 999px;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

.pdp-tabs-content {
  padding: 22px 20px 18px;
  background: transparent;
}

.pdp-tab-panel {
  display: none;
  animation: pdpTabReveal 260ms var(--pdp-e-out);
}
.pdp-tab-panel.pdp-active { display: block; }

@keyframes pdpTabReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Description content (legacy hooks) */
.pdp-description-content {
  font-size: var(--pdp-fs-body);
  line-height: 1.95;
  color: var(--pdp-ink-2);
  max-width: none;
}
.pdp-description-content p { margin-bottom: 14px; }
.pdp-description-content strong { color: var(--pdp-ink); }


/* ============================================================
   17. Specs table — hairline rows
   ============================================================ */
.pdp-specs-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: 1px solid var(--pdp-hairline);
}
.pdp-specs-table tr {
  transition: background var(--pdp-t-fast) var(--pdp-e-out);
  border-bottom: 1px solid var(--pdp-hairline);
}
.pdp-specs-table tr:hover { background: rgba(148, 118, 60, 0.04); transform: none; }
.pdp-specs-table th,
.pdp-specs-table td {
  padding: 14px 18px;
  text-align: start;
}
.pdp-specs-table th {
  width: 40%;
  font-weight: 700;
  color: var(--pdp-ink-3);
  font-size: 0.78rem;
  background: transparent;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pdp-specs-table th i {
  margin-inline-end: 8px;
  color: var(--pdp-brass);
}
.pdp-specs-table td {
  color: var(--pdp-ink);
  font-weight: 700;
  font-size: 0.94rem;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   18. Reviews section
   ============================================================ */
.pdp-reviews-summary-card {
  display: flex;
  gap: 40px;
  padding: 22px 0 28px;
  background: transparent;
  border-radius: 0;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: center;
  border: none;
  border-bottom: 1px solid var(--pdp-hairline);
}

.pdp-summary-score {
  text-align: start;
  padding: 0;
  min-width: 140px;
}

.pdp-score-number {
  font-family: var(--pdp-font-display);
  font-size: 3.2rem;
  font-weight: 900;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  color: var(--pdp-ink);
  line-height: 1;
  filter: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.pdp-score-stars { margin-top: 8px; }
.pdp-score-count {
  font-size: 0.78rem;
  color: var(--pdp-ink-3);
  margin-top: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.pdp-summary-bars {
  flex: 1;
  min-width: 220px;
}
.pdp-rating-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.pdp-bar-label {
  width: 32px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pdp-ink-2);
  font-variant-numeric: tabular-nums;
}
.pdp-bar-track {
  flex: 1;
  height: 6px;
  background: var(--pdp-paper-2);
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--pdp-hairline);
}
.pdp-bar-fill {
  height: 100%;
  background: var(--pdp-brass);
  border-radius: 0;
  transition: width var(--pdp-t-slow) var(--pdp-e-out);
  box-shadow: none;
}
.pdp-bar-count {
  width: 30px;
  font-size: 0.76rem;
  color: var(--pdp-ink-3);
  text-align: end;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   19. Review cards — hairline dividers
   ============================================================ */
.pdp-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pdp-review-card {
  padding: 22px 0;
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--pdp-hairline);
  transition: none;
}
.pdp-review-card:last-child { border-bottom: none; }
.pdp-review-card:hover { box-shadow: none; transform: none; border-color: var(--pdp-hairline); }
.pdp-review-card:hover { background: rgba(148, 118, 60, 0.03); }

.pdp-review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 16px;
}
.pdp-reviewer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pdp-reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pdp-paper);
  border: 1px solid var(--pdp-hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-brass);
  font-weight: 800;
  font-size: 1rem;
  box-shadow: none;
}
.pdp-reviewer-name {
  font-weight: 800;
  color: var(--pdp-ink);
  margin-bottom: 2px;
  font-size: 0.92rem;
}
.pdp-reviewer-date {
  font-size: 0.74rem;
  color: var(--pdp-ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.pdp-review-rating { display: flex; gap: 2px; }
.pdp-review-rating i { color: var(--pdp-brass); font-size: 0.82rem; }
.pdp-review-content {
  color: var(--pdp-ink-2);
  line-height: 1.85;
  font-size: 0.94rem;
}
.pdp-verified-purchase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 4px 10px;
  background: transparent;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pdp-emerald);
  border: 1px solid var(--pdp-emerald-line);
}


/* Empty reviews */
.pdp-empty-reviews {
  text-align: center;
  padding: 60px 20px;
  color: var(--pdp-ink-3);
}
.pdp-empty-reviews i {
  font-size: 2.6rem;
  opacity: 0.35;
  margin-bottom: 14px;
  display: block;
  color: var(--pdp-brass);
}
.pdp-empty-reviews h5 {
  font-weight: 800;
  color: var(--pdp-ink);
  margin-bottom: 6px;
  font-size: 1.05rem;
}


/* ============================================================
   20. Related products — larger, editorial
   ============================================================ */
.pdp-related-products-section {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 32px 0 8px;
  margin-bottom: 32px;
  border: none;
  border-top: 1px solid var(--pdp-hairline-strong);
}

.pdp-section-heading {
  font-family: var(--pdp-font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pdp-ink);
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.01em;
}
.pdp-section-heading::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--pdp-brass);
}
.pdp-section-heading i { display: none; }

.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 768px) {
  .pdp-related-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

.pdp-related-product-card {
  background: var(--pdp-canvas);
  border-radius: var(--pdp-r-md);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pdp-hairline);
  transition:
    transform var(--pdp-t-med) var(--pdp-e-out),
    box-shadow var(--pdp-t-med) var(--pdp-e-out),
    border-color var(--pdp-t-fast) var(--pdp-e-out);
  position: relative;
}
.pdp-related-product-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  height: 2px;
  background: var(--pdp-brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--pdp-t-med) var(--pdp-e-out);
  z-index: 1;
  opacity: 0.7;
}
.pdp-related-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pdp-shadow-3);
  border-color: var(--pdp-hairline-strong);
}
.pdp-related-product-card:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.pdp-related-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse 65% 55% at 50% 42%, #ffffff 0%, rgba(255,255,255,0) 72%),
    linear-gradient(160deg, #faf6ec 0%, #efe8d5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-bottom: 1px solid var(--pdp-hairline);
}
.pdp-related-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--pdp-t-med) var(--pdp-e-out);
  filter: none;
}
.pdp-related-product-card:hover .pdp-related-image { transform: scale(1.04); }

.pdp-related-details {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.pdp-related-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pdp-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  min-height: 2.5em;
}
.pdp-related-price {
  font-size: 1rem;
  font-weight: 900;
  color: var(--pdp-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: auto;
}
.pdp-related-price::before {
  content: '$';
  font-size: 0.7rem;
  color: var(--pdp-brass);
  font-weight: 700;
  margin-inline-end: 3px;
  vertical-align: baseline;
}


/* Search landing link — was a Bootstrap utility box with inline styles that
   matched nothing else on the page (own radius, own border colour, own
   typography). Rebuilt in the page's own language so it reads as part of the
   set rather than a stray widget. */
.pdp-landing-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 28px;
  background: var(--pdp-paper-2);
  border: 1px solid var(--pdp-hairline);
  border-radius: var(--pdp-r-sm);
  color: var(--pdp-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: border-color var(--pdp-t-fast) var(--pdp-e-out),
              background var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-landing-link:hover {
  border-color: var(--pdp-hairline-strong);
  background: var(--pdp-canvas);
  color: var(--pdp-ink);
}
.pdp-landing-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pdp-emerald-soft);
  color: var(--pdp-emerald);
  font-size: 0.82rem;
}
.pdp-landing-link-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdp-landing-link-arrow {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--pdp-ink-3);
  transition: transform var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-landing-link:hover .pdp-landing-link-arrow {
  transform: translateX(-3px);
  color: var(--pdp-emerald);
}


/* ============================================================
   21. Sidebar — editorial, quiet
   ============================================================ */
.pdp-product-sidebar {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 991.98px) {
  .pdp-product-sidebar { position: static; top: auto; }
}

.pdp-sidebar-card {
  background: var(--pdp-canvas);
  border-radius: var(--pdp-r-md);
  box-shadow: var(--pdp-shadow-1);
  padding: 22px 22px 20px;
  border: 1px solid var(--pdp-hairline);
  transition: box-shadow var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-sidebar-card:hover { box-shadow: var(--pdp-shadow-2); }

.pdp-sidebar-title {
  font-family: var(--pdp-font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--pdp-ink);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pdp-hairline);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.02em;
}
.pdp-sidebar-title i { color: var(--pdp-brass); font-size: 0.85rem; }

.pdp-sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pdp-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  background: transparent;
  border-radius: 0;
  text-decoration: none;
  color: var(--pdp-ink-2);
  font-weight: 600;
  font-size: 0.86rem;
  transition:
    color var(--pdp-t-fast) var(--pdp-e-out),
    padding-inline-start var(--pdp-t-fast) var(--pdp-e-out);
  border: none;
  border-bottom: 1px solid transparent;
}
.pdp-sidebar-link:hover {
  background: transparent;
  color: var(--pdp-ink);
  transform: none;
  box-shadow: none;
  padding-inline-start: 8px;
}
.pdp-sidebar-link:hover i { color: var(--pdp-brass); transform: none; }
.pdp-sidebar-link i {
  width: 16px;
  text-align: center;
  color: var(--pdp-ink-3);
  font-size: 0.78rem;
  transition: color var(--pdp-t-fast) var(--pdp-e-out);
}

/* Trust sidebar card — a quieter editorial block */
.pdp-trust-sidebar-card {
  background: linear-gradient(180deg, var(--pdp-canvas) 0%, var(--pdp-paper) 100%);
  border: 1px solid var(--pdp-hairline);
  text-align: start;
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
}
.pdp-trust-sidebar-card::before { display: none; }

.pdp-trust-icon-large {
  font-size: 1.2rem;
  color: var(--pdp-brass);
  margin-bottom: 10px;
  filter: none;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pdp-trust-icon-large::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--pdp-brass);
}

.pdp-trust-card-title {
  font-family: var(--pdp-font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pdp-ink);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
}

.pdp-trust-card-text {
  font-size: 0.86rem;
  color: var(--pdp-ink-2);
  line-height: 1.75;
  position: relative;
  z-index: 1;
  margin: 0;
}


/* ============================================================
   22. Mobile Sticky Cart Footer
   ============================================================ */
.pdp-mobile-cart-footer { display: none; }

@media (max-width: 991.98px) {
  .pdp-mobile-cart-footer {
    display: flex;
    position: fixed;
    bottom: calc(60px + var(--pdp-safe-bottom));
    left: 0;
    right: 0;
    background: rgba(255, 253, 246, 0.96);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    padding: 12px 16px;
    box-shadow: 0 -10px 30px rgba(20, 23, 27, 0.10);
    z-index: 1040;
    gap: 14px;
    align-items: center;
    border-top: 1px solid var(--pdp-hairline-strong);
  }

  .pdp-mobile-price-info { flex: 1; min-width: 0; }
  .pdp-mobile-price-label {
    font-size: 0.62rem;
    color: var(--pdp-ink-3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
  }
  .pdp-mobile-price-value {
    font-family: var(--pdp-font-display);
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--pdp-ink);
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
  .pdp-mobile-price-value small {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pdp-brass);
  }

  .pdp-mobile-add-btn {
    padding: 14px 22px;
    font-family: var(--pdp-font-display);
    font-size: 0.9rem;
    font-weight: 800;
    background: var(--pdp-ink);
    color: #f7f3ea;
    border: 1px solid var(--pdp-ink);
    border-radius: var(--pdp-r-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--pdp-shadow-2);
    white-space: nowrap;
    min-height: 48px;
    letter-spacing: 0.02em;
    transition: background var(--pdp-t-fast) var(--pdp-e-out);
  }
  .pdp-mobile-add-btn:hover,
  .pdp-mobile-add-btn:active {
    background: var(--pdp-emerald);
    border-color: var(--pdp-emerald);
    transform: none;
    box-shadow: 0 8px 20px -8px rgba(15, 95, 74, 0.55);
  }
  .pdp-mobile-add-btn i { color: var(--pdp-brass); }

  .pdp-cart-section { display: none; }

  /* Guard against PWA install banner burying the mobile CTA */
  body:has(#pwa-install-banner.show) .pdp-mobile-cart-footer {
    bottom: calc(176px + var(--pdp-safe-bottom));
  }
  body:has(#pwa-install-banner.show) .pdp-product-page-wrapper {
    padding-bottom: calc(300px + var(--pdp-safe-bottom));
  }
}


/* ============================================================
   23. Image Lightbox
   ============================================================ */
.pdp-image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 27, 0.94);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
.pdp-image-lightbox.pdp-active {
  display: flex;
  animation: pdpLightboxOpen 220ms var(--pdp-e-out);
}
@keyframes pdpLightboxOpen { from { opacity: 0; } to { opacity: 1; } }

.pdp-lightbox-close {
  position: absolute;
  top: 24px;
  inset-inline-end: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f7f3ea;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--pdp-t-fast) var(--pdp-e-out);
  z-index: 10;
}
.pdp-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--pdp-brass);
  transform: none;
}
.pdp-lightbox-image-wrap {
  max-width: 100%;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-lightbox-image-wrap img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--pdp-r-sm);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
  background: var(--pdp-canvas);
  padding: 8px;
}


/* ============================================================
   24. Toast notifications
   ============================================================ */
.pdp-toast-stack {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 32px);
  max-width: 380px;
}
.pdp-toast-notification {
  background: var(--pdp-canvas);
  border-radius: var(--pdp-r-md);
  box-shadow: var(--pdp-shadow-3);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: pdpToastEnter 260ms var(--pdp-e-out);
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 8px;
  border: 1px solid var(--pdp-hairline);
  color: var(--pdp-ink);
}
@keyframes pdpToastEnter {
  from { opacity: 0; transform: translateY(-16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
.pdp-toast-notification.pdp-success {
  border-inline-start: 3px solid var(--pdp-emerald);
}
.pdp-toast-notification.pdp-error {
  border-inline-start: 3px solid var(--pdp-vermilion);
}
.pdp-toast-notification.pdp-success i { color: var(--pdp-emerald); }
.pdp-toast-notification.pdp-error i   { color: var(--pdp-vermilion); }


/* ============================================================
   25. Responsive polish
   ============================================================ */
@media (max-width: 991.98px) {
  .pdp-product-page-wrapper {
    padding-bottom: calc(140px + var(--pdp-safe-bottom));
  }
  .pdp-product-main-container { padding: 20px 14px 0; }

  .pdp-product-title { font-size: clamp(1.4rem, 1rem + 2vw, 1.85rem); }
  .pdp-product-info { padding: 28px 22px 30px; }
  .pdp-rx-strip { padding: 12px 0; margin: 0 0 20px; }
  .pdp-rx-value { font-size: 0.88rem; }

  .pdp-tabs-content { padding: 24px 0 8px; }

  .pdp-action-buttons { flex-direction: row; gap: 20px; flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .pdp-price-value { font-size: 2.4rem; }
  .pdp-tab-btn { padding: 14px 12px; font-size: 0.85rem; }
  .pdp-tab-btn i { display: none; }
  .pdp-reviews-summary-card { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pdp-summary-bars { width: 100%; }
}

@media (max-width: 575.98px) {
  .pdp-product-hero-section { padding: 14px 0 4px; }
  .pdp-breadcrumb-list { font-size: 0.72rem; padding: 4px 0; }
  .pdp-product-main-container { padding: 14px 12px 0; }
  .pdp-product-info { padding: 24px 18px 26px; }
  .pdp-product-title { font-size: 1.35rem; }
  .pdp-product-subtitle { font-size: 0.72rem; margin-bottom: 16px; }
  .pdp-price-value { font-size: 2.1rem; }
  .pdp-feature-text { font-size: 0.72rem; }

  .pdp-specs-table th,
  .pdp-specs-table td { padding: 12px 12px; font-size: 0.86rem; }
  .pdp-specs-table th { font-size: 0.72rem; }
}

@media (max-width: 400px) {
  .pdp-product-main-container { padding: 12px 8px 0; }
  .pdp-product-info { padding: 20px 14px 22px; }
  .pdp-gallery-badges { top: 12px; inset-inline-end: 12px; }
  .pdp-badge-tag { padding: 5px 8px; font-size: 0.66rem; }
}


/* ============================================================
   26. Motion preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pdp-gallery-main:hover .pdp-product-image-main,
  .pdp-related-product-card:hover .pdp-related-image,
  .pdp-related-product-card:hover { transform: none !important; }
}


/* ============================================================
   27. Focus states — brass outline for accessibility
   ============================================================ */
.pdp-product-page-wrapper a:focus-visible,
.pdp-product-page-wrapper button:focus-visible,
.pdp-product-page-wrapper input:focus-visible {
  outline: 2px solid var(--pdp-brass);
  outline-offset: 2px;
  border-radius: var(--pdp-r-sm);
}


/* ============================================================================
   ================  v6 — "PRESCRIPTION BROADSHEET"  =========================
   Layers a further editorial voice on top of v5:
   - masthead strip above the primary card (broadsheet masthead)
   - drop-cap + ornament dividers in the description
   - museum caption under the product photo
   - scroll-triggered sticky purchase rail on desktop
   - numbered/lettered related products (magazine catalog feel)
   - editorial "about this class" sidebar block
   ============================================================================ */


/* ---- 28. Masthead strip — clean product meta bar (v7) -------------------- */
.pdp-masthead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 14px 18px;
  margin: 4px 0 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faf9 100%);
  border: 1px solid rgba(15, 95, 74, 0.14);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 23, 27, 0.04);
  font-family: var(--pdp-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pdp-ink-2);
  text-transform: none;
  letter-spacing: 0;
  overflow: visible;
  white-space: normal;
  font-variant-numeric: tabular-nums;
}
.pdp-masthead::-webkit-scrollbar { display: none; }

.pdp-masthead-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  line-height: 1.3;
}
.pdp-masthead-item strong {
  color: var(--pdp-ink);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.pdp-masthead-item i {
  color: var(--pdp-emerald);
  font-size: 0.82rem;
  letter-spacing: 0;
  width: 1.1em;
  text-align: center;
}
.pdp-masthead-sep {
  width: 1px;
  height: 16px;
  background: rgba(15, 95, 74, 0.18);
  flex-shrink: 0;
  opacity: 1;
  font-size: 0;
  color: transparent;
}

@media (max-width: 768px) {
  .pdp-masthead {
    padding: 12px 14px;
    font-size: 0.74rem;
    gap: 8px 12px;
    margin: 0 0 16px;
  }
  .pdp-masthead-sep {
    display: none;
  }
}


/* ---- 29. Product image caption (museum label) --------------------------- */
.pdp-image-caption {
  position: absolute;
  bottom: 16px;
  inset-inline-end: 16px;
  max-width: 220px;
  padding: 8px 12px 8px 14px;
  background: rgba(255, 253, 246, 0.92);
  backdrop-filter: blur(6px);
  border-inline-start: 2px solid var(--pdp-brass);
  border-radius: 2px;
  font-size: 0.62rem;
  color: var(--pdp-ink-2);
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  z-index: 10;
  pointer-events: none;
  box-shadow: var(--pdp-shadow-1);
}
.pdp-image-caption-label {
  display: block;
  font-size: 0.56rem;
  font-weight: 800;
  color: var(--pdp-brass);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-bottom: 2px;
}
.pdp-image-caption-body {
  font-weight: 600;
  color: var(--pdp-ink);
}
.pdp-image-caption-sub {
  display: block;
  margin-top: 2px;
  color: var(--pdp-ink-3);
  font-weight: 500;
}

@media (max-width: 767.98px) {
  .pdp-image-caption {
    bottom: 12px;
    inset-inline-end: 12px;
    max-width: 60%;
    font-size: 0.58rem;
    padding: 6px 10px;
  }
  .pdp-image-caption-label { font-size: 0.5rem; letter-spacing: 0.18em; }
}


/* ---- 30. About / description panel (v7.3) -------------------------------- */
/* Drop-cap deliberately removed — breaks Persian RTL + leading emoji. */
.pdp-description-content > p:first-of-type::first-letter,
.pdp-description-rich > p:first-child::first-letter {
  all: unset;
}

.pdp-about-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pdp-about-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 95, 74, 0.10);
}
.pdp-about-title {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pdp-ink);
  letter-spacing: -0.01em;
}
.pdp-about-subtitle {
  margin: 0;
  font-size: 0.84rem;
  color: var(--pdp-ink-3);
  line-height: 1.5;
}
.pdp-about-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--pdp-emerald-soft);
  border: 1px solid rgba(15, 95, 74, 0.14);
  color: var(--pdp-emerald);
  font-size: 0.74rem;
  font-weight: 700;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdp-about-prose {
  display: grid;
  gap: 12px;
}
.pdp-about-prose p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--pdp-ink-2);
}
.pdp-about-prose p.pdp-about-lead {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--pdp-ink);
  font-weight: 600;
}

/* Legacy heading kept inert */
.pdp-description-heading {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pdp-ink);
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  display: block;
}
.pdp-description-heading::before { display: none; }

@media (max-width: 575.98px) {
  .pdp-about-header {
    flex-direction: column;
    align-items: stretch;
  }
  .pdp-about-chip {
    max-width: 100%;
    align-self: flex-start;
  }
  .pdp-about-title { font-size: 1.05rem; }
  .pdp-about-prose p,
  .pdp-about-prose p.pdp-about-lead {
    font-size: 0.94rem;
    line-height: 1.85;
  }
}


/* ---- 31. Sticky purchase rail (desktop, on scroll) ---------------------- */
.pdp-sticky-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--pdp-hairline-strong);
  box-shadow: 0 1px 0 var(--pdp-hairline);
  z-index: 1030;
  transform: translateY(-100%);
  transition: transform 320ms var(--pdp-e-out);
  display: none;
  align-items: center;
}
.pdp-sticky-rail.pdp-rail-visible {
  transform: translateY(0);
}
@media (min-width: 992px) {
  .pdp-sticky-rail { display: flex; }
}

.pdp-sticky-rail-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.pdp-sticky-rail-thumb {
  width: 40px;
  height: 40px;
  border: 1px solid var(--pdp-hairline-strong);
  border-radius: var(--pdp-r-sm);
  background: var(--pdp-canvas);
  padding: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pdp-sticky-rail-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: auto;
  height: auto;
}

.pdp-sticky-rail-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdp-sticky-rail-name {
  font-family: var(--pdp-font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--pdp-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp-sticky-rail-meta {
  font-size: 0.68rem;
  color: var(--pdp-ink-3);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.pdp-sticky-rail-price {
  font-family: var(--pdp-font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--pdp-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.pdp-sticky-rail-price small {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--pdp-brass);
  letter-spacing: 0.08em;
}

.pdp-sticky-rail-btn {
  padding: 10px 20px;
  min-height: 40px;
  font-family: var(--pdp-font-display);
  font-size: 0.82rem;
  font-weight: 800;
  background: var(--pdp-ink);
  color: #f7f3ea;
  border: 1px solid var(--pdp-ink);
  border-radius: var(--pdp-r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--pdp-t-fast) var(--pdp-e-out);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.pdp-sticky-rail-btn:hover {
  background: var(--pdp-emerald);
  border-color: var(--pdp-emerald);
  color: #fff;
}
.pdp-sticky-rail-btn i {
  color: var(--pdp-brass);
  font-size: 0.82rem;
}
.pdp-sticky-rail-btn:hover i { color: #fff; }


/* ---- 32. Numbered related products (magazine catalog) ------------------- */
.pdp-related-product-card { counter-increment: pdp-related-index; }
.pdp-related-grid { counter-reset: pdp-related-index; }

.pdp-related-image-wrap::after {
  content: counter(pdp-related-index, decimal-leading-zero);
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  font-family: var(--pdp-font-display);
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--pdp-brass);
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border: 1px solid var(--pdp-hairline-strong);
  border-radius: 2px;
  background: rgba(255, 253, 246, 0.85);
  backdrop-filter: blur(4px);
  z-index: 2;
  font-variant-numeric: tabular-nums;
}


/* ---- 33. Editorial reviews empty state ---------------------------------- */
.pdp-empty-reviews {
  /* extend v5 rule */
  position: relative;
  padding: 60px 20px 50px;
}
.pdp-empty-reviews i {
  /* reduce the giant chat bubble - use ornament character instead */
  display: none;
}
.pdp-empty-reviews::before {
  content: '❦';
  display: block;
  color: var(--pdp-brass);
  font-size: 1.4rem;
  margin-bottom: 18px;
  opacity: 0.7;
}
.pdp-empty-reviews h5 {
  font-family: var(--pdp-font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--pdp-ink);
  margin-bottom: 8px;
}
.pdp-empty-reviews p {
  color: var(--pdp-ink-3);
  max-width: 36ch;
  margin: 0 auto;
  font-size: 0.9rem;
  line-height: 1.7;
}


/* ---- 34. Editorial "about this class" sidebar block --------------------- */
.pdp-class-note {
  position: relative;
}
.pdp-class-note-eyebrow {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--pdp-brass);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 10px;
}
.pdp-class-note-title {
  font-family: var(--pdp-font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--pdp-ink);
  margin: 0 0 12px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.pdp-class-note-body {
  font-size: 0.86rem;
  color: var(--pdp-ink-2);
  line-height: 1.85;
  margin: 0 0 14px;
}
.pdp-class-note-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pdp-ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--pdp-brass);
  transition: color var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-class-note-link:hover { color: var(--pdp-brass); }
.pdp-class-note-link i { font-size: 0.7rem; color: var(--pdp-brass); }


/* ---- 35. Section heading upgrade (add index number) --------------------- */
.pdp-section-heading {
  /* extend v5 rule — add small section index */
  position: relative;
}
.pdp-section-index {
  display: inline-block;
  font-family: var(--pdp-font-body);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--pdp-emerald);
  letter-spacing: 0.04em;
  text-transform: none;
  margin-inline-end: 12px;
  padding: 3px 8px;
  border: 1px solid rgba(15, 95, 74, 0.18);
  border-radius: 999px;
  background: var(--pdp-emerald-soft);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}


/* ---- 36. Description tab wrapper — better vertical rhythm --------------- */
.pdp-description-body {
  max-width: 68ch;
}
.pdp-description-body p {
  margin-bottom: 14px;
  line-height: 1.95;
  color: var(--pdp-ink-2);
}
.pdp-description-body strong { color: var(--pdp-ink); font-weight: 700; }
.pdp-description-body ul,
.pdp-description-body ol {
  padding-inline-start: 24px;
  margin-bottom: 16px;
  color: var(--pdp-ink-2);
  line-height: 1.85;
}
.pdp-description-body li { margin-bottom: 6px; }

/* Callout box kept for any remaining editorial notes */
.pdp-callout {
  position: relative;
  padding: 16px 18px;
  margin: 20px 0;
  background: #f7faf8;
  border: 1px solid rgba(15, 95, 74, 0.14);
  border-inline-start: 3px solid var(--pdp-emerald);
  border-radius: 10px;
  color: var(--pdp-ink);
  font-size: 0.94rem;
  line-height: 1.75;
  box-shadow: none;
}
.pdp-callout-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--pdp-emerald);
  text-transform: none;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

/* Safety guidance card — replaces fake pharmacist quote */
.pdp-safety-card {
  margin: 28px 0 4px;
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
  border: 1px solid rgba(15, 95, 74, 0.14);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 23, 27, 0.04);
}
.pdp-safety-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.pdp-safety-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--pdp-emerald-soft);
  color: var(--pdp-emerald);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.pdp-safety-card-title {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--pdp-ink);
  letter-spacing: -0.01em;
}
.pdp-safety-card-lead {
  margin: 0;
  font-size: 0.84rem;
  color: var(--pdp-ink-3);
  line-height: 1.5;
}
.pdp-safety-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pdp-safety-list li {
  position: relative;
  margin: 0;
  /* Logical, not physical. The bullet below is placed with
     inset-inline-start, which is the RIGHT edge on this RTL page, but the old
     `padding: 10px 12px 10px 36px` shorthand reserved its 36px on the LEFT.
     The dot was drawn straight over the first word of every line — "دارو را"
     rendered as a bullet plus "و را" — while the reserved space sat unused at
     the far end. Marker needs inset(12) + width(16) + breathing room. */
  padding-block: 10px;
  padding-inline: 38px 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 95, 74, 0.10);
  border-radius: 10px;
  color: var(--pdp-ink-2);
  font-size: 0.9rem;
  line-height: 1.65;
}
.pdp-safety-list li::before {
  content: '';
  position: absolute;
  top: 14px;
  inset-inline-start: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pdp-emerald-soft);
  box-shadow: inset 0 0 0 1px rgba(15, 95, 74, 0.22);
}
.pdp-safety-list li::after {
  content: '';
  position: absolute;
  top: 18px;
  inset-inline-start: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pdp-emerald);
}
.pdp-safety-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.pdp-safety-guarantee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 95, 74, 0.16);
  border-radius: 999px;
  color: var(--pdp-emerald);
  font-size: 0.8rem;
  font-weight: 700;
}
.pdp-safety-guarantee i { font-size: 0.9rem; }
/* Legacy code pill — hide if cached HTML still references it */
.pdp-safety-code { display: none !important; }
.pdp-safety-code-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pdp-ink-3);
}
.pdp-safety-code-value {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--pdp-emerald);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.pdp-safety-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--pdp-emerald);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0.82rem;
  font-weight: 700;
  transition: background var(--pdp-t-fast) var(--pdp-e-out), transform var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-safety-cta:hover {
  background: var(--pdp-emerald-2);
  transform: translateY(-1px);
}
.pdp-safety-cta i { font-size: 0.85rem; }

@media (max-width: 575.98px) {
  .pdp-safety-card { padding: 18px 16px 16px; }
  /* Logical, matching the base rule — the physical shorthand here put the
     34px reserve on the left while the bullet is drawn on the inline-start
     (right) edge, so the phone layout kept the text-over-marker collision
     even after the desktop one was fixed. */
  .pdp-safety-list li {
    font-size: 0.86rem;
    padding-block: 10px;
    padding-inline: 34px 12px;
  }
  .pdp-safety-meta { align-items: stretch; }
  .pdp-safety-guarantee,
  .pdp-safety-cta { width: 100%; justify-content: center; }
}

/* Legacy fake quote styles — hide if cached HTML still references them */
.pdp-pharmacist-quote { display: none !important; }


/* ---- 37b. Pharmaceutical Datasheet (specs tab v6.1) --------------------- */

.pdp-datasheet {
  --pdp-ds-gap: 20px;
  max-width: 100%;
}

/* Authenticity / trust banner at top of specs */
.pdp-datasheet-verify {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
  border: 1px solid rgba(15, 95, 74, 0.14);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 23, 27, 0.04);
}
.pdp-datasheet-verify-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--pdp-emerald-soft);
  border: none;
  color: var(--pdp-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.pdp-datasheet-verify-body {
  flex: 1;
  min-width: 0;
}
.pdp-datasheet-verify-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--pdp-emerald);
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.pdp-datasheet-verify-code {
  font-family: var(--pdp-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pdp-ink-2);
  letter-spacing: 0;
  line-height: 1.45;
}
.pdp-datasheet-verify-sku {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 95, 74, 0.12);
  border-radius: 10px;
  flex-shrink: 0;
}
.pdp-datasheet-verify-sku-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--pdp-ink-3);
}
.pdp-datasheet-verify-sku-value {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--pdp-ink);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.pdp-datasheet-verify-note {
  display: none; /* legacy */
}

/* Grid of sections */
.pdp-datasheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pdp-ds-gap);
  /* Sections are self-sizing; without this a short card was stretched to match
     a tall neighbour and ended in a pool of blank space under its last row. */
  align-items: start;
  counter-reset: pdp-ds-index;
}
/* The packaging section only renders when real packaging metadata exists, so
   the number of cards is 3 or 4. With an odd count the final card used to sit
   in a two-column row on its own, leaving a card-sized hole beside it — let it
   span the full width instead. */
.pdp-datasheet-section:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (max-width: 767.98px) {
  .pdp-datasheet-grid { grid-template-columns: 1fr; }
}

.pdp-datasheet-section {
  background: var(--pdp-canvas);
  border: 1px solid var(--pdp-hairline);
  border-radius: var(--pdp-r-sm);
  padding: 20px 22px 8px;
  position: relative;
  transition: border-color var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-datasheet-section:hover {
  border-color: var(--pdp-hairline-strong);
}
.pdp-datasheet-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pdp-brass);
  border-radius: var(--pdp-r-sm) var(--pdp-r-sm) 0 0;
  opacity: 0.35;
}

/* Section header — "§ A · IDENTIFICATION" */
.pdp-datasheet-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--pdp-hairline);
}
.pdp-datasheet-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pdp-font-body);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--pdp-emerald);
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border: 1px solid rgba(15, 95, 74, 0.18);
  border-radius: 999px;
  background: var(--pdp-emerald-soft);
  font-variant-numeric: tabular-nums;
}
/* Numbered by counter rather than by hand. The markup used to hard-code
   01/02/03/04, so on the many products with no packaging metadata the second
   card never rendered and the sequence read 01, 03, 04 — which looks like a
   missing section rather than a section that does not apply. */
.pdp-datasheet-section { counter-increment: pdp-ds-index; }
.pdp-datasheet-index::before {
  content: counter(pdp-ds-index, decimal-leading-zero);
}
.pdp-datasheet-title {
  font-family: var(--pdp-font-display);
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--pdp-ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.pdp-datasheet-icon {
  color: var(--pdp-brass);
  font-size: 0.85rem;
  margin-inline-start: auto;
  opacity: 0.7;
}

/* Rows inside each section */
.pdp-datasheet-rows {
  display: flex;
  flex-direction: column;
}
.pdp-datasheet-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--pdp-hairline);
}
.pdp-datasheet-row:last-child { border-bottom: none; }

.pdp-datasheet-row-label {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--pdp-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.pdp-datasheet-row-value {
  flex: 1;
  min-width: 0;
  text-align: end;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--pdp-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}
.pdp-datasheet-row-value.pdp-ds-value-code {
  font-family: var(--pdp-font-display);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--pdp-ink);
}
.pdp-datasheet-row-value.pdp-ds-value-verified {
  color: var(--pdp-emerald);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.pdp-datasheet-row-value.pdp-ds-value-verified::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pdp-emerald);
  box-shadow: 0 0 0 3px rgba(15, 95, 74, 0.15);
  display: inline-block;
}
.pdp-datasheet-row-value.pdp-ds-value-muted {
  color: var(--pdp-ink-3);
  font-weight: 600;
}
.pdp-datasheet-row-value.pdp-ds-value-en {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  letter-spacing: 0.02em;
  direction: ltr;
  text-align: end;
}

/* Prescription notice — the Rx warning at the bottom */
.pdp-datasheet-notice {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  margin-top: 20px;
  background: #f7faf8;
  border: 1px solid rgba(15, 95, 74, 0.16);
  border-inline-start: 3px solid var(--pdp-emerald);
  border-radius: 12px;
  align-items: flex-start;
}
.pdp-datasheet-notice-icon {
  color: var(--pdp-emerald);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.pdp-datasheet-notice-body {
  flex: 1;
  min-width: 0;
}
.pdp-datasheet-notice-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--pdp-emerald);
  text-transform: none;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.pdp-datasheet-notice-text {
  font-size: 0.88rem;
  color: var(--pdp-ink-2);
  line-height: 1.75;
  margin: 0;
}

/* Small-screen tweaks — heavily reworked in v6.2 */
@media (max-width: 767.98px) {
  /* Batch callout: reflow to two rows on mobile — code on top, note under */
  .pdp-datasheet-verify {
    flex-wrap: wrap;
    padding: 14px 16px;
    gap: 12px;
    align-items: flex-start;
  }
  .pdp-datasheet-verify-icon { width: 38px; height: 38px; font-size: 0.9rem; }
  .pdp-datasheet-verify-body { flex: 1 1 auto; min-width: 0; }
  .pdp-datasheet-verify-label {
    font-size: 0.76rem;
    letter-spacing: 0.01em;
  }
  .pdp-datasheet-verify-code {
    font-size: 0.86rem;
    letter-spacing: 0;
    word-break: break-word;
  }
  .pdp-datasheet-verify-sku {
    width: 100%;
    align-items: flex-start;
  }
  .pdp-datasheet-verify-note { display: none; }

  /* Section card: more breathing room, softer padding */
  .pdp-datasheet-section {
    padding: 18px 18px 10px;
    border-radius: var(--pdp-r-md);
  }
  .pdp-datasheet-header {
    padding-bottom: 14px;
    margin-bottom: 4px;
    gap: 10px;
  }
  .pdp-datasheet-index {
    font-size: 0.62rem;
    padding: 3px 7px;
    letter-spacing: 0.14em;
  }
  .pdp-datasheet-title {
    font-size: 0.92rem;
    line-height: 1.3;
  }

  /* Rows: stack label on top, VALUE FILLS FULL WIDTH (was the main bug) */
  .pdp-datasheet-rows { display: flex; flex-direction: column; }
  .pdp-datasheet-row {
    flex-direction: column;
    align-items: stretch;              /* was flex-start → children shrank to intrinsic width */
    gap: 5px;
    padding: 12px 0 14px;
    border-bottom: 1px dashed var(--pdp-hairline);
  }
  .pdp-datasheet-row-label {
    flex: 0 0 auto;
    width: 100%;                        /* full width so labels align right in RTL */
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: var(--pdp-brass);            /* elevate label color for better contrast */
    font-weight: 800;
    white-space: normal;                /* allow wrap if very long */
  }
  .pdp-datasheet-row-value {
    flex: 0 0 auto;
    width: 100%;                        /* KEY FIX — was auto/100px */
    text-align: start;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--pdp-ink);
    font-weight: 700;
  }
  .pdp-datasheet-row-value.pdp-ds-value-verified {
    justify-content: flex-start;
  }
  .pdp-datasheet-row-value.pdp-ds-value-code {
    font-size: 1rem;
    letter-spacing: 0.05em;
  }
  .pdp-datasheet-row-value.pdp-ds-value-en {
    text-align: start;
    letter-spacing: 0.02em;
  }

  /* Notice: readable padding on mobile */
  .pdp-datasheet-notice {
    padding: 16px 18px;
    margin-top: 18px;
    gap: 12px;
  }
  .pdp-datasheet-notice-text { font-size: 0.9rem; line-height: 1.85; }
  .pdp-datasheet-notice-label { font-size: 0.6rem; letter-spacing: 0.2em; }
}

/* Very small screens — 375px and below */
@media (max-width: 400px) {
  .pdp-datasheet-icon { display: none; }         /* hide section header accent icon */
  .pdp-datasheet-section { padding: 16px 16px 8px; }
  .pdp-datasheet-title { font-size: 0.86rem; }
  .pdp-datasheet-verify-code { font-size: 0.98rem; }
}

/* Extra tight screens — 320px iPhone SE 1st gen */
@media (max-width: 340px) {
  .pdp-datasheet-verify { padding: 12px 12px; }
  .pdp-datasheet-verify-code { font-size: 0.92rem; }
  .pdp-datasheet-row-value { font-size: 0.9rem; }
  .pdp-datasheet-row-label { font-size: 0.66rem; letter-spacing: 0.12em; }
}


/* =====================================================================
   v6.2 GLOBAL RESPONSIVE POLISH — beyond the datasheet
   ===================================================================== */

/* Masthead on mobile — wrap cleanly, no fade mask */
@media (max-width: 767.98px) {
  .pdp-masthead {
    padding: 12px 14px;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* Rx strip on tight mobile — better rhythm */
@media (max-width: 575.98px) {
  .pdp-rx-strip {
    padding: 12px 0;
    margin: 4px 0 20px;
    gap: 14px 0;
  }
  .pdp-rx-label {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: var(--pdp-brass);
    font-weight: 800;
    margin-bottom: 4px;
  }
  .pdp-rx-value {
    font-size: 0.9rem;
    line-height: 1.3;
  }
}

/* Trust strip on tight mobile — larger tap targets, cleaner wrap */
@media (max-width: 575.98px) {
  .pdp-trust-features {
    grid-template-columns: repeat(2, 1fr);
    padding: 16px 0 6px;
    gap: 12px 0;
  }
  .pdp-trust-feature {
    padding: 4px 10px 4px 0;
    gap: 6px;
    min-height: 44px;                    /* tap-target minimum */
  }
  .pdp-feature-text { font-size: 0.78rem; line-height: 1.35; font-weight: 700; }
  .pdp-feature-icon { font-size: 0.95rem; }
}

/* Tabs on mobile — equal-width segmented control */
@media (max-width: 575.98px) {
  .pdp-tabs-nav {
    position: relative;
    padding: 6px;
    gap: 4px;
  }
  .pdp-tab-btn {
    flex: 1 1 0;
    padding: 11px 8px;
    font-size: 0.82rem;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
  }
  .pdp-tab-btn i { display: none; }
  .pdp-tabs-content { padding: 16px 14px 14px; }
}

/* Legacy drop-cap mobile overrides — neutralize */
@media (max-width: 400px) {
  .pdp-description-content > p:first-of-type::first-letter,
  .pdp-description-rich > p:first-child::first-letter {
    all: unset;
  }
  .pdp-tabs-content { padding: 14px 12px 12px; }
  .pdp-callout {
    padding: 14px 16px 14px 18px;
    font-size: 0.9rem;
    line-height: 1.7;
  }
}

/* Related products on tight mobile — larger touch cards */
@media (max-width: 400px) {
  .pdp-related-grid { gap: 12px; }
  .pdp-related-details { padding: 12px 12px 14px; }
  .pdp-related-name { font-size: 0.82rem; min-height: 2.35em; }
  .pdp-related-price { font-size: 0.94rem; }
  .pdp-related-image-wrap::after {
    font-size: 0.58rem;
    padding: 2px 6px;
    top: 8px;
    inset-inline-start: 8px;
  }
}

/* Sidebar cards on mobile — proper spacing */
@media (max-width: 991.98px) {
  .pdp-product-sidebar {
    gap: 16px;
    margin-top: 12px;
  }
  .pdp-sidebar-card { padding: 20px 18px 18px; }
  .pdp-class-note-title { font-size: 0.95rem; }
  .pdp-class-note-body { font-size: 0.88rem; line-height: 1.8; }
  .pdp-trust-sidebar-card { padding: 22px 20px; }
}

/* Image caption on tight mobile — smaller so it doesn't dominate */
@media (max-width: 400px) {
  .pdp-image-caption {
    max-width: 55%;
    font-size: 0.56rem;
    padding: 5px 8px;
  }
  .pdp-image-caption-label { font-size: 0.48rem; letter-spacing: 0.16em; }
}

/* Product title on tight mobile — better sizing */
@media (max-width: 400px) {
  .pdp-product-title { font-size: 1.25rem; line-height: 1.2; }
  .pdp-product-subtitle { font-size: 0.7rem; margin-bottom: 14px; }
  .pdp-price-value { font-size: 2rem; }
  .pdp-price-currency { font-size: 1rem; }
  .pdp-eyebrow { font-size: 0.68rem; letter-spacing: 0.18em; margin-bottom: 12px; }
}

/* Add to cart button on very small screens — full-width comfy */
@media (max-width: 400px) {
  .pdp-btn-add-to-cart {
    min-height: 52px;
    font-size: 0.94rem;
    padding: 14px 18px;
  }
  .pdp-quantity-selector { min-height: 44px; }
  .pdp-qty-btn { width: 42px; height: 42px; }
  .pdp-qty-input { height: 42px; width: 48px; }
}

/* Mobile sticky cart footer — larger, safer */
@media (max-width: 575.98px) {
  .pdp-mobile-add-btn {
    min-height: 52px;
    padding: 15px 20px;
    font-size: 0.92rem;
  }
  .pdp-mobile-price-value { font-size: 1.35rem; }
  .pdp-mobile-price-label { font-size: 0.58rem; letter-spacing: 0.14em; }
}

/* Prevent horizontal overflow anywhere on mobile */
@media (max-width: 767.98px) {
  .pdp-product-page-wrapper { overflow-x: hidden; }
  .pdp-product-main-container { max-width: 100%; }
  .pdp-product-card,
  .pdp-product-tabs,
  .pdp-related-products-section { max-width: 100%; overflow: hidden; }
}


/* ============================================================================
   ================  v6.3 — TRUST & GUIDANCE ADDITIONS  =====================
   ============================================================================
   Three new content pillars, each answering a specific concern a real
   pharmacy customer has before buying:
     - Delivery countdown (WILL it arrive today?)
     - 3-step order guide (HOW do I actually buy?)
     - FAQ accordion (should I worry about ...)
     - Pharmacist quote (do experts stand behind this?)
   ============================================================================ */


/* ---- 38. Shipping summary (replaces countdown urgency block) ------------ */
.pdp-shipping-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 22px;
  padding: 0;
}
.pdp-shipping-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #f7faf8;
  border: 1px solid rgba(15, 95, 74, 0.12);
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--pdp-ink-2);
}
.pdp-shipping-summary-item i {
  color: var(--pdp-emerald);
  font-size: 0.9rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.pdp-shipping-summary-item strong {
  color: var(--pdp-ink);
  font-weight: 800;
}

/* Legacy countdown styles kept inert in case of cached HTML */
.pdp-delivery-eta { display: none !important; }

@media (max-width: 767.98px) {
  .pdp-shipping-summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .pdp-shipping-summary-item {
    padding: 11px 12px;
    font-size: 0.76rem;
  }
}


/* ---- 39. How-to-order 3-step guide -------------------------------------- */
.pdp-how-section {
  background: transparent;
  border-top: 1px solid var(--pdp-hairline-strong);
  padding: 36px 0 8px;
  margin-bottom: 32px;
}

.pdp-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: pdp-how-index;
}
@media (max-width: 767.98px) {
  .pdp-how-grid { grid-template-columns: 1fr; gap: 14px; }
}

.pdp-how-step {
  position: relative;
  padding: 26px 24px 22px;
  background: var(--pdp-canvas);
  border: 1px solid var(--pdp-hairline);
  border-radius: var(--pdp-r-sm);
  counter-increment: pdp-how-index;
  transition: box-shadow var(--pdp-t-fast) var(--pdp-e-out),
              border-color var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-how-step:hover {
  box-shadow: var(--pdp-shadow-2);
  border-color: var(--pdp-hairline-strong);
}
.pdp-how-step::before {
  content: counter(pdp-how-index, decimal-leading-zero);
  position: absolute;
  top: 20px;
  inset-inline-end: 22px;
  font-family: var(--pdp-font-display);
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--pdp-brass);
  opacity: 0.18;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.pdp-how-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--pdp-emerald-soft);
  border: 1px solid rgba(15, 95, 74, 0.16);
  color: var(--pdp-emerald);
  font-size: 1rem;
  margin-bottom: 14px;
}
.pdp-how-step-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--pdp-emerald);
  text-transform: none;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.pdp-how-step-title {
  font-family: var(--pdp-font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--pdp-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.pdp-how-step-body {
  font-size: 0.86rem;
  color: var(--pdp-ink-2);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 575.98px) {
  .pdp-how-step { padding: 20px 18px 18px; }
  .pdp-how-step::before { font-size: 2.2rem; top: 16px; }
  .pdp-how-step-title { font-size: 0.95rem; }
  .pdp-how-step-body { font-size: 0.85rem; }
}


/* ---- 40. FAQ accordion --------------------------------------------------- */
.pdp-faq-section {
  background: transparent;
  padding: 8px 0 8px;
  margin-bottom: 32px;
}

.pdp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--pdp-hairline-strong);
}

.pdp-faq-item {
  border-bottom: 1px solid var(--pdp-hairline);
  transition: background var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-faq-item:hover {
  background: rgba(148, 118, 60, 0.03);
}

/* Hide native disclosure triangle */
.pdp-faq-question { list-style: none; }
.pdp-faq-question::-webkit-details-marker { display: none; }
.pdp-faq-question::marker { content: ''; }

.pdp-faq-question {
  width: 100%;
  padding: 22px 4px 22px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--pdp-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pdp-ink);
  text-align: start;
  letter-spacing: -0.005em;
  line-height: 1.5;
  transition: color var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-faq-question:hover { color: var(--pdp-brass); }

.pdp-faq-marker {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--pdp-hairline-strong);
  background: var(--pdp-canvas);
  color: var(--pdp-brass);
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--pdp-t-med) var(--pdp-e-out),
    background var(--pdp-t-fast) var(--pdp-e-out),
    color var(--pdp-t-fast) var(--pdp-e-out);
  margin-top: 1px;
}

.pdp-faq-item[open] .pdp-faq-marker {
  transform: rotate(45deg);
  background: var(--pdp-ink);
  color: var(--pdp-brass);
  border-color: var(--pdp-ink);
}

/* Native <details> hides the answer via display:none while closed; when
   open, we fade it in with a slide-down keyframe. No max-height dance
   because the browser controls visibility. */
.pdp-faq-answer {
  animation: pdpFaqReveal 260ms var(--pdp-e-out);
}
@keyframes pdpFaqReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pdp-faq-answer-body {
  padding: 0 4px 22px;
  font-size: 0.92rem;
  color: var(--pdp-ink-2);
  line-height: 1.9;
  max-width: 68ch;
}
.pdp-faq-answer-body p { margin: 0 0 10px; }
.pdp-faq-answer-body p:last-child { margin-bottom: 0; }
.pdp-faq-answer-body strong { color: var(--pdp-ink); }

@media (max-width: 575.98px) {
  .pdp-faq-question {
    font-size: 0.94rem;
    padding: 18px 2px;
    gap: 12px;
  }
  .pdp-faq-marker { width: 28px; height: 28px; font-size: 0.7rem; }
  .pdp-faq-answer-body { padding: 0 2px 18px; font-size: 0.88rem; }
}


/* ---- 41. Legacy pharmacist quote (removed in v7.1) ---------------------- */
/* Styles moved to .pdp-safety-card; keep hide rule for stale HTML caches. */


/* ---- 42. Section heading for how-to-order / faq (v6.3) ------------------ */
.pdp-h-section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  font-family: var(--pdp-font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pdp-ink);
  letter-spacing: -0.01em;
}
.pdp-h-section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--pdp-hairline);
}
.pdp-h-section-heading .pdp-h-section-index {
  display: inline-block;
  font-family: var(--pdp-font-body);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--pdp-emerald);
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 3px 8px;
  border: 1px solid rgba(15, 95, 74, 0.18);
  border-radius: 999px;
  background: var(--pdp-emerald-soft);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .pdp-h-section-heading { font-size: 1rem; margin-bottom: 20px; gap: 10px; }
}


/* ============================================================================
   ================  v6.4 — RECENTLY VIEWED · SHARE · REVIEWS  ==============
   ============================================================================ */


/* ---- 43. Share popover -------------------------------------------------- */
.pdp-share-wrap {
  position: relative;
  display: inline-flex;
}

.pdp-share-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  inset-inline-end: -8px;
  background: var(--pdp-canvas);
  border: 1px solid var(--pdp-hairline-strong);
  border-radius: var(--pdp-r-md);
  padding: 14px;
  box-shadow: var(--pdp-shadow-3);
  z-index: 40;
  min-width: 240px;
  display: none;
  animation: pdpShareOpen 220ms var(--pdp-e-out);
}
.pdp-share-popover.pdp-share-open { display: block; }
@keyframes pdpShareOpen {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pdp-share-popover::before {
  content: '';
  position: absolute;
  bottom: -6px;
  inset-inline-end: 22px;
  width: 12px;
  height: 12px;
  background: var(--pdp-canvas);
  border-inline-end: 1px solid var(--pdp-hairline-strong);
  border-bottom: 1px solid var(--pdp-hairline-strong);
  transform: rotate(45deg);
}

.pdp-share-title {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--pdp-brass);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 12px;
}
.pdp-share-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdp-share-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 8px;
  background: transparent;
  border: none;
  border-radius: var(--pdp-r-xs);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pdp-ink);
  text-decoration: none;
  transition: background var(--pdp-t-fast) var(--pdp-e-out),
              color var(--pdp-t-fast) var(--pdp-e-out);
  text-align: start;
}
.pdp-share-btn:hover {
  background: var(--pdp-paper);
  color: var(--pdp-ink);
}
.pdp-share-btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pdp-paper);
  border: 1px solid var(--pdp-hairline-strong);
  color: var(--pdp-brass);
  font-size: 0.82rem;
  flex-shrink: 0;
}
.pdp-share-btn-whatsapp .pdp-share-btn-icon { color: #25D366; }
.pdp-share-btn-telegram .pdp-share-btn-icon { color: #229ED9; }
.pdp-share-btn-copy .pdp-share-btn-icon { color: var(--pdp-brass); }
.pdp-share-btn.pdp-share-copied {
  color: var(--pdp-emerald);
}
.pdp-share-btn.pdp-share-copied .pdp-share-btn-icon {
  color: var(--pdp-emerald);
  border-color: var(--pdp-emerald-line);
  background: var(--pdp-emerald-soft);
}

.pdp-share-code {
  display: block;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--pdp-paper);
  border: 1px dashed var(--pdp-hairline-strong);
  border-radius: var(--pdp-r-xs);
  font-family: var(--pdp-font-display);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--pdp-ink);
  letter-spacing: 0.06em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.pdp-share-code::before {
  content: attr(data-label);
  display: block;
  font-family: var(--pdp-font-body);
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--pdp-brass);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 4px;
  direction: rtl;
}

@media (max-width: 575.98px) {
  .pdp-share-popover {
    position: fixed;
    inset: auto 12px 68px 12px;
    min-width: 0;
    width: auto;
    animation: pdpShareOpenMobile 260ms var(--pdp-e-out);
  }
  .pdp-share-popover::before { display: none; }
  @keyframes pdpShareOpenMobile {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


/* ---- 44. Recently viewed products --------------------------------------- */
.pdp-recently-viewed-section {
  background: transparent;
  padding: 24px 0 8px;
  margin-bottom: 32px;
  display: none; /* JS reveals when there are entries */
}
.pdp-recently-viewed-section.pdp-rv-visible { display: block; }

.pdp-recently-viewed-scroll {
  position: relative;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--pdp-hairline-strong) transparent;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.pdp-recently-viewed-scroll::-webkit-scrollbar { height: 4px; }
.pdp-recently-viewed-scroll::-webkit-scrollbar-track { background: transparent; }
.pdp-recently-viewed-scroll::-webkit-scrollbar-thumb { background: var(--pdp-hairline-strong); border-radius: 2px; }

.pdp-recently-viewed-track {
  display: flex;
  gap: 16px;
  min-width: max-content;
  padding: 2px 0;
}

.pdp-rv-card {
  flex: 0 0 200px;
  background: var(--pdp-canvas);
  border: 1px solid var(--pdp-hairline);
  border-radius: var(--pdp-r-sm);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--pdp-t-fast) var(--pdp-e-out),
              border-color var(--pdp-t-fast) var(--pdp-e-out),
              transform var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-rv-card:hover {
  box-shadow: var(--pdp-shadow-2);
  border-color: var(--pdp-hairline-strong);
  transform: translateY(-2px);
}

.pdp-rv-image-wrap {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse 65% 55% at 50% 42%, #ffffff 0%, rgba(255,255,255,0) 72%),
    linear-gradient(160deg, #faf6ec 0%, #efe8d5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-bottom: 1px solid var(--pdp-hairline);
  position: relative;
}
.pdp-rv-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pdp-rv-eyebrow {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  font-size: 0.55rem;
  font-weight: 800;
  color: var(--pdp-brass);
  padding: 2px 6px;
  background: rgba(255, 253, 246, 0.9);
  border: 1px solid var(--pdp-hairline-strong);
  border-radius: 2px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pdp-rv-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pdp-rv-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pdp-ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.pdp-rv-price {
  font-family: var(--pdp-font-display);
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--pdp-ink);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
  letter-spacing: -0.01em;
}
.pdp-rv-price::before {
  content: '$';
  font-size: 0.66rem;
  color: var(--pdp-brass);
  font-weight: 700;
  margin-inline-end: 2px;
}

@media (max-width: 575.98px) {
  .pdp-rv-card { flex-basis: 160px; }
  .pdp-rv-name { font-size: 0.78rem; }
  .pdp-rv-body { padding: 10px 12px 12px; }
}


/* ---- 45. Rich reviews summary with CTA (v6.4) --------------------------- */
.pdp-reviews-block {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 32px;
  padding: 22px 0 28px;
  border-bottom: 1px solid var(--pdp-hairline);
  margin-bottom: 24px;
  align-items: stretch;
}
@media (max-width: 767.98px) {
  .pdp-reviews-block {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 18px 0 24px;
  }
}

.pdp-reviews-score-panel {
  padding: 22px 24px;
  background: var(--pdp-canvas);
  border: 1px solid var(--pdp-hairline);
  border-radius: var(--pdp-r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  position: relative;
}
.pdp-reviews-score-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pdp-brass);
  opacity: 0.4;
  border-radius: var(--pdp-r-md) var(--pdp-r-md) 0 0;
}
.pdp-reviews-score-number {
  font-family: var(--pdp-font-display);
  font-size: 3.4rem;
  font-weight: 900;
  color: var(--pdp-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  margin: 4px 0 0;
}
.pdp-reviews-score-number small {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pdp-ink-3);
  margin-inline-start: 2px;
}
.pdp-reviews-score-stars {
  display: flex;
  gap: 4px;
}
.pdp-reviews-score-stars i {
  color: var(--pdp-brass);
  font-size: 1.1rem;
}
.pdp-reviews-score-stars i.pdp-empty { color: var(--pdp-ink-4); }
.pdp-reviews-score-count {
  font-size: 0.78rem;
  color: var(--pdp-ink-3);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding-top: 10px;
  border-top: 1px solid var(--pdp-hairline);
  width: 100%;
}
.pdp-reviews-score-count strong {
  color: var(--pdp-ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pdp-reviews-breakdown {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.pdp-reviews-breakdown-title {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--pdp-brass);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 0 0 6px;
}
.pdp-reviews-breakdown-row {
  display: grid;
  grid-template-columns: 32px 1fr 44px;
  gap: 12px;
  align-items: center;
}
.pdp-rb-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pdp-ink-2);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.pdp-rb-label i {
  color: var(--pdp-brass);
  font-size: 0.72rem;
}
.pdp-rb-track {
  height: 6px;
  background: var(--pdp-paper-2);
  border: 1px solid var(--pdp-hairline);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.pdp-rb-fill {
  height: 100%;
  width: 0%;
  background: var(--pdp-brass);
  transition: width 700ms var(--pdp-e-out);
  border-radius: 3px;
}
.pdp-rb-count {
  font-size: 0.78rem;
  color: var(--pdp-ink-3);
  text-align: end;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.pdp-reviews-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  margin-top: 6px;
  border-top: 1px solid var(--pdp-hairline);
  flex-wrap: wrap;
}
.pdp-reviews-cta-copy {
  font-size: 0.86rem;
  color: var(--pdp-ink-2);
  font-weight: 500;
  line-height: 1.55;
  flex: 1;
  min-width: 200px;
}
.pdp-reviews-cta-copy strong {
  color: var(--pdp-ink);
  font-weight: 700;
}
.pdp-reviews-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--pdp-ink);
  color: #f7f3ea;
  border: 1px solid var(--pdp-ink);
  border-radius: var(--pdp-r-sm);
  font-family: var(--pdp-font-display);
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background var(--pdp-t-fast) var(--pdp-e-out);
  white-space: nowrap;
  cursor: pointer;
}
.pdp-reviews-cta-btn:hover {
  background: var(--pdp-emerald);
  border-color: var(--pdp-emerald);
  color: #fff;
}
.pdp-reviews-cta-btn i {
  color: var(--pdp-brass);
  font-size: 0.85rem;
}
.pdp-reviews-cta-btn:hover i { color: #fff; }

@media (max-width: 575.98px) {
  .pdp-reviews-score-number { font-size: 2.8rem; }
  .pdp-reviews-cta-row { flex-direction: column; align-items: stretch; }
  .pdp-reviews-cta-btn { justify-content: center; padding: 12px 18px; min-height: 48px; }
}


/* ---- 46. Save / Wishlist toggle (small heart button next to share) ------ */
.pdp-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--pdp-ink-2);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-save-btn:hover { color: var(--pdp-brass); }
.pdp-save-btn i { color: var(--pdp-brass); transition: transform var(--pdp-t-fast) var(--pdp-e-out); }
.pdp-save-btn.pdp-saved {
  color: var(--pdp-vermilion);
}
.pdp-save-btn.pdp-saved i {
  color: var(--pdp-vermilion);
  transform: scale(1.1);
}


/* ============================================================================
   ================  v6.5 — MAGNIFIER · REVEAL · A11Y  ======================
   ============================================================================ */


/* ---- 47. Magnifier lens on product image (desktop only) ---------------- */
.pdp-gallery-lens {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 180ms var(--pdp-e-out),
    transform 220ms var(--pdp-e-out);
  border: 2px solid var(--pdp-brass);
  box-shadow:
    0 0 0 4px rgba(148, 118, 60, 0.12),
    0 12px 30px -8px rgba(20, 23, 27, 0.35);
  background-repeat: no-repeat;
  background-color: var(--pdp-canvas);
  z-index: 15;
  will-change: transform, opacity, background-position;
}
.pdp-gallery-lens.pdp-lens-visible {
  opacity: 1;
  transform: scale(1);
}
/* the lens is desktop-only — touch devices already have double-tap zoom */
@media (hover: none) {
  .pdp-gallery-lens { display: none !important; }
}
@media (max-width: 991.98px) {
  .pdp-gallery-lens { display: none !important; }
}


/* ---- 48. Scroll-triggered reveal ---------------------------------------- */
.pdp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 620ms var(--pdp-e-out),
    transform 720ms var(--pdp-e-out);
  will-change: opacity, transform;
}
.pdp-reveal.pdp-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* staggered stagger for grid children */
.pdp-reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 520ms var(--pdp-e-out),
    transform 620ms var(--pdp-e-out);
}
.pdp-reveal-stagger.pdp-revealed > * {
  opacity: 1;
  transform: translateY(0);
}
.pdp-reveal-stagger.pdp-revealed > *:nth-child(1) { transition-delay: 40ms; }
.pdp-reveal-stagger.pdp-revealed > *:nth-child(2) { transition-delay: 100ms; }
.pdp-reveal-stagger.pdp-revealed > *:nth-child(3) { transition-delay: 160ms; }
.pdp-reveal-stagger.pdp-revealed > *:nth-child(4) { transition-delay: 220ms; }
.pdp-reveal-stagger.pdp-revealed > *:nth-child(5) { transition-delay: 280ms; }
.pdp-reveal-stagger.pdp-revealed > *:nth-child(n+6) { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .pdp-reveal,
  .pdp-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ---- 49. Skip-to-content link (a11y) ------------------------------------ */
.pdp-skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: 12px;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--pdp-ink);
  color: var(--pdp-paper);
  font-size: 0.86rem;
  font-weight: 700;
  border-radius: var(--pdp-r-sm);
  text-decoration: none;
  transition: top 180ms var(--pdp-e-out);
  box-shadow: var(--pdp-shadow-2);
}
.pdp-skip-link:focus {
  top: 12px;
  outline: 2px solid var(--pdp-brass);
  outline-offset: 2px;
}


/* ============================================================================
   ================  v6.6 — TRUST · PHARMACIST · SOCIAL PROOF  ==============
   ============================================================================ */


/* ---- 50. Certifications strip ------------------------------------------- */
.pdp-certs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 4px 0 22px;
  padding: 14px 0 8px;
  border-top: 1px solid var(--pdp-hairline);
}
.pdp-cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-inline-end: 1px solid var(--pdp-hairline);
  text-align: center;
}
.pdp-cert:last-child {
  border-inline-end: none;
}
.pdp-cert-mark {
  font-family: var(--pdp-font-display);
  font-size: 0.68rem;
  font-weight: 900;
  color: var(--pdp-ink);
  letter-spacing: 0.14em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pdp-cert-label {
  font-size: 0.54rem;
  font-weight: 700;
  color: var(--pdp-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pdp-cert-icon {
  color: var(--pdp-brass);
  font-size: 0.85rem;
  margin-bottom: 2px;
}

@media (max-width: 575.98px) {
  .pdp-certs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    padding: 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pdp-certs::-webkit-scrollbar { display: none; }
  .pdp-cert {
    flex: 0 0 auto;
    min-width: 72px;
    border-inline-end: 1px solid var(--pdp-hairline);
    border-bottom: none !important;
    padding: 4px 12px !important;
  }
  .pdp-cert:nth-child(n) {
    border-bottom: none;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .pdp-cert:last-child { border-inline-end: none; }
  .pdp-cert-mark { font-size: 0.66rem; letter-spacing: 0.08em; }
  .pdp-cert-label { font-size: 0.52rem; }
}


/* ---- 51. Social-proof: order counter chip ------------------------------- */
.pdp-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 5px 10px;
  background: transparent;
  border: 1px dashed var(--pdp-hairline-strong);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--pdp-ink-2);
  font-weight: 600;
}
.pdp-social-proof strong {
  color: var(--pdp-ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pdp-social-proof-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pdp-emerald);
  box-shadow: 0 0 0 2px rgba(15, 95, 74, 0.15);
  animation: pdpProofPulse 2.6s ease-in-out infinite;
}
@keyframes pdpProofPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-social-proof-dot { animation: none; }
}


/* ---- 52. "Ask a pharmacist" floating chip (desktop only) --------------- */
.pdp-ask-chip {
  position: fixed;
  bottom: 28px;
  inset-inline-start: 28px;
  z-index: 1020;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 18px;
  background: var(--pdp-ink);
  color: #f7f3ea;
  border: 1px solid var(--pdp-ink);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 30px -12px rgba(20, 23, 27, 0.35),
              0 4px 8px rgba(20, 23, 27, 0.08);
  font-family: var(--pdp-font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition:
    background var(--pdp-t-fast) var(--pdp-e-out),
    transform var(--pdp-t-fast) var(--pdp-e-out),
    box-shadow var(--pdp-t-med) var(--pdp-e-out);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
}
.pdp-ask-chip.pdp-ask-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.pdp-ask-chip:hover {
  background: var(--pdp-emerald);
  border-color: var(--pdp-emerald);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(15, 95, 74, 0.45),
              0 4px 8px rgba(20, 23, 27, 0.08);
}
.pdp-ask-chip-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(148, 118, 60, 0.22);
  color: var(--pdp-brass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: background var(--pdp-t-fast) var(--pdp-e-out),
              color var(--pdp-t-fast) var(--pdp-e-out);
}
.pdp-ask-chip:hover .pdp-ask-chip-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.pdp-ask-chip-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.pdp-ask-chip-eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--pdp-brass);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pdp-ask-chip:hover .pdp-ask-chip-eyebrow { color: rgba(255, 255, 255, 0.7); }
.pdp-ask-chip-text {
  font-size: 0.88rem;
  font-weight: 800;
  color: inherit;
}

/* Hide the chip on mobile — mobile already has the sticky cart footer + PWA
   banner + chat widget; a fourth floating element would crowd the viewport. */
@media (max-width: 991.98px) {
  .pdp-ask-chip { display: none; }
}

/* Hide when the sticky purchase rail is visible — one big CTA at the top
   is enough; a second CTA at the bottom is noise. */
.pdp-sticky-rail.pdp-rail-visible ~ .pdp-ask-chip,
body:has(.pdp-sticky-rail.pdp-rail-visible) .pdp-ask-chip {
  transform: translateY(80px);
  opacity: 0;
  pointer-events: none;
}


/* ---- 37. Print-safe overrides ------------------------------------------- */
@media print {
  .pdp-sticky-rail,
  .pdp-mobile-cart-footer,
  .pdp-gallery-zoom-btn,
  .pdp-action-buttons,
  .pdp-product-sidebar { display: none !important; }
  .pdp-product-page-wrapper {
    background: white;
    color: black;
  }
}