/* Kavya announcement bar — thin top strip.
 * Single-strip: rotating messages (original mode).
 * R16.5: Dual-strip mode: black countdown bar + pink promo strip.
 */

/* ── Single-strip mode ─────────────────────────────────────── */
.kab {
  display: block;
  width: 100%;
  background: var(--kab-bg, #000);
  color: var(--kab-fg, #fff);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  height: 36px;
  overflow: hidden;
  /* Wave 1B — TOPMOST element of the page. Now rendered before kavya_header (which
   * is the sticky bar). The urgency strip sits at the very top in normal flow and
   * scrolls away as the user scrolls (Beravia behavior); the sticky header (z110)
   * then pins to top:0. relative + z90 keeps it below the header during overlap. */
  position: relative;
  z-index: 90;
}

.kab-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 36px;
}

/* Static 4-line fallback animation. The render now emits a per-render, count-aware
   @keyframes (carried via data-anim) for any message count; this static rule only
   applies when no data-anim is present (defensive — covers cached/older render). */
.kab[data-animate="true"]:not([data-anim]) .kab-track {
  animation: kab-cycle var(--kab-cycle, 12s) ease-in-out infinite;
}

.kab-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 100%;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--kab-fg, #fff);
  padding: 0 16px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.2;
}

@keyframes kab-cycle {
  0%, 22% { transform: translateY(0); }
  25%, 47% { transform: translateY(-36px); }
  50%, 72% { transform: translateY(-72px); }
  75%, 97% { transform: translateY(-108px); }
  100% { transform: translateY(0); }
}

/* ── Dual-strip mode (R16.5) ───────────────────────────────── */
.kab-dual {
  display: block;
  width: 100%;
  /* Wave 1B — TOPMOST element (rendered before kavya_header). The dual scarcity
   * strip sits at the very top in normal flow and scrolls away; the sticky header
   * (z110) pins to top:0 afterward. See .kab note above. */
  position: relative;
  z-index: 90;
}

/* Top strip: black countdown */
.kab-countdown-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kabd-bg, #000000);
  color: var(--kabd-fg, #ffffff);
  height: 44px;
  width: 100%;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kab-countdown-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.kab-countdown-label {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.kab-countdown-timer {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kab-timer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 3px 8px;
  min-width: 38px;
}

.kab-timer-num {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kab-timer-unit {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.75;
  margin-top: 1px;
}

.kab-timer-sep {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.6;
  align-self: center;
  padding-bottom: 12px;
}

/* Bottom strip: pink promo */
.kab-promo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kabp-bg, #FAE0EB);
  color: var(--kabp-fg, #1a1a1a);
  height: 32px;
  width: 100%;
  padding: 0 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.kab-promo-msg {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kab-promo-msg strong {
  font-weight: 800;
}

@media (max-width: 599px) {
  .kab-countdown-inner { gap: 8px; }
  .kab-countdown-label { font-size: 10px; }
  .kab-timer-num { font-size: 14px; }
  .kab-timer-block { min-width: 32px; padding: 2px 6px; }
  .kab-countdown-strip { height: 48px; flex-wrap: wrap; justify-content: center; }
  .kab-promo-strip { font-size: 11px; }
}

/* Kavya header — clean port of cropro/ayeshanails sticky header.
 * Editable via --kh-* custom properties set inline by renderer.
 * 60px tall, logo + nav + actions, mobile collapses to hamburger.
 */

.kh {
  display: block;
  width: 100%;
  background: var(--kh-bg, #ffffff);
  color: var(--kh-fg, #000000);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  /* Above the announcement bar (.kab z-index:100) so the currency dropdown,
     which drops down over it, stays clickable. */
  position: relative;
  z-index: 110;
}

.kh[data-sticky="true"] {
  position: sticky;
  top: 0;
  z-index: 110;
  /* M01 — reveal-on-scroll-up transition */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

/* M01 — hide/reveal state classes added by bindRevealHeader */
.kh.is-visible { transform: translateY(0); }
.kh.is-hidden  { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .kh[data-sticky="true"] { transition: none !important; }
  .kh.is-hidden { transform: none !important; }
}

.kh-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  /* Clone: container has py-2 = 8px top/bottom, logo h=45px → total 61px ≈ 60px */
  padding: 8px 24px;
  min-height: 60px;
  box-sizing: border-box;
}

.kh-mobile-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 6px;
  margin: 0;
  color: var(--kh-fg, #000);
  cursor: pointer;
}

.kh-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--kh-fg, #000);
  flex-shrink: 0;
}

.kh-logo-img {
  /* Clone: logo img h=45px, w=100px (natural: SVG).
     Wave 1E — the logo is now a WIDE typography wordmark (~3.3:1 banner). Height
     is locked to the header band; width follows the natural aspect (a 3.3:1
     wordmark at 45px is ~150px wide). object-fit:contain + a max-width cap keep
     it inside the band and prevent overflow on narrow viewports. */
  height: var(--kh-logo-h, 45px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.kh-logo-text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.kh-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: 24px;
  flex: 1 1 auto;
}

.kh-link {
  /* Clone: font-size=14px, font-weight=200, letter-spacing=0.7px, uppercase */
  font-size: 14px;
  font-weight: 200;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--kh-fg, #000);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  transition: opacity 200ms ease;
}

.kh-link:hover {
  opacity: 0.7;
}

.kh-link--active {
  background: var(--kh-accent-bg, #000);
  color: var(--kh-accent-fg, #fff);
  font-weight: 700;
}

.kh-link--active:hover {
  opacity: 1;
}

.kh-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-shrink: 0;
}

.kh-cta {
  display: inline-flex;
  align-items: center;
  background: var(--kh-accent-bg, #000);
  color: var(--kh-accent-fg, #fff);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
  transition: opacity 200ms ease;
}

.kh-cta:hover { opacity: 0.85; }

.kh-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kh-fg, #000);
  text-decoration: none;
  padding: 6px;
}

.kh-cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--kh-accent-bg, #000);
  color: var(--kh-accent-fg, #fff);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@media (max-width: 899px) {
  .kh-mobile-toggle { display: inline-flex; }
  /* Desktop inline nav is hidden on mobile — the off-canvas panel takes over */
  .kh-nav { display: none; }
  .kh-cta { display: none; }

  /* Wave 1B — strict 3-item mobile header: hamburger (left) · logo (center) · cart
     (right). The currency selector is moved off the top bar into the off-canvas
     panel (kh-currency--panel stays visible there); hide ONLY the top-bar copy. */
  .kh-actions .kh-currency { display: none; }

  /* Center the logo between the hamburger and the cart. The three flex children
     (toggle / logo / actions) get equal-weight side rails so the logo is truly
     centered regardless of cart width. */
  .kh-inner { gap: 12px; }
  .kh-mobile-toggle { flex: 1 1 0; justify-content: flex-start; }
  .kh-logo { flex: 0 1 auto; margin: 0 auto; min-width: 0; }
  .kh-actions { flex: 1 1 0; justify-content: flex-end; }

  /* Wave 1E — the centered wide wordmark must fit between the 44px hamburger and
     44px cart rails on a ~360px viewport. Cap its width and contain it so it
     scales down (never overflows / crowds the controls) while staying centered. */
  .kh-logo-img {
    max-width: min(60vw, 200px);
    object-position: center;
  }

  /* 44px tap targets on the two remaining top-bar controls. */
  .kh-mobile-toggle,
  .kh-cart {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  .kh-mobile-toggle { justify-content: flex-start; }
}

/* ── Off-canvas mobile panel (Phase 2) ─────────────────────────────── */
.kh-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99990;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.kh-mobile-overlay.open {
  opacity: 1;
  visibility: visible;
}

.kh-mobile-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 80vw;
  max-width: 32rem;
  height: 100vh;
  background: var(--kh-bg, #ffffff);
  color: var(--kh-fg, #000000);
  z-index: 99995;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.kh-mobile-panel.open {
  transform: translateX(0);
}

.kh-mobile-panel__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.kh-mobile-panel__close {
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--kh-fg, #000);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.kh-mobile-panel__close:hover { opacity: 0.7; }

.kh-mobile-panel__links {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  flex: 1 1 auto;
}

.kh-mobile-panel__link {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--kh-fg, #000);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  min-height: 48px;
  transition: background 0.15s ease;
  /* Stagger delay set via --stagger by bindDrawer */
  transition-delay: var(--stagger, 0ms);
}
.kh-mobile-panel__link:hover { background: rgba(0, 0, 0, 0.04); }

@media (prefers-reduced-motion: reduce) {
  .kh-mobile-panel,
  .kh-mobile-overlay {
    transition: none !important;
  }
  .kh-mobile-panel__link {
    transition-delay: 0ms !important;
  }
}

/* ── Currency switcher (Tier 1 — atlascart widget binds via [data-currency-selector])
 * The widget's buildMenuHtml() (atlascart/widget/src/currency.js:150-158)
 * emits .kh-currency-item, .kh-currency-item-flag, .kh-currency-item-code,
 * .kh-currency-item-name into [data-currency-menu]. The class names below
 * must stay in sync with that helper. */
.kh-currency {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.kh-currency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 20px;
  padding: 4px 10px;
  color: var(--kh-fg, #000);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  transition: opacity 200ms ease, border-color 200ms ease;
}
.kh-currency-toggle:hover { opacity: 0.85; border-color: rgba(0, 0, 0, 0.24); }
.kh-currency-toggle[aria-expanded="true"] { border-color: rgba(0, 0, 0, 0.32); }

/* Locked single-currency badge (lock_currency) — pill like the toggle but
   non-interactive: no caret, no menu, no hover affordance. */
.kh-currency--locked {
  gap: 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 20px;
  padding: 4px 10px;
  color: var(--kh-fg, #000);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  cursor: default;
}

.kh-currency-flag .atlas-flag--circle {
  width: 18px; height: 18px; border-radius: 50%;
}

.kh-currency-code { font-variant-numeric: tabular-nums; }

.kh-currency-caret { opacity: 0.6; transition: transform 200ms ease; }
.kh-currency-toggle[aria-expanded="true"] .kh-currency-caret { transform: rotate(180deg); }

.kh-currency-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--kh-bg, #fff);
  color: var(--kh-fg, #000);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 200;
}
.kh-currency-menu[hidden] { display: none; }

.kh-currency-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.3;
  transition: background 150ms ease;
}
.kh-currency-item:hover { background: rgba(0, 0, 0, 0.05); }
.kh-currency-item.is-active { background: rgba(0, 0, 0, 0.08); font-weight: 700; }

.kh-currency-item-flag .atlas-flag--wide {
  width: 22px; height: 16px; border-radius: 2px; flex-shrink: 0;
}

.kh-currency-item-code { font-weight: 600; letter-spacing: 0.04em; }
.kh-currency-item-name { color: var(--kh-fg, #000); opacity: 0.7; }

/* Mobile — visible at all widths per problem-definition decision.
   Compact form drops the caret and shrinks padding/font. */
@media (max-width: 899px) {
  .kh-currency-toggle { padding: 4px 8px; font-size: 11px; gap: 4px; }
  .kh-currency-caret { display: none; }
  .kh-currency-menu { right: -8px; min-width: 220px; }
}

/* Last-resort fallback for very narrow screens (<375px).
   Hide the TOP-BAR currency selector entirely so the .kh-actions row doesn't
   crowd. The off-canvas panel copy (.kh-currency--panel) is unaffected. */
@media (max-width: 374px) {
  .kh-actions .kh-currency { display: none; }
}

/* ── Wave 1B — currency selector relocated into the off-canvas mobile panel ──
   Rendered only on mobile (the panel itself is mobile-only). Sits in the panel
   footer, full-width, with the menu dropping below the toggle. */
.kh-mobile-panel__currency {
  margin-top: auto;
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.kh-currency--panel {
  display: inline-flex;
}
.kh-currency--panel .kh-currency-toggle {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 13px;
}
.kh-currency--panel .kh-currency-caret { display: inline-block; }
.kh-currency--panel .kh-currency-menu {
  /* Drop UP from the panel-footer toggle so the menu stays on-screen. */
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
  min-width: 220px;
}

/* Kavya hero banner — full-bleed image with text overlay.
 * Reference: ayeshanails.com homepage hero (CroTheme/Shrine pattern).
 * Image fills 100% viewport width; text overlays in the left/center/right
 * half. Aspect ratio is CSS-controlled per breakpoint via modifier classes.
 */

/* ── Base: full-bleed position container ────────────────────────────── */
.khb {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Clone: min-height=500px desktop. Fallback when no aspect-ratio class. */
  min-height: var(--khb-min-h, 500px);
  display: flex;
  align-items: center;
  color: var(--khb-fg, #fff);
}

/* ── Desktop aspect ratio classes ───────────────────────────────────── */
/* Override min-height so aspect-ratio drives the height, not the fallback. */
.khb--aspect-desktop-1-1  { aspect-ratio: 1 / 1;   min-height: 0; }
.khb--aspect-desktop-16-9 { aspect-ratio: 16 / 9;  min-height: 0; }
.khb--aspect-desktop-3-2  { aspect-ratio: 3 / 2;   min-height: 0; }
.khb--aspect-desktop-2-1  { aspect-ratio: 2 / 1;   min-height: 0; }
.khb--aspect-desktop-21-9 { aspect-ratio: 21 / 9;  min-height: 0; }

/* ── Mobile aspect ratio overrides (<= 767px) ───────────────────────── */
@media (max-width: 767px) {
  .khb--aspect-mobile-1-1  { aspect-ratio: 1 / 1;   min-height: 0; }
  .khb--aspect-mobile-4-5  { aspect-ratio: 4 / 5;   min-height: 0; }
  .khb--aspect-mobile-3-4  { aspect-ratio: 3 / 4;   min-height: 0; }
  .khb--aspect-mobile-9-16 { aspect-ratio: 9 / 16;  min-height: 0; }
  /* Reset the desktop ratio before applying mobile one */
  .khb--aspect-desktop-1-1,
  .khb--aspect-desktop-16-9,
  .khb--aspect-desktop-3-2,
  .khb--aspect-desktop-2-1,
  .khb--aspect-desktop-21-9 { aspect-ratio: unset; min-height: 0; }
}

/* ── Media layer: fills entire section ──────────────────────────────── */
.khb-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.khb-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Desktop/mobile image swap */
.khb-bg--desktop { display: block; }
.khb-bg--mobile  { display: none; }

@media (max-width: 767px) {
  .khb-bg--desktop { display: none; }
  .khb-bg--mobile  { display: block; }
}

/* ── Dark tint overlay (configurable opacity) ───────────────────────── */
.khb-overlay-tint {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--khb-overlay, 0.25));
  z-index: 1;
  pointer-events: none;
}

/* ── Legibility gradient (optional, text side only) ─────────────────── */
.khb--overlay-with-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0) 65%);
  z-index: 1;
  pointer-events: none;
}

/* ── Overlay color: light variant (dark text on bright image) ────────── */
.khb--overlay-light {
  background: rgba(255, 255, 255, 0.35);
}
.khb--overlay-light .khb-overlay-tint {
  background: rgba(255, 255, 255, var(--khb-overlay, 0.15));
}
.khb--overlay-light.khb--overlay-with-gradient::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 65%);
}
.khb--overlay-light {
  color: var(--khb-fg, #1a1a1a);
}

/* ── Inner: overlay content wrapper ─────────────────────────────────── */
.khb-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  /* Clone: content padding = 60px 40px, max-width 1200px */
  padding: 60px 40px;
  box-sizing: border-box;
}

/* Text position variants (applied via class on .khb-inner) */
.khb-text-position-left   { justify-content: flex-start; }
.khb-text-position-center { justify-content: center; }
.khb-text-position-right  { justify-content: flex-end; }

/* ── Content column ──────────────────────────────────────────────────── */
.khb-content {
  /* Clone: max-width=1200px for content block (full page width), but text cols within */
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.khb-text-position-center .khb-content {
  text-align: center;
  align-items: center;
}

.khb-text-position-right .khb-content {
  text-align: right;
  align-items: flex-end;
}

/* ── Rating strip ────────────────────────────────────────────────────── */
.khb-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--khb-fg, #fff);
}

.khb-stars {
  display: inline-flex;
  gap: 2px;
  /* R16.6: Stars are pink (clone fill=#f2a7c3), not white */
  color: var(--khb-star-color, #f2a7c3);
}

.khb-star {
  width: 16px;
  height: 16px;
  fill: var(--khb-star-color, #f2a7c3);
}

/* ── Headline ────────────────────────────────────────────────────────── */
.khb-heading {
  font-family: var(--font-heading-family, inherit);
  /* Clone: h1 = 48px desktop, 32px mobile, font-weight=300, line-height=52.8px (1.1) */
  font-size: 48px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0 0 20px;
  color: var(--khb-fg, #fff);
}

/* ── Body copy ───────────────────────────────────────────────────────── */
.khb-body {
  /* Clone: body = 18px, font-weight=200, line-height=1.5 */
  font-size: 18px;
  font-weight: 200;
  line-height: 1.5;
  margin: 0;
  color: var(--khb-fg, #fff);
  max-width: 480px;
}

.khb-text-position-center .khb-body { margin-inline: auto; }
.khb-text-position-right .khb-body  { margin-left: auto; }

/* ── CTA button ──────────────────────────────────────────────────────── */
.khb-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--khb-cta-bg, #fff);
  color: var(--khb-cta-fg, #000);
  text-decoration: none;
  /* Clone: h=56px, padding=16px 32px, border-radius=50px (pill), font-size=16px, font-weight=700, no uppercase */
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  transition: background-color 200ms ease, transform 200ms ease, opacity 200ms ease;
}

.khb-text-position-center .khb-cta { align-self: center; }
.khb-text-position-right .khb-cta  { align-self: flex-end; }

/* R17.C: bg darkens ~12% on hover (clone: #f2a7c3 → ~#e88faf); transform kept for lift */
.khb-cta:hover {
  background: var(--khb-cta-hover-bg, color-mix(in srgb, var(--khb-cta-bg, #fff) 88%, #000));
  transform: translateY(-1px);
  transition: background-color 200ms ease, transform 200ms ease;
}

/* ── Trust badges ────────────────────────────────────────────────────── */
.khb-badges {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.khb-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--khb-fg, #fff);
}

.khb-badge-icon { display: inline-flex; }
.khb-badge-icon svg { width: 20px; height: 20px; }

/* ── Banner content entrance ─────────────────────────────────────────── */
/* Above-fold: uses page-load animation (hero-stage-in keyframe from atlas-motion.css),
 * not scroll-reveal. Stagger keeps the hero feeling purposeful without hiding
 * content for too long. */
.khb-rating  { --khb-stage: 0; }
.khb-heading { --khb-stage: 1; }
.khb-body    { --khb-stage: 2; }
.khb-cta     { --khb-stage: 3; }
.khb-badges  { --khb-stage: 4; }

.khb-rating,
.khb-heading,
.khb-body,
.khb-cta,
.khb-badges {
  animation: hero-stage-in 600ms ease-out both;
  animation-delay: calc(var(--khb-stage, 0) * 60ms + 100ms);
}

@media (prefers-reduced-motion: reduce) {
  .khb-rating,
  .khb-heading,
  .khb-body,
  .khb-cta,
  .khb-badges {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── Mobile overrides (<= 767px) ─────────────────────────────────────── */
@media (max-width: 767px) {
  .khb-inner { padding: 40px 20px; }
  /* Clone mobile: h1=32px, body~14px */
  .khb-heading { font-size: 32px; margin: 0 0 16px; }
  .khb-body    { font-size: 15px; }
  .khb-content { gap: 14px; }
  .khb-rating  { font-size: 12px; }
  .khb-badges  { gap: 16px; }
  /* Gradient flips to cover bottom half on mobile (portrait layout) */
  .khb--overlay-with-gradient::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 65%);
  }
  .khb--overlay-light.khb--overlay-with-gradient::before {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 65%);
  }
}

/* Kavya hero product — port of cropro featured product main.
 * Two-column layout: thumb strip on left (vertical desktop / horizontal mobile)
 * + main image scroll-snap track on right; info column on the right of those.
 * Slide motion: native scroll-snap. Thumb sync + drag: small AtlasSlider IIFE
 * in render.js this.js. */

.khp {
  display: block;
  width: 100%;
  /* Match Ayesha — section root is transparent; page wrapper bg shows through.
   * Per-brand override still respected via --khp-bg if explicitly set in config. */
  background: var(--khp-bg, transparent);
  /* Match Ayesha — body text is rgb(0,0,0), not the muted #1a1a1a fallback. */
  color: var(--khp-fg, #000);
  /* Match Ayesha — section root padding-top:0 / bottom:0 (kavya was 32/24).
   * Internal spacing comes from inner content margins. */
  padding: 0 32px;
}

.khp-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.khp-breadcrumb {
  display: none;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .khp-breadcrumb { display: block; }
}

.khp-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.khp-breadcrumb a {
  /* Clone: text-sm = 14px, fw=200 (light weight nav text). R9.15 measurement. */
  font-size: 14px;
  font-weight: 200;
  color: var(--khp-fg, #000);
  text-decoration: none;
}
.khp-breadcrumb a:hover { text-decoration: underline; }

.khp-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Clone: breadcrumb items use text-sm (14px), same font-weight as link (200). */
  font-size: 14px;
  font-weight: 200;
  color: var(--khp-fg, #000);
}

.khp-chevron { width: 14px; height: 14px; }

.khp-cols {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  /* R-phase3: image column bottom should align with info-column bottom.
   * Use stretch so the media column fills the row height, then sticky inside
   * keeps the image on screen as the user scrolls past the info accordion. */
  align-items: stretch;
}

/* Left column wrapper — holds breadcrumb + gallery in standalone render.
 * Stretched via parent grid align-items:stretch so the column fills the row
 * height (matches info column). Gallery inside is sticky — keeps the image
 * pinned to the viewport until the user scrolls past the entire section,
 * matching Ayesha's behavior. */
.khp-media-col {
  min-width: 0;
}

/* Gallery sticky positioning in standalone (non-cluster) render — sticks
 * within the stretched media column. */
.khp-cols .khp-gallery {
  position: sticky;
  top: 88px;
  align-self: flex-start;
  max-height: calc(100vh - 88px);
}

/* Hide native cursor when custom cursor overlay is active */
[data-cursor-enabled] .khp-gallery[data-cursor],
[data-cursor-enabled] .khp-gallery[data-cursor] * {
  cursor: none !important;
}

/* Gallery */
.khp-gallery {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  user-select: none;
  -webkit-user-select: none;
}

.khp-gallery--single,
.khp-gallery--empty {
  display: block;
}

.khp-thumbs {
  display: flex;
  flex-direction: column;
  /* Clone: thumb strip is 76px wide (w-full of 76px container).
   * R9.15 measurement: thumb images 76x76px. Use 80px to include 2px border on each side. */
  gap: 8px;
  flex: 0 0 80px;
  /* Lock to main image height via flex stretch — overflow scrolls if thumbs exceed */
  align-self: stretch;
  overflow-y: auto;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* Edge */
  /* Soft gradient at bottom indicates more thumbs when they overflow */
  mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
}

.khp-thumbs::-webkit-scrollbar { display: none; } /* Chrome / Safari */

/* Disable gradient mask when all thumbs fit (≤5) */
.khp-gallery[data-thumbs-fit="true"] .khp-thumbs {
  mask-image: none;
  -webkit-mask-image: none;
}

.khp-thumb {
  display: block;
  width: 80px;
  height: 80px;
  padding: 0;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f4f4;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 200ms ease;
}

.khp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.khp-thumb[data-active="true"] {
  border-color: var(--khp-accent, #f2a7c3);
  border-width: 2px;
}

.khp-main-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.khp-viewport {
  overflow: hidden;
  cursor: grab;
  border-radius: 12px;
  background: #f4f4f4;
}

.khp-viewport.is-dragging { cursor: grabbing; }

/* Motion blur during drag — fades back smoothly on release */
.khp-viewport .khp-track {
  transition: filter 160ms ease-out;
  will-change: filter;
}
.khp-viewport.is-dragging .khp-track {
  filter: blur(2.5px) saturate(0.75);
  transition: filter 0ms;
}

.khp-track {
  display: flex;
}

.khp-slide {
  /* flex: 0 0 100% tells Embla each slide fills the full viewport width */
  flex: 0 0 100%;
  min-width: 0;
  /* R13.2: changed from 5/6 to 1/1 — matches clone square gallery, keeps
   * gallery height comparable to info column height */
  aspect-ratio: 1 / 1;
}

.khp-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  cursor: grab;
}
.khp-viewport.is-dragging .khp-slide img { cursor: grabbing; }

/* Single-image variant — no track, plain image */
.khp-gallery--single .khp-main-wrap {
  border-radius: 12px;
  overflow: hidden;
  background: #f4f4f4;
}
.khp-gallery--single .khp-slide {
  position: static;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.khp-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.92);
  color: #000;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: opacity 150ms ease;
}

.khp-nav--prev { left: 12px; }
.khp-nav--next { right: 12px; }

.khp-gallery[data-at-start] .khp-nav--prev { opacity: 0; pointer-events: none; }
.khp-gallery[data-at-end]   .khp-nav--next { opacity: 0; pointer-events: none; }

/* Info column */
.khp-info {
  display: flex;
  flex-direction: column;
}

/* R-phase3 user pref: align review stars row with the top of the gallery image.
 * The left column has a breadcrumb (~14px text + 16px margin-bottom = ~37px tall)
 * sitting above the image, which pushes the image down. Compensate the right
 * column with an equivalent top offset on desktop only — breadcrumb is hidden
 * on mobile so no offset is applied there. */
@media (min-width: 768px) {
  .khp-info,
  .khp-showcase__info {
    padding-top: 37px;
  }
}

.khp-reviews {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--khp-fg, #000);
  margin-bottom: 1rem;
}

.khp-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--khp-accent, #000);
}

.khp-star { width: 18px; height: 18px; vertical-align: middle; }
.khp-star--empty { color: rgba(0, 0, 0, 0.2); }

.khp-review-count {
  /* Clone: 16px body text → 1.6rem at 10px root */
  font-size: 1.6rem;
  font-weight: 200;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--khp-fg-muted, rgba(0, 0, 0, 0.6));
}

.khp-title {
  font-family: var(--font-heading-family, inherit);
  /* Hero product H1 reconciled to shared --hero-heading token (caps at 48px;
   * was clamp(2rem,3.6vw,3.6rem) which let vw push toward ~57.6px on wide
   * viewports). Mobile override below keeps the small-screen size. */
  font-size: var(--hero-heading, 3.6rem);
  font-weight: 300;
  line-height: 1.111;  /* 40px / 36px = 1.111 */
  letter-spacing: 0;
  margin: 0 0 1rem;
  color: var(--khp-fg, #000);
}

.khp-sub-thin {
  /* Clone: 16px body text, weight 200, line-height 1.5 → 1.6rem at 10px root */
  font-size: 1.6rem;
  font-weight: 200;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0 0 0.75rem;
  color: var(--khp-fg, #000);
}

.khp-sub-bold {
  /* Clone h3: 18px, weight 700, line-height 28px (1.555) → 1.8rem at 10px root */
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.555;
  margin: 0 0 1.25rem;
  color: var(--khp-fg, #000);
}

.khp-urgency {
  /* --khp-card-bg is wired from brand/design colors via brandColorVars().
   * For kavya: #FAE0EB (pale pink). --khp-bg-alt is a secondary fallback.
   * rgba(242,167,195,0.4) is the hard-coded last resort so the box is never gray. */
  background: var(--khp-card-bg, var(--khp-bg-alt, rgba(242, 167, 195, 0.4)));
  color: var(--khp-fg, #000);
  /* Clone: border-radius 12px (.rounded-lg), padding 12px (p-3), font-size 16px,
   * font-style normal (NOT italic), line-height 1.5.
   * At 10px root: 12px = 1.2rem, 16px = 1.6rem. */
  border-radius: 1.2rem;
  padding: 1.2rem;
  font-size: 1.6rem;
  margin: 0 0 1.25rem;
  font-style: normal;
  line-height: 1.5;
}

.khp-urgency p { margin: 0 0 4px; }
.khp-urgency p:last-child { margin: 0; }

.khp-benefits {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.khp-benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* Clone: 16px body text, weight 200, line-height 1.5 → 1.6rem at 10px root */
  font-size: 1.6rem;
  font-weight: 200;
  line-height: 1.5;
  color: var(--khp-fg, #000);
}

.khp-bullet {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--khp-accent, #000);
  margin-top: 2px;
}

.khp-bundle-slot {
  margin-top: 8px;
}

@media (max-width: 899px) {
  .khp { padding: 20px 16px 16px; }
  .khp-cols { grid-template-columns: 1fr; gap: 20px; }
  /* Disable sticky gallery at mobile — single-column stacked layout has no
   * info column for the image to "ride past". The bottom @media block
   * already neutralises .khp-cols .khp-gallery sticky positioning. */
  .khp-gallery { flex-direction: column; }
  .khp-thumbs {
    flex-direction: row;
    flex: 0 0 auto;
    align-self: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    order: 2;
    scrollbar-width: none;
    /* Horizontal gradient on mobile (fade right) */
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }
  .khp-gallery[data-thumbs-fit="true"] .khp-thumbs {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .khp-thumbs::-webkit-scrollbar { display: none; }
  .khp-main-wrap { order: 1; }
  /* Mobile: scale back proportionally from 3.6rem → ~2.2rem (22px at 10px root).
     Floor 1.8rem (18px) keeps the H1 well above the 20px-only-for-weight-200 rule. */
  .khp-title { font-size: clamp(1.8rem, 6vw, 2.2rem); }
  /* Wave 1B — thin body copy (weight 200 at 16px) reads flimsy on a phone; raise to
     the readable weight floor on mobile only. Desktop keeps the clone weight 200. */
  .khp-sub-thin,
  .khp-benefit,
  .khp-review-count { font-weight: var(--weight-readable, 400); }
  /* Wave 1B — COMPACT mobile gallery so the buy box (pack selector + ATC) surfaces
     within the first viewport (above-fold buy box, Beravia behavior). The square
     1/1 slide is ~358px on a 390px phone; cap the viewport so the gallery is short
     enough that title + benefits + bundle reach first paint. Desktop slide aspect
     (the clone 1/1) is untouched. object-fit:cover keeps the crop clean. */
  .khp-viewport,
  .khp-gallery--single .khp-main-wrap { max-height: 320px; }
  .khp-slide,
  .khp-gallery--single .khp-slide { aspect-ratio: auto; height: 320px; }
}

/* ── Kavya cluster showcase wrapper ────────────────────────────────────────
 * Emitted by the cluster compositor in renderer.js when kavya_hero_product
 * and kavya_bundle_selector appear as adjacent sections. Mirrors the generic
 * .product-showcase grid but uses kavya brand vars and khp- class names.
 */
.khp-showcase {
  display: block;
  width: 100%;
  /* Match Ayesha — section root transparent; page wrapper supplies bg. */
  background: var(--khp-bg, transparent);
  color: var(--khp-fg, #000);
  /* Match Ayesha — section padding-top/bottom 0 (kavya was 24/40). */
  padding: 0 24px;
}

.khp-showcase__grid {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  /* R13.2/R13.5: stretch so both columns fill the same row height */
  align-items: stretch;
}

/* Cluster mode: media column wrapper. Stretched via parent grid so it fills
 * the row height matching .khp-showcase__info. The gallery inside is what
 * actually sticks — see .khp-showcase__grid .khp-gallery below. */
.khp-showcase__media {
  min-width: 0;
}

/* Cluster gallery sticky positioning — sticks within the stretched media
 * column so the image stays pinned all the way to the bottom of the
 * showcase section (Ayesha parity). */
.khp-showcase__grid .khp-gallery {
  position: sticky;
  top: 88px;
  align-self: flex-start;
  max-height: calc(100vh - 88px);
}

.khp-showcase__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (max-width: 899px) {
  .khp-showcase__grid {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 24px;
  }
  .khp-showcase__media,
  .khp-media-col {
    max-height: none;
  }
  /* Disable sticky gallery at mobile — single-column stacked layout has no
   * info column for the image to "ride past", and the gallery would just
   * pin to the top while the user scrolls through specs/reviews below it. */
  .khp-cols .khp-gallery,
  .khp-showcase__grid .khp-gallery {
    position: static;
    max-height: none;
  }
}

/* ── Multi-axis variant chip groups ─────────────────────────────────────
 * Rendered inside .khp-info / .khp-showcase__info between benefits and the
 * bundle slot. One <fieldset> per axis (Size, Pattern, Color, etc).
 * Native <input type=radio> drives selection — hidden via CSS, visual chip
 * state via :checked + label. Matches kbs's chip pattern visually so the
 * page feels coherent.
 */
.khp-variants-host {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 1.5rem;
}

.khp-variant-group {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.khp-variant-legend {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  margin: 0 0 8px;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--khp-fg, #000);
}
.khp-variant-title {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.khp-variant-selected {
  font-weight: 200;
  color: var(--khp-fg-muted, rgba(0, 0, 0, 0.6));
}

.khp-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.khp-variant {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--khp-fg, #000);
  transition: border-color 150ms ease, background 150ms ease;
  user-select: none;
}
.khp-variant:hover {
  border-color: rgba(0, 0, 0, 0.4);
}
.khp-variant input[type=radio] {
  /* Hide the native radio; the <label> wrapper is the visible chip */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Selected state — Ayesha border-led pattern: accent border on the pill,
   chip body stays white so the value label remains readable.
   Image chips additionally get an accent ring (box-shadow) so the
   selection reads at a glance with no full-fill obscuring the image. */
.khp-variant:has(input[type=radio]:checked) {
  border-color: var(--khp-accent, #000);
}
.khp-variant.khp-variant--dot:has(input[type=radio]:checked) {
  box-shadow: 0 0 0 2px var(--khp-accent, #000);
}
.khp-variant input[type=radio]:focus-visible + .khp-swatch-dot,
.khp-variant input[type=radio]:focus-visible + .khp-swatch-img,
.khp-variant input[type=radio]:focus-visible + .khp-variant-label {
  outline: 2px solid var(--khp-accent, #000);
  outline-offset: 2px;
}

/* Color/Pattern axes — when value has an image swatch, show the image only */
.khp-variant--dot {
  padding: 4px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  justify-content: center;
}
.khp-variant--dot .khp-swatch-img {
  width: 28px;
  height: 28px;
}

/* Text-mode dot — accent selection indicator at LEFT of label.
   Hidden by default, revealed (and accent-filled) when the chip is selected. */
.khp-variant:not(.khp-variant--dot) .khp-swatch-dot {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.khp-variant:not(.khp-variant--dot):has(input[type=radio]:checked) .khp-swatch-dot {
  display: inline-block;
  background: var(--khp-accent, #000);
}
.khp-swatch-img {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.khp-variant-label {
  display: inline-block;
}

/* ─────────────────────────────────────────────────────────────────────────
 * AE truth-sync OOS chip treatment (proposal §2.3, §3.12).
 *
 * Mirrors the kbs treatment with khp-prefixed selectors. See the bundle_selector
 * styles.css for the design rationale. Applies to both SSR-baked OOS chips
 * (`.khp-variant--oos`) and runtime dynamically-dimmed chips (same class added
 * by the inline JS on selection change).
 * ───────────────────────────────────────────────────────────────────────── */
.khp-variant--oos {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.4);
  position: relative;
}
.khp-variant--oos::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 47%, currentColor 49%, currentColor 51%, transparent 53%);
  opacity: 0.25;
  pointer-events: none;
  border-radius: inherit;
}
.khp-variant--oos input {
  pointer-events: none;
}
.khp-variant--oos:hover::before {
  content: "Out of stock";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

/* Staleness notice — appears below variant axes when AE cron hasn't refreshed
 * stock in >60min (proposal §2.5). */
.khp-stock-stale-notice {
  font-size: 11px;
  font-style: italic;
  color: var(--khp-fg-muted, #888);
  margin: 6px 0 0;
}

/* Kavya bundle selector — port of cropro quantity-breaks.
 * 3-up vertical stack of pack cards. Selected pack expands to show variant
 * pickers. CSS-only via :checked + label. ATC at bottom.
 */

.kbs {
  display: block;
  width: 100%;
  background: var(--kbs-bg, #fff);
  color: var(--kbs-fg, #1a1a1a);
  margin: 16px 0;
}

.kbs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kbs-pack {
  position: relative;
}

.kbs-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kbs-pack-card {
  display: block;
  border: 2px solid var(--kbs-card-border, #e5e5e5);
  border-radius: 12px;
  background: var(--kbs-card-bg, #fff);
  /* Clone: p-3 = 12px uniform padding, min-h-[72px] on the button. R9.16 measurement. */
  padding: 12px;
  min-height: 72px;
  cursor: pointer;
  /* M26 — 200ms color/border + 150ms transform lift */
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    transform 150ms ease;
}

.kbs-pack-card:hover {
  border-color: rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.kbs-radio:checked + .kbs-pack-card {
  border-color: var(--kbs-accent-bg, #f2a7c3);
  background: var(--kbs-card-bg, #fae0eb);
}

.kbs-pack-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.kbs-pack-info {
  flex: 1 1 auto;
  min-width: 0;
}

.kbs-pack-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kbs-pack-label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--kbs-fg, #1a1a1a);
}

.kbs-pack-badge {
  /* Clone pill: STARTER/MOST POPULAR/BEST DEAL — text-xs (12px), fw=200 (NOT bold),
   * px-2 py-0.5 = 8px 2px, rounded-full = 9999px, bg=theme-accent (#f2a7c3),
   * color=theme-card (#fae0eb). R9.16 measurement from clone DOM. */
  font-size: 12px;
  font-weight: 200;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
  background: var(--kbs-accent-bg, #f2a7c3);
  color: var(--kbs-accent-fg, #fae0eb);
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
}

.kbs-pack-save {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  /* Clone: save% text is hot pink — R13.1 fix */
  color: var(--kbs-accent-bg, #f2a7c3);
  margin-top: 2px;
}

.kbs-pack-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.kbs-pack-price {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--kbs-fg, #1a1a1a);
}

.kbs-pack-compare {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: line-through;
  color: rgba(0, 0, 0, 0.5);
}

.kbs-pack-body {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: none;
}

.kbs-radio:checked + .kbs-pack-card .kbs-pack-body {
  display: block;
}

.kbs-variant-slot {
  margin-bottom: 14px;
}

.kbs-variant-slot:last-child { margin-bottom: 0; }

/* Ayesha pattern: "#1" / "#2" / "#3" only renders when variant_count > 1.
 * 12px bold uppercase at 60% opacity, ~8px below before the first axis title. */
.kbs-variant-slot-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 6px;
}

/* One per axis inside a slot (e.g. Size, Pattern). Stacks vertically. */
.kbs-variant-axis-group {
  margin-bottom: 8px;
}
.kbs-variant-axis-group:last-child { margin-bottom: 0; }

.kbs-variant-axis-title,
.kbs-variant-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.kbs-variants {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kbs-variant {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  /* M26 — 200ms color/border + 150ms transform lift */
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    transform 150ms ease;
}

/* R14: dot-only variant — clone uses 12px circle, no pill border, no padding */
.kbs-variant--dot {
  border: none;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  justify-content: center;
}

.kbs-variant--dot:has(input:checked) {
  border: 2px solid var(--kbs-accent-bg, #f2a7c3);
  background: transparent;
  box-shadow: 0 0 0 2px var(--kbs-accent-bg, #f2a7c3);
}

.kbs-variant input { position: absolute; opacity: 0; pointer-events: none; }

.kbs-variant:hover { transform: translateY(-1px); }

/* Text chip selected — border-led; no card-bg tint, matching the hero pattern. */
.kbs-variant:has(input:checked) {
  border-color: var(--kbs-accent-bg, #f2a7c3);
  background: #fff;
}

/* Text-mode dot — accent indicator at LEFT, hidden idle, revealed on select. */
.kbs-variant:not(.kbs-variant--dot) .kbs-swatch-dot {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kbs-variant:not(.kbs-variant--dot):has(input:checked) .kbs-swatch-dot {
  display: inline-block;
  background: var(--kbs-accent-bg, #f2a7c3);
}

.kbs-swatch-img {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* Pack-aware promo line — sits between the pack list and the ATC button.
   Prefix copy comes from settings.free_shipping_promo; the accent span text
   is computed at render from the active pack's save_label and refreshed by
   the inline script on every pack change. */
.kbs-promo {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  color: var(--kbs-fg, #1a1a1a);
}
.kbs-promo-accent {
  color: var(--kbs-accent-bg, #f2a7c3);
  font-weight: 700;
}
.kbs-promo-accent:empty {
  display: none;
}

.kbs-atc {
  display: flex;
  width: 100%;
  margin-top: 14px;
  text-align: center;
  background: var(--kbs-button-bg, #000);
  color: var(--kbs-button-fg, #fff);
  text-decoration: none;
  border: none;
  cursor: pointer;
  /* Clone: h=48px, padding=12px 24px, border-radius=9999px, font-size=16px, font-weight=700, uppercase */
  padding: 12px 24px;
  height: 48px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: uppercase;
  /* Ayeshanails ATC hover effect — captured 2026-05-30 via Playwright.
     The hover does NOT change background color; instead the inset white
     box-shadow grows from -3px to -50px, lightening the button surface.
     Cubic-bezier(0,0,0.2,1) matches ayesha's transition timing exactly. */
  box-shadow:
    inset 0 -3px 0 rgba(255, 255, 255, 0.15),
    0 3px 8px rgba(232, 226, 222, 0.15);
  transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1), opacity 0.2s ease;
  line-height: 1;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.kbs-atc:hover,
.kbs-atc:focus-visible {
  opacity: 1;
  box-shadow:
    inset 0 -50px 0 rgba(255, 255, 255, 0.1),
    0 5px 12px rgba(232, 226, 222, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────────
 * AE truth-sync OOS chip treatment (proposal §2.3, §3.12).
 *
 * Visual language for an out-of-stock variant chip:
 *   - opacity 0.35 + grayscale 0.4 → defeated but legible (text stays readable)
 *   - ::after diagonal strike gradient → reads as "crossed out", no SVG asset
 *   - ::before pure-CSS tooltip on hover → zero JS dependency for affordance
 *   - cursor: not-allowed → desktop affordance
 *   - input[disabled] + pointer-events:none on inner radio → click can't toggle
 *
 * Applies to BOTH the SSR-baked per-axis-value OOS (added via `.kbs-variant--oos`
 * class at render time) AND the runtime per-SKU dynamic dimming added by the
 * inline JS via `.kbs-variant--oos-dynamic` (kept under the same selector since
 * we always add `.kbs-variant--oos` alongside the dynamic class).
 * ───────────────────────────────────────────────────────────────────────── */
.kbs-variant--oos {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.4);
  position: relative;
}
.kbs-variant--oos::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 47%, currentColor 49%, currentColor 51%, transparent 53%);
  opacity: 0.25;
  pointer-events: none;
  border-radius: inherit;
}
.kbs-variant--oos input {
  pointer-events: none;
}
.kbs-variant--oos:hover::before {
  content: "Out of stock";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Variant price tiles (selector_mode === 'variant_price_tiles').
 * Reuses the .kbs-pack / .kbs-pack-card chrome so tiles look identical to the
 * bundle ladder cards, minus the expandable pack body (tiles have no nested
 * variant slots). Adds a per-piece subline, a "Save X%" badge, and the axis
 * label above the list.
 * ───────────────────────────────────────────────────────────────────────── */
.kbs-vtile-axis-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kbs-fg, #1a1a1a);
  margin: 0 0 8px;
}

/* Tiles never expand a pack body — the piece-count IS the only selection. */
.kbs-vtile .kbs-pack-body { display: none !important; }

.kbs-vtile-perunit {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--kbs-fg, #1a1a1a);
  opacity: 0.7;
  margin-top: 2px;
}

.kbs-vtile-save {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--kbs-accent-bg, #f2a7c3);
  margin-top: 2px;
}

/* Staleness notice — appears below pack list when AE cron hasn't populated
 * fresh stock for >60min. Purely informational; checkout guard is the real
 * safety net (proposal §2.5). */
.kbs-stock-stale-notice {
  font-size: 11px;
  font-style: italic;
  color: var(--kbs-fg-muted, #888);
  margin: 8px 0 0;
  text-align: center;
}

/* ── Wave 1B — mobile legibility (mobile-only; desktop clone px untouched) ───
   The bundle selector has no other @media block, so all px above are the desktop
   clone values and must NOT change. These overrides apply only <=899px:
   - pack badge weight 200 -> readable (flimsy on a phone, fine on desktop clone)
   - the 11px stale notice -> 13px (no text below 13px on mobile)
   - variant tiles -> 14px so options are easy to tap-read.
   44px tap areas for .kbs-variant/.kbs-variant--dot/.kbs-qty-btn come from the
   shared kavya css-generator layer. */
@media (max-width: 899px) {
  .kbs-pack-badge { font-weight: var(--weight-readable, 400); }
  .kbs-stock-stale-notice { font-size: 13px; }
  .kbs-variant { font-size: 14px; }
}

/* Kavya founder story — full-bleed image with centered text overlay.
 * R16.2: Clone uses absolute-positioned text overlay on top of full-bleed image.
 * Desktop: image fills 100% w x 600px h, text centered overlaid.
 * Mobile: image stacked above, content below on pink bg.
 * Clone ref: ai-hero-banner-aauhqamg1wtn5vkw0raigenblock3c983a5vtzpar
 */

.kfs {
  display: block;
  width: 100%;
  color: var(--kfs-fg, #1a1a1a);
  padding: 0;
  /* Mobile: pink background shows behind stacked content */
  background: var(--kfs-bg, #FAE0EB);
}

/* ── Inner: position context for full-bleed image + overlay ── */
.kfs-inner {
  position: relative;
  width: 100%;
  min-height: 600px;
  display: flex;
  flex-direction: column;
}

/* ── Media: fills full container ───────────────────────────── */
.kfs-media {
  position: relative;
  width: 100%;
  /* Mobile: show as stacked image */
  order: 1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.kfs-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.kfs-media--placeholder {
  background: #f4f4f4;
  min-height: 320px;
}

/* ── Content wrapper: stacked below image on mobile ─────────── */
.kfs-content-wrapper {
  order: 2;
  background: var(--kfs-bg, #FAE0EB);
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Content: centered text block ───────────────────────────── */
.kfs-content {
  width: 100%;
  max-width: 700px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ── Heading ─────────────────────────────────────────────────── */
.kfs-heading {
  font-family: var(--font-heading-family, inherit);
  /* Reconciled to shared larger-section-heading token (responsive clamp,
   * <=36px desktop). Replaces the 32px base + 56px desktop breakpoint. */
  font-size: var(--section-heading-lg, 3.6rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
  color: var(--kfs-fg, #1a1a1a);
  text-align: center;
}

/* ── Quote block: NO border-left (clone has none) ─────────────── */
.kfs-quote {
  margin: 0;
  font-size: 18px;
  font-weight: 200;
  letter-spacing: 0;
  font-style: italic;
  line-height: 1.4;
  color: var(--kfs-fg, #1a1a1a);
  text-align: center;
  /* R16.2: Clone has NO border-left — removed */
  border: none;
  padding: 0;
}

.kfs-quote p { margin: 0 0 8px; }
.kfs-quote p:last-child { margin: 0; }

/* ── Attribution ─────────────────────────────────────────────── */
.kfs-quote-author {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
  color: var(--kfs-fg, #1a1a1a);
  text-align: center;
}

/* ── Subheading ──────────────────────────────────────────────── */
.kfs-subheading {
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 0;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.75);
  margin: 0;
  text-align: center;
}

/* ── CTA button ──────────────────────────────────────────────── */
.kfs-button {
  display: inline-flex;
  align-items: center;
  background: var(--kfs-accent-bg, #000);
  color: var(--kfs-accent-fg, #fff);
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color 200ms ease, color 200ms ease;
  margin-top: 4px;
}

/* R17.C: darken brand button by ~12% on hover — clone "Our Story" btn: #000 → #222 */
.kfs-button:hover {
  background: color-mix(in srgb, var(--kfs-accent-bg, #000) 88%, #000);
  color: var(--kfs-accent-fg, #fff);
}

/* ══ DESKTOP (min-width 750px): full-bleed image + overlay ══ */
@media (min-width: 750px) {
  .kfs {
    /* Section background is transparent — image fills full width */
    background: transparent;
  }

  .kfs-inner {
    /* Position context for absolute children */
    position: relative;
    min-height: 600px;
    display: block;
  }

  /* Image fills entire container */
  .kfs-media {
    position: absolute;
    inset: 0;
    order: 0;
    aspect-ratio: unset;
    width: 100%;
    height: 100%;
  }

  /* Content wrapper overlaid on top of image */
  .kfs-content-wrapper {
    position: absolute;
    inset: 0;
    order: 0;
    background: transparent;
    padding: 0 60px 0 10%;
    display: flex;
    align-items: center;
    /* R16.2: Clone justify-content: flex-start (text on left half) */
    justify-content: flex-start;
  }

  /* When image_position=right, text on left — same as clone */
  .kfs[data-image-position="right"] .kfs-content-wrapper {
    justify-content: flex-start;
    padding-left: 10%;
    padding-right: 60px;
  }

  /* When image_position=left, text on right */
  .kfs[data-image-position="left"] .kfs-content-wrapper {
    justify-content: flex-end;
    padding-left: 60px;
    padding-right: 10%;
  }

  .kfs-content {
    max-width: 700px;
    text-align: center;
    align-items: center;
    /* Slight translucent bg so text reads over image if needed */
    background: rgba(255, 255, 255, 0.0);
  }

  .kfs-heading {
    /* Size now from --section-heading-lg token; keep dark color for the
     * overlay-on-image variant where text sits over the full-bleed image. */
    color: #000000;
  }

  .kfs-quote {
    font-size: 24px;
    color: #000000;
  }

  .kfs-quote-author {
    color: #000000;
  }

  .kfs-subheading {
    font-size: 20px;
    color: #000000;
  }
}

/* ── Mobile (<749px): stacked, pink bg ───────────────────────── */
@media (max-width: 749px) {
  .kfs-content { gap: 12px; }
  .kfs-button { padding: 12px 24px; }
}

/* Kavya trust badges — exact port of cropro `ai-trust-bar`.
 * Source: themes/kavya-clone/site/ayeshanails.com/products/nailrings.html L2410-2489
 * Pink band, 4-up grid, icon-left layout. Editable via --ktb-* custom properties
 * set inline by the renderer (background, text, icon size).
 */

.ktb {
  display: block;
  width: 100%;
  background-color: var(--ktb-bg, #ffffff);
  padding: 40px 20px;
}

.ktb-container {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.ktb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.ktb-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ktb-item:hover {
  transform: translateY(-2px);
}

/* Stagger entrance when renderer applies [data-animate] to each item */
.ktb-item[data-animate]:nth-child(1) { transition-delay: 0ms; }
.ktb-item[data-animate]:nth-child(2) { transition-delay: 80ms; }
.ktb-item[data-animate]:nth-child(3) { transition-delay: 160ms; }
.ktb-item[data-animate]:nth-child(4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .ktb-item { transition: none; }
  .ktb-item:hover { transform: none; }
}

.ktb-icon-wrapper {
  flex-shrink: 0;
  width: var(--ktb-icon, 80px);
  height: var(--ktb-icon, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ktb-icon-wrapper img {
  width: var(--ktb-icon, 80px);
  height: var(--ktb-icon, 80px);
  object-fit: contain;
}

.ktb-content {
  flex-grow: 1;
}

.ktb-heading {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ktb-fg, #000000);
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.ktb-description {
  /* Clone: font-size=15px, font-weight=200 */
  font-size: 15px;
  font-weight: 200;
  letter-spacing: 0;
  color: var(--ktb-fg, #000000);
  margin: 0;
  line-height: 1.4;
}

@media screen and (max-width: 989px) {
  .ktb-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 749px) {
  .ktb-grid {
    grid-template-columns: 1fr;
  }
}

/* Kavya testimonials — port of cropro 4-up testimonial grid.
 * Card: square photo on top + content (stars, italic quote, @handle) below.
 * Responsive: 4-col → 2-col below 750px.
 */

.kt {
  display: block;
  width: 100%;
  background: var(--kt-bg, #fff);
  /* Band padding reconciled to shared rhythm tokens (48/24px desktop). */
  padding: var(--section-pad-block, 48px) var(--section-pad-x, 24px);
}

.kt-inner {
  max-width: none;
  padding: 0 32px;
}

.kt-heading {
  text-align: center;
  font-family: var(--font-heading-family, inherit);
  /* Reconciled to shared section-heading token (CroTheme non-hero ceiling). */
  font-size: var(--section-heading, 3rem);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--kt-fg, #000);
  line-height: 1.2;
  margin: 0 0 40px;
}

.kt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.kt-card {
  background: var(--kt-card-bg, #fff);
  border: 1px solid var(--kt-border, #e8e2de);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kt-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .kt-card { transition: none; }
  .kt-card:hover { transform: none; box-shadow: none; }
}

.kt-photo-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
  background: #f4f4f4;
}

.kt-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kt-content {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
  flex: 1 1 auto;
}

.kt-stars {
  display: flex;
  gap: 4px;
  color: var(--kt-star, #ffd700);
}

.kt-star {
  width: 16px;
  height: 16px;
}

.kt-quote {
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 0;
  font-style: italic;
  color: var(--kt-fg, #000);
  line-height: 1.5;
  margin: 0;
}

.kt-quote p { margin: 0; }

.kt-footer {
  margin-top: auto;
}

.kt-handle {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--kt-fg, #000);
  margin: 0;
}

@media (max-width: 989px) {
  .kt-grid { grid-template-columns: repeat(2, 1fr); }
  /* Wave 1B — thin italic quote reads flimsy on a phone; raise to the readable
     weight floor on mobile (no Clone: constraint on this rule). */
  .kt-quote { font-weight: var(--weight-readable, 400); }
}

@media (max-width: 480px) {
  /* Heading size + band padding now driven by shared tokens. */
  .kt-grid { grid-template-columns: 1fr; }
}

/* Kavya comparison table — port of cropro comparison-table.
 * Heading + subheading + pink rounded card with 3-col grid:
 *   feature label / brand cell / competitor cell.
 * Card uses kavya pink (#FAE0EB) with dark text — R13.1 fix.
 */

.kct {
  display: block;
  width: 100%;
  background: var(--kct-bg, #fff);
  color: var(--kct-fg, #1a1a1a);
  padding: var(--section-pad-block, 48px) var(--section-pad-x, 24px);
}

.kct-inner {
  /* R17.B: widened from 1200px to match clone's 1430px container (actual 1425px) */
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.kct-heading {
  font-family: var(--font-heading-family, inherit);
  /* Reconciled to shared section-heading token (CroTheme non-hero ceiling). */
  font-size: var(--section-heading, 3rem);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 8px;
}

.kct-subheading {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 36px;
}

.kct-card {
  /* R14: default card bg is brand accent light (card_bg_brand token) */
  background: var(--kct-card-bg, #FAE0EB);
  color: var(--kct-card-fg, #1a1a1a);
  border-radius: 28px;
  padding: 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  text-align: left;
  overflow: hidden;
}

.kct-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kct-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.kct-row:last-child { border-bottom: 0; }

.kct-row--head {
  padding: 16px 24px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
}

.kct-feature {
  font-weight: 200;
  font-size: 16px;
  /* R14: inherits card-fg which is dark (#1a1a1a) on pink card */
  color: var(--kct-card-fg, #1a1a1a);
}

.kct-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kct-icon {
  width: 22px;
  height: 22px;
}

.kct-check { color: #e8698a; }
.kct-x { color: rgba(0, 0, 0, 0.3); width: 18px; height: 18px; }

.kct-brand-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: none; /* card is now pink — keep logo dark */
  display: block;
}

.kct-competitor-label {
  font-size: 14px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
}

@media (max-width: 749px) {
  /* Band padding + heading size now driven by shared tokens (--section-pad-*
   * lowers via :root mobile query; --section-heading clamp scales down). */
  .kct-subheading { margin-bottom: 24px; }
  .kct-card { border-radius: 20px; }
  .kct-row { padding: 12px 16px; }
  .kct-row--head { padding: 12px 16px; }
  /* Wave 1B — feature labels read 15px at the readable weight on mobile (was
     14px/200). No Clone: constraint on .kct-feature. */
  .kct-feature { font-size: 15px; font-weight: var(--weight-readable, 400); }
}

/* Kavya FAQ accordion — native <details>/<summary>.
 * Heading on top, single or two-col list of disclosure rows.
 */

.kfaq {
  display: block;
  width: 100%;
  /* R16.7: Clone FAQ uses black background with white text (color-scheme-2 = #000) */
  background: var(--kfaq-bg, #000000);
  color: var(--kfaq-fg, #ffffff);
  padding: 48px 24px;
}

.kfaq-inner {
  /* R17.B: widened from 1200px to match clone's 1430px container (actual 1425px) */
  max-width: 1400px;
  margin: 0 auto;
}

.kfaq-heading {
  text-align: center;
  font-family: var(--font-heading-family, inherit);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--kfaq-fg, #ffffff);
  margin: 0 0 32px;
}

.kfaq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.kfaq[data-cols="2"] .kfaq-list {
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}

.kfaq-item {
  /* R16.7: On black bg, use white border */
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 16px 0;
  /* clone: pt-4 pb-4 = 16px each — matches exactly */
}

.kfaq-q {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--kfaq-fg, #ffffff);
  user-select: none;
  padding: 4px 8px;
}

/* button reset — no native marker since we use <button> not <summary> */
.kfaq-q {
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  transition: opacity 150ms ease;
}

/* R17.C: subtle hover shade on FAQ triggers */
.kfaq-q:hover { opacity: 0.8; }

/* ── Plus/minus icon — two spans that rotate ─────────────────────── */
.kfaq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
  color: var(--kfaq-icon, #ffffff);
}

.kfaq-icon__horizontal,
.kfaq-icon__vertical {
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kfaq-icon__horizontal {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.kfaq-icon__vertical {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

/* On open: rotate vertical 90deg so both strokes overlap → reads as minus */
.kfaq-item.is-open .kfaq-icon__vertical {
  transform: translateX(-50%) rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .kfaq-icon__horizontal,
  .kfaq-icon__vertical {
    transition: none;
  }
}

.kfaq-q-text {
  flex: 1 1 auto;
}

.kfaq-a {
  padding: 0 8px 0;
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--kfaq-fg, #ffffff);
  /* max-height transition set by bindAccordion JS; opacity transitions via CSS */
  opacity: 0;
  transition: opacity 250ms ease 100ms;
  will-change: max-height;
}

.kfaq-item.is-open .kfaq-a {
  opacity: 1;
  padding-top: 4px;
  padding-bottom: 4px;
}

.kfaq-a p {
  margin: 0 0 12px;
}

.kfaq-a p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .kfaq-a {
    transition: none;
  }
}

@media (max-width: 749px) {
  .kfaq[data-cols="2"] .kfaq-list { grid-template-columns: 1fr; }
  .kfaq { padding: 40px 16px; }
  .kfaq-heading { font-size: 30px; margin-bottom: 24px; }
}

/* Kavya reviews summary — overall rating + count + star distribution + cards.
 * Replaces the embedded Loox widget with editable static content.
 */

.krs {
  display: block;
  width: 100%;
  background: var(--krs-bg, #fff);
  color: var(--krs-fg, #1a1a1a);
  padding: 56px 24px;
}

.krs-inner {
  /* R17.B: widened from 1100px to match clone's 1430px container (actual 1425px) */
  max-width: 1400px;
  margin: 0 auto;
}

.krs-heading {
  text-align: center;
  font-family: var(--font-heading-family, inherit);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 32px;
}

.krs-summary {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;
  gap: 32px;
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.015);
}

.krs-summary-overall {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.krs-rating {
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  color: var(--krs-fg, #1a1a1a);
}

.krs-rating-stars {
  display: flex;
  gap: 2px;
  color: var(--krs-star, #000);
}

.krs-star {
  width: 18px;
  height: 18px;
}

.krs-rating-count {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.6);
}

.krs-summary-distribution {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.krs-row {
  display: grid;
  grid-template-columns: 32px 1fr 36px;
  align-items: center;
  gap: 12px;
}

.krs-row-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--krs-fg, #1a1a1a);
}

.krs-row-star {
  width: 12px;
  height: 12px;
  color: var(--krs-star, #000);
}

.krs-row-bar {
  position: relative;
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.krs-row-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--krs-star, #000);
  border-radius: 4px;
}

.krs-row-pct {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  text-align: end;
}

.krs-summary-cta {
  display: flex;
  justify-content: center;
}

.krs-cta {
  display: inline-flex;
  align-items: center;
  background: var(--krs-fg, #1a1a1a);
  color: var(--krs-bg, #fff);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 200ms ease, opacity 200ms ease;
}

/* R17.C: darken reviews CTA ~12% on hover */
.krs-cta:hover {
  background: color-mix(in srgb, var(--krs-fg, #1a1a1a) 88%, #fff);
  opacity: 1;
}

.krs-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.krs-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 20px;
  background: var(--krs-bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.krs-card-stars {
  display: flex;
  gap: 2px;
  color: var(--krs-star, #000);
}

.krs-card-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
  color: var(--krs-fg, #1a1a1a);
}

.krs-card-body {
  font-size: 14px;
  font-weight: 200;
  line-height: 1.5;
  color: var(--krs-fg, #1a1a1a);
}

.krs-card-body p { margin: 0 0 8px; }
.krs-card-body p:last-child { margin: 0; }

.krs-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.krs-card-author {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--krs-fg, #1a1a1a);
}

.krs-verified {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.5);
}

.krs-star--empty { color: rgba(0, 0, 0, 0.2); }

@media (max-width: 899px) {
  .krs-summary { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .krs-summary-cta { justify-content: center; }
  .krs-cards { grid-template-columns: 1fr; }
}

/* Photo strip — horizontal scroll-snap row + paired Write-a-review CTA.
 * Renders below review cards when settings.photo_strip is non-empty.
 */
.krs-strip-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}

.krs-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  flex: 1 1 auto;
}

.krs-strip-item {
  flex: 0 0 88px;
  width: 88px;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #f5f5f5;
}

.krs-strip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.krs-cta--strip {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 40px;
}

@media (max-width: 899px) {
  .krs-strip-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .krs-strip-item {
    flex-basis: 78px;
    width: 78px;
  }
  .krs-cta--strip {
    align-self: center;
  }
}

/* Kavya sticky ATC bar — mobile-only fixed bottom bar.
 * Hidden on desktop unless show_on_desktop=true. Pushes a spacer at the bottom
 * via padding-bottom on body? No — we just rely on the inner page scroll having
 * room. The bar sits position:fixed with high z-index.
 */

.ksa {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--ksa-bg, #fff);
  color: var(--ksa-fg, #1a1a1a);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  /* transform + visibility transition handled by atlas-motion.css Phase 3 block.
   * Hide on desktop unless show_on_desktop=true. */
  display: none;
}

@media (max-width: 899px) {
  /* On mobile: visible by default layout — transform controls slide-up */
  .ksa { display: flex; }
}

.ksa[data-show-desktop="true"] {
  display: flex;
}

.ksa-inner {
  display: flex;
  align-items: center;
  /* Clone: inner wrapper gap=16px, padding=16px (py-4 / p-4 Tailwind pattern).
   * Mobile height renders to 72px with this padding + 48px button.
   * Desktop: same inner padding but outer is md:bottom-4 rounded card at 96px. */
  gap: 16px;
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.ksa-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.ksa-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.ksa-title {
  /* Wave 1B — 13px -> 15px: the always-visible mobile buy bar must read legit. */
  font-size: 15px;
  font-weight: 700;
  color: var(--ksa-fg, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksa-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Wave 1B — 12px -> 14px buy-bar price legibility. */
  font-size: 14px;
}

.ksa-price-now {
  font-weight: 700;
  color: var(--ksa-fg, #1a1a1a);
}

.ksa-price-compare {
  text-decoration: line-through;
  color: rgba(0, 0, 0, 0.45);
}

.ksa-btn {
  flex-shrink: 0;
  background: var(--ksa-btn-bg, #000);
  color: var(--ksa-btn-fg, #fff);
  text-decoration: none;
  /* Clone: button h=48px, padding=12px 24px, br=9999px, fs=16px, fw=700, uppercase.
   * R9.13 measurement from sticky-add-to-cart shadow DOM button. */
  height: 48px;
  padding: 12px 24px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease, opacity 200ms ease;
}

/* Ayeshanails ATC hover parity — inset white box-shadow lightens the
   button surface; no background-color change. Captured 2026-05-30. */
.ksa-btn {
  box-shadow:
    inset 0 -3px 0 rgba(255, 255, 255, 0.15),
    0 3px 8px rgba(232, 226, 222, 0.15);
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1), opacity 200ms ease;
}
.ksa-btn:hover,
.ksa-btn:focus-visible {
  opacity: 1;
  box-shadow:
    inset 0 -50px 0 rgba(255, 255, 255, 0.1),
    0 5px 12px rgba(232, 226, 222, 0.2);
}

/* Kavya footer — port of cropro footer-group.
 * 3-col layout (Shop / Support / Subscribe) + bottom row.
 * Editable via --kf-* custom properties (renderer sets inline).
 */

.kf {
  display: block;
  width: 100%;
  background: var(--kf-bg, #fff);
  color: var(--kf-fg, #000);
  border-top: 1px solid var(--kf-border, #e5e5e5);
  padding: 48px 24px 32px;
  font-family: var(--font-body-family, inherit);
}

.kf-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.kf-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 32px;
}

.kf-col-title {
  font-family: var(--font-heading-family, inherit);
  font-size: 24px;
  font-weight: 300;
  margin: 0 0 12px;
  color: var(--kf-fg, #000);
  letter-spacing: 0;
  line-height: 1.33;
}

.kf-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kf-col-list a {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--kf-fg, #000);
  text-decoration: none;
  transition: opacity 200ms ease;
}

.kf-col-list a:hover {
  opacity: 0.7;
}

.kf-subscribe-blurb {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 200;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--kf-fg, #000);
}

.kf-subscribe {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.kf-subscribe-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 200;
  padding: 12px 24px;
  border: 2px solid var(--kf-accent-bg, #000);
  border-right: 0;
  border-radius: 9999px 0 0 9999px;
  background: #fff;
  color: var(--kf-fg, #000);
  outline: none;
}

.kf-subscribe-input:focus {
  box-shadow: 0 0 0 2px var(--kf-accent-bg, #000);
}

.kf-subscribe-btn {
  flex: 0 0 auto;
  background: var(--kf-accent-bg, #000);
  color: var(--kf-accent-fg, #fff);
  border: 0;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
  border-radius: 0 9999px 9999px 0;
  cursor: pointer;
  transition: background-color 200ms ease, opacity 200ms ease;
}

/* R17.C: darken footer subscribe ~12% on hover */
.kf-subscribe-btn:hover {
  background: color-mix(in srgb, var(--kf-accent-bg, #000) 88%, #fff);
  opacity: 1;
}

.kf-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--kf-border, #e5e5e5);
}

.kf-copyright {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: left;
}

.kf-socials,
.kf-payments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
}

.kf-socials {
  justify-content: center;
}

.kf-payments {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.kf-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--kf-fg, #000);
  text-decoration: none;
  transition: opacity 200ms ease;
}

.kf-social:hover {
  opacity: 0.7;
}

.kf-social svg {
  width: 24px;
  height: 24px;
  display: block;
}

.kf-pay-icon {
  width: 38px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kf-pay-icon svg {
  width: 38px;
  height: 24px;
  display: block;
}

@media (max-width: 899px) {
  .kf-cols { grid-template-columns: 1fr; gap: 28px; }
  .kf-bottom {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
  }
  .kf-copyright,
  .kf-socials,
  .kf-payments {
    justify-content: center;
    text-align: center;
  }
  /* Wave 1B — the email input reads flimsy at weight 200 on mobile; raise to the
     readable weight floor (no Clone: constraint). */
  .kf-subscribe-input { font-weight: var(--weight-readable, 400); }
  /* The 28px social icons sit below the tap floor; give them a 44px hit area while
     keeping the 24px glyph centered. (Reinforces the kavya css-generator layer.) */
  .kf-social { min-width: 44px; min-height: 44px; }
}

/* Kavya cart drawer — port of cropro/ayeshanails cart with extras.
 * Slide-in right panel, pink card aesthetic, free shipping bar,
 * special offers carousel, shipping protection, testimonial.
 */

/* Phase 2: replaced one-shot keyframe open animation with symmetric
   transition open/close via AtlasMotion.bindDrawer + .open class. */
.kcd-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  font-family: var(--font-body-family, inherit);
  color: var(--kcd-fg, #1a1a1a);
  /* Hidden by default — use visibility/pointer-events so transition works */
  pointer-events: none;
  visibility: hidden;
}

/* Legacy [hidden] still works during any timing gap before bindDrawer fires */
.kcd-root[hidden] { display: none; }

.kcd-root.open {
  pointer-events: auto;
  visibility: visible;
}

.kcd-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.kcd-root.open .kcd-overlay {
  opacity: 1;
}

.kcd {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* Clone: Tailwind md:w-[480px] = 480px; rounded-2xl = border-radius 24px.
   * On mobile it's full-screen (no rounding). Desktop panel has subtle rounding
   * on left edge to match clone's card appearance. R9.14 measurement. */
  max-width: 480px;
  background: var(--kcd-bg, #fff);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px 0 0 24px;
}
.kcd-root.open .kcd {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .kcd, .kcd-overlay {
    transition: none !important;
  }
}

.kcd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.kcd-title {
  font-family: var(--font-heading-family, inherit);
  font-size: 22px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
}

.kcd-close {
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--kcd-fg, #1a1a1a);
}

.kcd-shipping {
  padding: 10px 22px 14px;
}

.kcd-shipping-label {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.kcd-shipping-track {
  position: relative;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  overflow: visible;
}

.kcd-shipping-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--kcd-fg, #1a1a1a);
  border-radius: 3px;
  transition: width 300ms ease;
}

.kcd-shipping-check {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: var(--kcd-fg, #1a1a1a);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease;
}

.kcd-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 18px;
}

.kcd-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kcd-empty {
  text-align: center;
  padding: 40px 16px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
}

.kcd-item {
  position: relative;
  display: flex;
  gap: 12px;
  background: var(--kcd-card, #fde4ec);
  border-radius: 12px;
  padding: 14px;
}

.kcd-item-remove {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 0;
  color: var(--kcd-accent, #e94c89);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.kcd-item-img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  object-fit: cover;
  flex-shrink: 0;
}

.kcd-item-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kcd-item-top {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.kcd-item-info { flex: 1 1 auto; min-width: 0; }
.kcd-item-name { font-size: 14px; font-weight: 700; }
.kcd-item-desc { font-size: 12px; color: rgba(0, 0, 0, 0.65); margin-top: 2px; }

.kcd-item-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.kcd-item-price { font-size: 14px; font-weight: 700; }
.kcd-item-compare { font-size: 12px; text-decoration: line-through; color: rgba(0, 0, 0, 0.5); }

.kcd-item-save {
  background: var(--kcd-accent, #e94c89);
  color: var(--kcd-accent-fg, #fff);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 2px;
}

.kcd-item-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kcd-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kcd-qty-val { min-width: 18px; text-align: center; font-size: 13px; }

.kcd-qty-text {
  margin-left: auto;
  background: transparent;
  border: 0;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  padding: 4px 8px;
}

.kcd-qty-text:hover { color: var(--kcd-accent, #e94c89); }

/* Free gift */
.kcd-gift {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--kcd-card, #fde4ec);
  border-radius: 12px;
  padding: 14px;
  margin-top: 10px;
}

.kcd-gift-img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.kcd-gift-text { flex: 1 1 auto; min-width: 0; }
.kcd-gift-name { font-size: 14px; font-weight: 700; }
.kcd-gift-blurb { font-size: 12px; color: rgba(0, 0, 0, 0.6); margin-top: 2px; }
.kcd-gift-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.kcd-gift-compare { font-size: 12px; text-decoration: line-through; color: rgba(0, 0, 0, 0.5); }
.kcd-gift-free { font-size: 14px; font-weight: 800; color: #16a34a; }

/* Special offers */
.kcd-offers { margin-top: 18px; }
.kcd-offers-title { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--kcd-fg); margin-bottom: 8px; }

.kcd-offer {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--kcd-card, #fde4ec);
  border-radius: 12px;
  padding: 12px 14px;
}

.kcd-offer-img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.kcd-offer-body { flex: 1 1 auto; min-width: 0; }
.kcd-offer-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.kcd-offer-select {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
}

.kcd-offer-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kcd-offer-compare { font-size: 12px; text-decoration: line-through; color: rgba(0, 0, 0, 0.45); }
.kcd-offer-price { font-size: 13px; font-weight: 700; color: var(--kcd-accent, #e94c89); }
.kcd-offer-add {
  background: var(--kcd-accent, #e94c89);
  color: var(--kcd-accent-fg, #fff);
  border: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.kcd-offer-add:disabled { opacity: 0.6; cursor: default; }

.kcd-offers-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.kcd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(233, 76, 137, 0.25);
  border: 0;
  cursor: pointer;
}

.kcd-dot.is-active { background: var(--kcd-accent, #e94c89); }

/* Shipping protection */
.kcd-protect {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--kcd-card, #fde4ec);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  margin-top: 18px;
}

.kcd-protect input { position: absolute; opacity: 0; pointer-events: none; }

.kcd-protect-tick {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
}

.kcd-protect:has(input:checked) .kcd-protect-tick {
  background: var(--kcd-fg, #1a1a1a);
  color: #fff;
  border-color: var(--kcd-fg, #1a1a1a);
}

.kcd-protect-tick svg { width: 12px; height: 12px; }
.kcd-protect-img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }
.kcd-protect-text { flex: 1 1 auto; }
.kcd-protect-label { font-size: 13px; font-weight: 700; }
.kcd-protect-blurb { font-size: 11px; color: rgba(0, 0, 0, 0.6); }
.kcd-protect-price { font-size: 12px; color: rgba(0, 0, 0, 0.7); margin-top: 2px; }

/* Testimonial */
.kcd-testimonial {
  display: flex;
  gap: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 16px;
  padding-top: 14px;
}

.kcd-test-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.kcd-test-body { flex: 1 1 auto; min-width: 0; }
.kcd-test-stars { display: flex; gap: 2px; margin-bottom: 4px; }
.kcd-star { display: inline-flex; align-items: center; }
.kcd-star svg { width: 14px; height: 14px; fill: currentColor; }
.kcd-test-quote { font-size: 13px; color: rgba(0, 0, 0, 0.85); line-height: 1.4; }
.kcd-test-quote p { margin: 0; }
.kcd-test-author { font-size: 12px; color: rgba(0, 0, 0, 0.6); margin-top: 4px; font-weight: 600; }

/* Footer */
.kcd-footer {
  flex-shrink: 0;
  padding: 16px 22px 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.kcd-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.kcd-save,
.kcd-bloom,
.kcd-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kcd-save {
  font-size: 14px;
  font-weight: 700;
  color: var(--kcd-accent, #e94c89);
}

.kcd-bloom {
  font-size: 13px;
  font-weight: 600;
  color: var(--kcd-accent, #e94c89);
  letter-spacing: 0.04em;
}

.kcd-bloom-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kcd-bloom-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: currentColor;
}
.kcd-bloom-icon svg {
  display: block;
}

.kcd-subtotal {
  font-size: 16px;
  font-weight: 700;
}

/* Tier-change cue: brief background flash on the item price after +/-
   so the customer sees the discount jump (200ms tween, easy to ignore). */
.kcd-flash {
  animation: kcd-flash-bg 380ms ease-out;
}
@keyframes kcd-flash-bg {
  0%   { background-color: var(--kcd-accent, #e94c89); color: var(--kcd-accent-fg, #fff); border-radius: 6px; padding: 1px 4px; }
  100% { background-color: transparent; color: inherit; border-radius: 0; padding: 0; }
}

.kcd-trust {
  text-align: center;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  margin: 8px 0 12px;
}

/* Policy + utility link row — renders in cart pane footer (below payment
   icons) and checkout pane footer (below Pay button). Brand URLs come from
   settings.legal_urls; fall back to standard /policies/* paths. */
.kcd-policies {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
}
.kcd-policies li {
  display: inline-flex;
}
.kcd-policies li + li::before {
  content: "·";
  margin-right: 14px;
  color: rgba(0, 0, 0, 0.35);
}
.kcd-policy-link {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  text-decoration: none;
  transition: color 150ms ease;
}
.kcd-policy-link:hover,
.kcd-policy-link:focus-visible {
  color: var(--kcd-accent, #e94c89);
  text-decoration: underline;
}

.kcd-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--kcd-accent, #e94c89);
  color: var(--kcd-accent-fg, #fff);
  border: 0;
  padding: 16px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.kcd-checkout:hover { opacity: 0.92; }

.kcd-payments {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.kcd-pay {
  width: 38px;
  height: 24px;
}

.kcd-pay svg { width: 100%; height: 100%; display: block; }

@media (max-width: 480px) {
  .kcd { max-width: 100%; border-radius: 0; }
  .kcd-header { padding: 14px 18px; }
}

/* ─────────────────────────────────────────────────
 * Pane visibility (cart / checkout / thank-you)
 * Drawer keeps the same shell; data-kcd-view on the root toggles which
 * pane is rendered. `.kcd-pane` is positioned absolutely so transitions
 * between states feel like a single moving surface.
 * ───────────────────────────────────────────────── */

.kcd-pane {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.kcd-root[data-kcd-view="cart"]      .kcd-pane--cart      { display: flex; }
.kcd-root[data-kcd-view="checkout"]  .kcd-pane--checkout  { display: flex; }
.kcd-root[data-kcd-view="thankyou"]  .kcd-pane--thankyou  { display: flex; }

/* Drawer width expands when in checkout view to fit the form + summary */
.kcd-root[data-kcd-view="checkout"] .kcd { max-width: 920px; }

/* The native [hidden] attribute is honored everywhere — needed because
 * many child rules set explicit display values (flex/grid). */
.kcd [hidden] { display: none !important; }

@media (max-width: 749px) {
  .kcd-root[data-kcd-view="checkout"] .kcd { max-width: 100%; }
}

/* ─────────────────────────────────────────────────
 * Checkout pane
 * ───────────────────────────────────────────────── */

.kcd-co-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--kcd-bg, #fff);
}

.kcd-co-back {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  text-align: left;
  justify-self: start;
  transition: color 150ms ease;
}
.kcd-co-back:hover { color: var(--kcd-fg, #000); }

.kcd-co-title {
  font-family: var(--font-heading-family, inherit);
  font-size: 22px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  text-align: center;
  justify-self: center;
}

.kcd-co-header .kcd-close { justify-self: end; }

.kcd-co-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  overflow: hidden;
}

.kcd-co-form {
  padding: 22px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.kcd-co-section { display: flex; flex-direction: column; gap: 10px; }

.kcd-co-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-heading-family, inherit);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--kcd-fg, #1a1a1a);
}

.kcd-co-edit {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--kcd-accent, #e94c89);
  cursor: pointer;
  text-decoration: underline;
}

.kcd-co-field { display: flex; flex-direction: column; gap: 6px; }

.kcd-co-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kcd-co-grid-full { grid-column: 1 / -1; }

.kcd-co-input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  background: #fff;
  color: var(--kcd-fg, #1a1a1a);
  box-sizing: border-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.kcd-co-input::placeholder { color: rgba(0, 0, 0, 0.45); }
.kcd-co-input:focus {
  outline: none;
  border-color: var(--kcd-accent, #e94c89);
  box-shadow: 0 0 0 3px rgba(233, 76, 137, 0.18);
}
.kcd-co-input[readonly], .kcd-co-input:disabled {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.55);
  cursor: not-allowed;
}

select.kcd-co-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
}

.kcd-co-error {
  margin: 0;
  font-size: 13px;
  color: #c0392b;
}

.kcd-co-discount {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.kcd-co-discount-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 18px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: var(--kcd-fg, #1a1a1a);
  transition: background 150ms ease, color 150ms ease;
}
.kcd-co-discount-btn:hover { background: var(--kcd-fg, #1a1a1a); color: var(--kcd-bg, #fff); }

.kcd-co-discount-status {
  margin: 0;
  font-size: 13px;
  min-height: 18px;
  color: rgba(0, 0, 0, 0.55);
}
.kcd-co-discount-status--ok { color: #207a3a; font-weight: 600; }
.kcd-co-discount-status--err { color: #c0392b; font-weight: 600; }

.kcd-co-payment-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
}

.kcd-co-stripe {
  min-height: 220px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #fff;
}

.kcd-co-summary {
  background: var(--kcd-card, #fde4ec);
  padding: 24px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}

.kcd-co-summary-title {
  font-family: var(--font-heading-family, inherit);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  color: var(--kcd-fg, #1a1a1a);
}

.kcd-co-summary-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kcd-co-summary-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}

.kcd-co-summary-item-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  object-fit: cover;
  display: block;
}

.kcd-co-summary-item-name {
  font-weight: 600;
  line-height: 1.3;
  color: var(--kcd-fg, #1a1a1a);
}
.kcd-co-summary-item-qty {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 2px;
}
.kcd-co-summary-item-price {
  font-weight: 600;
  color: var(--kcd-fg, #1a1a1a);
}

.kcd-co-summary-rows {
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kcd-co-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
}
.kcd-co-summary-row dt { margin: 0; }
.kcd-co-summary-row dd { margin: 0; font-variant-numeric: tabular-nums; }

.kcd-co-summary-total {
  font-size: 18px;
  font-weight: 700;
  color: var(--kcd-fg, #1a1a1a);
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.kcd-co-footer {
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--kcd-bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kcd-co-continue,
.kcd-co-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 20px;
  background: var(--kcd-accent, #e94c89);
  color: var(--kcd-accent-fg, #fff);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 150ms ease, transform 150ms ease;
  font-variant-numeric: tabular-nums;
}
.kcd-co-continue:hover,
.kcd-co-pay:hover { opacity: 0.94; }
.kcd-co-continue:active,
.kcd-co-pay:active { transform: translateY(1px); }
.kcd-co-continue:disabled,
.kcd-co-pay:disabled { opacity: 0.55; cursor: progress; }

@media (max-width: 749px) {
  .kcd-co-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .kcd-co-form {
    order: 2;
    overflow-y: visible;
  }
  .kcd-co-summary {
    order: 1;
    border-left: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .kcd-co-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .kcd-co-header { padding: 14px 18px; }
  .kcd-co-form { padding: 18px; gap: 18px; }
  .kcd-co-summary { padding: 18px; }
  .kcd-co-footer { padding: 12px 18px 16px; }
}

/* ─────────────────────────────────────────────────
 * Thank-you pane
 * ───────────────────────────────────────────────── */

.kcd-pane--thankyou { justify-content: center; align-items: center; }

.kcd-ty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 28px;
  max-width: 420px;
  text-align: center;
}

.kcd-ty-icon {
  color: var(--kcd-accent, #e94c89);
  margin-bottom: 4px;
}

.kcd-ty-heading {
  font-family: var(--font-heading-family, inherit);
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--kcd-fg, #1a1a1a);
}

.kcd-ty-sub {
  margin: 0;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.7);
}

.kcd-ty-note {
  margin: 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
}

.kcd-ty-continue {
  margin-top: 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 28px;
  background: var(--kcd-fg, #1a1a1a);
  color: var(--kcd-bg, #fff);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.kcd-ty-continue:hover { opacity: 0.9; }

/* ─────────────────────────────────────────────────
 * Suppress AtlasCart widget's built-in drawer when
 * Kavya cart is on the page (we use Kavya's drawer
 * exclusively; keeping AtlasCart's around just to
 * read its config script tag).
 * ───────────────────────────────────────────────── */

#atlascart-drawer,
#atlascart-overlay {
  display: none !important;
}

/* kavya_contact_form — Contact page block.
 * Two-column: form left, heading/info/image right.
 * Mirrors ayeshanails.com/pages/contact.
 */

.kcf {
  display: block;
  width: 100%;
  background: var(--kcf-bg, #ffffff);
  color: var(--kcf-fg, #1a1a1a);
  padding: var(--section-pad-block, 48px) 0;
}

.kcf-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ── Form column ───────────────────────────────────── */
.kcf-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kcf-row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.kcf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kcf-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--kcf-fg, #1a1a1a);
}

.kcf-req {
  color: var(--kcf-accent, #f2a7c3);
}

.kcf-input,
.kcf-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e8e2de;
  /* Clone: border-radius 12px, font-size 16px */
  border-radius: 12px;
  background: transparent;
  color: var(--kcf-fg, #1a1a1a);
  font-family: var(--font-body-family, inherit);
  font-size: 16px;
  font-weight: 200;
  outline: none;
  transition: border-color 200ms ease;
  box-sizing: border-box;
}

.kcf-input:focus,
.kcf-textarea:focus {
  border-color: var(--kcf-accent, #f2a7c3);
}

.kcf-textarea {
  resize: vertical;
  min-height: 120px;
}

.kcf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Clone: padding 12px 24px, height 48px, font-size 16px */
  padding: 12px 24px;
  height: 48px;
  background: var(--kcf-btn-bg, #000000);
  color: var(--kcf-btn-fg, #ffffff);
  border: none;
  border-radius: 9999px;
  font-family: var(--font-body-family, inherit);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
  transition: background-color 200ms ease, opacity 200ms ease, transform 200ms ease;
}

/* R17.C: darken contact submit ~12% on hover */
.kcf-submit:hover {
  background: color-mix(in srgb, var(--kcf-btn-bg, #000) 88%, #fff);
  opacity: 1;
  transform: translateY(-1px);
}

/* ── Info column ───────────────────────────────────── */
.kcf-heading {
  font-family: var(--font-heading-family, inherit);
  /* Reconciled to shared larger-section-heading token (<=36px desktop). */
  font-size: var(--section-heading-lg, 3.6rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--kcf-fg, #1a1a1a);
  margin: 0 0 24px;
}

.kcf-description {
  font-size: 16px;
  font-weight: 200;
  line-height: 1.6;
  color: rgba(0,0,0,0.75);
  margin: 0 0 16px;
}

.kcf-email-line {
  font-size: 15px;
  font-weight: 200;
  color: var(--kcf-fg, #1a1a1a);
  margin: 0 0 24px;
}

.kcf-email-link {
  color: var(--kcf-fg, #1a1a1a);
  text-decoration: underline;
}

.kcf-side-img-wrap {
  margin-top: 16px;
  max-width: 432px;
}

.kcf-side-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 899px) {
  .kcf-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Info col now leads in DOM source order (render.js), so the CSS order
   * override is removed — it would double-apply the reorder. */

  .kcf-row--2col {
    grid-template-columns: 1fr;
  }
}

/* kavya_form_page — Parameterized form page block.
 * Covers form_type=tracking (order tracking) and form_type=contact.
 * CSS vars injected on .kfp root via inline style.
 * Shared field/input/button tokens mirror kavya_contact_form patterns.
 */

.kfp {
  display: block;
  width: 100%;
  background: var(--kfp-bg, #ffffff);
  color: var(--kfp-fg, #1a1a1a);
  padding: 64px 0;
}

.kfp-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Page heading ──────────────────────────────────── */
.kfp-title {
  font-family: var(--font-heading-family, inherit);
  font-size: 48px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--kfp-fg, #1a1a1a);
  margin: 0 0 16px;
}

.kfp-blurb {
  font-size: 16px;
  font-weight: 200;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.7);
  margin: 0 0 32px;
}

/* ── Form ───────────────────────────────────────────── */
.kfp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kfp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kfp-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--kfp-fg, #1a1a1a);
}

.kfp-req {
  color: var(--kfp-accent, #f2a7c3);
}

.kfp-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e8e2de;
  border-radius: 12px;
  background: transparent;
  color: var(--kfp-fg, #1a1a1a);
  font-family: var(--font-body-family, inherit);
  font-size: 16px;
  font-weight: 200;
  outline: none;
  transition: border-color 200ms ease;
  box-sizing: border-box;
}

.kfp-input:focus {
  border-color: var(--kfp-accent, #f2a7c3);
}

.kfp-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e8e2de;
  border-radius: 12px;
  background: transparent;
  color: var(--kfp-fg, #1a1a1a);
  font-family: var(--font-body-family, inherit);
  font-size: 16px;
  font-weight: 200;
  outline: none;
  resize: vertical;
  min-height: 120px;
  transition: border-color 200ms ease;
  box-sizing: border-box;
}

.kfp-textarea:focus {
  border-color: var(--kfp-accent, #f2a7c3);
}

.kfp-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 24px;
  height: 48px;
  background: var(--kfp-btn-bg, #000000);
  color: var(--kfp-btn-fg, #ffffff);
  border: none;
  border-radius: 9999px;
  font-family: var(--font-body-family, inherit);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
  transition: background-color 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.kfp-submit:hover {
  background: color-mix(in srgb, var(--kfp-btn-bg, #000) 88%, #fff);
  opacity: 1;
  transform: translateY(-1px);
}

.kfp-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── Fallback / notice band ─────────────────────────── */
.kfp-fallback {
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px solid #e8e2de;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 200;
  line-height: 1.6;
  color: var(--kfp-fg, #1a1a1a);
  background: rgba(0, 0, 0, 0.03);
}

.kfp-fallback a {
  color: var(--kfp-fg, #1a1a1a);
  text-decoration: underline;
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 599px) {
  .kfp-title {
    font-size: 32px;
  }

  .kfp-inner {
    padding: 0 16px;
  }

  .kfp {
    padding: 40px 0;
  }
}

/* kavya_info_page — Shipping/info page block.
 * Minimal layout: centered prose column + optional 3-stat row.
 * Color theming via standard color-scheme-* classes (same as rest of kavya theme).
 */

.kip {
  display: block;
  width: 100%;
  padding: 48px 24px 64px;
}

.kip-inner {
  max-width: 800px;
  margin: 0 auto;
}

.kip-title {
  font-family: var(--font-heading-family, inherit);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 400;
  margin: 0 0 32px;
  line-height: 1.2;
}

.kip-body {
  font-size: 16px;
  line-height: 1.7;
}

.kip-body p {
  margin: 0 0 20px;
}

.kip-body p:last-child {
  margin-bottom: 0;
}

.kip-body a {
  text-decoration: underline;
}

.kip-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border, #e5e5e5);
}

.kip-stat {
  text-align: center;
  padding: 20px 16px;
  border-radius: 12px;
  background: var(--color-background-2, var(--color-base-background-2, #f8f8f8));
}

.kip-stat-value {
  font-family: var(--font-heading-family, inherit);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 6px;
}

.kip-stat-label {
  font-size: 13px;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* kavya_policy_page — minimal styles */

.kpp {
  padding: 3rem 0 4rem;
  /* Legal/utility pages render on a clean high-contrast white surface (gold-standard
     DTC stores keep policy pages white for readability), overriding the brand
     color-scheme tint the section would otherwise inherit. */
  background: #ffffff;
  color: #1a1a1a;
}

.kpp-inner {
  max-width: var(--readable-max, 72rem);
  margin: 0 auto;
}

/* ── Disclaimer band ───────────────────────────────────────────────────────── */
.kpp-disclaimer {
  background: #fff8e1;
  border-left: 4px solid #f59e0b;
  color: #7c5e00;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  margin-bottom: 2rem;
  border-radius: 0 4px 4px 0;
}

/* ── Page header ───────────────────────────────────────────────────────────── */
.kpp-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  /* Border-rule motif removed — gold policy pages have no chrome. */
}

.kpp-title {
  /* Gold: centered title, reconciled to shared section-heading token. */
  text-align: center;
  font-size: var(--section-heading, 3rem);
  font-weight: 600;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.kpp-last-updated {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
  /* Centered under the centered title for a coherent header block. */
  text-align: center;
}

/* ── Body prose ────────────────────────────────────────────────────────────── */
.kpp-body {
  font-size: 1rem;
  line-height: 1.7;
  color: inherit;
  /* Gold prose column: 65ch readable width, centered. */
  max-width: var(--readable-width, 65ch);
  margin: 0 auto;
}

.kpp-body h2 {
  font-size: 1.25rem;
  font-weight: 600;
  /* Prose rhythm: ~2.4em top spacing; border-rule motif removed (gold has none). */
  margin: 2.4rem 0 0.75rem;
}

.kpp-body h2:first-child {
  margin-top: 0;
}

.kpp-body h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}

.kpp-body p {
  margin: 0 0 1rem;
}

.kpp-body ul,
.kpp-body ol {
  margin: 0 0 1rem 1.5rem;
  padding: 0;
}

.kpp-body li {
  margin-bottom: 0.4rem;
}

.kpp-body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  opacity: 0.85;
}

.kpp-body a:hover {
  opacity: 1;
}

/* ── Shipping table ────────────────────────────────────────────────────────── */
.kpp-body table,
.kpp-shipping-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.9rem;
}

.kpp-body table th,
.kpp-shipping-table th {
  background: #f5f5f5;
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e0e0e0;
}

.kpp-body table td,
.kpp-shipping-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  vertical-align: top;
}

.kpp-body table tr:nth-child(even) td {
  background: #fafafa;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .kpp {
    padding: 2rem 0 3rem;
  }

  /* Title size now from the responsive --section-heading clamp token. */

  .kpp-body table,
  .kpp-shipping-table {
    font-size: 0.8rem;
  }
}

/* image_zoom_modal/styles.css
 * Block-specific layout for the image zoom modal content.
 * Shared modal shell (.atlas-modal, .atlas-modal__inner) lives in atlas-motion.css.
 */

/* Override the generic inner container for zoom modals */
.atlas-zoom-modal .atlas-modal__inner {
  background: transparent;
  padding: 0;
  max-width: min(96vw, 900px);
  max-height: 92vh;
  overflow: visible;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Image panner — handles zoom + pan state */
.atlas-zoom-modal__panner {
  position: relative;
  width: min(90vw, 720px);
  height: min(80vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  user-select: none;
  overflow: hidden;
  border-radius: 0.8rem;
  background: #000;
}
.atlas-zoom-modal__panner.is-zoomed {
  cursor: grab;
}
.atlas-zoom-modal__panner.is-panning {
  cursor: grabbing;
}

/* The zoomable image */
.atlas-zoom-modal__image {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  transition: transform 220ms ease;
  pointer-events: none;
}
.atlas-zoom-modal__panner.is-zoomed .atlas-zoom-modal__image {
  transition: none; /* pan is instant */
}

/* Close button */
.atlas-zoom-modal__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 10;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
  transition: background 150ms ease;
}
.atlas-zoom-modal__close:hover,
.atlas-zoom-modal__close:focus-visible {
  background: rgba(0, 0, 0, 0.8);
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}
.atlas-zoom-modal__close svg {
  pointer-events: none;
}

/* Nav arrows */
.atlas-zoom-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
  transition: background 150ms ease;
}
.atlas-zoom-modal__nav:hover,
.atlas-zoom-modal__nav:focus-visible {
  background: rgba(0, 0, 0, 0.8);
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}
.atlas-zoom-modal__nav--prev { left: 0.8rem; }
.atlas-zoom-modal__nav--next { right: 0.8rem; }

/* Thumbnail strip */
.atlas-zoom-modal__thumbs {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  padding: 0.4rem;
  scrollbar-width: none;
}
.atlas-zoom-modal__thumbs::-webkit-scrollbar { display: none; }

.atlas-zoom-modal__thumb {
  flex-shrink: 0;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 0.6rem;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 150ms ease;
  background: #222;
}
.atlas-zoom-modal__thumb.is-active {
  border-color: #fff;
}
.atlas-zoom-modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reduced-motion: no scale transition */
@media (prefers-reduced-motion: reduce) {
  .atlas-zoom-modal__image {
    transition: none !important;
  }
}

/* video_modal/styles.css
 * Block-specific layout for the video modal content.
 * Shared modal shell (.atlas-modal, .atlas-modal__inner) lives in atlas-motion.css.
 */

/* Override the generic inner container for video modals */
.atlas-video-modal .atlas-modal__inner {
  background: transparent;
  padding: 0;
  max-width: min(92vw, 420px);
  max-height: 90vh;
  overflow: visible;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

/* Video player wrapper */
.atlas-video-modal__player {
  position: relative;
  width: 100%;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #000;
}

/* 9:16 default */
.atlas-video-modal__player[data-aspect="9:16"] {
  aspect-ratio: 9 / 16;
  max-height: 75vh;
}
.atlas-video-modal__player[data-aspect="1:1"] {
  aspect-ratio: 1 / 1;
  max-height: 75vw;
}
.atlas-video-modal__player[data-aspect="16:9"] {
  aspect-ratio: 16 / 9;
}

.atlas-video-modal__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Close button */
.atlas-video-modal__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 10;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
  transition: background 150ms ease;
}
.atlas-video-modal__close:hover,
.atlas-video-modal__close:focus-visible {
  background: rgba(0, 0, 0, 0.8);
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}
.atlas-video-modal__close svg {
  pointer-events: none;
}

/* Swipe hint (mobile only) */
.atlas-video-modal__swipe-hint {
  display: none;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  letter-spacing: 0.04em;
}
@media (max-width: 767px) {
  .atlas-video-modal__swipe-hint {
    display: block;
  }
}

/* Product card CTA */
.atlas-video-modal__product-card {
  width: 100%;
  background: #fff;
  border-radius: 1rem;
  padding: 1.2rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.atlas-video-modal__product-name {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1a1a1a;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atlas-video-modal__cta-btn {
  flex-shrink: 0;
  padding: 0.8rem 1.6rem;
  border-radius: 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  background: #1a1a1a;
  color: #fff;
  border: none;
  transition: background 150ms ease;
}
.atlas-video-modal__cta-btn:hover {
  background: #333;
}

/* Reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
  .atlas-video-modal__swipe-hint {
    display: none !important;
  }
}

/* collection_page/styles.css — SSR collection page layout */

/* ── Page wrapper ──────────────────────────────────────────────────── */
.coll-page {
  padding: 2.4rem 0 4rem;
}

/* ── Breadcrumb ────────────────────────────────────────────────────── */
.coll-breadcrumb {
  font-size: 1.2rem;
  color: var(--color-foreground-light, #666);
  margin-bottom: 1.6rem;
}
.coll-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.coll-breadcrumb a:hover {
  text-decoration: underline;
}
.coll-breadcrumb__sep {
  margin: 0 0.4rem;
}

/* ── Heading ───────────────────────────────────────────────────────── */
.coll-heading {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  margin-bottom: 2.4rem;
  line-height: 1.15;
}

/* ── Toolbar (filter + sort) ───────────────────────────────────────── */
.coll-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-start;
  margin-bottom: 2.4rem;
}

/* ── Filter form (legacy link chips — kept for backward compat) ────── */
.coll-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  flex: 1 1 auto;
}

.coll-filter__label {
  font-size: 1.2rem;
  font-weight: 600;
  margin-right: 0.4rem;
  color: var(--color-foreground, #1a1a1a);
}

.coll-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.2rem;
  border-radius: 100px;
  border: 1.5px solid var(--color-border, #e0e0e0);
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--color-foreground, #1a1a1a);
  transition: background 150ms, border-color 150ms;
  white-space: nowrap;
  text-decoration: none;
}
.coll-filter__chip:hover {
  background: var(--color-background-alt, #f5f5f5);
  border-color: var(--color-foreground, #1a1a1a);
}
.coll-filter__chip--active {
  background: var(--color-button, #000);
  color: var(--color-button-text, #fff);
  border-color: var(--color-button, #000);
}
.coll-filter__chip--clear {
  border-style: dashed;
  opacity: 0.7;
}

/* ── New checkbox-chip filter form ─────────────────────────────────── */
.cp-filters {
  margin-bottom: 1.5rem;
  flex: 1 1 auto;
}
.cp-filters__group {
  border: 0;
  padding: 0;
  margin: 0;
}
.cp-filters__legend {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  color: var(--cp-fg, #1a1a1a);
}
.cp-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.cp-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.875rem;
  border: 1px solid var(--cp-border, #e0e0e0);
  border-radius: 9999px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 200ms ease, border-color 200ms ease;
  user-select: none;
}
.cp-filters__chip:hover {
  border-color: var(--cp-accent, #f2a7c3);
}
.cp-filters__chip input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.cp-filters__chip:has(input:checked) {
  background: var(--cp-accent, #f2a7c3);
  border-color: var(--cp-accent, #f2a7c3);
  color: var(--cp-button-fg, #fff);
}
.cp-filters__apply {
  padding: 0.5rem 1.25rem;
  background: var(--cp-button-bg, #000);
  color: var(--cp-button-fg, #fff);
  border: 0;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease;
  margin-right: 0.75rem;
}
.cp-filters__apply:hover {
  background: var(--cp-accent, #f2a7c3);
}
.cp-filters__clear {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  text-decoration: underline;
  color: var(--cp-fg-muted, #666);
}

/* ── Sort dropdown ─────────────────────────────────────────────────── */
.coll-sort {
  flex: 0 0 auto;
}
.coll-sort select {
  padding: 0.6rem 1.2rem;
  border: 1.5px solid var(--color-border, #e0e0e0);
  border-radius: 6px;
  background: transparent;
  font-size: 1.3rem;
  color: var(--color-foreground, #1a1a1a);
  cursor: pointer;
}
.coll-sort select:focus {
  outline: 2px solid var(--color-accent, #000);
  outline-offset: 2px;
}

/* ── Count line ────────────────────────────────────────────────────── */
.coll-count {
  font-size: 1.2rem;
  color: var(--color-foreground-light, #666);
  margin-bottom: 1.6rem;
}

/* ── Pagination ────────────────────────────────────────────────────── */
.coll-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  margin-top: 4rem;
  flex-wrap: wrap;
}
.coll-pagination a,
.coll-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  height: 3.6rem;
  padding: 0 1rem;
  border-radius: 6px;
  border: 1.5px solid var(--color-border, #e0e0e0);
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--color-foreground, #1a1a1a);
  transition: background 150ms, border-color 150ms;
}
.coll-pagination a:hover {
  background: var(--color-background-alt, #f5f5f5);
  border-color: var(--color-foreground, #1a1a1a);
}
.coll-pagination .coll-pagination__current {
  background: var(--color-button, #000);
  color: var(--color-button-text, #fff);
  border-color: var(--color-button, #000);
}
.coll-pagination .coll-pagination__disabled {
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 600px) {
  .coll-toolbar {
    flex-direction: column;
  }
}

/* product_grid/styles.css — responsive product grid */

.pg-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);  /* mobile: 2-up */
}

@media (min-width: 768px) {
  .pg-grid {
    grid-template-columns: repeat(3, 1fr);  /* tablet: 3-up */
  }
}

@media (min-width: 1024px) {
  .pg-grid {
    grid-template-columns: repeat(4, 1fr);  /* desktop: 4-up */
  }
}

/* Schema override modifier classes */
.pg-grid--cols-5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) {
  .pg-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
}
.pg-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .pg-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.pg-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }

/* ── Empty state ───────────────────────────────────────────────────── */
.pg-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 6rem 2rem;
  color: var(--color-foreground-light, #666);
  font-size: 1.5rem;
}

/* product_card/styles.css — individual product card */

/* ── Card shell ────────────────────────────────────────────────────── */
/* R15.7: card lift on hover — clone uses transition-all .3s on .product-card .rounded-xl */
.pc {
  display: flex;
  flex-direction: column;
  background: var(--pc-bg, #fff);
  border-radius: 12px;
  overflow: visible; /* allow shadow to show outside */
  transition: transform 300ms cubic-bezier(0.16,1,0.3,1);
}
.pc:hover {
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .pc { transition: none; }
  .pc:hover { transform: none; }
}

/* ── Image area ────────────────────────────────────────────────────── */
.pc__media {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--pc-card-bg, #f5f5f5);
  border-radius: 12px;
}
/* R15: slide-up reveal — primary slides UP and out, secondary appears from below.
   Clone uses data-image-hover-transition="slide" which translates primary -100%
   on hover and keeps secondary pinned at bottom (ready to appear). */
.pc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(0.16,1,0.3,1), opacity 350ms ease;
}
/* Primary image — always visible, slides up on hover */
.pc__img--primary {
  z-index: 1;
  transform: translateY(0);
  opacity: 1;
}
/* Secondary hover image — starts below viewport of card */
.pc__img--secondary {
  z-index: 2;
  transform: translateY(100%);
  opacity: 1;
}
.pc__media:hover .pc__img--primary {
  transform: translateY(-100%);
}
.pc__media:hover .pc__img--secondary {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .pc__img { transition: none; }
  .pc__img--secondary { transform: translateY(0); opacity: 0; }
  .pc__media:hover .pc__img--secondary { opacity: 1; }
  .pc__media:hover .pc__img--primary { transform: translateY(0); opacity: 0; }
}

/* ── Save% pill on image ────────────────────────────────────────────── */
/* R14: pill is absolute-positioned on image top-left (discount_pill_bg token = red) */
.pc__save-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  background: var(--pc-save-pill-bg, #ff3b30);
  color: var(--pc-save-pill-fg, #ffffff);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 4px;
  padding: 3px 6px;
  pointer-events: none;
  letter-spacing: 0.02em;
}

/* ── Info ──────────────────────────────────────────────────────────── */
.pc__info {
  padding: 0.75rem 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.25rem;
}

.pc__title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.25rem;
  color: var(--pc-fg, #1a1a1a);
  text-decoration: none;
}
.pc__title:hover {
  text-decoration: underline;
}

/* ── Price row ─────────────────────────────────────────────────────── */
.pc__prices {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pc__price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pc-fg, #1a1a1a);
}
.pc__compare {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--pc-fg-muted, #999);
  text-decoration: line-through;
}
.pc__badge {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pc-sale, #e53c35);
  background: color-mix(in srgb, var(--pc-sale, #e53c35) 12%, transparent);
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
}

/* ── CTA — hover-reveal (R15.4) ────────────────────────────────────── */
/* Button is always rendered but hidden until card hover.
   On hover: fades in + slides up from 8px below. */
.pc__cta {
  margin-top: 0.5rem;
}
.pc__btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 0.55rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
}
.pc:hover .pc__btn,
.pc:focus-within .pc__btn {
  opacity: 1;
  transform: translateY(0);
}
.pc__btn--add {
  background: var(--pc-button-bg, #000);
  color: var(--pc-button-fg, #fff);
  border: none;
}
.pc__btn--add:hover {
  background: var(--pc-accent, #f2a7c3);
  color: #fff;
}
.pc__btn--choose {
  background: transparent;
  color: var(--pc-button-bg, #000);
  border: 1.5px solid var(--pc-button-bg, #000);
}
.pc__btn--choose:hover {
  background: var(--pc-button-bg, #000);
  color: var(--pc-button-fg, #fff);
}

@media (prefers-reduced-motion: reduce) {
  .pc__btn { opacity: 1; transform: none; transition: none; }
}