/* ===================================================================
   PRODUCT DETAIL PAGE — v5.0 "Apothecary Editorial"
   -------------------------------------------------------------------
   Design intent: move away from the templated gradient-e-commerce look
   toward the visual language of a high-end apothecary. Ivory paper
   background, brass hairline system, deep apothecary emerald as the
   only saturated color, ink-black display type, tabular numerals.

   Signature element: the "prescription label" data strip beneath the
   title — group / dosage / expiry / authentication, separated by
   1px brass hairlines. Encodes that this is a *pharmaceutical*.

   RTL-first. Persian typography via Vazirmatn.
   =================================================================== */


/* ============================================================
   1. Design Tokens
   ============================================================ */
:root {
  /* Paper & Ink */
  --pdp-paper:            #f7f3ea;   /* warm ivory page bg */
  --pdp-paper-2:          #f2ecdf;   /* 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 */

  /* Brass hairline system — the structural voice */
  --pdp-brass:            #94763c;
  --pdp-brass-hover:      #6e5628;
  --pdp-hairline:         rgba(148, 118, 60, 0.24);
  --pdp-hairline-strong:  rgba(148, 118, 60, 0.55);
  --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:
    /* faint grain to keep the ivory from looking flat */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.58  0 0 0 0 0.46  0 0 0 0 0.24  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    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 brass hairline across the top of the card */
.pdp-product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--pdp-brass) 12%,
    var(--pdp-brass) 88%,
    transparent 100%);
  opacity: 0.55;
}


/* ============================================================
   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, #faf6ec 0%, #efe8d5 100%);
  padding: 48px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  overflow: hidden;
  border-inline-end: 1px solid var(--pdp-hairline);
  align-self: stretch;
}
@media (max-width: 991.98px) {
  .pdp-product-gallery {
    border-inline-end: none;
    border-bottom: 1px solid var(--pdp-hairline);
    min-height: 340px;
    padding: 32px 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 */
.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;
}
@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-brass);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 14px;
}
.pdp-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--pdp-brass);
  opacity: 0.7;
}

/* 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.82rem;
  color: var(--pdp-ink-3);
  margin: 0 0 22px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   9. Prescription-label data strip — THE SIGNATURE ELEMENT
   ============================================================
   Under the title, a 4-cell horizontal band with brass hairlines
   between cells. Each cell = uppercase label + bold ink value.
   Reads like the top of a real pill-bottle label.
   ============================================================ */
.pdp-rx-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--pdp-hairline-strong);
  margin: 4px 0 26px;
  padding: 14px 0;
  background: transparent;
}

.pdp-rx-cell {
  position: relative;
  padding: 2px 10px;
  border-inline-end: 1px solid var(--pdp-hairline);
  text-align: start;
  min-width: 0; /* required for text-truncate inside grid */
}
.pdp-rx-cell:first-child { padding-inline-start: 0; }
.pdp-rx-cell:last-child {
  border-inline-end: none;
  padding-inline-end: 0;
}

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

.pdp-rx-value {
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--pdp-ink);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  /* allow wrap onto a second line if needed; clamp to 2 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.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 — hairline underline, not raised cards
   ============================================================ */
.pdp-product-tabs {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  margin-bottom: 40px;
  border: none;
}

.pdp-tabs-nav {
  display: flex;
  background: transparent;
  border-bottom: 1px solid var(--pdp-hairline-strong);
  padding: 0;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pdp-tabs-nav::-webkit-scrollbar { display: none; }

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

.pdp-tab-btn.pdp-active {
  color: var(--pdp-ink);
  background: transparent;
  box-shadow: none;
}
.pdp-tab-btn.pdp-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  height: 2px;
  background: var(--pdp-ink);
  border-radius: 0;
}
.pdp-tab-btn i { color: var(--pdp-brass); 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: transparent;
  color: var(--pdp-brass);
  font-size: 0.7rem;
  font-weight: 800;
  border: 1px solid var(--pdp-hairline-strong);
  border-radius: 999px;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

.pdp-tabs-content {
  padding: 30px 4px 8px;
  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 */
.pdp-description-content {
  font-size: var(--pdp-fs-body);
  line-height: 1.95;
  color: var(--pdp-ink-2);
  max-width: 68ch;
}
.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;
}


/* ============================================================
   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 -------------------------------------------------- */
.pdp-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  margin: 8px 0 20px;
  background: transparent;
  border-top: 1px solid var(--pdp-hairline-strong);
  border-bottom: 1px solid var(--pdp-hairline-strong);
  font-family: var(--pdp-font-display);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--pdp-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  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;
}
.pdp-masthead-item strong {
  color: var(--pdp-ink);
  font-weight: 800;
  letter-spacing: 0.18em;
}
.pdp-masthead-item i {
  color: var(--pdp-brass);
  font-size: 0.72rem;
  letter-spacing: 0;
}
.pdp-masthead-sep {
  color: var(--pdp-brass);
  opacity: 0.7;
  font-size: 0.6rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .pdp-masthead {
    padding: 10px 12px;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    gap: 14px;
    margin: 4px 0 14px;
  }
  /* on mobile the middle item takes priority */
  .pdp-masthead .pdp-masthead-item:nth-child(3),
  .pdp-masthead .pdp-masthead-sep:nth-child(4) {
    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. Rich description typography ------------------------------------ */
.pdp-description-content {
  /* extend existing rule */
  position: relative;
}

/* Drop-cap on the very first paragraph */
.pdp-description-content > p:first-of-type::first-letter,
.pdp-description-rich > p:first-child::first-letter {
  font-family: var(--pdp-font-display);
  float: inline-start;
  font-size: 3.4rem;
  line-height: 0.9;
  font-weight: 900;
  padding-inline-end: 10px;
  padding-top: 6px;
  color: var(--pdp-ink);
  letter-spacing: -0.04em;
  /* subtle brass under-shadow so the letter feels stamped */
  text-shadow: 1px 1px 0 var(--pdp-brass);
}

/* First paragraph gets slightly larger type — the "lede" */
.pdp-description-content > p:first-of-type,
.pdp-description-rich > p:first-child {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--pdp-ink);
  margin-bottom: 18px;
}

/* Ornament divider — use ❦ character between sections */
.pdp-description-content hr,
.pdp-description-ornament {
  border: none;
  height: 24px;
  margin: 22px auto;
  text-align: center;
  color: var(--pdp-brass);
  overflow: visible;
  background: transparent;
}
.pdp-description-content hr::after,
.pdp-description-ornament::after {
  content: '❦';
  font-size: 1.1rem;
  color: var(--pdp-brass);
  display: inline-block;
  letter-spacing: 0;
  opacity: 0.8;
}

/* Tab-content heading (for structured description tabs) */
.pdp-description-heading {
  font-family: var(--pdp-font-display);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--pdp-brass);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 24px 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pdp-description-heading::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--pdp-brass);
}
.pdp-description-heading:first-child { margin-top: 0; }

@media (max-width: 575.98px) {
  .pdp-description-content > p:first-of-type::first-letter,
  .pdp-description-rich > p:first-child::first-letter {
    font-size: 2.8rem;
  }
  .pdp-description-content > p:first-of-type,
  .pdp-description-rich > p:first-child {
    font-size: 1rem;
  }
}


/* ---- 31. Sticky purchase rail (desktop, on scroll) ---------------------- */
.pdp-sticky-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(255, 253, 246, 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-display);
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--pdp-brass);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-inline-end: 12px;
  padding: 3px 7px;
  border: 1px solid var(--pdp-hairline-strong);
  border-radius: 2px;
  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 for pull-quotes inside description */
.pdp-callout {
  position: relative;
  padding: 18px 22px 18px 26px;
  margin: 20px 0;
  background: linear-gradient(180deg, var(--pdp-canvas), var(--pdp-paper));
  border-inline-start: 3px solid var(--pdp-brass);
  border-radius: 2px;
  color: var(--pdp-ink);
  font-size: 0.95rem;
  line-height: 1.75;
  box-shadow: var(--pdp-shadow-0);
}
.pdp-callout-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--pdp-brass);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 6px;
}


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

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

/* Batch verification callout — sits at the top of the datasheet */
.pdp-datasheet-verify {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, var(--pdp-canvas), var(--pdp-paper));
  border: 1px solid var(--pdp-hairline-strong);
  border-inline-start: 3px solid var(--pdp-brass);
  border-radius: var(--pdp-r-sm);
  box-shadow: var(--pdp-shadow-0);
}
.pdp-datasheet-verify-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pdp-paper);
  border: 1px solid var(--pdp-brass);
  color: var(--pdp-brass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.pdp-datasheet-verify-body {
  flex: 1;
  min-width: 0;
}
.pdp-datasheet-verify-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--pdp-brass);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-bottom: 3px;
}
.pdp-datasheet-verify-code {
  font-family: var(--pdp-font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--pdp-ink);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.pdp-datasheet-verify-note {
  font-size: 0.8rem;
  color: var(--pdp-ink-2);
  font-weight: 600;
  margin-inline-start: auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pdp-datasheet-verify-note::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);
}

/* Grid of sections */
.pdp-datasheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pdp-ds-gap);
}
@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-display);
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--pdp-brass);
  letter-spacing: 0.16em;
  padding: 3px 8px;
  border: 1px solid var(--pdp-hairline-strong);
  border-radius: 2px;
  background: var(--pdp-paper);
  font-variant-numeric: tabular-nums;
}
.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: var(--pdp-vermilion-soft);
  border: 1px solid rgba(180, 48, 46, 0.25);
  border-inline-start: 3px solid var(--pdp-vermilion);
  border-radius: var(--pdp-r-sm);
  align-items: flex-start;
}
.pdp-datasheet-notice-icon {
  color: var(--pdp-vermilion);
  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.62rem;
  font-weight: 800;
  color: var(--pdp-vermilion);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-bottom: 6px;
}
.pdp-datasheet-notice-text {
  font-size: 0.86rem;
  color: var(--pdp-ink);
  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 14px;
    align-items: center;
  }
  .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.6rem;
    letter-spacing: 0.2em;
  }
  .pdp-datasheet-verify-code {
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    word-break: break-all;
  }
  .pdp-datasheet-verify-note {
    width: 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
    padding-top: 10px;
    border-top: 1px dashed var(--pdp-hairline);
    font-size: 0.75rem;
    color: var(--pdp-emerald);
    font-weight: 700;
  }

  /* 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 scroll indicator on mobile — soft brass fade at the trailing edge */
@media (max-width: 767.98px) {
  .pdp-masthead {
    /* Restore all 4 items on mobile (v6 hid them), let it scroll */
    padding: 10px 14px;
  }
  .pdp-masthead .pdp-masthead-item:nth-child(3),
  .pdp-masthead .pdp-masthead-sep:nth-child(4) {
    display: inline-flex;
  }
  .pdp-masthead {
    position: relative;
    mask-image: linear-gradient(to left, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}

/* 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 — larger tap targets, scroll indicator */
@media (max-width: 575.98px) {
  .pdp-tabs-nav {
    position: relative;
    padding: 0;
    gap: 0;
  }
  .pdp-tab-btn {
    padding: 15px 14px;
    font-size: 0.9rem;
    min-width: 33%;
    min-height: 48px;                    /* tap-target */
    justify-content: center;
  }
  .pdp-tab-btn i { display: none; }
  .pdp-tabs-content { padding: 24px 4px 6px; }
}

/* Description drop-cap on tight mobile — scale down proportionally */
@media (max-width: 400px) {
  .pdp-description-content > p:first-of-type::first-letter,
  .pdp-description-rich > p:first-child::first-letter {
    font-size: 2.4rem;
    padding-inline-end: 8px;
  }
  .pdp-description-content > p:first-of-type,
  .pdp-description-rich > p:first-child {
    font-size: 0.98rem;
    line-height: 1.85;
  }
  .pdp-description-heading {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    margin: 18px 0 8px;
  }
  .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. Delivery countdown block --------------------------------------- */
.pdp-delivery-eta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  margin: 4px 0 22px;
  background: var(--pdp-canvas);
  border: 1px solid var(--pdp-hairline-strong);
  border-inline-start: 3px solid var(--pdp-emerald);
  border-radius: var(--pdp-r-sm);
  position: relative;
  overflow: hidden;
}
.pdp-delivery-eta::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 80px;
  background: linear-gradient(to left,
    rgba(15, 95, 74, 0.06) 0%,
    transparent 100%);
  pointer-events: none;
}

.pdp-delivery-eta-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pdp-emerald-soft);
  color: var(--pdp-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.pdp-delivery-eta-body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.pdp-delivery-eta-headline {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pdp-ink);
  line-height: 1.35;
  margin-bottom: 2px;
}
.pdp-delivery-eta-headline strong {
  color: var(--pdp-emerald);
  font-weight: 800;
}
.pdp-delivery-eta-meta {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--pdp-ink-3);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.pdp-delivery-eta-timer {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--pdp-font-display);
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--pdp-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
  background: var(--pdp-paper);
  border: 1px solid var(--pdp-hairline-strong);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  min-width: 96px;
  justify-content: center;
  /* force HH:MM:SS to always read left-to-right, universal time convention */
  direction: ltr;
  unicode-bidi: isolate;
}
.pdp-delivery-eta-timer-sep {
  color: var(--pdp-brass);
  font-weight: 700;
  padding: 0 1px;
  animation: pdpTimerBlink 1.2s infinite;
}
@keyframes pdpTimerBlink {
  0%, 60% { opacity: 1; }
  70%, 100% { opacity: 0.35; }
}

.pdp-delivery-eta.pdp-cutoff-passed {
  border-inline-start-color: var(--pdp-brass);
}
.pdp-delivery-eta.pdp-cutoff-passed .pdp-delivery-eta-icon {
  background: rgba(148, 118, 60, 0.1);
  color: var(--pdp-brass);
}
.pdp-delivery-eta.pdp-cutoff-passed .pdp-delivery-eta-headline strong {
  color: var(--pdp-brass);
}

@media (max-width: 575.98px) {
  .pdp-delivery-eta {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 10px 12px;
  }
  .pdp-delivery-eta-body { flex: 1 1 auto; }
  .pdp-delivery-eta-timer {
    width: 100%;
    padding: 8px 10px;
    font-size: 1rem;
  }
  .pdp-delivery-eta-headline { font-size: 0.8rem; }
  .pdp-delivery-eta-meta { font-size: 0.68rem; }
}


/* ---- 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: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pdp-paper);
  border: 1px solid var(--pdp-hairline-strong);
  color: var(--pdp-brass);
  font-size: 1rem;
  margin-bottom: 14px;
}
.pdp-how-step-eyebrow {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--pdp-brass);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  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. Pharmacist blockquote (inside description tab) ----------------- */
.pdp-pharmacist-quote {
  position: relative;
  margin: 28px 0 4px;
  padding: 26px 26px 22px 26px;
  background: linear-gradient(180deg, var(--pdp-canvas), var(--pdp-paper));
  border: 1px solid var(--pdp-hairline);
  border-radius: var(--pdp-r-sm);
}
.pdp-pharmacist-quote::before {
  content: '“';
  position: absolute;
  top: -4px;
  inset-inline-start: 20px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4rem;
  color: var(--pdp-brass);
  line-height: 1;
  opacity: 0.35;
  font-weight: 400;
}
.pdp-pharmacist-quote-body {
  font-family: var(--pdp-font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--pdp-ink);
  line-height: 1.75;
  margin: 0 0 14px;
  font-style: normal;
  letter-spacing: -0.005em;
}
.pdp-pharmacist-quote-attribution {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--pdp-hairline);
}
.pdp-pharmacist-quote-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pdp-paper);
  border: 1px solid var(--pdp-hairline-strong);
  color: var(--pdp-brass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.pdp-pharmacist-quote-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pdp-ink);
  letter-spacing: 0;
}
.pdp-pharmacist-quote-role {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--pdp-ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 1px;
}

@media (max-width: 575.98px) {
  .pdp-pharmacist-quote { padding: 22px 20px 20px 20px; }
  .pdp-pharmacist-quote::before { font-size: 3.2rem; top: -2px; }
  .pdp-pharmacist-quote-body { font-size: 1rem; }
}


/* ---- 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-display);
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--pdp-brass);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--pdp-hairline-strong);
  border-radius: 2px;
  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 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 0;
    padding: 12px 0;
  }
  .pdp-cert:nth-child(3n) { border-inline-end: none; }
  .pdp-cert:nth-child(1), .pdp-cert:nth-child(2), .pdp-cert:nth-child(3) {
    border-bottom: 1px solid var(--pdp-hairline);
    padding-bottom: 10px;
  }
  .pdp-cert:nth-child(4), .pdp-cert:nth-child(5) {
    padding-top: 8px;
  }
  .pdp-cert-mark { font-size: 0.66rem; letter-spacing: 0.12em; }
  .pdp-cert-label { font-size: 0.5rem; }
}


/* ---- 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;
  }
}