/* ============================================================
   SECTION 1: CSS VARIABLES & RESET
   Navigate: Search "SECTION 1" to jump here
   ============================================================ */

/* === SELF-HOSTED FONTS (must be outside :root) === */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica_neue/HelveticaNeueMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica_neue/HelveticaNeueBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nohemi';
  src: url('fonts/nohemi/Nohemi-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ────────────────────────────────────────────────────────
   SECTION 1.1: CSS Custom Properties (Variables)
   ────────────────────────────────────────────────────────

   [INFO] CSS custom properties defined here provide theme-wide
   consistency for colors, shadows, transitions, and typography.
   These variables are used throughout all PDP components.

   [CUSTOMIZE] Change these values to match your brand guidelines.
   All colors use hexadecimal format (#RRGGBB).

   [INFO] --pdp-primary, --pdp-secondary, and status colors
   (--pdp-success, --pdp-danger, --pdp-warning, --pdp-info)
   are NOT defined here — they are injected via JavaScript in
   config/01-theme-colors.txt from brand.colors.* so that
   config/00-store-identity.txt is the Single Source of Truth.
   The values below serve as CSS fallbacks only (used when JS
   has not yet run or if injection fails).
   ────────────────────────────────────────────────────────── */
:root {
  /* ────────────────────────────────────────────────────────
     Status Colors
     ────────────────────────────────────────────────────────── */

  /* Success color - Used for success messages, checkmarks, "In stock" badges */
  --pdp-success: #10b981;  /* Default: Green */
  --pdp-success-dark: #059669;  /* Darker success for gradients/hover states */
  --pdp-success-rgb: 16, 185, 129;  /* RGB values for success color (for rgba()) */

  /* Danger/error color - Used for error messages, sold out badges, delete buttons */
  --pdp-danger: #dc2626;  /* Default: Red */
  --pdp-danger-bg: #fee2e2;  /* Light danger background for hover states */

  /* Warning color - Used for low stock warnings, caution messages */
  --pdp-warning: #f59e0b;  /* Default: Orange */
  --pdp-warning-dark: #d97706;  /* Darker warning for gradients/hover states */

  /* Info color - Used for informational messages, tips, help text */
  --pdp-info: #3b82f6;  /* Default: Blue */

  /* ────────────────────────────────────────────────────────
     Brand Color RGB Values
     ────────────────────────────────────────────────────────

     [INFO] RGB values for brand colors (for use with rgba() function).
     These match the primary/secondary colors injected by config/01-theme-colors.txt.
     Use with rgba(var(--pdp-primary-rgb), opacity) for semi-transparent colors.

     [IMPORTANT] If you change brand colors in config/00-store-identity.txt,
     you must also update these RGB values to match.
     ────────────────────────────────────────────────────────── */

  /* Primary brand color RGB - Default: #d16838 (209, 104, 56) */
  --pdp-primary-rgb: 209, 104, 56;

  /* Secondary brand color RGB - Default: #faf0eb (250, 240, 235) */
  --pdp-secondary-rgb: 250, 240, 235;

  /* ────────────────────────────────────────────────────────
     Base Colors
     ────────────────────────────────────────────────────────── */

  /* Text color - Primary text color for headings, labels, body text */
  --pdp-text: #111827;  /* Default: Dark gray (almost black) */

  /* Muted text color - Secondary text, descriptions, placeholder text */
  --pdp-text-muted: #6b7280;  /* Default: Medium gray */

  /* Border color - Used for dividers, input borders, card outlines */
  --pdp-border: #e5e7eb;  /* Default: Light gray */

  /* Surface color - Used for card backgrounds, elevated surfaces */
  --pdp-surface: #f9fafb;  /* Default: Very light gray */

  /* Background color - Page background, main content area background */
  --pdp-background: #ffffff;  /* Default: White */

  /* ────────────────────────────────────────────────────────
     Grayscale Palette (Tier 1 - Foundation)
     ────────────────────────────────────────────────────────

     [INFO] Complete grayscale palette for universal color usage.
     Eliminates hardcoded grays/whites across all CSS parts.
     ────────────────────────────────────────────────────────── */

  --pdp-white: #ffffff;
  --pdp-gray-50: #f9fafb;
  --pdp-gray-100: #f3f4f6;
  --pdp-gray-200: #e5e7eb;
  --pdp-gray-300: #d1d5db;
  --pdp-gray-400: #9ca3af;
  --pdp-gray-500: #6b7280;
  --pdp-gray-600: #4b5563;
  --pdp-gray-700: #374151;
  --pdp-gray-800: #1f2937;
  --pdp-gray-900: #111827;
  --pdp-black: #000000;

  /* ────────────────────────────────────────────────────────
     Semantic Colors (Tier 2 - Meaning)
     ────────────────────────────────────────────────────────

     [INFO] Semantic color mappings - reference grayscale palette.
     Makes intent clear (e.g., --pdp-text-primary vs #111827).
     ────────────────────────────────────────────────────────── */

  --pdp-text-primary: var(--pdp-gray-900);
  --pdp-text-secondary: var(--pdp-gray-500);
  --pdp-text-disabled: var(--pdp-gray-400);
  --pdp-bg-page: var(--pdp-white);
  --pdp-bg-surface: var(--pdp-gray-50);
  --pdp-bg-elevated: var(--pdp-white);
  --pdp-border-default: var(--pdp-gray-200);
  --pdp-border-strong: var(--pdp-gray-300);
  --pdp-border-light: var(--pdp-gray-100);

  /* ────────────────────────────────────────────────────────
     Component-Specific Colors (Tier 3 - Components)
     ────────────────────────────────────────────────────────

     [INFO] Dedicated variables for specific component styling.
     Allows fine-grained theming without affecting other components.
     ────────────────────────────────────────────────────────── */

  /* Cart Drawer Colors */
  --pdp-cart-bg: var(--pdp-white);
  --pdp-cart-border: var(--pdp-gray-100);
  --pdp-cart-overlay: rgba(0, 0, 0, 0.5);
  --pdp-cart-item-border: var(--pdp-gray-100);

  /* Gallery Colors */
  --pdp-gallery-nav-bg: var(--pdp-white);
  --pdp-gallery-nav-border: var(--pdp-gray-300);
  --pdp-gallery-thumb-border: var(--pdp-gray-200);
  --pdp-gallery-thumb-active: var(--pdp-gray-900);
  --pdp-lightbox-bg: rgba(0, 0, 0, 0.95);

  /* Gallery Controls (shared: main gallery + YML modal gallery) */
  /* Nav arrows */
  --pdp-gallery-nav-size: 40px;
  --pdp-gallery-nav-left: 16px;
  --pdp-gallery-nav-right: 16px;
  /* Zoom button */
  --pdp-gallery-zoom-size: 36px;
  --pdp-gallery-zoom-top: 16px;
  --pdp-gallery-zoom-right: 16px;
  /* Dots */
  --pdp-dot-size: 6px;
  --pdp-dot-active-width: 16px;
  --pdp-dot-active-radius: 3px;
  --pdp-dot-gap: 5px;
  --pdp-dot-pad-y: 5px;
  --pdp-dot-pad-x: 8px;
  --pdp-dot-bottom: 12px;

  /* Product Info Colors */
  --pdp-variant-border: var(--pdp-gray-300);
  --pdp-variant-bg: var(--pdp-white);
  --pdp-variant-hover-bg: var(--pdp-gray-50);
  --pdp-variant-selected-border: var(--pdp-gray-900);

  /* Reviews Colors */
  --pdp-review-bg: var(--pdp-white);
  --pdp-review-border: var(--pdp-gray-100);
  --pdp-star-active: #fbbf24;
  --pdp-star-inactive: var(--pdp-gray-300);

  /* Badge Colors */
  --pdp-badge-sale-bg: #dc2626;
  --pdp-badge-sale-text: var(--pdp-white);
  --pdp-badge-bestseller-bg: #10b981;
  --pdp-badge-bestseller-text: var(--pdp-white);
  --pdp-badge-popular-bg: #3b82f6;
  --pdp-badge-popular-text: var(--pdp-white);

  /* Discount Badge Colors */
  --pdp-discount-badge-text: #ffffff;
  --pdp-discount-badge-bg: #10b981;  /* Green from competitor reference */

  /* Empty Cart State Sizes */
  --pdp-empty-icon-size: 64px;
  --pdp-empty-icon-size-mobile: 56px;
  --pdp-empty-title-size: 32px;
  --pdp-empty-title-size-mobile: 26px;
  --pdp-empty-subtitle-size: 16px;
  --pdp-empty-subtitle-size-mobile: 15px;
  --pdp-empty-benefits-heading-size: 18px;
  --pdp-empty-benefits-heading-size-mobile: 17px;
  --pdp-empty-benefits-text-size: 15px;
  --pdp-empty-benefits-text-size-mobile: 14px;
  --pdp-empty-trust-badge-size: 13px;
  --pdp-empty-bubble-size: 28px;
  --pdp-empty-bubble-size-mobile: 24px;

  /* ────────────────────────────────────────────────────────
     Border Radius Scale (Tier 4 - Shape)
     ────────────────────────────────────────────────────────

     [INFO] Standardized border radius values for consistent rounding.
     Replaces hardcoded border-radius values (4px, 8px, 12px, etc.).
     ────────────────────────────────────────────────────────── */

  --pdp-radius-none: 0;
  --pdp-radius-xs: 4px;
  --pdp-radius-sm: 6px;
  --pdp-radius-md: 8px;
  --pdp-radius-lg: 12px;
  --pdp-radius-xl: 16px;
  --pdp-radius-2xl: 24px;
  --pdp-radius-full: 9999px;

  /* ────────────────────────────────────────────────────────
     Typography Scale (Tier 5 - Text Size)
     ────────────────────────────────────────────────────────

     [INFO] Consistent font size scale across all components.
     Replaces hardcoded font-size values (12px, 14px, 16px, etc.).
     ────────────────────────────────────────────────────────── */

  --pdp-text-xs: 12px;
  --pdp-text-sm: 13px;
  --pdp-text-base: 14px;
  --pdp-text-md: 15px;
  --pdp-text-lg: 16px;
  --pdp-text-xl: 18px;
  --pdp-text-2xl: 24px;
  --pdp-text-3xl: 30px;
  --pdp-text-4xl: 36px;

  /* Font Weights */
  --pdp-font-light: 300;
  --pdp-font-normal: 400;
  --pdp-font-medium: 500;
  --pdp-font-semibold: 600;
  --pdp-font-bold: 700;

  /* ────────────────────────────────────────────────────────
     Opacity Scale (Tier 6 - Transparency)
     ────────────────────────────────────────────────────────

     [INFO] Standard opacity values for hover, disabled, and overlay states.
     Replaces hardcoded opacity values (0.5, 0.8, etc.).
     ────────────────────────────────────────────────────────── */

  --pdp-opacity-0: 0;
  --pdp-opacity-10: 0.1;
  --pdp-opacity-20: 0.2;
  --pdp-opacity-30: 0.3;
  --pdp-opacity-40: 0.4;
  --pdp-opacity-50: 0.5;
  --pdp-opacity-60: 0.6;
  --pdp-opacity-70: 0.7;
  --pdp-opacity-80: 0.8;
  --pdp-opacity-90: 0.9;
  --pdp-opacity-100: 1;

  /* Legacy opacity variables (for backward compatibility) */
  --pdp-opacity-hidden: var(--pdp-opacity-0);
  --pdp-opacity-disabled: var(--pdp-opacity-30);
  --pdp-opacity-visible: var(--pdp-opacity-100);
  --pdp-opacity-hover: var(--pdp-opacity-80);
  --pdp-opacity-modal-overlay: var(--pdp-opacity-50);

  /* ────────────────────────────────────────────────────────
     Shadow System
     ────────────────────────────────────────────────────────── */

  /* Small shadow - Subtle elevation for buttons, badges, small elements */
  --pdp-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);

  /* Medium shadow - Standard elevation for cards, modals, dropdowns */
  --pdp-shadow-md: 0 4px 12px rgba(0,0,0,0.08);

  /* Large shadow - High elevation for floating elements, popovers */
  --pdp-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* ────────────────────────────────────────────────────────
     Transition Timing
     ────────────────────────────────────────────────────────── */

  /* Fast transition - Quick interactions like hover states, ripple effects */
  --pdp-transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);

  /* Base transition - Standard animations for buttons, modals, fades */
  --pdp-transition-base: 250ms cubic-bezier(0.4,0,0.2,1);

  /* Normal transition - Common UI transitions (300ms) */
  --pdp-transition-normal: 300ms;

  /* Slow transition - Deliberate animations like progress bars (500ms) */
  --pdp-transition-slow: 500ms;

  /* ────────────────────────────────────────────────────────
     Typography
     ────────────────────────────────────────────────────────── */

  /* Primary font family - Body/UI text */
  --pdp-font-family: 'Poppins', -apple-system, sans-serif;

  /* Typography role tokens (fallback to body font when not configured) */
  --pdp-font-family-heading: var(--pdp-font-family);
  --pdp-font-family-logo: var(--pdp-font-family);
  --pdp-font-family-nav: var(--pdp-font-family);
  --pdp-font-family-announcement: var(--pdp-font-family);

  /* ────────────────────────────────────────────────────────
     Custom Easing Curves (Premium Animations)
     ────────────────────────────────────────────────────────── */

  /* Elastic Easing - Bouncy luxury effects */
  --pdp-ease-elastic-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --pdp-ease-elastic-inout: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --pdp-ease-soft-elastic: cubic-bezier(0.5, -0.15, 0.1, 1.15);

  /* Anticipation Easing - Pull-back before action */
  --pdp-ease-anticipation: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --pdp-ease-soft-anticipation: cubic-bezier(0.5, -0.05, 0.68, 0.5);

  /* Luxury Smooth Curves - Premium slow-down */
  --pdp-ease-luxury-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pdp-ease-buttery: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --pdp-ease-gentle: cubic-bezier(0.4, 0, 0.6, 1);

  /* Magnetic Curves - Cursor-following effects */
  --pdp-ease-magnetic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pdp-ease-magnetic-snap: cubic-bezier(0.6, 1.8, 0.4, 0.9);

  /* ────────────────────────────────────────────────────────
     Spacing System (8px base, Tailwind-inspired)
     ────────────────────────────────────────────────────────

     [INFO] Responsive spacing using clamp() for fluid scaling.
     Format: clamp(min, preferred, max)
     - min: Mobile value
     - preferred: Viewport-based scaling
     - max: Desktop value
     ────────────────────────────────────────────────────────── */

  /* Extra-small spacing - Used for small border-radius and micro-gaps (announcement bar, etc.) */
  --pdp-spacing-xxs: 4px;

  /* ============================================
     TIER 8: SIZING TOKENS (Component Dimensions)
     ============================================ */

  /* Fixed Component Sizes */
  --pdp-size-2xs: 32px;   /* Small icons, close buttons */
  --pdp-size-xs: 40px;    /* Medium buttons, thumbnails */
  --pdp-size-sm: 60px;    /* Thumbnail height */
  --pdp-size-md: 80px;    /* Medium components */
  --pdp-size-lg: 120px;   /* Large components */
  --pdp-size-xl: 180px;   /* Extra large (reviews average) */

  /* Responsive Container Widths */
  --pdp-container-max-xs: 900px;   /* Mini modal skeleton */
  --pdp-container-max-sm: 1000px;  /* Small sections (cart drawer) */
  --pdp-container-max-md: 1200px;  /* Standard sections (reviews, yml, comparison, statistics) */
  --pdp-container-max-lg: 1400px;  /* Wide sections (main container fallback) */
  --pdp-cart-drawer-width: 440px;  /* Cart drawer fixed width (matches .pdp-cart-drawer { width }) */

  /* ============================================
     TIER 9: SECTION LAYOUT TOKENS (Applied to Sections)
     ============================================ */

  /* Responsive Section Padding (viewport-scaled) */
  --pdp-section-padding-x: clamp(20px, 2.5vw, 32px);  /* Horizontal: 20px mobile → 32px desktop (FINAL - Session 5) */

  /* Responsive Section Title Sizing */
  --pdp-section-title-size: clamp(28px, 3vw, 40px);      /* Section titles: 28px mobile → 40px desktop */
  --pdp-section-subtitle-size: clamp(14px, 1.2vw, 16px); /* Subtitles: 14px mobile → 16px desktop */

  /* Section Header Spacing (title-subtitle gap) */
  --pdp-section-title-margin-bottom: 0px;                      /* NO SPACING - Title and subtitle directly adjacent */
  --pdp-section-subtitle-margin-bottom: 0px;                   /* No margin after subtitle */
  --pdp-section-header-margin-bottom: clamp(16px, 2vw, 24px);   /* 16-24px gap after header block (COMPACT - Reduced spacing) */

  /* Section Content Gaps */
  --pdp-section-gap: clamp(16px, 2vw, 24px);  /* Gap between section items: 16px mobile → 24px desktop */

  /* ════════════════════════════════════════════════════════════
     TIER 10: SECTION COMPONENT SEMANTIC TOKENS
     ════════════════════════════════════════════════════════════

     [INFO] Semantic aliases for section components (Reviews, YML, Statistics, Comparison).
     These tokens reference existing foundation tokens (DRY principle) but provide
     semantic naming for better code readability and maintainability.

     [WHY SEMANTIC TOKENS] While --pdp-font-semibold is clear, --pdp-section-title-weight
     is more explicit about intent when reading CSS. If we ever want to make section
     titles use a different weight than --pdp-font-semibold, we only change 1 line.
     ════════════════════════════════════════════════════════════ */

  /* TITEL fontweight (references Tier 5 typography token) */
  --pdp-section-title-weight: var(--pdp-font-semibold);   /* 600 */

  /* SUBTITLE fontweight (references Tier 5 typography token) */
  --pdp-section-subtitle-weight: var(--pdp-font-normal);  /* 400 */

  /* CONTENT CONTAINER margins (references Tier 7 spacing token) */
  --pdp-section-content-margin-top: clamp(16px, 2vw, 24px);  /* 16-24px responsive */
  --pdp-section-content-margin-bottom: 0px;  /* No extra spacing below content */

  /* Modal & Overlay Widths */
  --pdp-modal-max-width: 800px;  /* Modal max-width: 800px (actual rendered value in modals.txt) */

  /* Modal Header (centralized — shared by content modals + YML modal) */
  --pdp-modal-header-h: 44px;                             /* Header bar height on mobile (compact) */
  --pdp-modal-header-border: 1px solid var(--pdp-border);  /* Header bottom border */
  --pdp-modal-close-size: 36px;                            /* Close button size (compact) */

  /* Grid Columns (responsive) */
  --pdp-yml-columns: 4;       /* You May Like: 4 columns desktop */
  --pdp-reviews-columns: 2;   /* Reviews: 2 columns desktop */

  /* ════════════════════════════════════════════════════════════
     SECTION ALIGNMENT SYSTEM
     ════════════════════════════════════════════════════════════

     [INFO] Controls layout of ALL section containers (12 sections + Hero + Main).
     Every container with class .pdp-section-container gets these tokens.

     Change 1 value → all sections update.
     Hero/Main own CSS overrides max-width and horizontal padding via cascade.

     [USAGE] All section containers MUST have class pdp-section-container:
     - max-width: var(--pdp-section-max-width)
     - padding: var(--pdp-section-pad-top) var(--pdp-section-pad-x) var(--pdp-section-pad-bottom)
     - margin: 0 auto; box-sizing: border-box

     [OVERRIDE] Per-section override via CSS cascade:
     .pdp-steps-section { --pdp-section-max-width: 1400px; }

     [CONFIG-DRIVEN] Vertical padding is config-driven:
     config/00-store-identity.txt → config/19-theme-injection.txt →
     02-css-reset.txt media queries → --pdp-section-pad-top / --pdp-section-pad-bottom / --pdp-section-gap
     ════════════════════════════════════════════════════════════ */

  /* Section container max-width (all sections align to same width) */
  --pdp-section-max-width: 1200px;

  /* Section container vertical padding — fallback only, overridden by media queries in 02-css-reset.txt */
  --pdp-section-pad-top: 40px;
  --pdp-section-pad-bottom: 40px;

  /* Inter-section gap — margin between sections (shows body background). Default 0 = flush sections */
  --pdp-section-gap: 0px;

  /* Section container horizontal padding (responsive) */
  --pdp-section-pad-x: clamp(16px, 4vw, 40px);

  /* Gap between section header and body content (responsive) */
  --pdp-section-header-gap: clamp(24px, 3vw, 40px);

  /* Subpage container vertical padding — fallback only, overridden by media queries in 02-css-reset.txt */
  --pdp-subpage-pad-y: 48px;

  /* ────────────────────────────────────────────────────────
     Z-Index Hierarchy (DYNAMIC PDP)
     ────────────────────────────────────────────────────────── */

  /* Z-index layering system - Ensures proper UI element stacking */
  --pdp-z-base: 1000;       /* Base layer for regular elements */
  --pdp-z-sticky: 1000;     /* Sticky cart bar (same as base) */
  --pdp-z-backdrop: 9999;   /* Backdrop overlay behind drawer */
  --pdp-z-drawer: 10000;    /* Cart drawer */
  --pdp-z-lightbox: 10000;  /* Image lightbox/zoom (same layer as drawer) */
  --pdp-z-modal: 10001;     /* Modal dialogs (highest layer) */

  /* ────────────────────────────────────────────────────────
     Breakpoints (Expanded for universal device support)
     ────────────────────────────────────────────────────────── */

  /* Responsive breakpoints - Used for media queries (JavaScript access) */
  --pdp-breakpoint-xs: 320px;       /* Very small devices (older phones) */
  --pdp-breakpoint-sm: 375px;       /* Small phones (iPhone SE) */
  --pdp-breakpoint-mobile: 480px;   /* Standard mobile devices */
  --pdp-breakpoint-fold: 523px;     /* Foldable devices (Galaxy Fold inner) */
  --pdp-breakpoint-tablet: 768px;   /* Tablets and large phones */
  --pdp-breakpoint-desktop: 1024px; /* Desktop screens */
  --pdp-breakpoint-large: 1280px;   /* Large desktop screens */
  --pdp-breakpoint-xl: 1440px;      /* Extra large desktop (common monitors) */
  --pdp-breakpoint-xxl: 1920px;     /* Full HD and beyond */
}
/* ────────────────────────────────────────────────────────
   SECTION 1.2: Global Styles & Utilities
   ────────────────────────────────────────────────────────── */

/* Always show scrollbar to prevent layout shift on page load */
/* overflow-x: hidden prevents horizontal scroll on narrow devices */
html {
  overflow-y: scroll;
  overflow-x: hidden;
}

/* ────────────────────────────────────────────────────────
   Safe Area Insets — REMOVED
   env() safe-area padding is not needed without viewport-fit=cover
   in the <meta name="viewport"> tag. The browser handles safe areas
   automatically. Keeping env() caused fixed bottom bars to misposition
   on mobile browsers with dynamic toolbars.
   ──────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────
   Tap Highlight (touch feedback on mobile)
   Only affects touch events — mouse ignores it
   ──────────────────────────────────────────────────────── */
button, a, [role="button"], input[type="submit"], input[type="button"] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Force body font on all PDP elements (overrides theme fonts) */
[id^="pdp-"], [class^="pdp-"] {
  font-family: var(--pdp-font-family) !important;
}

/* Heading font — EXPLICIT class selectors only (no broad h1/h2/h3) */
.pdp-section-title,
.pdp-hero-heading,
.pdp-title,
.pdp-product-title,
.pdp-guarantee-title,
.pdp-cart-empty-title,
.pdp-timeline-headline,
.pdp-timeline-cta-headline,
.pdp-ingredients-name,
.pdp-stat-title,
.pdp-step-title,
.pdp-review-title,
.pdp-page-hero-title,
.pdp-page-cta-title,
.pdp-why-value-title,
.pdp-why-timeline-title {
  font-family: var(--pdp-font-family-heading) !important;
}

/* Logo font */
.pdp-header__logo-text,
.pdp-header__drawer-brand,
.pdp-footer__logo-text {
  font-family: var(--pdp-font-family-logo) !important;
}

/* Countdown timer — inherits announcement bar font, tabular-nums prevents number jumping */
.pdp-announcement-countdown {
  font-variant-numeric: tabular-nums !important;
}

/* ────────────────────────────────────────────────────────
   SECTION 1.3: Utility Classes
   ────────────────────────────────────────────────────────

   [INFO] These utility classes replace inline styles that were
   previously set via JavaScript. By using CSS classes instead
   of inline styles, we maintain better separation of concerns
   and make styling more maintainable.
   ────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────
   Display State Utilities
   ────────────────────────────────────────────────────────── */

/* Hides element on all screen sizes (display: none) */
.pdp-hidden {
  display: none !important;
}

/* Display as block element */
.pdp-block {
  display: block !important;
}

/* Display as flex container */
.pdp-flex {
  display: flex !important;
}

/* Display as grid container */
.pdp-grid {
  display: grid !important;
}

/* Shows element only on desktop screens (min-width: 769px) */
.pdp-desktop-only {
  display: flex;
}

/* Shows element only on mobile screens (max-width: 768px) */
.pdp-mobile-only {
  display: none;
}

/* ────────────────────────────────────────────────────────
   Modal & Body State Utilities
   ────────────────────────────────────────────────────────── */

/* Prevents body scroll when modal is open (iOS-proof, same approach as cart drawer) */
/* position:fixed blocks touch scroll on all mobile browsers including iOS Safari */
/* top is set dynamically by ModalManager.lockScroll() to preserve scroll position */
body.pdp-modal-open {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
}

/* Prevents body scroll when cart drawer is open (mobile-safe) */
/* position:fixed blocks touch scroll on all mobile browsers */
body.pdp-cart-open {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
}

/* ────────────────────────────────────────────────────────
   Button & Navigation State Utilities
   ────────────────────────────────────────────────────────── */

/* Disabled button state - works for all buttons and navigation */
.pdp-button:disabled,
.pdp-button.pdp-disabled {
  opacity: var(--pdp-opacity-disabled, 0.3) !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Enabled state - ensures full opacity and pointer events */
.pdp-button:not(:disabled),
.pdp-button.pdp-enabled {
  opacity: var(--pdp-opacity-visible, 1) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ────────────────────────────────────────────────────────
   Animation & Transition Utilities
   ────────────────────────────────────────────────────────── */

/* Fade transition - smooth opacity changes */
.pdp-fade-transition {
  transition: opacity var(--pdp-transition-normal, 0.3s) ease-out !important;
}

/* Hidden state for fade animations (opacity: 0) */
.pdp-fade-hidden {
  opacity: var(--pdp-opacity-hidden, 0) !important;
}

/* Visible state for fade animations (opacity: 1) */
.pdp-fade-visible {
  opacity: var(--pdp-opacity-visible, 1) !important;
}

/* ────────────────────────────────────────────────────────
   SECTION 1.4: Global Button Styles
   ────────────────────────────────────────────────────────

   [INFO] Base button class that provides shared styles for all
   button variants (primary, secondary, ghost, etc.)
   ────────────────────────────────────────────────────────── */

/* Base button - Shared styles for all button types */
.pdp-button {
  font-family: var(--pdp-font-family);
  font-weight: 600;
  border-radius: 9999px;  /* Fully rounded (pill shape) */
  transition: all var(--pdp-transition-base);
  position: relative;
  overflow: hidden;  /* Hides ripple effect overflow */
  cursor: pointer;
  border: none;
}

/* Button ripple effect - Creates expanding circle on click (GPU-accelerated via transform) */
.pdp-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%,-50%) scale(0);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  opacity: 0;
}

/* Ripple animation on button click */
.pdp-button:active::before {
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
}

/* ────────────────────────────────────────────────────────
   Primary Button - Main call-to-action button
   ────────────────────────────────────────────────────────── */

/* Primary button - Used for "Add to Cart", "Checkout", main actions */
.pdp-button--primary {
  width: 100%;
  padding: clamp(12px, 1.5vw, 16px) clamp(24px, 3vw, 32px);
  background: var(--pdp-primary);
  color: white;
  font-size: clamp(14px, 1vw, 16px);
}

/* Primary button hover - Lifts button and adds shadow for depth */
.pdp-button--primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(var(--pdp-primary-rgb),0.25);
  background: var(--pdp-primary-dark);
}

/* Primary button disabled state - Reduced opacity, no pointer events */
.pdp-button--primary:disabled {
  opacity: 0.5;
cursor: not-allowed;
}

/* Primary button success state - Used after successful add-to-cart */
.pdp-button--primary.success {
  background: var(--pdp-success);
}

/* ────────────────────────────────────────────────────────
   Secondary Button - Outlined button variant
   ────────────────────────────────────────────────────────── */

/* Secondary button - Used for secondary actions, alternative choices */
.pdp-button--secondary {
  background: white;
  border: 2px solid var(--pdp-primary);
  color: var(--pdp-primary);
  font-size: clamp(13px, 1vw, 14px);
}

/* Secondary button hover - Fills with primary color */
.pdp-button--secondary:hover {
  background: var(--pdp-primary);
  color: white;
}

/* ────────────────────────────────────────────────────────
   Ghost Button - Minimal button variant
   ────────────────────────────────────────────────────────── */

/* Ghost button - Transparent with thin border, minimal visual weight */
.pdp-button--ghost {
  background: transparent;
  border: 1px solid var(--pdp-primary);
  color: var(--pdp-primary);
  padding: 10px 20px;
  font-size: clamp(13px, 1vw, 14px);
  font-weight: 500;
}

/* Ghost button hover - Fills with primary color */
.pdp-button--ghost:hover {
  background: var(--pdp-primary);
  color: white;
}

/* ────────────────────────────────────────────────────────
   External Link Button - Button with icon for external links
   ────────────────────────────────────────────────────────── */

/* External button - Used for "View Product" links to other products */
.pdp-button--external {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;  /* Space between text and icon */
}

/* External button icon transition */
.pdp-button--external svg {
  transition: transform 0.2s ease;
}

/* External button hover - Moves icon diagonally (up-right) */
.pdp-button--external:hover svg {
  transform: translate(2px, -2px);
}

/* ────────────────────────────────────────────────────────
   SECTION 1.5: Loading States
   ────────────────────────────────────────────────────────── */

/* Loading button container - Centers spinner during loading state */
.pdp-button-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loading spinner animation - Rotates continuously at 1 second per rotation */
.pdp-spinner {
  animation: spin 1s linear infinite;
}

/* Spinner circle animation - Animates stroke dash for circular progress effect */
.pdp-spinner circle {
  stroke-dasharray: 42;
  stroke-dashoffset: 42;
  animation: spinner-dash 1.5s ease-in-out infinite;
}

/* ────────────────────────────────────────────────────────
   SECTION 1.6: Skeleton Loading Screens
   ────────────────────────────────────────────────────────

   [INFO] Skeleton screens show placeholder content while
   product data loads from Shopify API. This improves perceived
   performance by showing structure immediately.
   ────────────────────────────────────────────────────────── */

/* Skeleton base - Animated gradient shimmer effect */
.pdp-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: pdp-shimmer 1.5s infinite;
  border-radius: 8px;
}

/* Skeleton element spacing - Adds margin between skeleton elements */
.pdp-skeleton-text,
.pdp-skeleton-box,
.pdp-skeleton-button {
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Skeleton image - Maintains 4:5 aspect ratio (product image placeholder) */
.pdp-skeleton-image {
  width: 100%;
  padding-bottom: 125%;  /* 125% = 4:5 aspect ratio */
}

/* ────────────────────────────────────────────────────────
   SECTION 1.7: Section Management System
   ────────────────────────────────────────────────────────

   [INFO] CSS class-based section backgrounds + responsive spacing.
   Managed by: modules/system/section-manager.txt

   Features:
   - CSS class-based backgrounds (better maintainability)
   - Custom property fallback for custom colors
   - Responsive spacing (desktop/tablet/mobile)
   - Anti-FOUC (smooth page load)

   Configuration: config/00-store-identity.txt SECTION 0.16 (sectionManagement)

   Enhancements:
   - CSS classes instead of inline styles (specificity control)
   - Custom color support via --pdp-section-bg-custom
   ──────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────
   Responsive Section + Subpage Spacing
   Config-driven: config/00-store-identity.txt → config/19-theme-injection.txt → here
   ────────────────────────────────────────────────────────── */

:root {
  /* Desktop spacing — split top/bottom + gap (config-injected, fallback values) */
  --pdp-section-pad-top: var(--pdp-section-spacing-top-desktop, 40px);
  --pdp-section-pad-bottom: var(--pdp-section-spacing-bottom-desktop, 40px);
  --pdp-section-gap: var(--pdp-section-spacing-gap-desktop, 0px);
  --pdp-subpage-pad-y: var(--pdp-subpage-spacing-desktop, 48px);
}

/* ──────────────────────────────────────────────────────────
   Base Section Styling
   ────────────────────────────────────────────────────────── */

.pdp-section {
  width: 100%;
  box-sizing: border-box;
}

/* ──────────────────────────────────────────────────────────
   Section Gap (margin between content sections)
   Applied to all sections AFTER the hero section.
   Structural sections (announcement, header, hero) are excluded.
   Controlled by --pdp-section-gap (config-driven, default 0px).
   ────────────────────────────────────────────────────────── */
.pdp-section--hero ~ .pdp-section {
  margin-top: var(--pdp-section-gap);
}

/* ──────────────────────────────────────────────────────────
   Background Colors (CSS Class-Based)
   ────────────────────────────────────────────────────────── */

/* Primary background (white) */
.pdp-section-bg--primary {
  background-color: var(--pdp-section-bg-primary, #ffffff);
}

/* Alternate background (light gray) */
.pdp-section-bg--alternate {
  background-color: var(--pdp-section-bg-alternate, #f9f9f9);
}

/* Custom background (injected by modules/system/section-manager.txt at runtime) */
.pdp-section-bg--custom {
  background-color: var(--pdp-section-bg-custom, #ffffff);
}

/* Gradient background (warm peach theme gradient) */
.pdp-section-bg--gradient {
  background: linear-gradient(90deg,
    var(--pdp-section-bg-gradient-start, #ebc3aa),
    var(--pdp-section-bg-gradient-end, #fdf0e8),
    var(--pdp-section-bg-gradient-start, #ebc3aa)) !important;
}

/* ──────────────────────────────────────────────────────────
   Anti-FOUC (Flash of Unstyled Content)
   ──────────────────────────────────────────────────────────

   [INFO] Prevents visible DOM reordering during page load.

   Flow:
   1. SectionManager adds .pdp-sections--loading to <body>
   2. Sections hidden (visibility + opacity)
   3. DOM reordering happens (invisible)
   4. SectionManager removes loading, adds ready
   5. Sections smoothly fade in

   Fallback: If JS fails, CSS animation shows sections after 2s
   ──────────────────────────────────────────────────────── */

/* Loading state: hide sections + fallback animation */
.pdp-sections--loading .pdp-section {
  visibility: hidden;
  opacity: 0;
  animation: pdp-fouc-fallback 0s 2s forwards;
}

/* Hero is always first — keep visible during FOUC protection to prevent blank flash */
.pdp-sections--loading .pdp-hero-section.pdp-section {
  visibility: visible;
  opacity: 1;
  animation: none;
}

/* Ready state: smooth reveal */
.pdp-sections--ready .pdp-section {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s ease-out;
}

/* Fallback keyframes: if JS fails, show sections after 2s */
@keyframes pdp-fouc-fallback {
  to {
    visibility: visible;
    opacity: 1;
  }
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE: Tablet (max-width: 1023px)
   ────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* Section + Subpage Spacing — Tablet */
  :root {
    --pdp-section-pad-top: var(--pdp-section-spacing-top-tablet, 32px);
    --pdp-section-pad-bottom: var(--pdp-section-spacing-bottom-tablet, 32px);
    --pdp-section-gap: var(--pdp-section-spacing-gap-tablet, 0px);
    --pdp-subpage-pad-y: var(--pdp-subpage-spacing-tablet, 32px);
  }
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE: Mobile (max-width: 767px)
   ────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* iOS Input Zoom Prevention — iOS Safari zooms in on inputs with font-size < 16px */
  input, select, textarea {
    font-size: 16px;
  }

  /* Section + Subpage Spacing — Mobile */
  :root {
    --pdp-section-pad-top: var(--pdp-section-spacing-top-mobile, 24px);
    --pdp-section-pad-bottom: var(--pdp-section-spacing-bottom-mobile, 24px);
    --pdp-section-gap: var(--pdp-section-spacing-gap-mobile, 0px);
    --pdp-subpage-pad-y: var(--pdp-subpage-spacing-mobile, 24px);
  }
}
/* ============================================================
   ANIMATION KEYFRAMES

   [INFO] This section contains all animation keyframes used throughout
   the PDP system. These animations are referenced by various components
   for loading states, hover effects, and visual feedback.
   ============================================================ */

/* ────────────────────────────────────────────────────────
   8.1: Loading Animations
   ──────────────────────────────────────────────────────── */

/* Shimmer animation - Moving gradient for skeleton loading */
@keyframes pdp-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Fade in animation - Simple opacity transition */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Spin animation - Continuous 360-degree rotation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Spinner dash animation - Animates stroke dashoffset for SVG spinners */
@keyframes spinner-dash {
  0% { stroke-dashoffset: 42; }
  50% { stroke-dashoffset: 10; }
  100% { stroke-dashoffset: 42; }
}

/* ────────────────────────────────────────────────────────
   8.1b: Centralized Modal Animations (non-desktop)
   ──────────────────────────────────────────────────────── */

/* Modal enter — slides up from bottom (pure transform, no opacity) */
@keyframes pdp-modal-enter {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Modal exit — slides down to bottom (pure transform, no opacity) */
@keyframes pdp-modal-exit {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* ────────────────────────────────────────────────────────
   8.2: Entrance Animations
   ──────────────────────────────────────────────────────── */

/* Slide down animation - Fades in while moving downward */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────────────────────────────
   8.3: Attention Animations
   ──────────────────────────────────────────────────────── */

/* Pulse animation - Expanding shadow ring */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pdp-primary-rgb),0.4); }
  50% { box-shadow: 0 0 0 10px rgba(var(--pdp-primary-rgb),0); }
}

/* Sticky pulse animation - Subtle scale pulsing */
@keyframes stickyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Cart bounce animation - Bouncing motion for add-to-cart success */
@keyframes cartBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-8px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-4px); }
}

/* Twinkle animation - Subtle opacity and scale variation */
@keyframes twinkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

/* Pulse highlight animation - Large expanding shadow ring */
@keyframes pulseHighlight {
  0% { box-shadow: 0 0 0 0 rgba(var(--pdp-primary-rgb), 0.4); }
  50% { box-shadow: 0 0 0 20px rgba(var(--pdp-primary-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--pdp-primary-rgb), 0); }
}

/* ────────────────────────────────────────────────────────
   8.4: Premium Variant Selector Animations (8-Figure Brand)
   ──────────────────────────────────────────────────────── */

/* Amount card entrance - Staggered fade + upward slide with scale */
@keyframes amountCardEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Selection pulse - Expanding warm glow ring on variant selection */
@keyframes selectionPulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(var(--pdp-primary-rgb), 0.2),
      0 4px 16px rgba(var(--pdp-primary-rgb), 0.25);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(var(--pdp-primary-rgb), 0.15),
      0 8px 32px rgba(var(--pdp-primary-rgb), 0.35);
  }
}

/* Checkmark bounce - Elastic pop-in for selected state checkmarks */
@keyframes checkmarkBounce {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-45deg);
  }
  50% {
    transform: scale(1.2) rotate(-45deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-45deg);
  }
}

/* Dropdown fill - Color morph animation when dropdown value selected */
@keyframes dropdownFill {
  0% {
    background: rgba(var(--pdp-primary-rgb), 0);
  }
  50% {
    background: rgba(var(--pdp-primary-rgb), 0.12);
  }
  100% {
    background: rgba(var(--pdp-primary-rgb), 0.08);
  }
}

/* ────────────────────────────────────────────────────────
   8.4b: Comparison Chart Badge Animations
   ──────────────────────────────────────────────────────── */

/* Badge shimmer - Sweeping highlight for "Best Choice" badge (GPU-accelerated via transform) */
@keyframes pdpBadgeShimmer {
  0%, 80%, 100% { transform: translateX(-100%); }
  90% { transform: translateX(100%); }
}

/* ────────────────────────────────────────────────────────
   8.5: Premium Micro-Interactions
   ──────────────────────────────────────────────────────── */

/* Button pulse - Continuous pulsing glow on primary button hover */
@keyframes buttonPulse {
  0%, 100% {
    box-shadow:
      0 12px 32px rgba(var(--pdp-primary-rgb), 0.3),
      0 4px 12px rgba(0,0,0,0.15);
  }
  50% {
    box-shadow:
      0 16px 40px rgba(var(--pdp-primary-rgb), 0.4),
      0 6px 16px rgba(0,0,0,0.2);
  }
}

/* Trust badge breathe - Subtle scale pulsing for trust badges */
@keyframes trustBadgeBreathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
}

/* Icon float - Gentle rotation and vertical movement */
@keyframes iconFloat {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(5deg) translateY(-2px);
  }
  75% {
    transform: rotate(-5deg) translateY(2px);
  }
}

/* Ken Burns zoom - Cinematic image zoom with subtle pan */
@keyframes kenBurnsZoom {
  0% {
    transform: scale(1.08) translate(0, 0);
  }
  100% {
    transform: scale(1.12) translate(-2%, -2%);
  }
}

/* ────────────────────────────────────────────────────────
   8.6: Premium Entrance Animations
   ──────────────────────────────────────────────────────── */

/* Fade in up - Smooth upward float with fade */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale fade in - Gentle scale entrance from 92% to 100% */
@keyframes scaleFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide in right - Drawer entrance from right edge */
@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ────────────────────────────────────────────────────────
   8.7: Premium Loading States
   ──────────────────────────────────────────────────────── */

/* Organic shimmer - Wave-like shimmer with brand colors */
@keyframes organicShimmer {
  0% {
    background-position: -200% 0;
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    background-position: 200% 0;
    opacity: 0.6;
  }
}

/* ────────────────────────────────────────────────────────
   8.8: Success & Error State Animations
   ──────────────────────────────────────────────────────── */

/* Success checkmark - Elastic bounce with rotation */
@keyframes successCheckmark {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(-45deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Error shake - Gentle horizontal shake for validation errors */
@keyframes errorShake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}

/* Success color morph - Button background color transition to success green */
@keyframes successMorph {
  0% {
    background: var(--pdp-primary);
  }
  100% {
    background: var(--pdp-success);
  }
}
/* ============================================================
   RETIRED: bundle-selector.txt
   This file has been superseded by styles/components/gift-preview.txt
   which contains the Gift Preview and Cart Picker CSS.
   ============================================================ */
/* ============================================================
   SECTION 2: CART DRAWER & STICKY BAR COMPONENTS
   Navigate: Search "SECTION 2" to jump here
   ============================================================ */

/* ────────────────────────────────────────────────────────
   SECTION 2.1: Main Cart Drawer Container
   ────────────────────────────────────────────────────────

   [INFO] The cart drawer is a fixed-position sidebar that slides in
   from the right side of the screen. It's positioned off-screen by
   default and transitions in when the "open" class is applied.
   ────────────────────────────────────────────────────────── */

/* Main cart drawer container - Fixed sidebar panel that slides in from right */
.pdp-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--pdp-cart-drawer-width);  /* Uses token from styles/foundation/01-css-variables.txt */
  height: 100vh;  /* Full viewport height */
  background: var(--pdp-cart-bg);
  box-shadow: var(--pdp-shadow-lg);  /* Left shadow for depth */
  z-index: var(--pdp-z-drawer);  /* Above all other content */
  transform: translateX(100%);  /* Hidden off-screen via transform (GPU-accelerated) */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);  /* Premium deceleration curve */
  will-change: transform;
  display: flex;
  flex-direction: column;  /* Stacks header, body, footer vertically */
  font-family: var(--pdp-font-family);
}

/* Cart drawer open state - Slides in from right to visible position */
.pdp-cart-drawer.open {
  transform: translateX(0);
}

/* ────────────────────────────────────────────────────────
   SECTION 2.2: Cart Header
   ────────────────────────────────────────────────────────── */

/* Cart header - Top section with title and close button */
.pdp-cart-header {
  background: var(--pdp-cart-bg);
  border-bottom: 1px solid var(--pdp-cart-border);
  padding: 12px 16px;  /* Fixed pixels for compact spacing */
  position: relative;
  z-index: 10;
  flex-shrink: 0;  /* Prevents header from shrinking when content overflows */
}

/* Header content layout - Space between title and close button */
.pdp-cart-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Cart title - "Your Cart" heading with item count */
.pdp-cart-title {
  font-size: 16px;
  font-weight: var(--pdp-font-semibold);  /* 600 (generic font-weight token) */
  margin: 0;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 10px);
  color: var(--pdp-text);
}

/* Cart count badge - Circular badge showing number of items */
.pdp-cart-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--pdp-primary);
  color: var(--pdp-white);
  border-radius: var(--pdp-radius-lg);  /* Fully rounded pill shape */
  font-size: var(--pdp-text-xs);
  font-weight: var(--pdp-font-bold);
}

/* Cart close button - X button to close drawer */
.pdp-cart-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pdp-radius-md);
  transition: all 0.15s ease;
  color: var(--pdp-text-muted);
}

/* Close button hover - Shows light gray background */
.pdp-cart-close:hover {
  background: var(--pdp-variant-hover-bg);
  color: var(--pdp-text);
}

/* ────────────────────────────────────────────────────────
   SECTION 2.2B: Discount Bar (Celebration Banner)
   ────────────────────────────────────────────────────────── */

/* Discount banner - Shows total savings with premium shiny design */
.pdp-discount-bar {
  position: relative;
  background: var(--pdp-primary);
  color: var(--pdp-white);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Animated shine effect (GPU-accelerated via transform) */
.pdp-discount-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  animation: pdp-shine 3s infinite;
}

@keyframes pdp-shine {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}


/* Discount icon container */
.pdp-discount-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Discount icon SVG styling */
.pdp-discount-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--pdp-white);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* Discount text container */
.pdp-discount-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  flex: 1;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

/* Discount bold text (prefix and amount) */
.pdp-discount-bold {
  font-weight: 700;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.3: Cart Body (Scrollable Area)
   ────────────────────────────────────────────────────────── */

/* Cart body - Scrollable middle section containing cart items */
.pdp-cart-body {
  flex: 1;  /* Takes all available space between header and footer */
  overflow-y: auto;  /* Scrolls vertically when content overflows */
  overflow-x: hidden;
  padding: 10px 18px 4px;
  min-height: 0;  /* Fixes flexbox scrolling in some browsers */
}

/* ────────────────────────────────────────────────────────
   SECTION 2.4: Empty Cart State (Enhanced)
   ──────────────────────────────────────────────────────────

   [VALIDATOR-SKIP] Component-specific spacing (not section-level)
   */

/* Main empty state container - Full height with distributed spacing */
.pdp-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(24px, 3vw, 32px) clamp(16px, 2vw, 24px);
  min-height: 500px;
  text-align: center;
}

/* Content container - Full height with space distribution */
.pdp-cart-empty-container {
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  flex: 1;
}

/* Header section - Grouped with flex-grow for spacing */
.pdp-cart-empty-header {
  margin-bottom: 0;
  padding: 12px 0;
  border-radius: var(--pdp-radius-lg);
  flex-shrink: 0;
}

/* Header with custom background (modifier class) */
.pdp-cart-empty-header--bg {
  /* Background color set via inline style from config */
}

/* Icon wrapper - Balanced positioning for count bubble */
.pdp-cart-empty-icon-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px; /* Extra space to prevent SVG clipping */
}

/* Cart icon - Balanced visual anchor */
.pdp-cart-empty-icon-wrapper svg {
  display: block;
  width: 46px;
  height: 46px;
  color: var(--pdp-primary);
  opacity: 0.5;
  transition: all var(--pdp-transition-normal);
}

/* Icon hover effect - Noticeable interaction feedback */
.pdp-cart-empty:hover .pdp-cart-empty-icon-wrapper svg,
.pdp-cart-empty:focus-within .pdp-cart-empty-icon-wrapper svg {
  opacity: 0.7;
  transform: scale(1.05);
}

/* Count bubble - Balanced "0" badge positioned top-right of icon */
.pdp-cart-empty-count-bubble {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--pdp-primary);
  color: var(--pdp-white);
  border-radius: 50%;
  font-size: 11px;
  font-weight: var(--pdp-font-bold);
  border: 2px solid var(--pdp-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Main title - Balanced heading */
.pdp-cart-empty-title {
  font-size: 19px;
  font-weight: var(--pdp-font-bold);
  color: var(--pdp-text);
  margin: 0 0 10px 0;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

/* Subtitle - Balanced supporting text */
.pdp-cart-empty-subtitle {
  font-size: 13px;
  color: var(--pdp-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Benefits section - Simple boxed design */
.pdp-cart-empty-benefits {
  margin-bottom: 0;
  padding: 16px;
  text-align: center;
  flex-shrink: 0;
  border-radius: 8px;
  /* Background color set via inline style from config */
}

/* Benefits section with custom background (modifier class) */
.pdp-cart-empty-benefits--custom-bg {
  /* Background color set via inline style from config */
}

/* Benefits heading - Simple centered */
.pdp-cart-empty-benefits h3 {
  font-size: 14px;
  font-weight: var(--pdp-font-bold);
  color: var(--pdp-text);
  margin: 0 0 16px 0;
  text-align: center;
  line-height: 1.3;
}

/* Benefits list - Simple vertical stack */
.pdp-cart-empty-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual benefit item - Icon + text horizontal */
.pdp-cart-empty-benefit-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--pdp-text);
  line-height: 1.5;
  padding: 0;
  text-align: left;
}

/* Benefit checkmark - Simple text checkmark */
.pdp-cart-empty-benefit-icon {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: var(--pdp-font-bold);
  color: var(--pdp-primary);
  line-height: 1.5;
  margin-top: 0;
}

/* CTA button section - Generous top spacing */
.pdp-cart-empty-cta-section {
  margin-bottom: 0;
  margin-top: 18px;
  flex-shrink: 0;
}

/* CTA button - Balanced professional styling */
.pdp-cart-empty-cta-section .pdp-button {
  padding: 10px 24px;
  font-size: 13px;
  font-weight: var(--pdp-font-bold);
  min-height: 44px;
  border-radius: var(--pdp-radius-md);
  width: 100%;
  max-width: 100%;
}

/* CTA button focus state for accessibility */
.pdp-cart-empty-cta-section .pdp-button:focus-visible {
  outline: 3px solid var(--pdp-primary);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(var(--pdp-primary-rgb), 0.2);
}

/* Trust badges container - Balanced grid layout */
.pdp-cart-empty-trust-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 0;
  padding: 16px 0 0 0;
  border-top: 1px solid var(--pdp-border);
  flex-shrink: 0;
}

/* Individual trust badge - Balanced appearance */
.pdp-cart-empty-trust-badge {
  font-size: 11px;
  color: var(--pdp-text);
  font-weight: var(--pdp-font-semibold);
  line-height: 1.4;
  text-align: center;
  padding: 9px 10px;
  background: var(--pdp-surface);
  border: 1px solid var(--pdp-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--pdp-transition-fast);
}

/* Trust badge hover effect */
.pdp-cart-empty-trust-badge:hover {
  background: var(--pdp-white);
  border-color: var(--pdp-primary);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* Fallback simple empty state icon (when config.enabled = false) */
.pdp-cart-empty-icon {
  margin-bottom: clamp(24px, 3vw, 32px);
  color: var(--pdp-primary);
  opacity: 0.3;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.5: Cart Items List
   ────────────────────────────────────────────────────────── */

/* Cart items container - Stacks cart items vertically */
.pdp-cart-items {
  display: flex;
  flex-direction: column;
  gap: 8px;  /* Fixed pixels for compact spacing */
  align-items: stretch;  /* Ensure all items stretch to full width */
}

/* Individual cart item - Grid layout with image, details, price, remove button */
.pdp-cart-item {
  display: grid;
  grid-template-columns: 54px 1fr 90px 28px;  /* Image | Details | Price (fixed 90px) | Remove */
  gap: clamp(10px, 1.5vw, 16px);
  padding: 10px 0;  /* Fixed pixels for compact spacing */
  background: transparent;
  transition: background var(--pdp-transition-fast) ease;  /* Only background transitions, not layout */
  position: relative;
  border-bottom: 1px solid var(--pdp-cart-item-border);
  align-items: center;
}

/* Last cart item - No bottom border */
.pdp-cart-item:last-child {
  border-bottom: none;
}

/* Cart item hover - Subtle gradient background highlight */
.pdp-cart-item:hover {
  background: linear-gradient(90deg, transparent, rgba(var(--pdp-primary-rgb), 0.02), transparent);
}

/* Insurance item - Always hidden (handled separately in insurance card) */
.pdp-cart-item--insurance {
  display: none !important;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.5A: Cart Item Image with Quantity Badge
   ────────────────────────────────────────────────────────── */

/* Cart item image wrapper - Container for image and quantity badge */
.pdp-cart-item-image-wrapper {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

/* Cart item image - Product thumbnail with rounded corners */
.pdp-cart-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;  /* Standard small rounded corners */
  background: var(--pdp-gray-50);
  border: 1px solid var(--pdp-cart-item-border);
  display: block;
}

/* Cart item quantity badge - Compact pill badge showing quantity count */
.pdp-cart-item-quantity-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  background: var(--pdp-primary);
  color: var(--pdp-white);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid var(--pdp-white);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  z-index: 1;
  line-height: 1;
}

/* Cart item details - Product title and quantity selector */
.pdp-cart-item-details {
  display: flex;
  flex-direction: column;
  gap: 4px;  /* Fixed pixels for compact spacing */
  min-width: 0;  /* Allows text truncation */
}

/* Cart item title - Product name, single line with ellipsis */
.pdp-cart-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--pdp-text);
  margin: 0;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cart item variant subtitle - Shows variant details below product title */
.pdp-cart-variant-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--pdp-text-muted);
  margin: 0;
  padding: 0;
  line-height: 1.3;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* Limits to 2 lines, truncates with ellipsis */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.6: Quantity Controls
   ────────────────────────────────────────────────────────── */

/* Quantity selector - Compact pill-shaped quantity control */
.pdp-cart-quantity {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--pdp-gray-50);
  border-radius: 20px;  /* Fully rounded pill */
  padding: 0;
  height: 24px;
  width: fit-content;
}

/* Quantity buttons (- and +) - Circular buttons within quantity control */
.pdp-quantity-button {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--pdp-text-muted);
  transition: all 0.15s ease;
  font-size: 13px;
}

/* Quantity button hover - Fills with primary color */
.pdp-quantity-button:hover {
  background: var(--pdp-primary);
  color: var(--pdp-white);
}

/* Quantity value display - Current quantity number */
.pdp-quantity-value {
  min-width: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--pdp-text);
  padding: 0 4px;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.7: Pricing Column
   ────────────────────────────────────────────────────────── */

/* Cart item pricing - Right-aligned price display */
.pdp-cart-item-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;  /* Component-specific small gap */
  min-width: 90px;
  margin-left: 0;
}

/* Old price (compare at price) - Struck through gray price */
.pdp-cart-price-old {
  font-size: 12px;
  color: var(--pdp-gray-400);
  text-decoration: line-through;
  opacity: 0.8;
}

/* New price (current price) - Bold current price */
.pdp-cart-price-new {
  font-size: 14px;
  font-weight: 600;
  color: var(--pdp-text);
}

/* Free price (gift items) - Theme colored FREE label */
.pdp-cart-price-free {
  font-size: 13px;
  font-weight: 700;
  color: var(--pdp-primary);
  letter-spacing: 0.03em;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.8: Remove Button
   ────────────────────────────────────────────────────────── */

/* Remove item button - Small circular delete button */
.pdp-cart-remove {
  width: 26px;
  height: 26px;
  border: 1px solid var(--pdp-border);
  background: var(--pdp-surface);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-text-muted);  /* Visible muted gray (was near-invisible gray-300) */
  transition: all 0.15s ease;
  padding: 0;
  justify-self: center;
}

/* Remove button hover - Red background with danger color */
.pdp-cart-remove:hover {
  background: var(--pdp-danger-bg);
  color: var(--pdp-danger);
  border-color: var(--pdp-danger);
}

/* ────────────────────────────────────────────────────────
   SECTION 2.9: Cart Footer
   ────────────────────────────────────────────────────────── */

/* Cart footer - Bottom section with totals and checkout */
.pdp-cart-footer {
  border-top: 1px solid var(--pdp-cart-item-border);
  background: var(--pdp-white);
  flex-shrink: 0;  /* Never shrinks */
  box-shadow: 0 -4px 16px rgba(0,0,0,0.04);  /* Subtle top shadow */
  padding: 0;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.10: Free Shipping Progress Bar (Premium Redesign)
   ────────────────────────────────────────────────────────── */

/* Shipping bar - Milestone-based progress bar */
.pdp-shipping-bar-milestone {
  margin-top: 4px;  /* Small top margin for spacing */
  padding: 4px 16px 33px 16px;  /* pb 33px: genoeg ruimte voor milestone labels (overflow:visible) boven border */
  background: linear-gradient(135deg, rgba(var(--pdp-primary-rgb), 0.02) 0%, rgba(var(--pdp-success-rgb, 16,185,129), 0.02) 100%);
  border-bottom: 1px solid var(--pdp-border-light);
  position: relative;
  overflow: visible;
}

/* Shipping text - Message above progress bar */
.pdp-shipping-text-compact {
  font-size: 12px;
  color: var(--pdp-text);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 0;
  text-align: center;
}

/* Shipping celebration icon - SVG icon for unlocked rewards (replaces emoji) */
.pdp-shipping-icon-celebration {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  color: currentColor;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Shipping bar container - Holds progress and milestones */
.pdp-shipping-bar-container {
  position: relative;
  padding-top: 10px;   /* Reduced from 16px for compact bar */
  padding-bottom: 5px;
  padding-left: 20px;   /* Insets progress bar from edges */
  padding-right: 20px;
}

/* Native progress element styling - Premium design with glow */
.pdp-shipping-bar-progress {
  width: 100%;
  height: 6px;  /* Thinner for premium look */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: linear-gradient(90deg, var(--pdp-gray-100) 0%, var(--pdp-gray-200) 100%);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  position: relative;
  z-index: 1;  /* Below milestone icons */
}

/* Progress bar fill (webkit browsers: Chrome, Safari) - Premium gradient with glow */
.pdp-shipping-bar-progress::-webkit-progress-bar {
  background: linear-gradient(90deg, var(--pdp-gray-100) 0%, var(--pdp-gray-200) 100%);
  border-radius: 10px;
  position: relative;
  z-index: -1;  /* Behind milestones */
}

.pdp-shipping-bar-progress::-webkit-progress-value {
  background: linear-gradient(90deg,
    var(--pdp-primary) 0%,
    var(--pdp-primary-dark, var(--pdp-primary)) 50%,
    var(--pdp-primary) 100%
  );
  border-radius: 10px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 0 8px rgba(var(--pdp-primary-rgb), 0.5),
    0 2px 6px rgba(var(--pdp-primary-rgb), 0.3);
  position: relative;
  z-index: -1;  /* Behind milestones */
}

/* Progress bar fill (Firefox) - Premium gradient with glow */
.pdp-shipping-bar-progress::-moz-progress-bar {
  background: linear-gradient(90deg,
    var(--pdp-primary) 0%,
    var(--pdp-primary-dark, var(--pdp-primary)) 50%,
    var(--pdp-primary) 100%
  );
  border-radius: 10px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 0 8px rgba(var(--pdp-primary-rgb), 0.5),
    0 2px 6px rgba(var(--pdp-primary-rgb), 0.3);
  position: relative;
  z-index: -1;  /* Behind milestones */
}

/* Milestones container - Icons positioned along bar */
.pdp-shipping-milestones {
  position: absolute;
  top: 23px;  /* Adjusted for new padding-top: 10px (was 29px with 16px padding) */
  left: 20px;           /* Match container padding-left so milestones align with progress bar */
  width: calc(100% - 40px);  /* Minus left+right padding so last milestone stays within bounds */
  /* No height restriction - allow milestones to extend naturally */
  pointer-events: none;
  z-index: 2;  /* Above progress bar - parent container must be above */
}

/* Individual milestone - Compact design */
.pdp-milestone {
  position: absolute;
  top: -10px;  /* Adjusted for 26px icon (center=13px): -10px positions icon center on progressbar center at 3px */
  transform: translate(-50%, 0);  /* Center ONLY horizontally, NOT vertically (vertical positioning handled by top value) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;  /* Reduced from 8px proportional to smaller icon */
}

/* Milestone icon wrapper - Compact size */
.pdp-milestone-icon {
  width: 26px;  /* Reduced from 32px for compact cart bar */
  height: 26px;
  background: linear-gradient(135deg,
    rgba(var(--pdp-primary-rgb), 0.12) 0%,
    rgba(var(--pdp-primary-rgb), 0.06) 100%
  );
  border: 2px solid var(--pdp-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-primary);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(var(--pdp-primary-rgb), 0.2);
  position: relative;
  z-index: 2;  /* Above progress bar */
}

.pdp-milestone-icon svg {
  width: 14px;  /* Proportional to 26px icon */
  height: 14px;
  transition: all 0.3s ease;
}

/* Milestone icon active state (threshold reached) - Premium glow */
.pdp-milestone-icon.active {
  background: linear-gradient(135deg,
    var(--pdp-primary) 0%,
    var(--pdp-primary-dark, var(--pdp-primary)) 100%
  );
  color: var(--pdp-white);
  box-shadow:
    0 0 8px rgba(var(--pdp-primary-rgb), 0.6),
    0 3px 10px rgba(var(--pdp-primary-rgb), 0.4);
  animation: milestoneActivate 0.5s ease;
}

/* Scale active icon wrapper (not the icon itself to avoid transform conflict) */
.pdp-milestone-icon.active svg {
  transform: scale(1.15);  /* Slightly larger scale */
}

/* Milestone label - Larger text with wrapping support */
.pdp-milestone-label {
  font-size: 9px;  /* Larger font for better readability */
  font-weight: 600;
  color: var(--pdp-text-muted);
  white-space: normal;  /* Allow wrapping */
  text-align: center;
  line-height: 1.3;
  max-width: 50px;  /* Wider for larger icons */
  word-break: break-word;
}

/* Milestone label active state - Premium color */
.pdp-milestone-icon.active + .pdp-milestone-label {
  color: var(--pdp-primary);
  font-weight: 700;
}

/* Milestone activation animation - Premium glow pulse */
@keyframes milestoneActivate {
  0% {
    box-shadow:
      0 0 8px rgba(var(--pdp-primary-rgb), 0.6),
      0 3px 10px rgba(var(--pdp-primary-rgb), 0.4);
  }
  50% {
    box-shadow:
      0 0 16px rgba(var(--pdp-primary-rgb), 0.8),
      0 4px 16px rgba(var(--pdp-primary-rgb), 0.6);
    transform: scale(1.08);
  }
  100% {
    box-shadow:
      0 0 8px rgba(var(--pdp-primary-rgb), 0.6),
      0 3px 10px rgba(var(--pdp-primary-rgb), 0.4);
  }
}

/* Success pulse animation */
@keyframes successPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Shimmer animation (GPU-accelerated via transform) */
@keyframes shimmer {
  0% { transform: translateX(-200%); }
  100% { transform: translateX(200%); }
}

/* Cart footer fixed content - Contains insurance, totals, checkout button */
.pdp-cart-footer-fixed {
  padding: 6px 12px;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.11: Insurance Premium Card (Premium Redesign)
   ────────────────────────────────────────────────────────── */

/* Insurance card - Compact premium design with theme colors */
.pdp-insurance-premium-card {
  background: var(--pdp-surface);
  border: 1px solid var(--pdp-border-light);
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 6px;
  position: relative;
  transition: all 0.25s ease;
  cursor: pointer;
}

/* Insurance card hover - Subtle theme-colored elevation */
.pdp-insurance-premium-card:hover {
  border-color: var(--pdp-primary);
  box-shadow: 0 4px 12px rgba(var(--pdp-primary-rgb), 0.08);
  transform: translateY(-1px);
}

/* Insurance card header - Compact layout */
.pdp-insurance-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Insurance icon wrapper - Compact theme-colored shield */
.pdp-insurance-icon-wrapper {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--pdp-primary) 0%, var(--pdp-primary-dark) 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-white);
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(var(--pdp-primary-rgb), 0.2);
  transition: all 0.25s ease;
}

.pdp-insurance-premium-card:hover .pdp-insurance-icon-wrapper {
  box-shadow: 0 6px 14px rgba(var(--pdp-primary-rgb), 0.3);
  transform: scale(1.05);
}

/* Insurance icon SVG styling */
.pdp-insurance-icon-wrapper svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

/* Insurance content - Compact information hierarchy */
.pdp-insurance-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Insurance title - Professional typography */
.pdp-insurance-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--pdp-text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Insurance price row - Compact value display */
.pdp-insurance-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Insurance new price - Matches cart price styling */
.pdp-insurance-price-new {
  font-size: 12px;
  font-weight: 700;
  color: var(--pdp-text);
  letter-spacing: -0.02em;
  order: 1;
}

/* Insurance old price - Matches cart old price color */
.pdp-insurance-price-old {
  font-size: 12px;
  color: var(--pdp-gray-400);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  order: 2;
  font-weight: 500;
  opacity: 0.8;
}

/* Insurance discount badge - Subtle design */
.pdp-insurance-price-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--pdp-danger);
  background: rgba(220, 38, 38, 0.08);
  padding: 2px 5px;
  border-radius: 4px;
  order: 3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.12: Toggle Switch (Insurance Checkbox)
   ────────────────────────────────────────────────────────── */

/* Toggle switch container - Animated on/off switch */
.pdp-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

/* Hides native checkbox input */
.pdp-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Toggle slider - Rounded track background */
.pdp-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--pdp-gray-200);  /* Gray when off */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 22px;
}

/* Toggle slider knob - White circle that slides left/right */
.pdp-toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: var(--pdp-white);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Toggle checked state - Green background when on */
.pdp-toggle-switch input:checked + .pdp-toggle-slider {
  background: var(--pdp-success);
}

/* Toggle focus state - Adds focus ring for accessibility */
.pdp-toggle-switch input:focus + .pdp-toggle-slider {
  box-shadow: 0 0 0 3px rgba(var(--pdp-primary-rgb), 0.1);
}

/* Toggle knob checked position - Slides knob to right */
.pdp-toggle-switch input:checked + .pdp-toggle-slider:before {
  transform: translateX(16px);
}

/* ────────────────────────────────────────────────────────
   SECTION 2.13: Cart Totals
   ────────────────────────────────────────────────────────── */

/* Cart totals section - Card-style container for subtotal, insurance, and total */
.pdp-cart-totals {
  padding: 8px 10px 6px;
  background: var(--pdp-surface);
  border-radius: 8px;
  margin: 4px 0;
}

/* Totals row - Single row showing label and amount */
.pdp-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
  color: var(--pdp-text-muted);
}

/* Insurance row placeholder - Reserved for insurance row styling */
.pdp-insurance-row {
  /* Insurance row specific styles if needed */
}

/* Final total row - Prominent total with top border */
.pdp-totals-final {
  border-top: 1px solid var(--pdp-border-light);
  padding-top: 6px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pdp-text);
}

/* Total amount - Large primary-colored final price */
.pdp-total-amount {
  font-size: 17px !important;
  color: var(--pdp-primary) !important;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* Total prices container - Holds both old and new total prices */
.pdp-total-prices {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Old total price - Strikethrough compare at total */
.pdp-old-total {
  font-size: 14px;
  color: var(--pdp-gray-400);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  opacity: 0.75;
  font-weight: 400;
}

/* Savings row override for cart totals - Green banner style */
.pdp-cart-totals .pdp-savings-row {
  background: rgba(var(--pdp-success-rgb), 0.06);
  border-radius: 6px;
  padding: 5px 8px;
  margin-top: 6px;
  border-top: none;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.14: Checkout Button
   ────────────────────────────────────────────────────────── */

/* Checkout button - Primary CTA to proceed to checkout */
.pdp-checkout-button {
  width: 100%;
  padding: 8px 20px;
  background: var(--pdp-primary);
  color: var(--pdp-white);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;  /* Fixed pixels for compact spacing */
  cursor: pointer;
  transition: all var(--pdp-transition-fast) ease;
  margin-bottom: 6px;
}

/* Checkout button hover - Darkens and lifts button */
.pdp-checkout-button:hover {
  background: var(--pdp-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--pdp-primary-rgb), 0.25);
}

/* ────────────────────────────────────────────────────────
   SECTION 2.15: Payment Icons
   ────────────────────────────────────────────────────────── */

/* Payment icons row - Shows accepted payment methods */
.pdp-payment-row {
  display: flex;
  justify-content: center;
  gap: clamp(5px, 0.8vw, 8px);
  padding-top: 4px;
  border-top: 1px solid var(--pdp-cart-item-border);
  margin-top: 4px;
}

/* Payment icon container - Fixed sizing for consistency */
.pdp-payment-icon-cart {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Payment icon image - Sized via config CSS custom properties */
.pdp-payment-icon-cart img {
  width: var(--pdp-icon-w, 24px);
  height: var(--pdp-icon-h, 24px);
  object-fit: contain;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.16: Cart Backdrop Overlay
   ────────────────────────────────────────────────────────── */

/* Backdrop overlay - Dark overlay behind cart drawer */
.pdp-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);  /* Blurs background content */
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--pdp-z-backdrop);  /* Just below cart drawer */
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Backdrop open state - Fades in when cart opens */
.pdp-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.17A: Desktop Dynamic Cart Item Shrink
   ─────────────────────────────────────────────────────────
   Same JS logic as mobile — class set on .pdp-cart-body
   based on scrollHeight vs clientHeight.
   Desktop base: image 44px, grid 54px col, gap 16px, padding 10px
   ────────────────────────────────────────────────────────── */

/* ── Desktop Level 1: 2 products ── */
.pdp-cart-compact-2 .pdp-cart-items { gap: 5px; }
.pdp-cart-compact-2 .pdp-cart-item {
  grid-template-columns: 48px 1fr 85px 26px;  /* 40 + 8 buffer */
  gap: 12px; padding: 7px 0;
}
.pdp-cart-compact-2 .pdp-cart-item-image-wrapper { width: 40px; height: 40px; }
.pdp-cart-compact-2 .pdp-cart-item-title { font-size: 12.5px; }
.pdp-cart-compact-2 .pdp-cart-variant-subtitle { font-size: 11px; }
.pdp-cart-compact-2 .pdp-cart-price-new { font-size: 13px; }
.pdp-cart-compact-2 .pdp-cart-price-old { font-size: 11px; }
.pdp-cart-compact-2 .pdp-cart-quantity { height: 22px; }
.pdp-cart-compact-2 .pdp-quantity-button { width: 22px; height: 22px; font-size: 12px; }
.pdp-cart-compact-2 .pdp-quantity-value { font-size: 12px; }
.pdp-cart-compact-2 .pdp-cart-remove { width: 24px; height: 24px; }

/* ── Desktop Level 2: 3 products ── */
.pdp-cart-compact-3 .pdp-cart-items { gap: 3px; }
.pdp-cart-compact-3 .pdp-cart-item {
  grid-template-columns: 44px 1fr 80px 24px;  /* 36 + 8 buffer */
  gap: 10px; padding: 5px 0;
}
.pdp-cart-compact-3 .pdp-cart-item-image-wrapper { width: 36px; height: 36px; }
.pdp-cart-compact-3 .pdp-cart-item-title { font-size: 12px; }
.pdp-cart-compact-3 .pdp-cart-variant-subtitle { font-size: 10.5px; }
.pdp-cart-compact-3 .pdp-cart-price-new { font-size: 12.5px; }
.pdp-cart-compact-3 .pdp-cart-price-old { font-size: 10.5px; }
.pdp-cart-compact-3 .pdp-cart-quantity { height: 20px; }
.pdp-cart-compact-3 .pdp-quantity-button { width: 20px; height: 20px; font-size: 11px; }
.pdp-cart-compact-3 .pdp-quantity-value { font-size: 11px; min-width: 14px; }
.pdp-cart-compact-3 .pdp-cart-remove { width: 22px; height: 22px; }
.pdp-cart-compact-3 .pdp-cart-remove svg { width: 11px; height: 11px; }

/* ── Desktop Level MAX: 4+ products ── */
.pdp-cart-compact-max .pdp-cart-items { gap: 2px; }
.pdp-cart-compact-max .pdp-cart-item {
  grid-template-columns: 40px 1fr 75px 22px;  /* 32 + 8 buffer */
  gap: 8px; padding: 3px 0;
}
.pdp-cart-compact-max .pdp-cart-item-image-wrapper { width: 32px; height: 32px; }
.pdp-cart-compact-max .pdp-cart-item-title { font-size: 11.5px; }
.pdp-cart-compact-max .pdp-cart-variant-subtitle { font-size: 10px; }
.pdp-cart-compact-max .pdp-cart-item-details { gap: 1px; }
.pdp-cart-compact-max .pdp-cart-price-new { font-size: 12px; }
.pdp-cart-compact-max .pdp-cart-price-old { font-size: 10px; }
.pdp-cart-compact-max .pdp-cart-quantity { height: 18px; }
.pdp-cart-compact-max .pdp-quantity-button { width: 18px; height: 18px; font-size: 10px; }
.pdp-cart-compact-max .pdp-quantity-value { font-size: 10px; min-width: 12px; }
.pdp-cart-compact-max .pdp-cart-remove { width: 20px; height: 20px; }
.pdp-cart-compact-max .pdp-cart-remove svg { width: 10px; height: 10px; }

/* ────────────────────────────────────────────────────────
   SECTION 2.17: Cart Drawer Animations
   ────────────────────────────────────────────────────────── */

/* Animation 1: Cart item add — slide-in from right + fade-in */
@keyframes pdp-cart-item-enter {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.pdp-cart-item--entering {
  animation: pdp-cart-item-enter 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Animation 2: Cart item remove — slide-out left + fade-out + height collapse */
@keyframes pdp-cart-item-exit {
  0%   { opacity: 1; transform: translateX(0); max-height: 100px; }
  50%  { opacity: 0; transform: translateX(-40px); max-height: 100px; }
  100% { opacity: 0; transform: translateX(-40px); max-height: 0; padding: 0; margin: 0; border: none; }
}
.pdp-cart-item--exiting {
  animation: pdp-cart-item-exit 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
  overflow: hidden;
  pointer-events: none;
}

/* Animation 3a: Price pop on update */
@keyframes pdp-price-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.pdp-price-updating {
  display: inline-block;
  animation: pdp-price-pop 0.25s ease-out;
}

/* Animation 3b: Savings row pulse on update */
@keyframes pdp-savings-pulse {
  0%   { background: rgba(var(--pdp-success-rgb), 0.06); }
  50%  { background: rgba(var(--pdp-success-rgb), 0.2); }
  100% { background: rgba(var(--pdp-success-rgb), 0.06); }
}
.pdp-savings-row--pulse {
  animation: pdp-savings-pulse 0.5s ease;
}

/* Animation 4: Gift picker unlock — slide-down + fade-in */
@keyframes pdp-gift-picker-enter {
  from { opacity: 0; transform: translateY(-10px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0); max-height: 300px; }
}
.pdp-cart-gift-picker--entering {
  animation: pdp-gift-picker-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow: hidden;
}
@keyframes pdp-gift-picker-exit {
  from { opacity: 1; transform: translateY(0); max-height: 300px; }
  to   { opacity: 0; transform: translateY(-10px); max-height: 0; }
}
.pdp-cart-gift-picker--exiting {
  animation: pdp-gift-picker-exit 0.3s ease forwards;
  overflow: hidden;
}

/* Animation 5: Cart open — items stagger-in */
@keyframes pdp-cart-stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pdp-cart-item--stagger {
  opacity: 0;
  animation: pdp-cart-stagger-in 0.25s ease-out forwards;
}

/* Animation 7: Empty state fade-in + icon bounce */
@keyframes pdp-empty-icon-bounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-10px); }
  50%      { transform: translateY(-4px); }
  70%      { transform: translateY(-8px); }
}
@keyframes pdp-empty-state-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pdp-cart-empty--animating {
  animation: pdp-empty-state-enter 0.35s ease-out both;
}
.pdp-cart-empty--animating .pdp-cart-empty-icon-wrapper svg,
.pdp-cart-empty--animating .pdp-cart-empty-icon {
  animation: pdp-empty-icon-bounce 0.7s ease 0.2s both;
}

/* Animation 8: Cart count badge bounce */
@keyframes pdp-badge-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(0.9); }
  80%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.pdp-cart-count-badge--bounce {
  animation: pdp-badge-bounce 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* Animation 9: Checkout button recurring pulse/glow */
@keyframes pdp-checkout-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(var(--pdp-primary-rgb), 0.25); }
  50%      { box-shadow: 0 4px 20px rgba(var(--pdp-primary-rgb), 0.5), 0 0 0 4px rgba(var(--pdp-primary-rgb), 0.15); }
}
.pdp-checkout-button--pulsing {
  animation: pdp-checkout-pulse 1.2s ease-in-out;
}

/* Animation 10: Quantity +/- press feedback */
.pdp-quantity-button:active {
  transform: scale(0.82) !important;
  transition: transform 0.08s ease !important;
}

/* Animation 11: Gift variant pill press + select feedback */
@keyframes pdp-gift-pill-select {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.88); }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.pdp-cart-gift-variant-btn:active {
  transform: scale(0.9);
}
.pdp-cart-gift-variant-btn--selected {
  animation: pdp-gift-pill-select 0.25s ease-out;
}

/* Animation 12: Remove button rotate on hover */
.pdp-cart-remove:hover {
  transform: rotate(90deg);
}

/* Animation 6: Insurance row smooth show/hide */
.pdp-insurance-row--animated {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
  padding: 0;
}
.pdp-insurance-row--animated.pdp-insurance-row--visible {
  max-height: 40px;
  opacity: 1;
  padding: 3px 0;
}

/* ────────────────────────────────────────────────────────
   RESPONSIVE OVERRIDES
   Desktop CSS above is NEVER modified.
   ────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  /*
   * MOBILE PADDING SYSTEM
   * ─────────────────────
   * Outer sections (header, body, shipping, footer): 6px vertical, 12px horizontal
   * Inner cards (gift picker, insurance, totals):    4px vertical, 8px horizontal
   * Inner elements (items, rows):                    4px vertical, 0 horizontal
   * Gaps between siblings:                           4px
   */

  /* ── Drawer & backdrop ── */
  .pdp-cart-drawer {
    width: 100vw;
    height: 100dvh;
    overscroll-behavior: contain;
    overflow-y: auto;
  }

  .pdp-backdrop {
    width: 100vw;
  }

  /* ── Header ── */
  .pdp-cart-header {
    padding: 8px 14px;
  }

  .pdp-cart-close {
    width: 44px;
    height: 44px;
  }

  /* ── Cart body: flex-1 pushes footer to bottom, auto-scroll safety ── */
  .pdp-cart-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 14px;
    transition: none;
  }

  /* ── Shipping bar ── */
  .pdp-shipping-bar-milestone {
    padding: 8px 14px 36px 14px;
  }

  .pdp-shipping-text-compact {
    font-size: 12px;
    margin-bottom: -12px;
  }

  .pdp-shipping-bar-container {
    padding-top: 6px;
    padding-bottom: 2px;
  }

  .pdp-milestone {
    top: -8px;
    gap: 3px;
  }

  .pdp-milestone-icon {
    width: 24px;
    height: 24px;
  }

  .pdp-milestone-icon svg {
    width: 12px;
    height: 12px;
  }

  .pdp-milestone-label {
    font-size: 9px;
    max-width: 44px;
  }

  .pdp-shipping-milestones {
    top: 20px;
  }

  /* ── Cart items ── */
  .pdp-cart-items {
    gap: 6px;
  }

  .pdp-cart-item {
    grid-template-columns: 56px 1fr auto 24px;
    gap: 12px;
    padding: 6px 0;
  }

  .pdp-cart-item-image-wrapper {
    width: 48px;
    height: 48px;
  }

  .pdp-cart-item-quantity-badge {
    min-width: 16px;
    height: 14px;
    font-size: 9px;
    border-width: 1.5px;
    padding: 0 3px;
    top: -5px;
    right: -5px;
  }

  .pdp-cart-item-details {
    gap: 2px;
  }

  .pdp-cart-item-title {
    font-size: 12px;
    line-height: 1.3;
  }

  .pdp-cart-variant-subtitle {
    font-size: 12px;
    -webkit-line-clamp: 1;
  }

  /* Quantity controls */
  .pdp-cart-quantity {
    height: 26px;
  }

  .pdp-quantity-button {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .pdp-quantity-value {
    font-size: 12px;
    min-width: 16px;
  }

  /* Pricing */
  .pdp-cart-item-pricing {
    min-width: unset;
  }

  .pdp-cart-price-new {
    font-size: 13px;
  }

  .pdp-cart-price-old {
    font-size: 11px;
  }

  /* ── Remove button ── */
  .pdp-cart-remove {
    width: 24px;
    height: 24px;
  }

  .pdp-cart-remove svg {
    width: 12px;
    height: 12px;
  }

  /* ── Footer (compact mobile) ── */
  .pdp-cart-footer-fixed {
    padding: 4px 12px 2px;
  }

  /* ── Insurance card (compact mobile) ── */
  .pdp-insurance-premium-card {
    padding: 4px 8px;
    margin-bottom: 3px;
  }

  .pdp-insurance-icon-wrapper {
    width: 20px;
    height: 20px;
  }

  .pdp-insurance-icon-wrapper svg {
    width: 10px;
    height: 10px;
  }

  .pdp-insurance-title {
    font-size: 11px;
  }

  .pdp-insurance-price-new,
  .pdp-insurance-price-old {
    font-size: 11px;
  }

  .pdp-insurance-card-header {
    gap: 6px;
  }

  /* ── Totals (compact mobile) ── */
  .pdp-cart-totals {
    padding: 4px 8px;
    margin: 3px 0;
  }

  .pdp-totals-row {
    padding: 1px 0;
    font-size: 11px;
  }

  .pdp-totals-final {
    padding-top: 4px;
    margin-top: 4px;
    font-size: 12px;
  }

  .pdp-total-amount {
    font-size: 15px !important;
  }

  .pdp-old-total {
    font-size: 12px;
  }

  .pdp-cart-totals .pdp-savings-row {
    padding: 3px 6px;
    margin-top: 3px;
  }

  /* ── Checkout button (compact mobile) ── */
  .pdp-checkout-button {
    padding: 8px 16px;
    font-size: 13px;
    margin-bottom: 3px;
  }

  /* ── Payment icons (compact mobile) ── */
  .pdp-payment-row {
    padding-top: 3px;
    margin-top: 3px;
  }

  .pdp-payment-icon-cart img {
    width: var(--pdp-icon-mw, 18px);
    height: var(--pdp-icon-mh, 18px);
  }

  /* ────────────────────────────────────────────────────────
     DYNAMIC CART ITEM SHRINK SYSTEM
     ─────────────────────────────────────────────────────────
     JS sets a CSS class on .pdp-cart-body based on product count:
     - pdp-cart-compact-2: 2 products
     - pdp-cart-compact-3: 3 products
     - pdp-cart-compact-max: 4+ products
     Items transition smoothly between levels.
     ────────────────────────────────────────────────────────── */

  /* Kill desktop transition on cart items — prevents animation on quantity changes */
  .pdp-cart-item {
    transition: none;
  }

  /* ── Level 1: 2 products — slightly smaller ── */
  .pdp-cart-compact-2 .pdp-cart-items { gap: 4px; }
  .pdp-cart-compact-2 .pdp-cart-item {
    grid-template-columns: 50px 1fr auto 24px;  /* 42 + 8 badge buffer */
    gap: 10px; padding: 4px 0;
  }
  .pdp-cart-compact-2 .pdp-cart-item-image-wrapper { width: 42px; height: 42px; }
  .pdp-cart-compact-2 .pdp-cart-item-title { font-size: 11.5px; }
  .pdp-cart-compact-2 .pdp-cart-variant-subtitle { font-size: 11px; }
  .pdp-cart-compact-2 .pdp-cart-price-new { font-size: 12.5px; }
  .pdp-cart-compact-2 .pdp-cart-price-old { font-size: 10.5px; }
  .pdp-cart-compact-2 .pdp-cart-quantity { height: 24px; }
  .pdp-cart-compact-2 .pdp-quantity-button { width: 24px; height: 24px; font-size: 11px; }
  .pdp-cart-compact-2 .pdp-quantity-value { font-size: 11px; }
  .pdp-cart-compact-2 .pdp-cart-remove { width: 22px; height: 22px; }

  /* ── Level 2: 3 products — noticeably smaller ── */
  .pdp-cart-compact-3 .pdp-cart-items { gap: 3px; }
  .pdp-cart-compact-3 .pdp-cart-item {
    grid-template-columns: 46px 1fr auto 22px;  /* 38 + 8 badge buffer */
    gap: 8px; padding: 3px 0;
  }
  .pdp-cart-compact-3 .pdp-cart-item-image-wrapper { width: 38px; height: 38px; }
  .pdp-cart-compact-3 .pdp-cart-item-title { font-size: 11px; }
  .pdp-cart-compact-3 .pdp-cart-variant-subtitle { font-size: 10.5px; }
  .pdp-cart-compact-3 .pdp-cart-price-new { font-size: 12px; }
  .pdp-cart-compact-3 .pdp-cart-price-old { font-size: 10px; }
  .pdp-cart-compact-3 .pdp-cart-quantity { height: 22px; }
  .pdp-cart-compact-3 .pdp-quantity-button { width: 22px; height: 22px; font-size: 10px; }
  .pdp-cart-compact-3 .pdp-quantity-value { font-size: 10px; min-width: 14px; }
  .pdp-cart-compact-3 .pdp-cart-remove { width: 20px; height: 20px; }
  .pdp-cart-compact-3 .pdp-cart-remove svg { width: 10px; height: 10px; }

  /* ── Level MAX: 4+ products — maximum compact ── */
  .pdp-cart-compact-max .pdp-cart-items { gap: 2px; }
  .pdp-cart-compact-max .pdp-cart-item {
    grid-template-columns: 42px 1fr auto 20px;  /* 34 + 8 badge buffer */
    gap: 6px; padding: 2px 0;
  }
  .pdp-cart-compact-max .pdp-cart-item-image-wrapper { width: 34px; height: 34px; }
  .pdp-cart-compact-max .pdp-cart-item-title { font-size: 10px; }
  .pdp-cart-compact-max .pdp-cart-variant-subtitle { font-size: 10px; }
  .pdp-cart-compact-max .pdp-cart-item-details { gap: 1px; }
  .pdp-cart-compact-max .pdp-cart-price-new { font-size: 11px; }
  .pdp-cart-compact-max .pdp-cart-price-old { font-size: 9.5px; }
  .pdp-cart-compact-max .pdp-cart-quantity { height: 20px; }
  .pdp-cart-compact-max .pdp-quantity-button { width: 20px; height: 20px; font-size: 9px; }
  .pdp-cart-compact-max .pdp-quantity-value { font-size: 9px; min-width: 12px; }
  .pdp-cart-compact-max .pdp-cart-remove { width: 18px; height: 18px; }
  .pdp-cart-compact-max .pdp-cart-remove svg { width: 9px; height: 9px; }
}
/* ============================================================
   SECTION 3: GALLERY STYLES
   Navigate: Search "SECTION 3" to jump here
   ============================================================ */

/* ────────────────────────────────────────────────────────
   SECTION 3.1: Gallery Container
   ────────────────────────────────────────────────────────

   [INFO] Gallery is sticky on desktop — keeps product images visible
   while scrolling through the longer product info column.
   Works because gallery (carousel) is shorter than product info.
   ────────────────────────────────────────────────────────── */

/* Gallery container - Sticky on desktop (shorter column stays visible) */
.pdp-gallery {
  position: sticky;  /* Sticky: keeps images visible while scrolling product info */
  top: 20px;  /* 20px offset from viewport top */
  height: fit-content;  /* Takes height of content, not full viewport */
  user-select: none;  /* Prevents text selection during swipe gestures */
}

/* ────────────────────────────────────────────────────────
   SECTION 3.2: Gallery Loading Skeleton
   ────────────────────────────────────────────────────────── */

/* Gallery skeleton - Animated shimmer while images load */
.pdp-gallery-skeleton {
  animation: pdp-shimmer 1.5s infinite;
}

/* Skeleton main image - Placeholder for main carousel image */
.pdp-skeleton-main {
  padding-bottom: 100%;  /* 1:1 square aspect ratio */
  background: linear-gradient(90deg, var(--pdp-surface) 25%, rgba(var(--pdp-primary-rgb),0.05) 50%, var(--pdp-surface) 75%);
  border-radius: 16px;
  margin-bottom: clamp(12px, 1.5vw, 16px);
}

/* Skeleton thumbnails container */
.pdp-skeleton-thumbs {
  display: flex;
  gap: clamp(8px, 1vw, 12px);
}

/* Individual skeleton thumbnail placeholder */
.pdp-skeleton-thumb {
  flex: 1;
  padding-bottom: 25%;  /* 4:1 aspect ratio (25% height) */
  background: linear-gradient(90deg, var(--pdp-surface) 25%, rgba(var(--pdp-primary-rgb),0.05) 50%, var(--pdp-surface) 75%);
  border-radius: 8px;
}

/* ────────────────────────────────────────────────────────
   SECTION 3.3: Main Gallery Carousel
   ────────────────────────────────────────────────────────── */

/* Main gallery container - White rounded card with shadow */
.pdp-gallery-main {
  position: relative;
  background: var(--pdp-white);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: clamp(12px, 1.5vw, 16px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  border: 1px solid var(--pdp-border);
}

/* Gallery viewport - Square container with grab cursor (Performance Style) */
.pdp-gallery-viewport {
  position: relative;
  width: 100%;
  padding-bottom: 100%;  /* 1:1 square aspect ratio */
  overflow: hidden;  /* Clips sliding track */
  background: var(--pdp-white);
  cursor: grab;  /* Grabbable - can drag/swipe main images (Shopify/Amazon style) */
}

/* Gallery viewport when grabbing - Changes cursor during drag */
.pdp-gallery-viewport:active {
  cursor: grabbing;  /* Active grab state */
}

/* Gallery track - Horizontal sliding container for all images */
.pdp-gallery-track {
  position: absolute;
  top: 0;
  left: 0;  width: 100%;
  height: 100%;
  display: flex;  /* Horizontal layout for slides */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth slide animation */
}

/* Individual gallery slide - Full size container */
.pdp-gallery-slide {
  position: relative;
  min-width: 100%;  /* Each slide takes full viewport width */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gallery image - Responsive with object-fit */
.pdp-gallery-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;  /* Preserve aspect ratio */
  user-select: none;
  -webkit-user-drag: none;
}

/* Individual gallery slide - Full width container for each image */
.pdp-gallery-slide {
  position: relative;
  width: 100%;
  height: 100%;
  flex-shrink: 0;  /* Prevents slides from shrinking */
}

/* Gallery image - Product image using contain to preserve aspect ratio */
.pdp-gallery-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;  /* Shows full image without cropping */
}

/* ────────────────────────────────────────────────────────
   SECTION 3.4: Gallery Navigation Arrows
   ────────────────────────────────────────────────────────── */

/* Navigation arrow base - Circular button with shadow */
.pdp-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--pdp-gallery-nav-size);
  height: var(--pdp-gallery-nav-size);
  background: var(--pdp-white);
  border: 1px solid var(--pdp-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--pdp-transition-base);
  z-index: 10;
  opacity: 0;  /* Hidden by default */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Navigation arrows visible on gallery hover or swipe */
.pdp-gallery-main:hover .pdp-gallery-nav,
.pdp-gallery-main.pdp-controls-visible .pdp-gallery-nav {
  opacity: 0.9;
}

/* Navigation arrow hover - Scales up and changes to primary color */
.pdp-gallery-nav:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(var(--pdp-primary-rgb),0.15);
  background: var(--pdp-primary);
  color: var(--pdp-white);
  border-color: var(--pdp-primary);
}

/* Previous arrow position - Left side */
.pdp-gallery-nav--prev { left: var(--pdp-gallery-nav-left); }

/* Next arrow position - Right side */
.pdp-gallery-nav--next { right: var(--pdp-gallery-nav-right); }

/* ────────────────────────────────────────────────────────
   SECTION 3.5: Gallery Zoom Button
   ────────────────────────────────────────────────────────── */

/* Zoom button - Top-right magnifying glass button to open lightbox */
.pdp-gallery-zoom {
  position: absolute;
  top: var(--pdp-gallery-zoom-top);
  right: var(--pdp-gallery-zoom-right);
  width: var(--pdp-gallery-zoom-size);
  height: var(--pdp-gallery-zoom-size);
  background: var(--pdp-white);
  border: 1px solid var(--pdp-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--pdp-transition-base);
  z-index: 10;
  opacity: 0;  /* Hidden by default - shows on gallery hover */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Zoom button visible on gallery hover or swipe */
.pdp-gallery-main:hover .pdp-gallery-zoom,
.pdp-gallery-main.pdp-controls-visible .pdp-gallery-zoom {
  opacity: 0.9;
}

/* Zoom button hover - Scales and changes to primary color */
.pdp-gallery-zoom:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(var(--pdp-primary-rgb),0.15);
  background: var(--pdp-primary);
  color: var(--pdp-white);
  border-color: var(--pdp-primary);
}

/* ────────────────────────────────────────────────────────
   SECTION 3.6: Gallery Dots (Mobile Indicator)
   ────────────────────────────────────────────────────────── */

/* Gallery dots container - Bottom-centered dot navigation */
.pdp-gallery-dots {
  position: absolute;
  bottom: var(--pdp-dot-bottom);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--pdp-dot-gap);
  padding: var(--pdp-dot-pad-y) var(--pdp-dot-pad-x);
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 9999px;
  opacity: 0;
  transition: opacity var(--pdp-transition-base);
}

/* Dots visible on gallery hover or swipe */
.pdp-gallery-main:hover .pdp-gallery-dots,
.pdp-gallery-main.pdp-controls-visible .pdp-gallery-dots {
  opacity: 0.9;
}

/* Individual dot - Small circular indicator */
.pdp-gallery-dot {
  width: var(--pdp-dot-size);
  height: var(--pdp-dot-size);
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  transition: all var(--pdp-transition-fast);
  padding: 0;
}

/* Active dot - Expands to horizontal pill shape */
.pdp-gallery-dot.active {
  width: var(--pdp-dot-active-width);
  border-radius: var(--pdp-dot-active-radius);
  background: var(--pdp-primary);
}

/* Dot hover - Brightens when hovering inactive dots */
.pdp-gallery-dot:hover:not(.active) {
  background: rgba(255,255,255,0.8);
}

/* ────────────────────────────────────────────────────────
   SECTION 3.6b: Gallery Counter (bottom-right)
   ────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────
   SECTION 3.7: Gallery Thumbnails
   ────────────────────────────────────────────────────────── */

/* Thumbnails container */
.pdp-gallery-thumbnails {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;  /* Center thumbnails horizontally (Performance Style) */
}

/* Thumbnail track - Horizontal scrollable container (5 thumbnails centered) */
.pdp-gallery-thumbnails-track {
  display: flex;
  gap: clamp(12px, 1.5vw, 16px);  /* Professional spacing - not too tight (Shopify/Amazon standard) */
  overflow-x: auto;  /* Horizontal scroll - always scrollable */
  scroll-behavior: smooth;  /* Smooth scroll animation */
  padding: clamp(8px, 1vw, 12px);  /* Space for borders (2px) so they are not cut off */
  cursor: grab;  /* Grabbable - can scroll with mouse */
  -webkit-overflow-scrolling: touch;  /* iOS momentum scrolling */
  max-width: 448px;  /* Show MAX 5 thumbnails (5×80px + 4×12px gaps) - compact sizing */
  margin: 0 auto;  /* Center within container */
}

/* Thumbnail scrollbar track - Thin horizontal scrollbar */
.pdp-gallery-thumbnails-track::-webkit-scrollbar {
  height: 3px;
}

/* Scrollbar track background */
.pdp-gallery-thumbnails-track::-webkit-scrollbar-track {
  background: var(--pdp-border);
  border-radius: 2px;
}

/* Scrollbar thumb - Primary colored draggable thumb */
.pdp-gallery-thumbnails-track::-webkit-scrollbar-thumb {
  background: var(--pdp-primary);
  border-radius: 2px;
}

/* Individual thumbnail - Square image button (Performance Style - 80px compact) */
.pdp-gallery-thumbnail {
  position: relative;
  min-width: 80px;  /* Compact sizing for cleaner gallery layout */
  width: 80px;
  height: 80px;
  padding: 0;
  background: var(--pdp-white);
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--pdp-transition-base);
  flex-shrink: 0;  /* Prevents thumbnails from shrinking */
}

/* Thumbnail hover - Highlights border and lifts slightly */
.pdp-gallery-thumbnail:hover {
  border-color: rgba(var(--pdp-primary-rgb),0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Active thumbnail - Shows primary border with glow */
.pdp-gallery-thumbnail.active {
  border-color: var(--pdp-primary);
  box-shadow: 0 0 0 3px rgba(var(--pdp-primary-rgb),0.1);  /* Primary glow ring */
}

/* Thumbnail image - Covers entire thumbnail area */
.pdp-gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ────────────────────────────────────────────────────────
   SECTION 3.8: Lightbox Modal
   ────────────────────────────────────────────────────────

   [INFO] Lightbox provides fullscreen image viewing with
   navigation. Opens when clicking zoom button or main image.
   Supports keyboard navigation (arrow keys, Escape to close).
   ────────────────────────────────────────────────────────── */

/* Lightbox overlay - Fullscreen dark modal */
.pdp-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);  /* Almost black overlay */
  z-index: var(--pdp-z-lightbox);  /* Above everything else */
  animation: fadeIn 0.3s ease;
}

/* Lightbox active state - Shows lightbox */
.pdp-lightbox.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lightbox close button - Top-right X button */
.pdp-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.1);  /* Semi-transparent white */
  backdrop-filter: blur(10px);  /* Glassmorphism blur */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--pdp-white);
  transition: all var(--pdp-transition-base);
  z-index: var(--pdp-z-modal);  /* Above lightbox content */
}

/* Close button hover - Primary color with rotation animation */
.pdp-lightbox-close:hover {
  background: var(--pdp-primary);
  border-color: var(--pdp-primary);
  transform: scale(1.1) rotate(90deg);  /* Rotates X icon */
}

/* Lightbox content container - Centers images */
.pdp-lightbox-content {
  position: relative;
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lightbox track - Horizontal sliding container for fullscreen images */
.pdp-lightbox-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);  /* Smooth slide */
}

/* Lightbox slide - Full screen image container */
.pdp-lightbox-slide {
  position: relative;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lightbox image - High-resolution fullscreen image */
.pdp-lightbox-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;  /* Shows full image without cropping */
}

/* ────────────────────────────────────────────────────────
   SECTION 3.9: Lightbox Navigation
   ────────────────────────────────────────────────────────── */

/* Lightbox navigation arrows - Larger glassmorphism buttons */
.pdp-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.1);  /* Semi-transparent white */
  backdrop-filter: blur(10px);  /* Glassmorphism blur */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--pdp-white);
  transition: all var(--pdp-transition-base);
}

/* Lightbox nav hover - Primary color and scale up */
.pdp-lightbox-nav:hover {
  background: var(--pdp-primary);
  border-color: var(--pdp-primary);
  transform: translateY(-50%) scale(1.1);
}

/* Lightbox previous arrow - Left side */
.pdp-lightbox-nav--prev { left: 40px; }

/* Lightbox next arrow - Right side */
.pdp-lightbox-nav--next { right: 40px; }

/* ────────────────────────────────────────────────────────
   SECTION 3.10: Lightbox Image Counter
   ────────────────────────────────────────────────────────── */

/* Image counter - Bottom-centered "3 / 10" display */
.pdp-lightbox-counter {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.5);  /* Semi-transparent black */
  backdrop-filter: blur(10px);  /* Glassmorphism blur */
  -webkit-backdrop-filter: blur(10px);
  color: var(--pdp-white);
  padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 24px);
  border-radius: 9999px;  /* Fully rounded pill */
  font-size: 14px;
  font-weight: 500;
}

/* ────────────────────────────────────────────────────────
   SECTION 3.11: Mobile Responsive Gallery
   ──────────────────────────────────────────────────────── */

/* Tablet & below (≤959px) — disable sticky when layout stacks to 1 column */
@media (max-width: 959px) {
  .pdp-gallery {
    position: relative;
    top: auto;
  }
}

/* Mobile (≤767px) — native scroll, dots visible, no thumbnails */
@media (max-width: 767px) {
  .pdp-gallery {
    max-width: 100%;
    width: 100%;
    overflow: hidden;
  }

  .pdp-gallery-viewport {
    cursor: default;
  }

  /* Native scroll + scroll-snap on mobile */
  .pdp-gallery-track {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    transition: none;
    scrollbar-width: none; /* Firefox */
  }

  .pdp-gallery-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .pdp-gallery-slide {
    scroll-snap-align: center;
  }

  /* Hide zoom on non-desktop */
  .pdp-gallery-zoom {
    display: none;
  }

  /* Fill 1:1 viewport — crop to cover on mobile */
  .pdp-gallery-image {
    object-fit: cover;
  }

  /* Nav + dots hidden by default — shown on tap, fast fade */
  .pdp-gallery-nav,
  .pdp-gallery-dots {
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  /* Tap-to-show */
  .pdp-gallery-main.pdp-controls-visible .pdp-gallery-nav,
  .pdp-gallery-main.pdp-controls-visible .pdp-gallery-dots {
    opacity: 0.9;
  }

  /* Touch-friendly sizes */
  .pdp-gallery-nav {
    width: 44px;
    height: 44px;
  }

  /* Thumbnails visible on mobile — smaller + smooth touch scroll */
  .pdp-gallery-thumbnails {
    display: flex;
  }

  .pdp-gallery-thumbnails-track {
    gap: 8px;
    padding: 6px;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    cursor: default;
  }

  .pdp-gallery-thumbnails-track::-webkit-scrollbar {
    height: 3px;
  }

  .pdp-gallery-thumbnail {
    min-width: 56px;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    scroll-snap-align: start;
  }

  .pdp-gallery-thumbnail:hover {
    transform: none;
  }

  /* Lightbox nav — smaller + closer to edges */
  .pdp-lightbox-nav {
    width: 44px;
    height: 44px;
  }

  .pdp-lightbox-nav--prev {
    left: 20px;
  }

  .pdp-lightbox-nav--next {
    right: 20px;
  }
}

/* Small mobile (≤479px) */
@media (max-width: 479px) {
  .pdp-gallery-nav {
    width: 36px;
    height: 36px;
  }

  .pdp-gallery-nav--prev { left: 8px; }
  .pdp-gallery-nav--next { right: 8px; }
}

/* ────────────────────────────────────────────────────────
   SECTION 3.12: Responsive Gallery Sizing (DESKTOP)
   ────────────────────────────────────────────────────────── */

/* DESKTOP: Max-width cap at 530px (min-width after max-width per convention) */
@media (min-width: 960px) {
  .pdp-gallery {
    max-width: 530px;
    width: 100%;
    margin: 0 auto;
  }
}

/* ============================================================
   TEXT ALIGNMENT OVERRIDES
   ============================================================

   [INFO] Forces left-alignment on gallery elements to prevent
   external CSS (host page theme) from centering content.
   Uses !important to override any external styles.
   ============================================================ */

/* Gallery Container - Force left alignment */
.pdp-gallery-container {
  text-align: left !important;
}
/* ============================================================
   SECTION: GIFT PREVIEW COMPONENT
   Navigate: Search "Gift Preview" to jump here

   Contains:
   - PDP Gift Preview card (below Add-to-Cart button)
   - Cart Drawer Inline Gift Picker (variant selection)
   ============================================================ */

/* ────────────────────────────────────────────────────────
   PDP Gift Preview — Minimal premium card
   ────────────────────────────────────────────────────────── */

/* Outer container */
.pdp-gift-preview {
  border-radius: var(--pdp-radius-md);
  padding: 12px 14px;
  margin-top: clamp(10px, 1.5vw, 14px);
  margin-bottom: clamp(10px, 1.5vw, 14px);
  background: color-mix(in srgb, var(--pdp-primary) 10%, transparent);
}

/* Loading state */
.pdp-gift-preview--loading .pdp-gift-locked,
.pdp-gift-preview--loading .pdp-gift-unlocked {
  display: none;
}

/* Skeleton placeholder */
.pdp-gift-skeleton {
  display: flex;
  align-items: center;
}

.pdp-gift-preview:not(.pdp-gift-preview--loading) .pdp-gift-skeleton {
  display: none;
}

/* Headline: Free gift with your order */
.pdp-gift-headline {
  font-size: 11px;
  font-weight: var(--pdp-font-bold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--pdp-primary);
  margin: 0 0 8px 0;
}

/* Body: image + info row */
.pdp-gift-body {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Product image */
.pdp-gift-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--pdp-radius-md);
  flex-shrink: 0;
  background: color-mix(in srgb, var(--pdp-primary) 15%, transparent);
}

/* Info: name + worth */
.pdp-gift-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* Product name */
.pdp-gift-title {
  font-size: 13px;
  font-weight: var(--pdp-font-semibold);
  color: var(--pdp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Worth £X */
.pdp-gift-worth {
  font-size: 12px;
  color: var(--pdp-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Progress bar track */
.pdp-gift-progress-bar {
  height: 4px;
  background: color-mix(in srgb, var(--pdp-primary) 20%, transparent);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 5px;
}

/* Progress bar fill */
.pdp-gift-progress-fill {
  height: 100%;
  background: var(--pdp-primary);
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* "Add £X more to claim" */
.pdp-gift-progress-text {
  font-size: 11px;
  color: var(--pdp-text-muted);
  margin: 0;
}

/* Unlocked state */
.pdp-gift-unlocked {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pdp-gift-unlocked-img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--pdp-radius-sm);
  flex-shrink: 0;
  background: color-mix(in srgb, var(--pdp-primary) 15%, transparent);
}

.pdp-gift-unlocked-body {
  flex: 1;
  min-width: 0;
}

.pdp-gift-unlocked-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--pdp-font-bold);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--pdp-success);
  margin: 0 0 2px 0;
}

.pdp-gift-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--pdp-success);
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.pdp-gift-unlocked-name {
  font-size: 12px;
  color: var(--pdp-text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ────────────────────────────────────────────────────────
   Cart Drawer Inline Gift Picker
   ────────────────────────────────────────────────────────── */

/* Cart gift picker container — clean uniform border, no left accent */
.pdp-cart-gift-picker {
  background: var(--pdp-white);
  border: 1px solid rgba(var(--pdp-primary-rgb), 0.22);
  border-radius: var(--pdp-radius-md);
  margin-bottom: 6px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(var(--pdp-primary-rgb), 0.06);
}

/* Header: icon + title/subtitle + FREE badge */
.pdp-cart-gift-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--pdp-primary) 6%, transparent);
}

.pdp-cart-gift-header-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pdp-cart-gift-icon {
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1;
}

.pdp-cart-gift-title {
  font-size: var(--pdp-text-sm);
  font-weight: var(--pdp-font-semibold);
  color: var(--pdp-text);
  line-height: 1.2;
}

.pdp-cart-gift-subtitle {
  display: none;
}

/* FREE badge pill */
.pdp-cart-gift-badge {
  background: var(--pdp-primary);
  color: var(--pdp-white);
  font-size: 10px;
  font-weight: var(--pdp-font-bold);
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: var(--pdp-radius-full);
  flex-shrink: 0;
}

/* Thin divider between header and product */
.pdp-cart-gift-divider {
  display: none;
}

/* Product row: thumb + name + value */
.pdp-cart-gift-product-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 4px;
}

/* Product thumbnail */
.pdp-cart-gift-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--pdp-radius-sm);
  flex-shrink: 0;
  border: 1px solid var(--pdp-border);
  background: color-mix(in srgb, var(--pdp-primary) 8%, transparent);
}

/* Product info column */
.pdp-cart-gift-product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Product name */
.pdp-cart-gift-name {
  font-size: var(--pdp-text-sm);
  font-weight: var(--pdp-font-semibold);
  color: var(--pdp-text);
  line-height: 1.2;
}

/* Value line */
.pdp-cart-gift-value {
  font-size: var(--pdp-text-xs);
  color: var(--pdp-text-muted);
}

/* Variants row */
.pdp-cart-gift-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 3px 8px 6px;
}

/* Variant option button — pill style */
.pdp-cart-gift-variant-btn {
  background: var(--pdp-white);
  border: 1.5px solid var(--pdp-border);
  border-radius: var(--pdp-radius-full);
  padding: 4px 10px;
  font-size: var(--pdp-text-xs);
  font-weight: var(--pdp-font-semibold);
  color: var(--pdp-text);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.pdp-cart-gift-variant-btn:hover {
  border-color: var(--pdp-primary);
  background: color-mix(in srgb, var(--pdp-primary) 8%, transparent);
  color: var(--pdp-primary);
}

/* ──────────────────────────────────────────────────────────
   Reclaim gift banner — shown when gift was dismissed but user is still eligible
   ────────────────────────────────────────────────────────── */

.pdp-cart-gift-reclaim {
  border: 1px solid rgba(var(--pdp-primary-rgb), 0.22);
  border-radius: var(--pdp-radius-md);
  background: color-mix(in srgb, var(--pdp-primary) 5%, transparent);
  margin-bottom: 6px;
  overflow: hidden;
}

.pdp-cart-gift-reclaim[hidden] {
  display: none;
}

.pdp-cart-gift-reclaim-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
}

.pdp-cart-gift-reclaim-icon {
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1;
}

.pdp-cart-gift-reclaim-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pdp-cart-gift-reclaim-title {
  font-size: var(--pdp-text-sm);
  font-weight: var(--pdp-font-semibold);
  color: var(--pdp-text);
  line-height: 1.2;
}

.pdp-cart-gift-reclaim-sub {
  font-size: var(--pdp-text-xs);
  color: var(--pdp-text-muted);
}

.pdp-cart-gift-reclaim-btn {
  background: var(--pdp-primary);
  color: var(--pdp-white);
  border: none;
  border-radius: var(--pdp-radius-full);
  padding: 5px 12px;
  font-size: var(--pdp-text-xs);
  font-weight: var(--pdp-font-semibold);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.18s;
}

.pdp-cart-gift-reclaim-btn:hover {
  opacity: 0.85;
}

/* ────────────────────────────────────────────────────────
   RESPONSIVE OVERRIDES
   Desktop CSS above is NEVER modified.
   ────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  /* Cart gift picker: compact for no-scroll cart */
  .pdp-cart-gift-picker {
    margin-bottom: 2px;
  }

  .pdp-cart-gift-header {
    padding: 4px 8px;
  }

  .pdp-cart-gift-icon {
    font-size: 12px;
  }

  .pdp-cart-gift-title {
    font-size: 12px;
  }

  .pdp-cart-gift-badge {
    font-size: 9px;
    padding: 1px 6px;
  }

  .pdp-cart-gift-product-row {
    gap: 6px;
    padding: 4px 8px 2px;
  }

  .pdp-cart-gift-thumb {
    width: 30px;
    height: 30px;
  }

  .pdp-cart-gift-name {
    font-size: 12px;
  }

  .pdp-cart-gift-value {
    font-size: 11px;
  }

  .pdp-cart-gift-variants {
    gap: 4px;
    padding: 2px 8px 5px;
  }

  .pdp-cart-gift-variant-btn {
    padding: 3px 8px;
    font-size: 11px;
  }
}
/* ============================================================
   MODAL STYLES
   ============================================================
   Modal component for displaying external content + image viewer.

   Features:
   - Full-screen overlay with backdrop
   - Centered modal window with smooth animation
   - Bottom-sheet on mobile for content modals
   - Image viewer (fullscreen, nav, counter, swipe)
   - Touch targets 48px+ on mobile
   - Responsive sizing

   Used by: modules/system/modal-manager.txt
   ============================================================ */

/* MODAL CONTAINER (Overlay)
   ============================================================ */

#pdp-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#pdp-modal-container.active {
  display: flex;
}

/* SECTION 16.2: Modal Window
   ============================================================ */

.pdp-modal-window {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: var(--pdp-modal-max-width);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: pdp-modal-slide-up 0.3s ease-out;
}

@keyframes pdp-modal-slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Close animation (desktop) */
@keyframes pdp-modal-slide-down {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(30px);
  }
}

.pdp-modal-window.pdp-closing {
  animation: pdp-modal-slide-down 0.25s ease-in forwards;
}

/* SECTION 16.3: Modal Header
   ============================================================ */

.pdp-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid #e5e5e5;
  flex-shrink: 0;
}

.pdp-modal-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #000;
}

/* ── SHARED CLOSE BUTTON (content modal + YML modal) ── */
.pdp-modal-close,
.pdp-mini-close {
  background: var(--pdp-primary);
  border: none;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pdp-modal-close svg,
.pdp-mini-close svg {
  width: 16px;
  height: 16px;
  stroke: white;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.pdp-modal-close:hover,
.pdp-mini-close:hover {
  opacity: 0.85;
}

/* SECTION 16.4: Modal Body (Scrollable Content)
   ============================================================ */

.pdp-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
  line-height: 1.6;
  color: #333;
}

/* Content styling */
.pdp-modal-body h1,
.pdp-modal-body h2,
.pdp-modal-body h3 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-weight: 600;
  color: #000;
}

.pdp-modal-body h1:first-child,
.pdp-modal-body h2:first-child,
.pdp-modal-body h3:first-child {
  margin-top: 0;
}

.pdp-modal-body h1 { font-size: 24px; }
.pdp-modal-body h2 { font-size: 20px; }
.pdp-modal-body h3 { font-size: 18px; }

.pdp-modal-body p {
  margin-bottom: 16px;
}

.pdp-modal-body ul,
.pdp-modal-body ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.pdp-modal-body li {
  margin-bottom: 8px;
}

.pdp-modal-body a {
  color: #1976d2;
  text-decoration: underline;
}

.pdp-modal-body a:hover {
  color: #1565c0;
}

/* SECTION 16.5: Loading & Error States
   ============================================================ */

.pdp-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  font-size: 16px;
  color: #666;
}

.pdp-modal-error {
  text-align: center;
  padding: 40px 24px;
  color: #d32f2f;
}

.pdp-modal-error p {
  margin-bottom: 12px;
}

.pdp-modal-error strong {
  font-weight: 600;
}

.pdp-modal-error a {
  color: #1976d2;
  font-weight: 500;
  text-decoration: underline;
}

/* ============================================================
   IMAGE VIEWER
   ============================================================
   Fullscreen image overlay with prev/next navigation.
   Used by: reviews photo modal, reusable by any module.
   ============================================================ */

.pdp-modal-image-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-modal-image-viewer.pdp-hidden {
  display: none !important;
}

/* Backdrop */
.pdp-modal-iv-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
}

/* Close button */
.pdp-modal-iv-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.pdp-modal-iv-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Image content area */
.pdp-modal-iv-content {
  position: relative;
  z-index: 5;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-modal-iv-image {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
}

/* Navigation buttons */
.pdp-modal-iv-prev,
.pdp-modal-iv-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.pdp-modal-iv-prev { left: 16px; }
.pdp-modal-iv-next { right: 16px; }

.pdp-modal-iv-prev:hover,
.pdp-modal-iv-next:hover {
  background: rgba(255, 255, 255, 0.3);
}

.pdp-modal-iv-prev:disabled,
.pdp-modal-iv-next:disabled {
  opacity: 0.3;
  cursor: default;
}

.pdp-modal-iv-prev:disabled:hover,
.pdp-modal-iv-next:disabled:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Counter */
.pdp-modal-iv-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 16px;
  border-radius: 20px;
}

/* ============================================================
   SECTION 16.6: Mobile Responsive
   ============================================================ */

@media (max-width: 959px) {
  /* Content modal — fullscreen on non-desktop */
  #pdp-modal-container {
    padding: 0;
    align-items: stretch;
  }

  .pdp-modal-window {
    max-width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    animation: pdp-modal-enter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .pdp-modal-header {
    min-height: var(--pdp-modal-header-h);
    padding: 0 20px;
    border-bottom: var(--pdp-modal-header-border);
    background: rgba(var(--pdp-primary-rgb), 0.04);
  }

  .pdp-modal-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .pdp-modal-close,
  .pdp-mini-close {
    width: var(--pdp-modal-close-size);
    height: var(--pdp-modal-close-size);
  }

  .pdp-modal-body {
    padding: 28px;
    overscroll-behavior: contain;
  }

  .pdp-modal-error {
    padding: 32px 24px;
  }

  .pdp-modal-body h1 { font-size: 22px; }
  .pdp-modal-body h2 { font-size: 18px; }
  .pdp-modal-body h3 { font-size: 16px; }

  /* Close animation (mobile — slide down fullscreen) */
  .pdp-modal-window.pdp-closing {
    animation: pdp-modal-exit 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
  }
}

@media (max-width: 767px) {
  /* Image viewer — touch-optimized */
  .pdp-modal-iv-close {
    top: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
  }

  .pdp-modal-iv-prev,
  .pdp-modal-iv-next {
    width: 48px;
    height: 48px;
  }

  .pdp-modal-iv-prev { left: 8px; }
  .pdp-modal-iv-next { right: 8px; }

  .pdp-modal-iv-content {
    max-width: 100vw;
    max-height: 80vh;
    padding: 0 8px;
  }

  .pdp-modal-iv-counter {
    bottom: 16px;
    font-size: 13px;
  }
}

@media (max-width: 479px) {
  .pdp-modal-title {
    font-size: 16px;
  }

  .pdp-modal-header {
    padding: 20px 24px;
  }

  .pdp-modal-body {
    padding: 24px;
    font-size: 14px;
  }

  .pdp-modal-body ul,
  .pdp-modal-body ol {
    padding-left: 16px;
  }
}
/* ============================================================
   SECTION 4: PRODUCT INFO STYLES
   Navigate: Search "SECTION 4" to jump here
   ============================================================ */

/* ────────────────────────────────────────────────────────
   SECTION 4.1: Product Container
   ────────────────────────────────────────────────────────── */

/* Product info container - Main wrapper for all product details */
.pdp-info-container {
  color: var(--pdp-text);
  padding: 0;
  width: 100%;
  max-width: 100%;
}

/* Product info content wrapper */
.pdp-info-content {
  width: 100%;
  max-width: 100%;
}

/* Product info skeleton - Loading state for product details */
.pdp-info-skeleton {
  padding: clamp(24px, 3vw, 32px) 0;
}

/* ────────────────────────────────────────────────────────
   SECTION 4.2: Product Title & Subtitle
   ────────────────────────────────────────────────────────── */

/* Product title - Bold H1, dominant in hierarchy */
.pdp-title {
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
}

/* Brand name highlight within title */
.pdp-title__brand {
  color: var(--pdp-primary);
}

/* Left-aligned title variant */
.pdp-title--left {
  text-align: left !important;
}

/* Product subtitle - Light secondary text below title */
.pdp-subtitle {
  font-size: 15px;
  color: #6b7280;
  margin: 0 0 20px 0;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Left-aligned subtitle variant */
.pdp-subtitle--left {
  text-align: left !important;
}

/* ────────────────────────────────────────────────────────
   SECTION 4.3: Rating Display System
   ────────────────────────────────────────────────────────

   [INFO] Rating system shows star rating (e.g., 4.8/5) with
   animated stars, review count, and hoverable tooltip showing
   rating distribution. Supports both simple and premium styles.
   ────────────────────────────────────────────────────────── */

/* Rating wrapper - Clickable container for entire rating */
.pdp-rating-wrapper {
  margin-bottom: clamp(32px, 4vw, 48px);
  position: relative;
  cursor: pointer;
  transition: all var(--pdp-transition-normal) ease;
}

/* Rating wrapper hover - Slight lift on hover */
.pdp-rating-wrapper:hover {
  transform: translateY(-2px);
}

/* Simple rating container - Flexbox layout for rating elements */
.pdp-simple-rating {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 16px);
  margin-bottom: clamp(24px, 3vw, 32px);
  cursor: pointer;
}

/* Premium rating style - Gradient background card with border */
.pdp-simple-rating.pdp-rating--premium {
  background: linear-gradient(135deg,
    rgba(var(--pdp-primary-rgb), 0.03) 0%,
    rgba(var(--pdp-primary-rgb), 0.01) 100%);
  border: 1px solid rgba(var(--pdp-primary-rgb), 0.15);
  border-radius: var(--pdp-radius-xl);
  padding: clamp(24px, 3vw, 32px);
  position: relative;
  transition: all var(--pdp-transition-normal) ease;
}

/* Premium rating hover - Enhanced border and shadow */
.pdp-simple-rating.pdp-rating--premium:hover {
  border-color: rgba(var(--pdp-primary-rgb), 0.4);
  box-shadow: 0 6px 20px rgba(var(--pdp-primary-rgb), 0.15);
  transform: translateY(-2px);
  background: linear-gradient(135deg,
    rgba(var(--pdp-primary-rgb), 0.06) 0%,
    rgba(var(--pdp-primary-rgb), 0.02) 100%);
}

/* Rating content - Layout for score, stars, count */
.pdp-rating-content {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  position: relative;
}

/* Rating score - Large numerical score with gradient text */
.pdp-rating-score {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: var(--pdp-font-bold);
  background: linear-gradient(135deg, var(--pdp-primary), var(--pdp-primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px;
}

/* Rating stars container - Inline flex for star icons */
.pdp-rating-stars {
  font-size: clamp(18px, 2vw, 22px);
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* Rating count button - Clickable review count with dotted underline */
.pdp-rating-count {
  background: none;
  border: none;
  color: var(--pdp-text-muted);
  font-size: var(--pdp-text-md);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  transition: all var(--pdp-transition-fast) ease;
  padding: clamp(8px, 1vw, 12px) clamp(8px, 1vw, 12px);
  border-radius: var(--pdp-radius-sm);
}

/* Rating count hover - Primary color with solid underline */
.pdp-rating-count:hover {
  color: var(--pdp-primary);
  background: rgba(var(--pdp-primary-rgb), 0.05);
  transform: translateX(2px);
  text-decoration-style: solid;
}

/* ────────────────────────────────────────────────────────
   SECTION 4.4: Star Styles & Animations
   ────────────────────────────────────────────────────────── */

/* Twinkling star animation - Subtle pulsing effect */
.star-twinkle {
  animation: twinkle 3s ease-in-out infinite;
  display: inline-block;
}

/* Filled star - Primary color with glow shadow */
.star-filled {
  color: var(--pdp-primary);
  text-shadow: 0 0 10px rgba(var(--pdp-primary-rgb), 0.3);
}

/* Partial star container - For fractional ratings (e.g., 4.7 stars) */
.star-partial {
  position: relative;
  display: inline-block;
  color: var(--pdp-border);
}

/* Partial star fill - Clipped fill showing percentage of star */
.star-partial-fill {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  color: var(--pdp-primary);
  text-shadow: 0 0 10px rgba(var(--pdp-primary-rgb), 0.3);
}

/* Partial star empty background */
.star-partial-empty {
  color: var(--pdp-border);
}

/* Empty star - Gray unfilled star */
.star-empty {
  color: var(--pdp-border);
}

/* Filled stars container - Primary colored stars */
.stars-filled {
  color: var(--pdp-primary);
}

/* Empty stars container - Light gray stars */
.stars-empty {
  color: var(--pdp-gray-200);
}

/* Stars container - Inline flex for star alignment */
.stars-container {
  display: inline-flex;
  font-size: 20px;
}

/* ────────────────────────────────────────────────────────
   SECTION 4.5: Rating Tooltip & Distribution
   ────────────────────────────────────────────────────────── */

/* Rating tooltip - Hoverable popup showing rating breakdown */
.pdp-rating-tooltip {
  position: absolute;
  bottom: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--pdp-white);
  border: 1px solid var(--pdp-border);
  border-radius: var(--pdp-radius-lg);
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  opacity: 0;
  visibility: hidden;
  transition: all var(--pdp-transition-fast) ease;
  z-index: 1000;
  min-width: 220px;
  pointer-events: none;
}

/* Tooltip visible on rating hover */
.pdp-simple-rating:hover .pdp-rating-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

/* Tooltip arrow - Downward pointing triangle */
.pdp-tooltip-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--pdp-white);
  border-right: 1px solid var(--pdp-border);
  border-bottom: 1px solid var(--pdp-border);
}

/* ────────────────────────────────────────────────────────
   SECTION 4.6: Review Button
   ────────────────────────────────────────────────────────── */

/* Review button - CTA to view all reviews with pulse animation */
.pdp-review-button {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.5vw, 6px);
  padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 24px);
  background: var(--pdp-primary);
  color: var(--pdp-white);
  border: none;
  border-radius: 20px;
  font-size: var(--pdp-text-sm);
  font-weight: var(--pdp-font-semibold);
  cursor: pointer;
  transition: all var(--pdp-transition-normal) ease;
  margin-left: auto;
  text-decoration: none;
  animation: subtlePulse 3s ease-in-out infinite;
}

/* Review button hover - Darkens and lifts */
.pdp-review-button:hover {
  background: var(--pdp-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--pdp-primary-rgb), 0.25);
  animation: none;
}

/* Review button icon - Animated arrow on hover */
.pdp-review-button svg {
  width: 14px;
  height: 14px;
  transition: transform var(--pdp-transition-normal) ease;
}

/* Review button icon hover - Bounces down */
.pdp-review-button:hover svg {
  transform: translateY(2px);
}

/* Subtle pulse animation for review button */
@keyframes subtlePulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(var(--pdp-primary-rgb), 0.2);
  }
  50% {
    box-shadow: 0 2px 16px rgba(var(--pdp-primary-rgb), 0.35);
  }
}

/* Tooltip row - Single star rating row in tooltip */
.pdp-tooltip-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  margin-bottom: clamp(4px, 0.5vw, 6px);
}

/* Last tooltip row - No margin */
.pdp-tooltip-row:last-child {
  margin-bottom: 0;
}

/* Tooltip star label - Star count (5⭐, 4⭐, etc.) */
.pdp-tooltip-star {
  color: var(--pdp-primary);
  font-size: var(--pdp-text-base);
  width: 30px;
}

/* Tooltip progress bar track */
.pdp-tooltip-bar {
  flex: 1;
  height: 4px;
  background: var(--pdp-surface);
  border-radius: 2px;
  overflow: hidden;
}

/* Tooltip progress bar fill - Shows percentage of reviews */
.pdp-tooltip-fill {
  height: 100%;
  background: var(--pdp-primary);
  border-radius: 2px;
  transition: width var(--pdp-transition-normal) ease;
}

/* Tooltip percentage - Numerical percentage */
.pdp-tooltip-percent {
  font-size: var(--pdp-text-xs);
  color: var(--pdp-text-muted);
  width: 35px;
  text-align: right;
}

/* ────────────────────────────────────────────────────────
   SECTION 4.7: Rating Badges
   ────────────────────────────────────────────────────────── */

/* Rating badges container - Row of verification badges */
.pdp-rating-badges {
  display: flex;
  gap: clamp(12px, 1.5vw, 16px);
  margin-top: clamp(12px, 1.5vw, 16px);
}

/* Individual rating badge - Pill-shaped badge */
.pdp-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.5vw, 6px);
  padding: clamp(8px, 1vw, 12px) clamp(12px, 1.5vw, 16px);
  border-radius: 20px;
  font-size: var(--pdp-text-xs);
  font-weight: var(--pdp-font-medium);
}

/* Verified badge - Green verification badge */
.pdp-badge--verified {
  background: rgba(var(--pdp-success-rgb, 16,185,129), 0.1);
  color: var(--pdp-success, #10b981);
}

/* Recommended badge - Primary colored recommendation badge */
.pdp-badge--recommended {
  background: rgba(var(--pdp-primary-rgb), 0.08);
  color: var(--pdp-primary);
}

/* ────────────────────────────────────────────────────────
   SECTION 4.8: Price Section
   ────────────────────────────────────────────────────────

   [INFO] Price section displays current price, compare-at price
   (struck through), and discount percentage badge. Compact design
   with moderate sizing and reduced spacing.
   ────────────────────────────────────────────────────────── */

/* Price section wrapper */
.pdp-price-section {
  margin-bottom: 16px;
  padding: 0;
}

/* Premium price section variant */
.pdp-price-section--premium {
  margin-bottom: 24px;
  padding: 0;
}

/* Price container - Flexbox layout for price elements */
.pdp-price-section--premium .pdp-price-container,
.pdp-price-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Current price - Bold, prominent */
.pdp-price-section--premium #pdp-price-current,
#pdp-price-current {
  font-size: 28px !important;
  font-weight: var(--pdp-font-bold) !important;
  color: #000 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
}

/* Compare price - Struck through, clearly secondary */
.pdp-price-section--premium #pdp-price-compare,
#pdp-price-compare {
  font-size: 16px !important;
  color: var(--pdp-gray-500) !important;
  text-decoration: line-through !important;
  line-height: 1.3 !important;
}

/* Discount badge - Brand-colored pill with tag icon (e.g., "SAVE 30%") */
.pdp-price-section--premium #pdp-price-badge,
#pdp-price-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 10px !important;
  background-color: rgba(var(--pdp-primary-rgb), 0.12) !important;
  color: var(--pdp-primary) !important;
  border-radius: 50px !important;
  font-size: 12px !important;
  font-weight: var(--pdp-font-semibold) !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
}

/* Tag icon inside main price badge */
#pdp-price-badge .pdp-badge-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────
   SECTION 4.9: Product Highlights (REMOVED - using bullets system)
   ────────────────────────────────────────────────────────

   [DEPRECATED] Old grid-based highlight system removed in favor
   of .pdp-bullets-section (see SECTION 4.21). The new bullets system
   uses circular SVG checkmark icons styled with theme color in a
   gradient container with left border accent.
   ────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────
   SECTION 4.10: Variant Selectors
   ────────────────────────────────────────────────────────

   [INFO] Variant selectors support 6 product types:
   1. Clothing (size + quantity)
   2. Bundle (quantity only)
   3. Mix-bundle (choose N sizes)
   4. Simple-volume (volume selector)
   5. Simple-quantity (quantity pills)
   6. Simple-size (size pills only)
   ────────────────────────────────────────────────────────── */

/* Variants container */
.pdp-variants {
  margin-bottom: clamp(24px, 3vw, 32px);
}

/* Variants label - Uppercase section heading */
.pdp-variants-label {
  display: block;
  margin-bottom: clamp(12px, 1.5vw, 16px);
  font-weight: var(--pdp-font-semibold);
  font-size: var(--pdp-text-base);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Size-quantity variants - Stacked size and quantity selectors */
.pdp-variants--size-quantity {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 32px);
}

/* Size selector container */
.pdp-variant-size-selector {
  /* Size selector container */
}

/* Size buttons row - Horizontal flex layout */
.pdp-variant-size-buttons {
  display: flex;
  gap: clamp(12px, 1.5vw, 16px);
  flex-wrap: wrap;
}

/* Individual size button - Pill-shaped size selector (S, M, L, XL) */
.pdp-variant-size-button {
  min-width: 60px;
  padding: clamp(12px, 1.5vw, 16px) clamp(16px, 2vw, 24px);
  background: var(--pdp-white);
  border: 2px solid var(--pdp-border);
  border-radius: var(--pdp-radius-lg);
  font-size: var(--pdp-text-md);
  font-weight: var(--pdp-font-semibold);
  cursor: pointer;
  transition: all var(--pdp-transition-base);
  text-align: center;
}

/* Size button hover - Lift only */
.pdp-variant-size-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* Selected size button - Filled with primary color */
.pdp-variant-size-button.selected {
  background: var(--pdp-primary);
  color: var(--pdp-white);
}

/* ────────────────────────────────────────────────────────
   SECTION 4.11: Quantity Selector Cards
   ────────────────────────────────────────────────────────── */

/* Quantity selector container - Animated slide-down entrance */
.pdp-quantity-selector {
  animation: slideDown 0.3s ease;
}

/* Quantity cards grid - Responsive auto-fit grid */
.pdp-quantity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(12px, 1.5vw, 16px);
}

/* Individual quantity card - Selectable card with pricing */
.pdp-quantity-card {
  position: relative;
  padding: clamp(16px, 2vw, 24px);
  background: var(--pdp-white);
  border: 2px solid var(--pdp-border);
  border-radius: var(--pdp-radius-lg);
  text-align: center;
  cursor: pointer;
  animation: amountCardEntrance 0.6s var(--pdp-ease-soft-elastic) backwards;
  transition:
    transform 0.4s var(--pdp-ease-magnetic),
    border-color 0.5s var(--pdp-ease-buttery),
    background 0.6s var(--pdp-ease-gentle),
    box-shadow 0.3s var(--pdp-ease-gentle);
}

/* Stagger entrance delays */
.pdp-quantity-card:nth-child(1) { animation-delay: 0ms; }
.pdp-quantity-card:nth-child(2) { animation-delay: 80ms; }
.pdp-quantity-card:nth-child(3) { animation-delay: 160ms; }
.pdp-quantity-card:nth-child(4) { animation-delay: 240ms; }

/* Premium hover - Magnetic lift */
.pdp-quantity-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--pdp-primary);
  box-shadow:
    0 12px 32px rgba(var(--pdp-primary-rgb), 0.15),
    0 4px 12px rgba(0,0,0,0.08);
}

/* Selected state - Warm gradient glow */
.pdp-quantity-card.selected {
  border-color: var(--pdp-primary);
  background: linear-gradient(135deg,
    rgba(var(--pdp-primary-rgb), 0.08),
    rgba(var(--pdp-secondary-rgb), 0.4));
  box-shadow:
    0 0 0 3px rgba(var(--pdp-primary-rgb), 0.2),
    0 6px 16px rgba(var(--pdp-primary-rgb), 0.25);
  animation: selectionPulse 1.5s var(--pdp-ease-gentle) 1;
}

/* Bestseller - Golden highlight with continuous pulse */
.pdp-card--bestseller {
  transform: scale(1.05);
  border-color: var(--pdp-warning);
  background: linear-gradient(135deg,
    rgba(245, 158, 11, 0.12),
    var(--pdp-white));
  animation: trustBadgeBreathe 4s var(--pdp-ease-gentle) infinite;
}

/* Card badge - Corner badge (BESTSELLER, SALE) */
.pdp-card-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: clamp(8px, 1vw, 12px) clamp(12px, 1.5vw, 16px);
  background: var(--pdp-danger);
  color: var(--pdp-white);
  font-size: 10px;
  font-weight: var(--pdp-font-bold);
  border-radius: var(--pdp-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Bestseller badge - Primary gradient */
.pdp-badge--bestseller {
  background: linear-gradient(135deg, var(--pdp-primary), var(--pdp-primary-dark));
}

/* Sale badge - Danger red */
.pdp-badge--sale {
  background: var(--pdp-danger);
}

/* Discount Badge */
.pdp-badge--discount {
  padding: 4px 8px;
  white-space: nowrap;
  color: var(--pdp-primary);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border-radius: 4px;
  background-color: rgba(var(--pdp-primary-rgb), 0.12);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Card quantity - Large quantity text (e.g., "3 PAIRS") */
.pdp-card-quantity {
  font-size: var(--pdp-text-xl);
  font-weight: var(--pdp-font-bold);
  margin-bottom: clamp(8px, 1vw, 12px);
}

/* Variant Card Subtitle */
.pdp-card-subtitle {
  font-size: 12px;
  color: var(--pdp-text-muted);
  font-weight: 400;
  margin-top: 4px;
  line-height: 1.4;
  text-align: center;
}


/* Card prices container - Current and compare prices */
.pdp-card-prices {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  margin-bottom: clamp(4px, 0.5vw, 6px);
}

/* Card current price */
.pdp-card-price {
  font-size: var(--pdp-text-lg) !important;
  font-weight: var(--pdp-font-semibold) !important;
}

/* Card compare price - Struck through */
.pdp-card-compare {
  font-size: var(--pdp-text-base) !important;
  color: var(--pdp-text-muted) !important;
  text-decoration: line-through !important;
}

/* Card savings text - Green savings label */
.pdp-card-save {
  font-size: var(--pdp-text-xs);
  color: var(--pdp-success);
  font-weight: var(--pdp-font-medium);
}

/* ────────────────────────────────────────────────────────
   SECTION 4.12: Size Guide Link (Inline with Variant Label)
   ────────────────────────────────────────────────────────── */

/* Variant header row - Label left, Size guide right */
.pdp-variants-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: clamp(12px, 1.5vw, 16px);
}

/* Override label margin when inside header row (header controls spacing) */
.pdp-variants-header .pdp-variants-label {
  margin-bottom: 0;
}

/* Size guide container - Fallback for standalone use */
.pdp-variant-size-guide {
  margin-top: clamp(12px, 1.5vw, 16px);
  margin-bottom: 0;
  text-align: center;
}

/* Size guide link - Subtle inline style with icon */
.pdp-variant-size-guide-link {
  color: var(--pdp-gray-500);
  text-decoration: none;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: var(--pdp-font-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--pdp-transition-fast) ease;
  padding: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Size guide link hover - Brand color + underline */
.pdp-variant-size-guide-link:hover {
  color: var(--pdp-primary);
  text-decoration: underline;
}

/* Size guide icon */
.pdp-variant-size-guide-link svg {
  width: 12px;
  height: 12px;
  transition: inherit;
}

/* ── Size Chart Modal Content (renders inside modules/system/modal-manager.txt modal) ── */

/* Size table wrapper - Allows horizontal scrolling on small screens */
.pdp-variant-size-table-wrapper {
  overflow-x: auto;
  margin-bottom: clamp(24px, 3vw, 32px);
}

/* Size table - Full width table with collapsed borders */
.pdp-variant-size-table {
  width: 100%;
  border-collapse: collapse;
}

/* Size table cells - Centered text with padding and borders */
.pdp-variant-size-table th,
.pdp-variant-size-table td {
  padding: clamp(12px, 1.5vw, 16px);
  text-align: center;
  border: 1px solid var(--pdp-border);
}

/* Size table header - Secondary color background */
.pdp-variant-size-table thead th {
  background: rgba(var(--pdp-secondary-rgb), 0.15);
  font-weight: 600;
  color: var(--pdp-text);
}

/* Size table first column - Left-aligned size labels */
.pdp-variant-size-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
}

/* Size tips container - Gradient background with secondary color */
.pdp-variant-size-tips {
  padding: clamp(24px, 3vw, 32px);
  background: linear-gradient(135deg,
    var(--pdp-secondary) 0%,
    rgba(var(--pdp-secondary-rgb), 0.2) 100%);
  border-radius: 12px;
  border: 1px solid rgba(var(--pdp-secondary-rgb), 0.3);
}

/* Size tips heading */
.pdp-variant-size-tips h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 clamp(12px, 1.5vw, 16px) 0;
}

/* Size tips list */
.pdp-variant-size-tips ul {
  margin: 0;
  padding-left: clamp(16px, 2vw, 24px);
}

/* Size tips list items */
.pdp-variant-size-tips li {
  margin-bottom: clamp(8px, 1vw, 12px);
  font-size: 14px;
  color: var(--pdp-text-muted);
}

/* Size tips strong text */
.pdp-variant-size-tips strong {
  color: var(--pdp-text);
}

/* ────────────────────────────────────────────────────────
   SECTION 4.13: Add to Cart Section
   ────────────────────────────────────────────────────────── */

/* Add to cart section wrapper */
.pdp-add-section {
  margin-bottom: 0;
}

/* ────────────────────────────────────────────────────────
   SECTION 4.14: Trust Badges (Glassmorphism Style)
   ────────────────────────────────────────────────────────

   [INFO] Trust badges show security features (secure payment,
   free shipping, money-back guarantee) in premium glassmorphism
   cards with hover animations and shine effects.
   ────────────────────────────────────────────────────────── */

/* Trust section wrapper */
.pdp-trust-section {
  margin: 32px 0 20px 0;
  padding: 0;
  width: 100%;
}

/* Glassmorphism trust variant */
.pdp-trust--glassmorphism {
  width: 100%;
}

/* Trust container - 4-column grid */
.pdp-trust--glassmorphism .pdp-trust-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
}

/* Individual trust card - Glassmorphism card with breathing animation */
.pdp-trust--glassmorphism .pdp-trust-card {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--pdp-primary-rgb), 0.15);
  border-radius: var(--pdp-radius-lg);
  padding: clamp(24px, 3vw, 32px) clamp(16px, 2vw, 24px);
  animation: trustBadgeBreathe 4s var(--pdp-ease-gentle) infinite;
  transition:
    transform 0.4s var(--pdp-ease-magnetic),
    box-shadow 0.3s var(--pdp-ease-gentle),
    background 0.4s var(--pdp-ease-buttery);
  overflow: hidden;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Trust card gradient overlay - Warm brand colors */
.pdp-trust--glassmorphism .pdp-trust-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--pdp-secondary-rgb), 0.15) 0%,
    transparent 50%,
    rgba(var(--pdp-primary-rgb), 0.08) 100%
  );
  z-index: 0;
}

/* Trust card hover gradient - Enhanced warm gradient */
.pdp-trust--glassmorphism .pdp-trust-card:hover::before {
  background: linear-gradient(
    135deg,
    rgba(var(--pdp-secondary-rgb), 0.2) 0%,
    rgba(var(--pdp-primary-rgb), 0.08) 50%,
    rgba(var(--pdp-primary-rgb), 0.12) 100%
  );
}

/* Premium hover - Enhanced lift, stop breathing animation */
.pdp-trust--glassmorphism .pdp-trust-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 16px 32px rgba(var(--pdp-primary-rgb), 0.15),
    0 0 0 2px rgba(var(--pdp-primary-rgb), 0.25);
  background: var(--pdp-white);
  border-color: var(--pdp-primary);
  animation: none;
}

/* Trust icon wrapper */
.pdp-trust--glassmorphism .pdp-trust-icon-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
  margin-bottom: clamp(12px, 1.5vw, 16px);
  z-index: 1;
}

/* Trust icon - Circular gradient icon with enhanced shadow */
.pdp-trust--glassmorphism .pdp-trust-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg,
    var(--pdp-primary),
    var(--pdp-primary-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-white);
  transition: all var(--pdp-transition-normal) ease;
  box-shadow: 0 4px 12px rgba(var(--pdp-primary-rgb), 0.25);
}

/* Icon float animation on hover - Gentle rotation + movement */
.pdp-trust--glassmorphism .pdp-trust-card:hover .pdp-trust-icon {
  animation: iconFloat 2s var(--pdp-ease-buttery) infinite;
  box-shadow: 0 6px 16px rgba(var(--pdp-primary-rgb), 0.35);
}

/* Trust icon SVG sizing */
.pdp-trust--glassmorphism .pdp-trust-icon svg {
  width: 24px;
  height: 24px;
}

/* Trust content wrapper */
.pdp-trust--glassmorphism .pdp-trust-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Trust title - Bold feature title */
.pdp-trust--glassmorphism .pdp-trust-title {
  font-size: var(--pdp-text-base);
  font-weight: var(--pdp-font-semibold);
  color: var(--pdp-text);
  margin: 0 0 6px 0;
  line-height: 1.3;
}

/* Trust description - Muted feature description */
.pdp-trust--glassmorphism .pdp-trust-desc {
  font-size: var(--pdp-text-xs);
  color: var(--pdp-text-muted);
  margin: 0;
  line-height: 1.4;
  opacity: 0.9;
}

/* Trust shine effect - Diagonal shine animation on hover */
.pdp-trust--glassmorphism .pdp-trust-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.5) 50%,
    transparent 70%
  );
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.6s ease;
  z-index: 2;
  pointer-events: none;
}

/* Shine animation on trust card hover */
.pdp-trust--glassmorphism .pdp-trust-card:hover .pdp-trust-shine {
  transform: rotate(45deg) translateX(100%);
}

/* ────────────────────────────────────────────────────────
   SECTION 4.14b: Trust Section — Tier 1 (Sociale bewijs-bar)
   ────────────────────────────────────────────────────────── */

/* Sociale bewijs-bar — full-width balk boven feature badges */
.pdp-trust-social-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(10px, 1.5vw, 14px) clamp(16px, 2vw, 24px);
  margin-bottom: clamp(16px, 2vw, 20px);
  background: linear-gradient(
    135deg,
    rgba(var(--pdp-primary-rgb), 0.06) 0%,
    rgba(var(--pdp-secondary-rgb), 0.12) 100%
  );
  border: 1px solid rgba(var(--pdp-primary-rgb), 0.12);
  border-radius: var(--pdp-radius-lg);
  flex-wrap: wrap;
}

/* Enkel sociale bewijs-item (icoon + tekst) */
.pdp-trust-social-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sociale bewijs-icoon */
.pdp-trust-social-icon {
  display: flex;
  align-items: center;
  color: var(--pdp-primary);
  flex-shrink: 0;
}

/* Sociale bewijs-tekst */
.pdp-trust-social-text {
  font-size: 13px;
  color: var(--pdp-text);
  line-height: 1.3;
}

.pdp-trust-social-text strong {
  font-weight: 700;
  color: var(--pdp-primary);
}


/* ────────────────────────────────────────────────────────
   SECTION 4.16: Payment Icons Section (CLEAN - No effects)
   ────────────────────────────────────────────────────────── */

/* Payment section - Directly below cart button */
.pdp-payment-section {
  margin-top: 20px;
  margin-bottom: 0;
}


/* Payment icons row - Better spacing */
.pdp-payment-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Individual payment icon - Simple, no effects */
.pdp-payment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Payment icon image - Sized via config (CSS custom properties from JS) */
.pdp-payment-icon img {
  width: var(--pdp-icon-w, 24px);
  height: var(--pdp-icon-h, 24px);
  object-fit: contain;
  display: block;
}

/* ────────────────────────────────────────────────────────
   SECTION 4.17: Product Specifications Accordion
   ────────────────────────────────────────────────────────

   [INFO] Collapsible accordion showing product specifications
   like materials, care instructions, dimensions. Toggles open/
   close with animated chevron rotation.
   ────────────────────────────────────────────────────────── */

/* Specifications wrapper */
.pdp-specifications {
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* Specifications toggle button - Clickable accordion header */
.pdp-specifications-toggle {
  width: 100%;
  padding: clamp(16px, 2vw, 24px);
  background: var(--pdp-surface);
  border: 1px solid var(--pdp-border);
  border-radius: var(--pdp-radius-lg);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--pdp-text-md);
  font-weight: var(--pdp-font-semibold);
  transition: all var(--pdp-transition-fast);
}

/* Specifications toggle hover - White background with primary border */
.pdp-specifications-toggle:hover {
  background: var(--pdp-white);
  border-color: var(--pdp-primary);
}

/* Specifications toggle chevron rotation when expanded */
.pdp-specifications-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Specifications toggle chevron animation */
.pdp-specifications-toggle svg {
  transition: transform var(--pdp-transition-base);
}

/* Specifications content - Expandable content area */
.pdp-specifications-content {
  margin-top: clamp(12px, 1.5vw, 16px);
  padding: clamp(16px, 2vw, 24px);
  background: var(--pdp-white);
  border: 1px solid var(--pdp-border);
  border-radius: var(--pdp-radius-lg);
}

/* Specifications group - Category of specs */
.pdp-specifications-group {
  margin-bottom: clamp(16px, 2vw, 24px);
}

/* Last specifications group - No margin */
.pdp-specifications-group:last-child {
  margin-bottom: 0;
}

/* Specifications group heading */
.pdp-specifications-group h4 {
  font-size: var(--pdp-text-sm);
  font-weight: var(--pdp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pdp-text-muted);
  margin: 0 0 clamp(12px, 1.5vw, 16px) 0;
}

/* Specification row - Label and value layout */
.pdp-spec-row {
  display: flex;
  padding: clamp(8px, 1vw, 12px) 0;
  border-bottom: 1px solid var(--pdp-surface);
}

/* Last specification row - No border */
.pdp-spec-row:last-child {
  border-bottom: none;
}

/* Specification label - Left column (40% width) */
.pdp-spec-row dt {
  flex: 0 0 40%;
  font-size: var(--pdp-text-base);
  color: var(--pdp-text-muted);
}

/* Specification value - Right column (60% width) */
.pdp-spec-row dd {
  flex: 1;
  margin: 0;
  font-size: var(--pdp-text-base);
  font-weight: var(--pdp-font-medium);
}
/* ============================================================
   TAB SYSTEM STYLING
   ============================================================ */

/* Tab system container */
.pdp-details-section {
  margin-top: clamp(32px, 4vw, 48px);
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* Tabs wrapper */
.pdp-tabs-container {
  border: 1px solid var(--pdp-border, #e5e7eb);
  border-radius: var(--pdp-radius-lg);
  overflow: hidden;
  background: var(--pdp-white);
}

/* Tab headers container */
.pdp-tab-headers {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--pdp-border, #e5e7eb);
  background: var(--pdp-bg-secondary, #f9fafb);
}

/* Individual tab header button */
.pdp-tab-header {
  flex: 1;
  padding: clamp(16px, 2vw, 24px) clamp(24px, 3vw, 32px);
  background: transparent;
  border: none;
  border-right: 1px solid var(--pdp-border, #e5e7eb);
  cursor: pointer;
  font-size: var(--pdp-text-base);
  font-weight: var(--pdp-font-medium);
  color: var(--pdp-text-secondary, #6b7280);
  transition: all var(--pdp-transition-fast) ease;
  position: relative;
  text-align: center;
}

.pdp-tab-header:last-child {
  border-right: none;
}

.pdp-tab-header:hover {
  background: var(--pdp-bg-hover, #f3f4f6);
  color: var(--pdp-text-primary, #111827);
}

.pdp-tab-header.active {
  background: var(--pdp-white);
  color: var(--pdp-primary, #d16838);
  font-weight: var(--pdp-font-semibold);
}

.pdp-tab-header.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pdp-primary, #d16838);
}

/* Tab panels container */
.pdp-tab-panels {
  background: var(--pdp-white);
}

/* Individual tab panel */
.pdp-tab-panel {
  display: none;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.pdp-tab-panel.active {
  display: block;
  max-height: 1000px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tab content */
.pdp-tab-content {
  padding: clamp(24px, 3vw, 32px);
}

/* Tab content lists */
.pdp-details-list,
.pdp-materials-list,
.pdp-care-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pdp-details-list li,
.pdp-materials-list li,
.pdp-care-list li {
  padding: clamp(12px, 1.5vw, 16px) 0;
  border-bottom: 1px solid var(--pdp-border, #e5e7eb);
  line-height: 1.6;
}

.pdp-details-list li:last-child,
.pdp-materials-list li:last-child,
.pdp-care-list li:last-child {
  border-bottom: none;
}


/* ────────────────────────────────────────────────────────
   SECTION 4.20: MINIMAL RATING (ADDITION)
   ──────────────────────────────────────────────────────── */

/* Minimal rating wrapper - Compact clickable rating display */
.pdp-rating-wrapper-minimal {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.pdp-rating-wrapper-minimal:hover {
  opacity: 0.8;
}

/* Minimal stars container */
.pdp-rating-stars-minimal {
  display: flex;
  gap: 1px;
}

/* Minimal star - Small meta-level size */
.pdp-star-minimal {
  font-size: 14px;
  line-height: 1;
}

.pdp-star-full {
  color: #fbbf24; /* Gold color - matches reviews section */
}

.pdp-star-half {
  color: #fbbf24; /* Gold color - matches reviews section */
  opacity: 0.5;
}

.pdp-star-empty {
  color: #d1d5db; /* Light gray - matches reviews section */
}

/* Rating text - Meta-level, smaller than body text */
.pdp-rating-text-minimal {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
}

/* Divider */
.pdp-rating-divider-minimal {
  font-size: var(--pdp-text-md);
  color: var(--pdp-text-muted);
}

/* Review count */
.pdp-rating-count-minimal {
  font-size: var(--pdp-text-md);
  color: var(--pdp-text-muted);
}

/* ────────────────────────────────────────────────────────
   SECTION 4.21: BULLETS SECTION
   ──────────────────────────────────────────────────────── */

/* Bullets section wrapper - Compact design without background */
.pdp-bullets-section {
  margin: 0 0 24px 0;
  padding: 0;
  background: none;
  border-left: none;
  border-radius: 0;
}

/* Bullet list container - Single column layout */
.pdp-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Bullet item - Horizontal flex layout */
.pdp-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Bullet icon - Badge SVG with primary color */
.pdp-bullet-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--pdp-primary);
}

/* Bullet icon SVG - Supports both fill and stroke */
.pdp-bullet-icon svg {
  width: 16px;
  height: 16px;
  fill: var(--pdp-primary);
  stroke: var(--pdp-primary);
}

/* Bullet text - Standard body size */
.pdp-bullet-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--pdp-text);
  font-weight: 400;
  padding-top: 0;
}

/* ────────────────────────────────────────────────────────
   SECTION 4.22: BUTTON DISABLED STATE
   ──────────────────────────────────────────────────────── */

/* Disabled add-to-cart button */
.pdp-button-disabled {
  background: #e5e7eb !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

.pdp-button-disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ────────────────────────────────────────────────────────
   SECTION 4.23: TEXT ALIGNMENT OVERRIDES
   ────────────────────────────────────────────────────────

   [INFO] Forces left-alignment on product info containers
   and text elements to prevent external CSS (host page theme)
   from centering content. Uses !important to override any
   external styles.

   [NOTE] Elements that SHOULD remain centered (buttons, cards,
   payment icons) are NOT included in this override.
   ────────────────────────────────────────────────────────── */

/* Product Info Containers - Force left alignment */
.pdp-info-container,
.pdp-info-content,
.pdp-variants,
.pdp-variant-size-selector,
.pdp-add-section,
.pdp-specifications,
.pdp-specifications-content,
.pdp-trust-section {
  text-align: left !important;
}

/* Size guide - Centered */

/* Text Elements - Force left alignment */
.pdp-title,
.pdp-subtitle,
.pdp-variants-label,
.pdp-specifications-toggle,
.pdp-spec-row dt,
.pdp-spec-row dd {
  text-align: left !important;
}

/* Highlights Grid - Force left alignment for text content */
.pdp-highlights,
.pdp-highlight,
.pdp-highlight-content {
  text-align: left !important;
}

/* Bullets Section - Force left alignment */
.pdp-bullets-section,
.pdp-bullet-list,
.pdp-bullet-item,
.pdp-bullet-text {
  text-align: left !important;
}

/* Tab System - Force left alignment for content */
.pdp-tab-content,
.pdp-details-list,
.pdp-materials-list,
.pdp-care-list {
  text-align: left !important;
}

/* ────────────────────────────────────────────────────────
   SECTION 4.24: HORIZONTAL RADIO VARIANT CARDS
   ────────────────────────────────────────────────────────

   [INFO] Unified horizontal radio card system for ALL 5 product types.
   Card layout: image (optional) + radio circle + title + inline discount pill + right-aligned pricing.
   Custom badge sits on card border (top-right, overlapping).
   Dropdowns expand with smooth slide-down/fade-in animation.
   Used by renderHorizontalRadioCards() unified renderer.
   ────────────────────────────────────────────────────────── */

/* --- Base Badge System --- */
.pdp-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

.pdp-badge--dark {
  background: #202329;
  color: #ffffff;
}

.pdp-badge--primary {
  background: var(--pdp-primary);
  color: #ffffff;
}

.pdp-badge--red {
  background: #dc2626;
  color: #ffffff;
}

.pdp-badge--light {
  background: #f3f4f6;
  color: #374151;
}

.pdp-badge--discount {
  background-color: rgba(var(--pdp-primary-rgb), 0.12);
  color: var(--pdp-primary);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

/* --- Horizontal Radio Container --- */
.pdp-variants--horizontal-radio {
  margin-bottom: 24px;
}

.pdp-variant-radio-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Individual Radio Card --- */
.pdp-variant-radio-card {
  display: block;
  position: relative;
  background: var(--pdp-white);
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

/* Hover state - Subtle border change, no transform/lift */
.pdp-variant-radio-card:hover {
  border-color: #d1d5db;
}

/* Selected state - Subtle gradient with theme colors */
.pdp-variant-radio-card.selected,
.pdp-variant-radio-card:has(.pdp-variant-radio-input:checked) {
  border-color: var(--pdp-primary);
  background: linear-gradient(
    to bottom,
    rgba(var(--pdp-primary-rgb), 0.06) 0%,
    rgba(var(--pdp-secondary-rgb), 0.18) 100%
  );
  box-shadow: 0 0 0 1px var(--pdp-primary);
}

/* --- Badge on Card Border (top-right, overlapping) --- */
.pdp-variant-radio-card-badge {
  position: absolute;
  top: 0;
  right: 8px;
  transform: translateY(-50%);
  z-index: 1;
}

/* Hidden radio input */
.pdp-variant-radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* --- Card Content (flex row) --- */
.pdp-variant-radio-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- Optional Image (left) --- */
.pdp-variant-radio-image {
  flex-shrink: 0;
}

.pdp-variant-radio-image img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}

/* --- Header (radio circle + text, flex: 1) --- */
.pdp-variant-radio-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* --- Text Wrapper --- */
.pdp-variant-radio-text {
  flex: 1;
  min-width: 0;
}

/* Title row (title + inline discount pill) */
.pdp-variant-radio-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Title */
.pdp-variant-radio-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--pdp-text);
  line-height: 1.3;
}

/* Subtitle */
.pdp-variant-radio-subtitle {
  font-size: 13px;
  color: var(--pdp-text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

/* --- Pricing (right-aligned) --- */
.pdp-variant-radio-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
}

/* Current price */
.pdp-variant-radio-price-current {
  font-size: 18px;
  font-weight: 700;
  color: var(--pdp-text);
  line-height: 1.2;
}

/* Compare price (strikethrough) */
.pdp-variant-radio-price-compare {
  font-size: 13px;
  font-weight: 400;
  color: var(--pdp-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin-top: 2px;
}

/* Per-unit price */
.pdp-variant-radio-per-unit {
  font-size: 12px;
  color: var(--pdp-text-muted);
  margin-top: 2px;
}

/* Per-unit pricing on vertical cards */
.pdp-card-per-unit {
  font-size: clamp(11px, 1.2vw, 13px);
  color: var(--pdp-text-muted);
  margin-top: 2px;
}

/* Per-unit pricing on mini PDP vertical cards (recommendations modal) */
.pdp-mini-card-per-unit {
  font-size: clamp(10px, 1.1vw, 12px);
  color: var(--pdp-text-muted);
  margin-top: 2px;
}

/* --- Expandable Dropdowns (slide-down + fade-in animation) --- */
.pdp-variant-radio-dropdowns {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
}

.pdp-variant-radio-dropdowns.pdp-expanded {
  max-height: 300px;
  opacity: 1;
  margin-top: 12px;
  padding-top: 12px;
  border-top-color: var(--pdp-border);
}

/* --- Size Row (label + pill boxes) --- */
.pdp-radio-size-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.pdp-radio-size-row:last-child {
  margin-bottom: 0;
}

/* Size label */
.pdp-radio-size-label {
  min-width: 50px;
  font-weight: 700;
  font-size: 13px;
  color: var(--pdp-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Size Pills Container --- */
.pdp-radio-size-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* --- Individual Size Pill --- */
.pdp-radio-size-pill {
  min-width: 42px;
  height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pdp-white);
  border: 2px solid var(--pdp-border, #e5e7eb);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pdp-text);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.pdp-radio-size-pill:hover {
  border-color: var(--pdp-primary);
  background: rgba(var(--pdp-primary-rgb), 0.04);
}

.pdp-radio-size-pill.selected {
  border-color: var(--pdp-primary);
  background: rgba(var(--pdp-primary-rgb), 0.1);
  color: var(--pdp-primary);
  box-shadow: 0 0 0 1px var(--pdp-primary);
}

/* --- Radio Group (for size-quantity cards inside quantity selector) --- */
.pdp-variant-radio-group .pdp-variants--horizontal-radio {
  margin-bottom: 0;
}


/* ============================================================
   SHIPPING INFO STRIP
   ============================================================ */

.pdp-shipping-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 14px 0;
  padding: 10px 0;
  border-top: 1px solid var(--pdp-border, #e5e7eb);
  border-bottom: 1px solid var(--pdp-border, #e5e7eb);
}

.pdp-shipping-strip--animate {
  animation: fadeIn 0.4s ease-out;
}

.pdp-shipping-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border-right: 1px solid var(--pdp-border, #e5e7eb);
}

.pdp-shipping-item:last-child {
  border-right: none;
}

.pdp-shipping-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--pdp-primary);
}

.pdp-shipping-icon svg {
  width: 15px;
  height: 15px;
}

.pdp-shipping-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pdp-shipping-flag svg {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.pdp-shipping-text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--pdp-text-muted, #6b7280);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.pdp-shipping-text strong {
  font-weight: 700;
  color: var(--pdp-text, #1f2937);
}

.pdp-shipping-indicator {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--pdp-success, #22c55e);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--pdp-success-rgb, 34, 197, 94), 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(var(--pdp-success-rgb, 34, 197, 94), 0);
  }
}


/* ============================================================
   URGENCY SECTION
   Single-line indicator below price
   ============================================================ */

.pdp-urgency {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  margin-bottom: 14px;
}

.pdp-urgency__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pdp-dot-pulse 2s ease-in-out infinite;
}

@keyframes pdp-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.pdp-urgency__text {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pdp-text, #1a1a1a);
  line-height: 1;
}

.pdp-urgency__text strong {
  font-weight: 700;
}

/* Timer variant */
.pdp-urgency--timer .pdp-urgency__dot {
  background: var(--pdp-primary, #d16839);
}
.pdp-urgency--timer .pdp-urgency__text strong {
  color: var(--pdp-primary, #d16839);
}

/* Stock variant */
.pdp-urgency--stock .pdp-urgency__dot {
  background: #c62828;
}
.pdp-urgency--stock .pdp-urgency__text strong {
  color: #c62828;
}

/* Viewers variant */
.pdp-urgency--viewers .pdp-urgency__dot {
  background: #2e7d32;
}
.pdp-urgency--viewers .pdp-urgency__text {
  color: var(--pdp-text-muted, #666);
}

/* ============================================================
   ACCORDION
   Compact collapsible panels below trust badges
   ============================================================ */

.pdp-accordion {
  border-top: 1px solid var(--pdp-border, #e5e5e5);
  margin-top: 14px;
}

.pdp-accordion__item {
  border-bottom: 1px solid var(--pdp-border, #e5e5e5);
}

.pdp-accordion__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}

.pdp-accordion__header:hover {
  color: var(--pdp-primary, #d16839);
}

.pdp-accordion__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--pdp-primary, #d16839);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-accordion__icon svg {
  width: 100%;
  height: 100%;
}

.pdp-accordion__title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.pdp-accordion__toggle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-accordion__toggle svg {
  width: 12px;
  height: 12px;
  color: var(--pdp-text-muted, #666);
  transition: transform .2s ease;
}

.pdp-accordion__item.is-open .pdp-accordion__toggle svg {
  transform: rotate(180deg);
}

.pdp-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease;
}

.pdp-accordion__item.is-open .pdp-accordion__body {
  grid-template-rows: 1fr;
}

.pdp-accordion__content {
  overflow: hidden;
}

.pdp-accordion__inner {
  padding: 0 0 14px 26px;
}

.pdp-accordion__intro {
  font-size: 12px;
  color: var(--pdp-text-muted, #666);
  line-height: 1.55;
  margin-bottom: 8px;
}

.pdp-accordion__bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.pdp-accordion__bullets li {
  font-size: 12px;
  line-height: 1.5;
  color: var(--pdp-text, #1a1a1a);
  padding-left: 14px;
  position: relative;
}

.pdp-accordion__bullets li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--pdp-primary, #d16839);
  font-weight: 700;
  font-size: 11px;
}

.pdp-accordion__bullets li strong {
  font-weight: 600;
}

.pdp-accordion__cutoff {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pdp-primary, #d16839);
}

/* ============================================================
   RESPONSIVE: Mobile (max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {
  .pdp-card-subtitle {
    font-size: 11px;
    margin-top: 2px;
  }

  .pdp-tab-headers {
    flex-direction: column;
  }

  .pdp-tab-header {
    border-right: none;
    border-bottom: 1px solid var(--pdp-border, #e5e7eb);
    text-align: left;
  }

  .pdp-tab-header:last-child {
    border-bottom: none;
  }

  .pdp-tab-content {
    padding: clamp(16px, 2vw, 24px);
  }

  /* --- Title --- */
  .pdp-title {
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
  }

  .pdp-title__brand {
    font-size: inherit;
  }

  /* --- Rating row --- */
  .pdp-rating-wrapper-minimal {
    margin-bottom: 8px;
    gap: 6px;
  }

  .pdp-rating-text-minimal {
    font-size: 12px;
    line-height: 1.3;
  }

  .pdp-star-minimal {
    font-size: 13px;
  }

  /* --- Price section --- */
  .pdp-price-section {
    margin-bottom: 12px;
  }

  .pdp-price-current {
    font-size: 22px;
    line-height: 1.2;
  }

  .pdp-price-compare {
    font-size: 14px;
  }

  .pdp-price-savings-tag {
    font-size: 11px;
    padding: 3px 8px;
  }

  /* --- Subtitle / description --- */
  .pdp-subtitle {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 10px;
    color: #6b7280;
  }

  /* --- Bullet benefits --- */
  .pdp-bullets-section {
    margin-bottom: 16px;
  }

  .pdp-bullet-list {
    gap: 6px;
  }

  .pdp-bullet-text {
    font-size: 13px;
    line-height: 1.45;
  }

  .pdp-bullet-icon {
    width: 15px;
    height: 15px;
    margin-top: 2px;
  }

  .pdp-bullet-icon svg {
    width: 15px;
    height: 15px;
  }

  /* --- Variant selector --- */
  .pdp-variants {
    margin-bottom: 20px;
  }

  .pdp-variants-label {
    font-size: 11px;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
  }

  /* --- Variant radio cards (767px) --- */
  .pdp-variant-radio-container {
    gap: 10px;
  }

  .pdp-variant-radio-card {
    padding: 14px;
  }

  .pdp-variant-radio-image img {
    width: 40px;
    height: 40px;
  }

  .pdp-variant-radio-title {
    font-size: 14px;
  }

  .pdp-variant-radio-subtitle {
    font-size: 12px;
  }

  .pdp-variant-radio-price-current {
    font-size: 16px;
  }

  .pdp-variant-radio-price-compare {
    font-size: 12px;
  }

  .pdp-variant-radio-per-unit {
    font-size: 11px;
  }

  /* --- Size guide (inline in variant header) --- */
  .pdp-variant-size-guide-link {
    font-size: 11px;
    gap: 3px;
  }

  .pdp-variant-size-guide-link svg {
    width: 11px;
    height: 11px;
  }

  /* --- Gift preview --- */
  .pdp-gift-preview {
    padding: 10px 12px;
    margin: 16px 0 12px 0;
    border-radius: 10px;
  }

  .pdp-gift-label {
    font-size: 11px;
    letter-spacing: 0.8px;
  }

  .pdp-gift-product-name {
    font-size: 13px;
  }

  .pdp-gift-worth {
    font-size: 11px;
  }

  .pdp-gift-threshold-text {
    font-size: 12px;
  }

  /* --- Shipping strip --- */
  .pdp-shipping-strip {
    margin: 0 0 14px 0;
    padding: 8px 0;
  }

  .pdp-shipping-text {
    font-size: 11px;
    line-height: 1.2;
  }

  /* --- Add to Cart button --- */
  .pdp-button--primary {
    font-size: 15px;
    padding: 16px 24px;
  }

  /* --- Payment icons --- */
  .pdp-payment-section {
    margin-top: 12px;
    margin-bottom: 16px;
  }

  .pdp-payment-icons {
    gap: 10px;
  }

  .pdp-payment-icon img {
    width: var(--pdp-icon-mw, 38px);
    height: var(--pdp-icon-mh, 38px);
  }

  /* --- Social proof bar --- */
  .pdp-trust-social-bar {
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    gap: 6px;
  }

  .pdp-trust-social-text {
    font-size: 12px;
    line-height: 1.4;
  }

  .pdp-trust-social-icon svg {
    width: 18px;
    height: 18px;
  }

  /* --- Trust cards 2x2 --- */
  .pdp-trust-section {
    margin: 0 0 16px 0;
  }

  .pdp-trust--glassmorphism .pdp-trust-card {
    padding: 14px 10px;
    min-height: 90px;
  }

  .pdp-trust--glassmorphism .pdp-trust-icon-wrapper {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
  }

  .pdp-trust--glassmorphism .pdp-trust-icon {
    width: 40px;
    height: 40px;
  }

  .pdp-trust--glassmorphism .pdp-trust-icon svg {
    width: 20px;
    height: 20px;
  }

  .pdp-trust--glassmorphism .pdp-trust-title {
    font-size: 11px;
    margin-bottom: 3px;
    line-height: 1.3;
  }

  .pdp-trust--glassmorphism .pdp-trust-desc {
    font-size: 10px;
    line-height: 1.4;
  }

  /* --- Accordion --- */
  .pdp-accordion {
    margin-top: 0;
  }

  .pdp-accordion__header {
    padding: 14px 0;
  }

  .pdp-accordion__title {
    font-size: 13px;
    letter-spacing: -0.01em;
  }

  .pdp-accordion__icon {
    width: 15px;
    height: 15px;
  }

  .pdp-accordion__intro {
    font-size: 12px;
    line-height: 1.4;
  }

  .pdp-accordion__bullets li {
    font-size: 12px;
    line-height: 1.5;
  }
}

/* ============================================================
   RESPONSIVE: Small Mobile (max-width: 479px)
   ============================================================ */

@media (max-width: 479px) {
  .pdp-trust-social-bar {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  /* Tighter card spacing */
  .pdp-variant-radio-container {
    gap: 8px;
  }

  .pdp-variant-radio-card {
    padding: 12px;
  }

  /* Keep single-row layout: [img] [title+sub] [pricing→] */
  .pdp-variant-radio-content {
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
  }

  .pdp-variant-radio-image img {
    width: 36px;
    height: 36px;
  }

  /* Header takes remaining space */
  .pdp-variant-radio-header {
    flex: 1;
    min-width: 0;
  }

  .pdp-variant-radio-title {
    font-size: 14px;
  }

  .pdp-variant-radio-subtitle {
    font-size: 11px;
  }

  /* Pricing stays right-aligned inline */
  .pdp-variant-radio-pricing {
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
  }

  .pdp-variant-radio-price-current {
    font-size: 15px;
  }

  .pdp-variant-radio-price-compare {
    font-size: 11px;
  }

  .pdp-variant-radio-per-unit {
    font-size: 10px;
  }

  /* Discount badge smaller */
  .pdp-variant-radio-title-row .pdp-badge--discount {
    font-size: 10px;
    padding: 2px 6px;
  }

  /* Size rows: horizontal (label + pills side by side) */
  .pdp-radio-size-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .pdp-radio-size-label {
    min-width: auto;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Compact size pills */
  .pdp-radio-size-pill {
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 6px;
  }

  /* Expandable dropdown tighter */
  .pdp-variant-radio-dropdowns.pdp-expanded {
    margin-top: 10px;
    padding-top: 10px;
  }
  .pdp-shipping-strip {
    padding: 8px 0;
    margin: 10px 0;
    flex-wrap: nowrap;
    gap: 0;
  }

  .pdp-shipping-item {
    padding: 0 6px;
    gap: 3px;
  }

  .pdp-shipping-text {
    font-size: 10px;
    white-space: nowrap;
  }

  .pdp-shipping-icon svg {
    width: 13px;
    height: 13px;
  }

  .pdp-shipping-flag svg {
    width: 16px;
    height: 11px;
  }

  .pdp-shipping-indicator {
    width: 6px;
    height: 6px;
  }
  .pdp-urgency {
    padding: 8px 12px;
    gap: 6px;
  }

  .pdp-urgency__text {
    font-size: 12px;
  }

  .pdp-accordion__header {
    padding: 11px 0;
  }

  .pdp-accordion__inner {
    padding: 0 0 12px 26px;
  }
}
/* ============================================================
   SECTION 7: YOU MAY LIKE COMPONENT
   Navigate: Search "SECTION 7" to jump here
   ============================================================ */

/* ────────────────────────────────────────────────────────
   7.1: You May Like Section Container
   ──────────────────────────────────────────────────────── */

/* YML section container - Background controlled by Section Management System (modules/system/section-manager.txt) */
.pdp-recommendation-section {
}

/* YML container — section-specific overrides only (alignment handled by shared rule in styles/components/reviews.txt) */
.pdp-recommendation-container {
}

/* YML header uses shared .pdp-section-header (styles/components/reviews.txt) — no section-specific header needed */

/* ────────────────────────────────────────────────────────
   7.2: Product Grid Layout
   ──────────────────────────────────────────────────────── */

/* YML grid - 3 columns, compact cards, centered */
.pdp-recommendation-grid {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 20px);
  margin-top: var(--pdp-section-content-margin-top);
  margin-bottom: var(--pdp-section-content-margin-bottom);
  flex-wrap: wrap;
}

/* YML card width - fixed max so cards stay compact */
.pdp-recommendation-grid .pdp-recommendation-card {
  width: clamp(180px, 22vw, 240px);
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────
   7.3: Skeleton Loading State
   ──────────────────────────────────────────────────────── */

.pdp-recommendation-skeleton {
  display: contents;
}

.pdp-recommendation-card-skeleton {
  background: var(--pdp-white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 0;
}

.pdp-recommendation-card-skeleton .pdp-skeleton-image {
  border-radius: 0;
}

.pdp-recommendation-card-skeleton > div:not(.pdp-skeleton-image) {
  margin: clamp(24px, 3vw, 32px);
}

/* ────────────────────────────────────────────────────────
   7.4: Product Cards
   ──────────────────────────────────────────────────────── */

/* YML card - Branded card with theme colors */
.pdp-recommendation-card {
  background: var(--pdp-white);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 1px solid rgba(var(--pdp-primary-rgb), 0.1);
  border-bottom: 3px solid var(--pdp-primary);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03);
}

/* YML card hover - Branded lift + primary shadow */
.pdp-recommendation-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--pdp-primary-rgb), 0.3);
  border-bottom-color: var(--pdp-primary);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 12px 32px rgba(var(--pdp-primary-rgb), 0.15),
    0 2px 4px rgba(0, 0, 0, 0.02);
}

/* YML external card loading - Dims and disables interaction */
.pdp-recommendation-card.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* YML external card loading spinner */
.pdp-recommendation-card.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px;
  border: 3px solid var(--pdp-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ────────────────────────────────────────────────────────
   7.5: Product Image
   ──────────────────────────────────────────────────────── */

/* YML image container - 1:1 square, neutral bg */
.pdp-recommendation-image {
  position: relative;
  padding-bottom: 100%;
  background: var(--pdp-surface, #f9fafb);
  overflow: hidden;
}

/* YML image - Fills container */
.pdp-recommendation-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* YML image hover - Subtle zoom */
.pdp-recommendation-card:hover .pdp-recommendation-image img {
  transform: scale(1.06);
}

/* ────────────────────────────────────────────────────────
   7.6: Product Content (Title, Tagline, Price)
   ──────────────────────────────────────────────────────── */

/* YML content area - Premium spacing */
.pdp-recommendation-content {
  padding: clamp(12px, 1.5vw, 16px) clamp(12px, 1.5vw, 16px) clamp(14px, 1.8vw, 18px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* YML title - Product name, bold, max 2 lines */
.pdp-recommendation-title {
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 650;
  margin: 0;
  color: var(--pdp-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.2px;
  transition: color 0.2s ease;
}

/* YML title hover - branded color */
.pdp-recommendation-card:hover .pdp-recommendation-title {
  color: var(--pdp-primary);
}

/* YML tagline - Short product description under title */
.pdp-recommendation-tagline {
  font-size: clamp(11px, 0.9vw, 12px);
  color: var(--pdp-text-muted);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* YML price container — wraps inline for "Starting from £X" */
.pdp-recommendation-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin-top: auto;
  padding-top: 8px;
}

/* YML current price - branded color, prominent, no-wrap so symbol stays with number */
.pdp-recommendation-price-current {
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 750;
  color: var(--pdp-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

/* YML "Starting from" label — inline with price */
.pdp-recommendation-price-from {
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 500;
  color: var(--pdp-text-muted);
  display: inline;
  margin-right: 4px;
  white-space: nowrap;
}

/* YML compare price - Muted strikethrough */
.pdp-recommendation-price-compare {
  font-size: clamp(11px, 0.9vw, 13px);
  color: var(--pdp-text-muted);
  text-decoration: line-through;
  opacity: 0.7;
}

/* YML loading price - Pulsing animation */
.pdp-recommendation-price-loading {
  color: var(--pdp-text-muted);
  font-size: 13px;
  animation: pulse 1.5s ease-in-out infinite;
}

/* ────────────────────────────────────────────────────────
   7.7: Empty State & Error States
   ──────────────────────────────────────────────────────── */

.pdp-yml-empty {
  text-align: center;
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 32px);
  color: var(--pdp-text-secondary, #6b7280);
  font-style: italic;
}

.pdp-recommendation-card--error {
  opacity: 0.95;
}

.pdp-recommendation-card--error .pdp-recommendation-image {
  filter: grayscale(20%);
}

.pdp-recommendation-error {
  color: var(--pdp-text-muted);
  font-size: 13px;
  font-style: italic;
}

/* ============================================================
   TEXT ALIGNMENT OVERRIDES
   ============================================================

   [INFO] Forces left-alignment on "You May Like" section
   text elements to prevent external CSS (host page theme)
   from centering content.
   ============================================================ */

.pdp-yml-section,
.pdp-recommendation-section {
  text-align: left !important;
}

.pdp-yml-header,
.pdp-yml-title,
.pdp-yml-subtitle {
  text-align: left !important;
}

/* ============================================================
   RESPONSIVE: TABLET & MOBILE BREAKPOINTS
   ============================================================ */

/* Tablet (<=959px) - 3 cards, better proportioned */
@media (max-width: 959px) {
  .pdp-recommendation-grid {
    gap: clamp(10px, 1.5vw, 16px);
    flex-wrap: nowrap;
  }
  .pdp-recommendation-grid .pdp-recommendation-card {
    width: calc(33.333% - 11px);
    min-width: 0;
    flex-shrink: 1;
  }
}

/* Mobile (<=767px) - 3 compact cards, tighter spacing */
@media (max-width: 767px) {
  .pdp-recommendation-grid {
    gap: 8px;
  }
  .pdp-recommendation-grid .pdp-recommendation-card {
    width: calc(33.333% - 6px);
    border-radius: 10px;
  }
  .pdp-recommendation-content {
    padding: 8px 8px 10px;
    gap: 3px;
  }
  .pdp-recommendation-title {
    font-size: 12px;
    -webkit-line-clamp: 1;
    letter-spacing: -0.1px;
  }
  .pdp-recommendation-tagline {
    font-size: 10px;
    -webkit-line-clamp: 1;
  }
  .pdp-recommendation-price {
    gap: 3px;
    padding-top: 4px;
  }
  .pdp-recommendation-price-from {
    font-size: 9px;
  }
  .pdp-recommendation-price-current {
    font-size: 13px;
  }
  .pdp-recommendation-price-compare {
    font-size: 10px;
  }
}

/* Small Mobile (<=479px) - Horizontal card layout like ESN */
@media (max-width: 479px) {
  .pdp-recommendation-grid {
    flex-direction: column;
    gap: 10px;
  }
  .pdp-recommendation-grid .pdp-recommendation-card {
    width: 100%;
    flex-direction: row;
    border-radius: 10px;
    border-bottom: none;
    border-left: 3px solid var(--pdp-primary);
  }
  .pdp-recommendation-grid .pdp-recommendation-card:hover {
    border-bottom: none;
    border-left-color: var(--pdp-primary);
  }
  .pdp-recommendation-image {
    width: 90px;
    min-width: 90px;
    padding-bottom: 0;
    aspect-ratio: 1;
    border-radius: 10px 0 0 10px;
  }
  .pdp-recommendation-image img {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .pdp-recommendation-content {
    padding: 10px 12px;
    gap: 2px;
    justify-content: center;
  }
  .pdp-recommendation-title {
    font-size: 13px;
    line-height: 1.3;
    -webkit-line-clamp: 1;
  }
  .pdp-recommendation-tagline {
    font-size: 11px;
    -webkit-line-clamp: 1;
  }
  .pdp-recommendation-price {
    padding-top: 4px;
  }
  .pdp-recommendation-price-current {
    font-size: 14px;
  }
  .pdp-recommendation-price-from {
    font-size: 10px;
  }
  .pdp-recommendation-price-compare {
    font-size: 10px;
  }
}
/* ============================================================
   SECTION 6: REVIEWS & RECOMMENDATIONS
   Navigate: Search "SECTION 6" to jump here
   ============================================================ */

/* ────────────────────────────────────────────────────────
   6.0: SECTION ALIGNMENT — Shared Container Rule
   All section containers with .pdp-section-container get uniform spacing.
   Adding a new section? Just add class="... pdp-section-container" — done.
   Change 1 value in config/00-store-identity.txt → all sections update.
   ──────────────────────────────────────────────────────── */

.pdp-section-container {
  max-width: var(--pdp-section-max-width);
  padding: var(--pdp-section-pad-top) var(--pdp-section-pad-x) var(--pdp-section-pad-bottom);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ────────────────────────────────────────────────────────
   6.1: Reviews Section Container
   ──────────────────────────────────────────────────────── */

.pdp-reviews-section {
}

.pdp-reviews-container {
}

/* Section title - Large primary-colored heading with flanking lines */
.pdp-section-title {
  font-size: var(--pdp-section-title-size);
  font-weight: var(--pdp-section-title-weight);
  margin: 0 0 var(--pdp-section-title-margin-bottom) 0;
  color: var(--pdp-primary);
  line-height: 1.2;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
}

/* Flanking decorative lines */
.pdp-section-title::before,
.pdp-section-title::after {
  content: '';
  flex: 0 0 clamp(30px, 5vw, 60px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pdp-primary));
}
.pdp-section-title::after {
  background: linear-gradient(90deg, var(--pdp-primary), transparent);
}

/* Section subtitle - Muted smaller text below title */
.pdp-section-subtitle {
  font-size: var(--pdp-section-subtitle-size);
  font-weight: var(--pdp-section-subtitle-weight);
  color: var(--pdp-text-muted);
  margin-bottom: var(--pdp-section-subtitle-margin-bottom);
  line-height: 1.5;
  text-align: center;
}

/* Section header - Container for title + subtitle block */
.pdp-section-header {
  margin-bottom: var(--pdp-section-header-gap);
}

/* ────────────────────────────────────────────────────────
   6.2: Reviews Header (Rating Summary & Distribution)
   ──────────────────────────────────────────────────────── */

.pdp-reviews-header {
  background: var(--pdp-white);
  border: 1px solid var(--pdp-border);
  border-radius: 16px;
  padding: clamp(20px, 2.5vw, 28px);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.pdp-reviews-summary {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
}

.pdp-reviews-average {
  text-align: center;
}

.pdp-reviews-score {
  font-size: 42px;
  font-weight: 700;
  color: var(--pdp-gray-900);
  display: block;
  line-height: 1;
  letter-spacing: -1.5px;
}

.pdp-reviews-stars {
  margin: 8px 0 4px;
}

.pdp-stars-container {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.pdp-star {
  display: block;
  flex-shrink: 0;
}

.pdp-star--filled {
  fill: var(--pdp-star-active);
}

.pdp-star--half {
  fill: var(--pdp-star-active);
  opacity: 0.5;
}

.pdp-star--empty {
  fill: var(--pdp-gray-300);
}

.pdp-reviews-count {
  color: var(--pdp-text-muted);
  font-size: 12px;
  font-weight: 400;
}

/* ────────────────────────────────────────────────────────
   6.3: Review Distribution Bars (Clickable Filters)
   ──────────────────────────────────────────────────────── */

.pdp-reviews-bars {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pdp-review-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
  background: transparent;
  border: none;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: 6px;
}

.pdp-review-bar:hover {
  background: rgba(var(--pdp-primary-rgb), 0.06);
}

.pdp-review-bar.active {
  background: rgba(var(--pdp-primary-rgb), 0.1);
}

.pdp-review-bar.active .pdp-bar-fill {
  background: var(--pdp-primary);
}

.pdp-bar-label {
  width: 28px;
  color: var(--pdp-text);
  font-weight: 400;
  font-size: 12px;
}

.pdp-bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.pdp-bar-fill {
  height: 100%;
  background: var(--pdp-primary);
  border-radius: 4px;
  transition: width var(--pdp-transition-normal) ease;
}

.pdp-bar-count {
  width: 32px;
  text-align: right;
  color: var(--pdp-text-muted);
  font-weight: 400;
  font-size: 12px;
}

/* ────────────────────────────────────────────────────────
   6.4: Reviews Controls (Sort & Filter)
   ──────────────────────────────────────────────────────── */

.pdp-reviews-controls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.pdp-reviews-sort {
  padding: 6px 12px;
  border: 1px solid var(--pdp-border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--pdp-white);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.pdp-reviews-sort:hover {
  border-color: var(--pdp-primary);
}

.pdp-reviews-sort:focus {
  outline: none;
  border-color: var(--pdp-primary);
  box-shadow: 0 0 0 2px rgba(var(--pdp-primary-rgb), 0.1);
}

/* ────────────────────────────────────────────────────────
   6.5: Reviews Filter Active State
   ──────────────────────────────────────────────────────── */

.pdp-reviews-filter {
  background: rgba(var(--pdp-primary-rgb), 0.04);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  border: 1px solid rgba(var(--pdp-primary-rgb), 0.15);
}

.pdp-filter-clear {
  background: none;
  border: none;
  color: var(--pdp-primary);
  cursor: pointer;
  font-weight: 500;
  text-decoration: underline;
  font-size: 13px;
}

/* ────────────────────────────────────────────────────────
   6.6: Reviews List Container
   ──────────────────────────────────────────────────────── */

.pdp-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(16px, 2vw, 24px);
  margin-top: var(--pdp-section-content-margin-top);
}

/* ────────────────────────────────────────────────────────
   6.7: Individual Review Cards (Compact Design)
   ──────────────────────────────────────────────────────── */

.pdp-review {
  background: var(--pdp-white);
  border: 1px solid var(--pdp-border);
  border-radius: 12px;
  padding: clamp(16px, 2vw, 24px);
}

.pdp-review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* ────────────────────────────────────────────────────────
   6.8: Review Author Information
   ──────────────────────────────────────────────────────── */

.pdp-review-avatar {
  width: 40px;
  height: 40px;
  background: var(--pdp-primary);
  color: var(--pdp-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.pdp-review-name {
  color: var(--pdp-text);
  font-weight: 600;
  font-size: 14px;
}

.pdp-verified {
  color: #166534;
  font-size: 11px;
  font-weight: 500;
  background: rgba(22, 163, 74, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pdp-verified svg {
  width: 10px;
  height: 10px;
  stroke: #16a34a;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────
   6.9: Review Rating Row (Stars + Date)
   ──────────────────────────────────────────────────────── */

.pdp-review-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pdp-review-rating-row .pdp-review-date::before {
  content: '\00B7';
  margin-right: 8px;
  color: var(--pdp-text-muted);
}

.pdp-review-stars {
  display: flex;
  align-items: center;
}

.pdp-review-date {
  color: var(--pdp-text-muted);
  font-size: 12px;
}

/* ────────────────────────────────────────────────────────
   6.10: Review Text Content
   ──────────────────────────────────────────────────────── */

.pdp-review-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--pdp-text);
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.pdp-review-text-wrapper {
  margin-bottom: 10px;
}

.pdp-review-text {
  color: var(--pdp-gray-700, #374151);
  line-height: 1.6;
  margin: 0;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pdp-review--expanded .pdp-review-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.pdp-review-read-more {
  background: none;
  border: none;
  color: var(--pdp-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0 0;
}

.pdp-review-read-more:hover {
  text-decoration: underline;
}

/* ────────────────────────────────────────────────────────
   6.11: Review Images (Compact)
   ──────────────────────────────────────────────────────── */

.pdp-review-images {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.pdp-review-image {
  width: 80px;
  height: 80px;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.15s ease;
  background: var(--pdp-surface);
}

.pdp-review-image:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.pdp-review-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ────────────────────────────────────────────────────────
   6.12: Review Footer (Helpful Button — Compact)
   ──────────────────────────────────────────────────────── */

.pdp-review-footer {
  display: flex;
  align-items: center;
}

.pdp-review-helpful {
  background: transparent;
  border: 1px solid var(--pdp-border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--pdp-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdp-review-helpful svg {
  width: 14px;
  height: 14px;
}

.pdp-review-helpful:hover:not(:disabled) {
  color: var(--pdp-primary);
  background: rgba(var(--pdp-primary-rgb), 0.06);
  border-color: rgba(var(--pdp-primary-rgb), 0.3);
}

.pdp-review-helpful.marked {
  color: var(--pdp-white);
  background: var(--pdp-primary);
  border-color: var(--pdp-primary);
  font-weight: 500;
}

.pdp-review-helpful:disabled {
  cursor: default;
}

/* ────────────────────────────────────────────────────────
   6.13: No Reviews State
   ──────────────────────────────────────────────────────── */

.pdp-no-reviews {
  text-align: center;
  padding: clamp(24px, 3vw, 40px);
  color: var(--pdp-text-muted);
  font-size: 14px;
  background: var(--pdp-surface);
  border-radius: 8px;
  margin-bottom: 16px;
}

/* ────────────────────────────────────────────────────────
   6.14: Load More Button
   ──────────────────────────────────────────────────────── */

.pdp-load-more {
  display: block;
  margin: 0 auto;
  min-width: 180px;
}

/* ────────────────────────────────────────────────────────
   6.15: Review Image Modal (Lightbox)
   ──────────────────────────────────────────────────────── */

.pdp-image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--pdp-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--pdp-transition-normal) ease;
}

.pdp-image-modal.active {
  opacity: 1;
}

.pdp-image-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pdp-image-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  transform: scale(0.9);
  transition: transform var(--pdp-transition-normal) ease;
}

.pdp-image-modal.active .pdp-image-modal-content {
  transform: scale(1);
}

.pdp-image-modal-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
}

.pdp-image-modal-close {
  position: fixed;
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  z-index: calc(var(--pdp-z-modal) + 1);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--pdp-white);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-image-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.pdp-image-modal-prev,
.pdp-image-modal-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  z-index: 10001;
  transition: background 0.2s ease;
  backdrop-filter: blur(4px);
}
.pdp-image-modal-prev { left: 16px; }
.pdp-image-modal-next { right: 16px; }
.pdp-image-modal-prev:hover,
.pdp-image-modal-next:hover {
  background: rgba(255, 255, 255, 0.3);
}

.pdp-image-modal-counter {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 12px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

/* ────────────────────────────────────────────────────────
   6.16: Photo Gallery Strip
   ──────────────────────────────────────────────────────── */

.pdp-reviews-gallery-strip {
  margin-bottom: clamp(16px, 2vw, 24px);
  overflow: hidden;
}

.pdp-reviews-gallery-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  cursor: grab;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--pdp-primary-rgb), 0.5) rgba(var(--pdp-primary-rgb), 0.1);
}

.pdp-reviews-gallery-track.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.pdp-reviews-gallery-track.dragging .pdp-reviews-gallery-thumb {
  pointer-events: none;
}

.pdp-reviews-gallery-track::-webkit-scrollbar {
  height: 6px;
}

.pdp-reviews-gallery-track::-webkit-scrollbar-track {
  background: rgba(var(--pdp-primary-rgb), 0.1);
  border-radius: 3px;
}

.pdp-reviews-gallery-track::-webkit-scrollbar-thumb {
  background: rgba(var(--pdp-primary-rgb), 0.5);
  border-radius: 3px;
}

.pdp-reviews-gallery-track::-webkit-scrollbar-thumb:hover {
  background: var(--pdp-primary);
}

.pdp-reviews-gallery-thumb {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border: 1.5px solid rgba(var(--pdp-primary-rgb), 0.12);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--pdp-surface);
  transition: all 0.2s ease;
}

.pdp-reviews-gallery-thumb:hover {
  border-color: var(--pdp-primary);
  transform: scale(1.08);
}

.pdp-reviews-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ────────────────────────────────────────────────────────
   6.17: Pinned Review (Left Accent + Badge Row)
   ──────────────────────────────────────────────────────── */

.pdp-review--pinned {
  border: 2px solid rgba(var(--pdp-primary-rgb), 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pdp-review-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pdp-primary);
  color: var(--pdp-white);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.pdp-review-badge-row svg {
  width: 12px;
  height: 12px;
}

.pdp-review-badge-count {
  font-weight: 400;
  opacity: 0.85;
  font-size: 10px;
}

/* ────────────────────────────────────────────────────────
   6.18: Review Highlight (Gallery Strip Click)
   ──────────────────────────────────────────────────────── */

.pdp-review--highlight {
  animation: pdp-review-highlight 2s ease;
}

@keyframes pdp-review-highlight {
  0% { box-shadow: 0 0 0 3px rgba(var(--pdp-primary-rgb), 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(var(--pdp-primary-rgb), 0); }
}

/* ============================================================
   TEXT ALIGNMENT OVERRIDES
   ============================================================ */

.pdp-reviews-container,
.pdp-reviews-header,
.pdp-reviews-summary,
.pdp-reviews-list {
  text-align: left !important;
}

.pdp-review,
.pdp-review-header,
.pdp-review-text,
.pdp-review-text-wrapper,
.pdp-review-name {
  text-align: left !important;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE: Mobile (max-width: 767px)
   ────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .pdp-reviews-summary {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pdp-reviews-average {
    border-bottom: 1px solid var(--pdp-border);
    padding-bottom: 12px;
  }

  .pdp-reviews-score {
    font-size: 36px;
  }

  .pdp-section-title {
    font-size: var(--pdp-section-title-size);
  }

  .pdp-reviews-sort {
    width: 100%;
  }

  .pdp-reviews-gallery-thumb {
    width: 52px;
    height: 52px;
  }

  .pdp-review-image {
    width: 64px;
    height: 64px;
  }
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE: Small Mobile (max-width: 479px)
   ────────────────────────────────────────────────────────── */

@media (max-width: 479px) {
  .pdp-review-image {
    width: 56px;
    height: 56px;
  }

  .pdp-review-badge-row {
    font-size: 10px;
  }
}
/* ────────────────────────────────────────────────────────
   SECTION 2.17: Sticky Cart Bar
   ────────────────────────────────────────────────────────

   [INFO] Sticky cart bar appears at bottom of screen as user scrolls.
   Shows mini cart summary with product thumbnails, total, and CTA button.
   Hides when user is near footer to avoid overlap.
   ────────────────────────────────────────────────────────── */

/* Sticky cart bar container - Fixed bottom bar with glassmorphism effect */
.pdp-sticky-cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);  /* Glassmorphism blur effect */
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -2px 20px rgba(0,0,0,0.1), 0 -1px 5px rgba(0,0,0,0.05);
  z-index: var(--pdp-z-sticky);
  transform: translateY(100%);  /* Hidden below screen via transform (GPU-accelerated) */
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);  /* Bouncy slide animation */
  will-change: transform;
  border-top: 2px solid var(--pdp-primary);
}

/* iOS Safari gap fix: extend bar background below viewport edge
   When Safari toolbar collapses on scroll-down, a gap can appear between
   position:fixed bottom:0 elements and the screen edge. This pseudo-element
   fills that gap with the bar's background color, making it invisible. */
.pdp-sticky-cart-bar::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 0;
  right: 0;
  height: 100px;
  background: rgba(255, 255, 255, 0.98);
  pointer-events: none;
}

/* Sticky bar visible state - Slides up from bottom */
.pdp-sticky-cart-bar.visible {
  transform: translateY(0);
}

/* Sticky bar near footer - Hides when user scrolls to bottom */
.pdp-sticky-cart-bar.near-footer {
  transform: translateY(100%) !important;
}

/* Hide bars during modal open — CSS safety net prevents any
   flash between body unfix and JS recheckAll() */
body.pdp-modal-open .pdp-sticky-cart-bar,
body.pdp-modal-open .pdp-floating-product-bar {
  transform: translateY(100%) !important;
  transition: none !important;
}

/* Sticky bar pulse animation - Draws attention when cart updates */
.pdp-sticky-cart-bar.pulse {
  animation: stickyPulse 0.5s ease;
}

/* Sticky bar content - Max-width centered layout (uses section tokens for alignment) */
.pdp-sticky-cart-premium {
  max-width: var(--pdp-section-max-width);  /* Aligned with section containers */
  margin: 0 auto;
  padding: clamp(8px, 1vw, 12px) var(--pdp-section-pad-x);  /* Vertical: minimal, Horizontal: section token */
  box-sizing: border-box;  /* Padding inside max-width, matching section containers */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 24px);
}

/* Sticky bar left section - Product thumbnails and item count */
.pdp-sticky-left {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 16px);
  flex: 1;
}

/* Product thumbnail stack */
.pdp-sticky-thumbnails {
  display: flex;
  gap: 8px;
  align-items: center;
}


/* Individual product thumbnail - Small rounded product image */
.pdp-sticky-thumbnail {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--pdp-border);
  background: var(--pdp-white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform var(--pdp-transition-fast) ease;
}

/* Thumbnail hover - Zooms and rotates slightly */
.pdp-sticky-thumbnail:hover {
  transform: scale(1.1) rotate(-5deg);
  z-index: 10;
}

/* Thumbnail image sizing */
.pdp-sticky-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* More items indicator - Shows "+3" when more than 3 items */
.pdp-sticky-thumbnail-more {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(var(--pdp-primary-rgb), 0.08);
  border: 1px dashed var(--pdp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-primary);
  font-weight: 600;
  font-size: 12px;
}

/* Sticky info section - Item count and savings */
.pdp-sticky-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(12px, 1.5vw, 16px);
}

/* Item count display - "3 items in cart" */
.pdp-sticky-count {
  color: var(--pdp-text);
  font-size: 15px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

/* Item count number - Bold primary-colored count */
.pdp-sticky-count strong {
  font-size: 18px;
  color: var(--pdp-primary);
}

/* Savings badge - Prominent green savings badge */
.pdp-sticky-savings-badge {
  background: linear-gradient(135deg, var(--pdp-success), var(--pdp-success-dark));
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pdp-white);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  order: -1;  /* Place first in flex layout */
}


/* Sticky bar right section - Total and CTA button */
.pdp-sticky-right {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 16px);
}

/* Total amount container */
.pdp-sticky-total {
  text-align: right;
}

/* Total amount display - Large bold total price */
.pdp-sticky-total-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--pdp-text);
  letter-spacing: -0.5px;
}

/* Sticky bar CTA button - "View Cart" button */
.pdp-sticky-cta {
  background: var(--pdp-primary);
  color: var(--pdp-white);
  border: none;
  padding: clamp(8px, 1vw, 12px) clamp(24px, 3vw, 32px);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  transition: all var(--pdp-transition-fast) ease;
  box-shadow: 0 2px 8px rgba(var(--pdp-primary-rgb), 0.2);
}

/* Sticky CTA hover - Darkens and lifts button */
.pdp-sticky-cta:hover {
  background: var(--pdp-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--pdp-primary-rgb), 0.3);
}

/* Sticky CTA bounce animation - Bounces when item added */
.pdp-sticky-cta.bounce {
  animation: cartBounce 0.6s ease;
}

/* Sticky CTA icon sizing */
.pdp-sticky-cta svg {
  width: 18px;
  height: 18px;
}

/* Trust badge in sticky bar - "Secure Checkout" badge with SVG icon */
.pdp-sticky-trust {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: clamp(8px, 1vw, 12px) clamp(12px, 1.5vw, 16px);
  background: rgba(var(--pdp-success-rgb, 16,185,129), 0.25);
  border-radius: 6px;
  font-size: 12px;
  color: #047857;
  font-weight: 600;
  white-space: nowrap;
}

/* Trust badge SVG icon styling - Colorful shield badge */
.pdp-sticky-trust svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────
   SECTION 2.18: Cart Pricing Display (Old/New Totals)
   ────────────────────────────────────────────────────────── */

/* Savings row in cart totals - Shows total savings amount */
.pdp-savings-row {
  color: var(--pdp-success);
  font-weight: 600;
  padding: 5px 0;  /* Reduced from clamp(8px..12px) for compact cart footer */
  border-top: 1px dashed rgba(16, 185, 129, 0.3);
}

/* Savings display container */
.pdp-savings-display {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
}

/* Savings amount - Green savings text */
.pdp-savings-amount {
  font-size: 15px;
  color: var(--pdp-success);
}

/* Savings percent badge - Red "(-25%)" badge (matches insurance badge) */
.pdp-savings-percent {
  font-size: 10px;
  font-weight: 600;
  color: var(--pdp-danger);
  background: rgba(220, 38, 38, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Total prices container - Old price and new price side by side */
.pdp-total-prices {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

/* Sticky bar old total - Struck through price in sticky bar */
.pdp-sticky-old-total {
  font-size: 16px;
  color: var(--pdp-gray-400);
  text-decoration: line-through;
  margin-right: clamp(8px, 1vw, 12px);
}

/* Sticky savings badge - Green savings badge in sticky bar */
.pdp-sticky-savings-badge {
  display: inline-block;
  padding: 2px 6px;  /* Component-specific small padding */
  background: var(--pdp-success);
  color: var(--pdp-white);
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  margin-left: clamp(8px, 1vw, 12px);
}

/* ============================================================
   TEXT ALIGNMENT OVERRIDES
   ============================================================

   [INFO] Forces left-alignment on cart drawer text elements
   to prevent external CSS (host page theme) from centering
   content. Uses !important to override any external styles.

   [NOTE] Elements that SHOULD remain centered are NOT included.
   ============================================================ */

/* Cart Drawer Containers - Force left alignment */
.pdp-cart-drawer,
.pdp-cart-header,
.pdp-cart-body,
.pdp-cart-footer,
.pdp-cart-items {
  text-align: left !important;
}

/* Cart Item Text Elements - Force left alignment */
.pdp-cart-item-info,
.pdp-cart-item-title,
.pdp-cart-item-variant,
.pdp-cart-price-row,
.pdp-cart-total-row,
.pdp-insurance-content {
  text-align: left !important;
}

/* ============================================================
   SECTION 2.18: FLOATING PRODUCT BAR

   [PURPOSE] Bottom-floating bar that appears when users scroll
   past the product info section. Shows minimal product info
   (image, title, price) with CTA to scroll back up.

   [DESIGN] Self-contained component with hardcoded spacing
   (no layout tokens). Uses glassmorphism effect matching
   sticky cart bar styling.

   [SPACING] All spacing hardcoded:
   - Container max-width: 1400px
   - Content padding: 10px 16px (desktop), 8px 12px (mobile)
   - Content gap: 16px
   - Left section gap: 12px
   - Price gap: 6px
   - CTA button gap: 6px
   ============================================================ */

/* Container - Fixed positioning at bottom */
.pdp-floating-product-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
  z-index: 998;  /* Below sticky cart bar (999) */
  transform: translateY(100%);  /* Hidden below viewport via transform (GPU-accelerated) */
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  will-change: transform;
  border-top: 2px solid var(--pdp-primary);
}

/* iOS Safari gap fix: same technique as sticky cart bar */
.pdp-floating-product-bar::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 0;
  right: 0;
  height: 100px;
  background: rgba(255, 255, 255, 0.98);
  pointer-events: none;
}

/* Visible state - Slide up animation */
.pdp-floating-product-bar.visible {
  transform: translateY(0);
}

/* Content wrapper - Max-width centered layout (uses section tokens for alignment) */
.pdp-floating-bar-content {
  max-width: var(--pdp-section-max-width);  /* Aligned with section containers */
  margin: 0 auto;
  padding: 10px var(--pdp-section-pad-x);  /* Vertical: minimal, Horizontal: section token */
  box-sizing: border-box;  /* Padding inside max-width, matching section containers */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Left section - Product display */
.pdp-floating-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

/* Product image - Small thumbnail */
.pdp-floating-bar-image {
  width: 48px;  /* Reduced from 60px */
  height: 48px;  /* Reduced from 60px */
  border-radius: 6px;  /* Reduced from 8px */
  overflow: hidden;
  flex-shrink: 0;
  background: var(--pdp-surface);
  border: 1px solid var(--pdp-border);
}

.pdp-floating-bar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product info - Title and pricing */
.pdp-floating-bar-info {
  display: flex;
  flex-direction: column;
  gap: 6px;  /* More spacing between title and price */
  min-width: 0;
}

/* Product title - Black base with theme color brand (UPDATED) */
.pdp-floating-bar-title {
  font-size: 16px;  /* Larger for better readability */
  font-weight: 600;
  color: var(--pdp-text);  /* Black base - brand span will override */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brand highlighting in floating bar title */
.pdp-floating-bar-title .pdp-title__brand {
  color: var(--pdp-primary);  /* Theme color for brand only */
  font-weight: inherit;        /* Inherit 600 from parent */
}

/* Pricing wrapper - Horizontal layout */
.pdp-floating-bar-price-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;  /* Reduced from 8px */
  flex-wrap: wrap;
}

/* Current price - Black color */
.pdp-floating-bar-price-current {
  font-size: 15px;  /* Reduced from 16px */
  font-weight: 700;
  color: #000;
}

/* Compare price - Crossed out (old price) */
.pdp-floating-bar-price-compare {
  font-size: 13px;  /* Reduced from 14px */
  font-weight: 500;
  color: var(--pdp-text-muted, #999);
  text-decoration: line-through;
}

/* Discount badge - Brand-colored pill with tag icon */
.pdp-floating-bar-price-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background-color: rgba(var(--pdp-primary-rgb), 0.12);
  color: var(--pdp-primary);
  font-size: 11px;
  font-weight: 600;
  border-radius: 50px;
  line-height: 1;
}

/* Tag icon inside floating bar badge */
.pdp-floating-bar-price-badge .pdp-badge-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* Right section - CTA button container */
.pdp-floating-bar-right {
  flex-shrink: 0;
}

/* CTA Button - Primary action */
.pdp-floating-bar-cta {
  display: flex;
  align-items: center;
  gap: 6px;  /* Reduced from 8px */
  padding: 8px 20px;  /* Reduced from 12px 24px */
  background: linear-gradient(135deg, var(--pdp-primary) 0%, var(--pdp-primary-dark, var(--pdp-primary)) 100%);
  color: var(--pdp-white);
  border: none;
  border-radius: 6px;  /* Reduced from 8px */
  font-size: 14px;  /* Reduced from 15px */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(var(--pdp-primary-rgb), 0.25);
}

.pdp-floating-bar-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--pdp-primary-rgb), 0.35);
}

.pdp-floating-bar-cta svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

/* ============================================================
   RESPONSIVE: STICKY BAR — TABLET (≤1023px)
   ============================================================ */
@media (max-width: 1023px) {
  .pdp-sticky-cart-premium {
    padding: 8px 16px;
    flex-wrap: nowrap;
    gap: 10px;
  }

  /* Tablet: keep thumbnail smaller */
  .pdp-sticky-thumbnail {
    width: 32px;
    height: 32px;
    border-radius: 6px;
  }

  /* Tablet: compact savings badge */
  .pdp-sticky-savings-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  /* Tablet: hide trust badge only (saves space) */
  .pdp-sticky-trust {
    display: none;
  }

  .pdp-sticky-count {
    font-size: 13px;
  }

  .pdp-sticky-count strong {
    font-size: 15px;
  }

  .pdp-sticky-old-total {
    font-size: 14px;
  }

  .pdp-sticky-total-amount {
    font-size: 17px;
    white-space: nowrap;
  }

  .pdp-sticky-cta {
    padding: 8px 16px;
    font-size: 13px;
    min-height: 40px;
    white-space: nowrap;
  }

  .pdp-sticky-cta svg {
    width: 16px;
    height: 16px;
    margin: 0;
  }
}

/* ============================================================
   RESPONSIVE: MOBILE BREAKPOINTS (≤767px)
   ============================================================ */

/* Tablet and mobile (≤767px) */
@media (max-width: 767px) {
  /* Cart drawer full width on mobile (transform: translateX(100%) handles off-screen) */
  .pdp-cart-drawer {
    width: 100%;
  }

  /* Smaller cart item padding on mobile */
  .pdp-cart-item {
    padding: 12px 0;
  }

  /* Smaller cart item images on mobile */
  .pdp-cart-item-image-wrapper {
    width: 48px;
    height: 48px;
  }

  .pdp-cart-item-image {
    width: 48px;
    height: 48px;
  }

  /* Reduced footer padding on mobile */
  .pdp-cart-footer-fixed {
    padding: 12px;
  }

  /* Mobile: hide thumbnails, show count text */
  .pdp-sticky-thumbnails {
    display: none;
  }

  /* Mobile: product count */
  .pdp-sticky-count {
    font-size: 12px;
    gap: 4px;
  }

  .pdp-sticky-count strong {
    font-size: 13px;
  }

  /* Mobile: info row alignment */
  .pdp-sticky-info {
    gap: 8px;
  }

  /* Mobile: savings badge */
  .pdp-sticky-savings-badge {
    font-size: 10px;
    padding: 3px 8px;
    white-space: nowrap;
  }

  /* Mobile: prices inline (prevent vertical stacking) */
  .pdp-sticky-total {
    display: flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
  }

  .pdp-sticky-old-total {
    font-size: 11px;
    margin-right: 0;
  }

  .pdp-sticky-total-amount {
    font-size: 14px;
  }

  /* Mobile: CTA compact */
  .pdp-sticky-cta {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 36px;
    gap: 4px;
  }

  .pdp-sticky-cta svg {
    width: 16px;
    height: 16px;
  }

  /* Hide floating bar when sticky cart bar is active */
  .pdp-sticky-cart-bar.visible ~ .pdp-floating-product-bar {
    display: none;
  }

  .pdp-floating-bar-left {
    padding-left: 0;
  }

  /* Floating bar mobile adjustments */
  .pdp-floating-bar-content {
    padding: 8px 12px;  /* Further reduced */
    gap: 10px;
  }

  .pdp-floating-bar-image {
    width: 42px;  /* Reduced from 50px */
    height: 42px;  /* Reduced from 50px */
  }

  .pdp-floating-bar-title {
    font-size: 12px;  /* Reduced from 13px */
  }

  .pdp-floating-bar-price-current {
    font-size: 13px;  /* Reduced from 14px */
  }

  .pdp-floating-bar-price-compare {
    font-size: 11px;  /* Reduced from 12px */
  }

  .pdp-floating-bar-price-badge {
    font-size: 10px;  /* Reduced from 11px */
    padding: 2px 5px;
  }

  .pdp-floating-bar-cta {
    padding: 7px 16px;  /* Reduced from 10px 18px */
    font-size: 13px;  /* Reduced from 14px */
  }
}

/* Mobile (≤479px) */
@media (max-width: 479px) {
  .pdp-cart-item {
    grid-template-columns: 50px 1fr auto 20px;  /* Smaller grid columns */
    gap: 12px;  /* Standard small gap */
    padding: 12px 0;  /* Standard small padding */
  }

  .pdp-cart-item-image-wrapper {
    width: 48px;
    height: 48px;
  }

  .pdp-cart-item-image {
    width: 48px;
    height: 48px;
  }

  .pdp-cart-item-quantity-badge {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    top: -3px;
    right: -3px;
  }

  .pdp-cart-item-title {
    font-size: 13px;
  }

  .pdp-cart-price-new {
    font-size: 14px;
  }

  .pdp-cart-quantity {
    height: 24px;
  }

  .pdp-quantity-button {
    width: 24px;
    height: 24px;
  }

  /* Small mobile: CTA hide text only, keep count badge */
  .pdp-sticky-cta > span:not(.pdp-sticky-cta__count) {
    display: none;
  }

  .pdp-sticky-cta {
    padding: 10px 14px;
  }

  .pdp-sticky-total-amount {
    font-size: 14px;
  }

  .pdp-floating-bar-cta span {
    display: none;  /* Hide button text, keep icon only */
  }

  .pdp-floating-bar-cta {
    padding: 10px 14px;
  }
}
/* ============================================================
   YML MODAL STYLES (You May Like - Mini PDP Modal)
   ============================================================
   DESIGN PRINCIPLE: This modal is a scaled-down version of the
   main pdp-main-wrapper. Same visual DNA, no extra effects.
   All inner elements reuse the SAME CSS classes as the main
   product and are scaled down via scoped overrides.

   Used by: modules/core/recommendations.txt
   ============================================================ */

/* ────────────────────────────────────────────────────────
   MODAL CONTAINER & OVERLAY
   ──────────────────────────────────────────────────────── */

.pdp-mini-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--pdp-z-modal);
}

.pdp-mini-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-mini-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.pdp-mini-content {
  position: relative;
  width: 94%;
  max-width: 1000px;
  max-height: 88vh;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: pdp-modal-slide-up 0.3s ease-out;
}

/* Close animation (desktop — slide down + fade) */
@keyframes pdp-yml-slide-down {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(30px);
  }
}

.pdp-mini-content.pdp-closing {
  animation: pdp-yml-slide-down 0.25s ease-in forwards;
}

/* Close button — visual style defined centrally in modals.txt */
.pdp-mini-close {
  position: absolute;
  top: 16px;
  right: 24px;
  z-index: 20;
}

/* ────────────────────────────────────────────────────────
   LOADING SKELETON
   ──────────────────────────────────────────────────────── */

.pdp-mini-loading {
  padding: clamp(24px, 3vw, 36px);
  height: clamp(300px, 50vh, 500px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-mini-skeleton {
  display: grid;
  grid-template-columns: 9fr 11fr;
  gap: 32px;
  width: 100%;
  max-width: var(--pdp-container-max-xs);
}

.pdp-mini-skeleton-gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
}

.pdp-mini-skeleton-gallery .pdp-skeleton-image {
  width: 100%;
  padding-bottom: 100%;
  border-radius: 12px;
}

.pdp-mini-skeleton-thumbs {
  display: flex;
  gap: 8px;
}

.pdp-mini-skeleton-thumbs .pdp-skeleton-thumb {
  flex: 1;
  padding-bottom: 18%;
  border-radius: 6px;
}

.pdp-mini-skeleton-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(16px, 2vw, 24px) 0;
}

/* ────────────────────────────────────────────────────────
   PRODUCT CONTAINER (two-column grid)
   Mirrors pdp-content-grid from the main PDP wrapper.
   ──────────────────────────────────────────────────────── */

.pdp-mini-product {
  display: grid;
  grid-template-columns: 9fr 11fr;
  gap: 32px;
  padding: 28px clamp(20px, 3vw, 32px) 32px;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pdp-mini-product::-webkit-scrollbar {
  display: none;
}

/* ────────────────────────────────────────────────────────
   GALLERY (left column) — sticky
   Mirrors pdp-gallery sticky behavior from the main PDP.
   ──────────────────────────────────────────────────────── */

.pdp-mini-gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 0;
  align-self: start;
}

/* Main gallery container */
.pdp-mini-gallery-main {
  position: relative;
  background: var(--pdp-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--pdp-border);
}

/* Viewport — 1:1 aspect ratio */
.pdp-mini-gallery-viewport {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background: var(--pdp-white);
  cursor: grab;
}

.pdp-mini-gallery-viewport:active {
  cursor: grabbing;
}

/* Track */
.pdp-mini-gallery-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide */
.pdp-mini-gallery-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image */
.pdp-mini-gallery-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Navigation arrows — uses shared gallery control variables */
.pdp-mini-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--pdp-gallery-nav-size);
  height: var(--pdp-gallery-nav-size);
  background: var(--pdp-white);
  border: 1px solid var(--pdp-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--pdp-transition-base);
  z-index: 10;
  opacity: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pdp-mini-gallery-main:hover .pdp-mini-gallery-nav,
.pdp-mini-gallery-main.pdp-controls-visible .pdp-mini-gallery-nav {
  opacity: 0.9;
}

.pdp-mini-gallery-nav:hover {
  box-shadow: 0 4px 12px rgba(var(--pdp-primary-rgb), 0.15);
  background: var(--pdp-primary);
  color: var(--pdp-white);
  border-color: var(--pdp-primary);
}

.pdp-mini-gallery-nav--prev { left: var(--pdp-gallery-nav-left); }
.pdp-mini-gallery-nav--next { right: var(--pdp-gallery-nav-right); }

/* Dots — uses shared gallery dot variables */
.pdp-mini-gallery-dots {
  position: absolute;
  bottom: var(--pdp-dot-bottom);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--pdp-dot-gap);
  padding: var(--pdp-dot-pad-y) var(--pdp-dot-pad-x);
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 9999px;
  opacity: 0;
  transition: opacity var(--pdp-transition-base);
}

.pdp-mini-gallery-main:hover .pdp-mini-gallery-dots,
.pdp-mini-gallery-main.pdp-controls-visible .pdp-mini-gallery-dots {
  opacity: 0.9;
}

/* Individual dot */
.pdp-mini-gallery-dot {
  width: var(--pdp-dot-size);
  height: var(--pdp-dot-size);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: all var(--pdp-transition-fast);
  padding: 0;
}

.pdp-mini-gallery-dot.active {
  width: var(--pdp-dot-active-width);
  border-radius: var(--pdp-dot-active-radius);
  background: var(--pdp-primary);
}

.pdp-mini-gallery-dot:hover:not(.active) {
  background: rgba(255, 255, 255, 0.8);
}

/* Thumbnails container — matches main gallery thumbnails */
.pdp-mini-gallery-thumbs {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  gap: clamp(6px, 0.8vw, 8px);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: clamp(4px, 0.5vw, 6px);
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

.pdp-mini-gallery-thumbs::-webkit-scrollbar {
  height: 2px;
}

.pdp-mini-gallery-thumbs::-webkit-scrollbar-track {
  background: var(--pdp-border);
  border-radius: 2px;
}

.pdp-mini-gallery-thumbs::-webkit-scrollbar-thumb {
  background: var(--pdp-primary);
  border-radius: 2px;
}

/* Individual thumbnail — scaled-down main gallery thumbnail */
.pdp-mini-gallery-thumb {
  position: relative;
  min-width: 52px;
  width: 52px;
  height: 52px;
  padding: 0;
  background: var(--pdp-white);
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--pdp-transition-base), box-shadow var(--pdp-transition-base);
  flex-shrink: 0;
}

.pdp-mini-gallery-thumb:hover {
  border-color: rgba(var(--pdp-primary-rgb), 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pdp-mini-gallery-thumb.active {
  border-color: var(--pdp-primary);
  box-shadow: 0 0 0 2px rgba(var(--pdp-primary-rgb), 0.1);
}

.pdp-mini-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zoom button — uses shared gallery control variables */
.pdp-mini-gallery-zoom {
  position: absolute;
  top: var(--pdp-gallery-zoom-top);
  right: var(--pdp-gallery-zoom-right);
  z-index: 3;
  width: var(--pdp-gallery-zoom-size);
  height: var(--pdp-gallery-zoom-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--pdp-border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--pdp-text);
  transition: all var(--pdp-transition-fast);
  opacity: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pdp-mini-gallery-main:hover .pdp-mini-gallery-zoom,
.pdp-mini-gallery-main.pdp-controls-visible .pdp-mini-gallery-zoom {
  opacity: 0.9;
}

.pdp-mini-gallery-zoom:hover {
  background: var(--pdp-primary);
  color: var(--pdp-white);
  border-color: var(--pdp-primary);
  box-shadow: 0 4px 12px rgba(var(--pdp-primary-rgb), 0.15);
}

/* ────────────────────────────────────────────────────────
   MINI LIGHTBOX — fullscreen image viewer for YML modal
   ──────────────────────────────────────────────────────── */

.pdp-mini-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
}

.pdp-mini-lightbox.active {
  display: flex;
}

.pdp-mini-lightbox-content {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-mini-lightbox-image {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
}

.pdp-mini-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.pdp-mini-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.pdp-mini-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.pdp-mini-lightbox-nav--prev { left: 16px; }
.pdp-mini-lightbox-nav--next { right: 16px; }

.pdp-mini-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.pdp-mini-lightbox-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.pdp-mini-lightbox-nav:disabled:hover {
  background: rgba(255, 255, 255, 0.15);
}

.pdp-mini-lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 16px;
  border-radius: 20px;
}

/* ────────────────────────────────────────────────────────
   INFO SECTION (right column) — scrollable
   Mirrors pdp-info-container from the main PDP.
   ──────────────────────────────────────────────────────── */

.pdp-mini-info {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pdp-mini-info::-webkit-scrollbar {
  display: none;
}

/* Info content wrapper — NO gap, margins per element (same as main product) */
.pdp-mini-info .pdp-info-content {
  display: flex;
  flex-direction: column;
}

/* ────────────────────────────────────────────────────────
   SCOPED OVERRIDES: Mirrors main product-info exactly.
   Values = main product values (margin-bottom driven).
   ──────────────────────────────────────────────────────── */

/* Title — main: clamp(1.625rem,4vw,2.25rem), margin 0 0 4px */
.pdp-mini-info .pdp-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 0 0 4px 0;
}

/* Subtitle — main: 14px mobile, margin-bottom 10px */
.pdp-mini-info .pdp-subtitle {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin: 0 0 10px 0;
}

/* Short description */
.pdp-mini-info .pdp-short-description {
  font-size: 13px;
  color: var(--pdp-text-secondary, #666);
  line-height: 1.4;
  margin: 0 0 8px 0;
}

/* Price section — main: margin-bottom 12px */
.pdp-mini-info .pdp-price-section {
  margin: 0 0 12px 0;
  padding: 0;
}

/* main: 22px mobile */
.pdp-mini-info .pdp-price-current {
  font-size: 22px;
  font-weight: var(--pdp-font-bold);
  color: #000;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

/* main: 14px mobile */
.pdp-mini-info .pdp-price-compare {
  font-size: 14px;
  color: var(--pdp-gray-500);
  text-decoration: line-through;
  line-height: 1.3;
}

/* main: 12px, padding 5px 10px */
.pdp-mini-info .pdp-price-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background-color: rgba(var(--pdp-primary-rgb), 0.12);
  color: var(--pdp-primary);
  border-radius: 50px;
  font-size: 11px;
  font-weight: var(--pdp-font-semibold);
  letter-spacing: 0.3px;
  line-height: 1;
}

.pdp-mini-info .pdp-price-badge .pdp-badge-icon {
  width: 10px;
  height: 10px;
}

/* Highlights — main: margin-bottom 16px mobile */
.pdp-mini-info .pdp-bullets-section {
  margin: 0 0 12px 0;
  padding: 0;
  background: none;
  border-left: none;
  border-radius: 0;
}

/* main: gap 6px mobile */
.pdp-mini-info .pdp-bullet-list {
  gap: 6px;
}

/* main: gap 8px */
.pdp-mini-info .pdp-bullet-item {
  gap: 8px;
}

/* main: 15px mobile */
.pdp-mini-info .pdp-bullet-icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* main: 13px mobile, line-height 1.45 */
.pdp-mini-info .pdp-bullet-text {
  font-size: 13px;
  line-height: 1.45;
}

/* Shipping strip — main: margin 14px 0, padding 10px 0, font 11px */
.pdp-mini-info .pdp-shipping-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 10px 0;
  padding: 10px 0;
  border-top: 1px solid var(--pdp-border, #e5e7eb);
  border-bottom: 1px solid var(--pdp-border, #e5e7eb);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}

/* main: gap 6px, padding 0 16px, border-right separator */
.pdp-mini-info .pdp-shipping-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 11px;
  border-right: 1px solid var(--pdp-border, #e5e7eb);
}

.pdp-mini-info .pdp-shipping-item:last-child {
  border-right: none;
}

/* Separators hidden — dividers handled by border-right on items */
.pdp-mini-info .pdp-shipping-strip .pdp-shipping-separator {
  display: none;
}

/* Ensure border-right dividers are visible (not overridden by mobile styles) */
.pdp-mini-info .pdp-shipping-item:not(:last-child) {
  border-right: 1px solid var(--pdp-border, #e5e7eb);
}

/* ATC → Accordion spacing */
.pdp-mini-info .pdp-add-section {
  margin-bottom: 16px;
}

/* Accordion — main: margin-top 0 mobile, header padding 14px 0, gap 10px */
.pdp-mini-info .pdp-accordion {
  border-top: 1px solid var(--pdp-border, #e5e5e5);
  margin-top: 0;
}

.pdp-mini-info .pdp-accordion__header {
  gap: 10px;
  padding: 12px 0;
}

.pdp-mini-info .pdp-accordion__icon {
  width: 14px;
  height: 14px;
}

/* main: 13px both desktop/mobile */
.pdp-mini-info .pdp-accordion__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.pdp-mini-info .pdp-accordion__toggle {
  width: 13px;
  height: 13px;
}

.pdp-mini-info .pdp-accordion__inner {
  padding: 0 0 10px 24px;
}

.pdp-mini-info .pdp-accordion__content {
  overflow: hidden;
}

.pdp-mini-info .pdp-accordion__intro {
  font-size: 12px;
  color: var(--pdp-text-muted, #666);
  line-height: 1.5;
  margin-bottom: 4px;
}

.pdp-mini-info .pdp-accordion__bullets li {
  font-size: 12px;
  line-height: 1.5;
}

/* ────────────────────────────────────────────────────────
   VARIANT SELECTORS
   ──────────────────────────────────────────────────────── */

/* Reset ALL inherited margins from main product variant system */
.pdp-mini-variants {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.pdp-mini-variants .pdp-variants,
.pdp-mini-variants .pdp-variants--horizontal-radio,
.pdp-mini-variants .pdp-variants--size-quantity {
  margin-bottom: 0;
}

.pdp-mini-variants .pdp-variants-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--pdp-font-semibold);
  margin-bottom: 8px;
}

/* main: gap 10px */
.pdp-mini-variants .pdp-variant-radio-container {
  gap: 8px;
}

/* main: padding 14px mobile, border-radius 12px */
.pdp-mini-variants .pdp-variant-radio-card {
  padding: 12px;
  border-radius: 10px;
}

.pdp-mini-variants .pdp-variant-radio-content {
  gap: 10px;
}

/* main: 48px desktop, scale to 40px */
.pdp-mini-variants .pdp-variant-radio-image img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

.pdp-mini-variants .pdp-variant-radio-title {
  font-size: 13px;
  font-weight: 600;
}

.pdp-mini-variants .pdp-variant-radio-subtitle {
  font-size: 11px;
}

.pdp-mini-variants .pdp-variant-radio-price-current {
  font-size: 14px;
  font-weight: 700;
}

.pdp-mini-variants .pdp-variant-radio-price-compare {
  font-size: 11px;
}

.pdp-mini-variants .pdp-variant-radio-per-unit {
  font-size: 10px;
}

/* main badge: 11px, padding 3px 8px */
.pdp-mini-variants .pdp-variant-radio-card-badge {
  top: 0;
  right: 8px;
  transform: translateY(-50%);
}

.pdp-mini-variants .pdp-variant-radio-card-badge [class*="pdp-badge"] {
  font-size: 9px;
  padding: 2px 6px;
  line-height: 1.3;
}

.pdp-mini-variants .pdp-variant-radio-discount,
.pdp-mini-variants .pdp-variant-radio-title-row [class*="pdp-badge--discount"] {
  font-size: 10px;
  padding: 2px 6px;
}

/* ATC button — main: padding 16px 24px mobile, font 15px */
.pdp-mini-info .pdp-button--large {
  padding: 14px 24px;
  font-size: 15px;
  border-radius: 9999px;
}

/* ────────────────────────────────────────────────────────
   ACTIONS
   ──────────────────────────────────────────────────────── */

.pdp-mini-actions {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 10px);
}

.pdp-mini-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--pdp-text-muted, #666);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 0;
  margin-top: 2px;
  transition: color var(--pdp-transition-fast) ease;
}

.pdp-mini-more-link:hover {
  color: var(--pdp-primary);
}

/* ────────────────────────────────────────────────────────
   ERROR STATE
   ──────────────────────────────────────────────────────── */

.pdp-mini-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 4vw, 48px) clamp(16px, 3vw, 32px);
  text-align: center;
  gap: clamp(12px, 1.5vw, 20px);
}

.pdp-mini-error svg {
  color: var(--pdp-danger);
}

.pdp-mini-error h3 {
  font-size: clamp(15px, 1.5vw, 18px);
  margin: 0;
  color: var(--pdp-text);
}

.pdp-mini-error p {
  color: var(--pdp-text-muted);
  margin: 0 0 16px 0;
}

/* ============================================================
   MOBILE RESPONSIVE (< 768px) — Bottom-Sheet Style
   ============================================================
   KEY FIXES:
   - Gallery compact (65% aspect ratio, no thumbnails)
   - Single scroll container (no nested scroll)
   - Sticky ATC bar at bottom of modal
   - Shipping strip wraps properly
   ============================================================ */

@media (max-width: 959px) {
  /* Fullscreen on all non-desktop devices */
  .pdp-mini-modal.active {
    align-items: stretch;
  }

  .pdp-mini-content {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    animation: pdp-modal-enter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
  }

  /* Close button — on gallery top-right corner edge */
  .pdp-mini-close {
    top: 2px;
    right: 10px;
  }

  /* ── SINGLE SCROLL CONTAINER (fix nested scroll) ── */
  .pdp-mini-product {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 24px 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
  }

  .pdp-mini-skeleton {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Info section: NO nested scroll — let .pdp-mini-product handle it */
  .pdp-mini-info {
    overflow: visible;
    padding-right: 0;
    padding-bottom: 20px;
  }

  /* ── COMPACT GALLERY (save vertical space) ── */
  .pdp-mini-gallery {
    position: static;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pdp-border);
  }

  /* Square aspect ratio on non-desktop */
  .pdp-mini-gallery-viewport {
    padding-bottom: 100%;
    cursor: default;
    border-radius: 12px;
  }

  .pdp-mini-gallery-main {
    border-radius: 12px;
  }

  /* Hide thumbnails on mobile — counter + dots sufficient */
  .pdp-mini-gallery-thumbs {
    display: none;
  }

  /* Hide zoom on non-desktop */
  .pdp-mini-gallery-zoom {
    display: none;
  }

  /* Full image visible — no cropping */
  .pdp-mini-gallery-image {
    object-fit: contain;
  }

  /* Nav + dots hidden by default — shown on tap, fast fade */
  .pdp-mini-gallery-nav,
  .pdp-mini-gallery-dots {
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  /* Tap-to-show */
  .pdp-mini-gallery-main.pdp-controls-visible .pdp-mini-gallery-nav,
  .pdp-mini-gallery-main.pdp-controls-visible .pdp-mini-gallery-dots {
    opacity: 0.9;
  }

  /* ── STICKY ATC BAR ── */
  .pdp-mini-info .pdp-add-section {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 14px 24px;
    margin: 0 -24px;
    z-index: 10;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    border-top: 1px solid var(--pdp-border, #e5e7eb);
  }

  .pdp-mini-info .pdp-add-section .pdp-button--large {
    width: 100%;
  }

  /* ── SHIPPING STRIP — wrap when needed ── */
  .pdp-mini-info .pdp-shipping-strip {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    row-gap: 4px;
    padding: 8px 0;
    white-space: normal;
    overflow: visible;
  }

  .pdp-mini-info .pdp-shipping-item {
    padding: 0 6px;
    justify-content: center;
    white-space: nowrap;
    font-size: 10px;
    gap: 3px;
  }

  /* ── VARIANT CARDS — compact + badge breathing room ── */
  .pdp-mini-variants .pdp-variant-radio-container {
    gap: 8px;
  }

  .pdp-mini-variants .pdp-variant-radio-card {
    padding: 10px 12px;
    padding-top: 14px;
  }

  .pdp-mini-variants .pdp-variant-radio-card-badge {
    right: 12px;
  }

  .pdp-mini-variants .pdp-variant-radio-image img {
    width: 36px;
    height: 36px;
  }

  /* ── ACCORDION — compact + touch targets ── */
  .pdp-mini-info .pdp-accordion {
    border-top: 1px solid var(--pdp-border);
  }

  .pdp-mini-info .pdp-accordion__header {
    min-height: 44px;
    padding: 10px 0;
  }

  /* ── MORE ABOUT LINK — tighter ── */
  .pdp-mini-more-link {
    margin-top: 0;
    padding: 10px 0 4px;
    border-top: 1px solid var(--pdp-border);
    font-size: 12px;
  }

  /* ── TIGHTER SPACING — reduce margins ── */
  .pdp-mini-info .pdp-title {
    font-size: 19px;
    margin-bottom: 2px;
  }

  .pdp-mini-info .pdp-subtitle {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .pdp-mini-info .pdp-price-section {
    margin-bottom: 8px;
  }

  .pdp-mini-info .pdp-bullets-section {
    margin-bottom: 8px;
  }

  .pdp-mini-info .pdp-bullet-list {
    gap: 4px;
  }

  /* ── CLOSE ANIMATION (mobile — slide down fullscreen) ── */
  .pdp-mini-content.pdp-closing {
    animation: pdp-modal-exit 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
  }
}

/* ============================================================
   TABLET (600-959px) — Gallery aspect ratio reduction
   ============================================================ */

@media (min-width: 600px) and (max-width: 959px) {
  .pdp-mini-gallery {
    width: clamp(350px, 55vw, 500px);
    margin-left: auto;
    margin-right: auto;
  }
  .pdp-mini-gallery-viewport {
    padding-bottom: 100%;
  }
}

/* ============================================================
   SMALL MOBILE (< 480px)
   ============================================================ */

@media (max-width: 479px) {
  .pdp-mini-product {
    padding: 12px 16px 0;
    gap: 12px;
  }

  /* Square aspect ratio on small mobile */
  .pdp-mini-gallery-viewport {
    padding-bottom: 100%;
  }

  /* Close button — inherits header bar position from 959px block */

  /* Smaller typography */
  .pdp-mini-info .pdp-title {
    font-size: 17px;
    line-height: 1.2;
  }

  .pdp-mini-info .pdp-price-current {
    font-size: 19px;
    line-height: 1.2;
  }

  .pdp-mini-info .pdp-price-compare {
    font-size: 12px;
  }

  .pdp-mini-info .pdp-bullet-text {
    font-size: 12px;
    line-height: 1.4;
  }

  .pdp-mini-info .pdp-bullet-icon {
    width: 12px;
    height: 12px;
  }

  /* Sticky ATC — tighter margins */
  .pdp-mini-info .pdp-add-section {
    padding: 12px 16px;
    margin: 0 -16px;
  }

  /* Variant cards extra compact + badge room */
  .pdp-mini-variants .pdp-variant-radio-card {
    padding: 8px 10px;
    padding-top: 12px;
  }

  .pdp-mini-variants .pdp-variant-radio-card-badge {
    right: 10px;
  }

  .pdp-mini-variants .pdp-variant-radio-image img {
    width: 32px;
    height: 32px;
  }

  .pdp-mini-variants .pdp-variant-radio-title {
    font-size: 12px;
  }

  .pdp-mini-variants .pdp-variant-radio-price-current {
    font-size: 13px;
  }

  .pdp-mini-variants .pdp-variant-radio-price-compare {
    font-size: 10px;
  }

  .pdp-mini-variants .pdp-variant-radio-subtitle {
    font-size: 10px;
  }

  .pdp-mini-info .pdp-short-description {
    font-size: 12px;
  }
}
/* ============================================================
   ANNOUNCEMENT BAR STYLES
   ============================================================ */

/* ============================================================
   0. RESET
   ============================================================ */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   1. BASE ANNOUNCEMENT BAR
   ============================================================ */

.pdp-announcement-bar {
  position: relative;
  width: 100%;
  height: var(--pdp-announcement-height);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-announcement-text);
  font-size: var(--pdp-announcement-font-size);
  font-weight: var(--pdp-announcement-font-weight);
  font-family: var(--pdp-font-family-announcement);
  z-index: var(--pdp-announcement-z-index);
  overflow: hidden;
  text-align: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: linear-gradient(
    -45deg,
    var(--pdp-announcement-bg-base),
    var(--pdp-announcement-bg-base),
    var(--pdp-announcement-bg-base),
    var(--pdp-announcement-bg-base)
  );
  background-size: 400% 400%;
  animation: pdp-announcement-gradient
    var(--pdp-announcement-gradient-speed, 15s)
    ease infinite;
}

.pdp-announcement-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: pdp-announcement-shine 3s infinite;
  z-index: 0;
  will-change: transform;
}

@keyframes pdp-announcement-shine {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.pdp-announcement-bar.no-gradient {
  background: var(--pdp-announcement-bg-base);
  animation: none;
}

.pdp-announcement-bar.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* ============================================================
   2. GRADIENT ANIMATION
   ============================================================ */

@keyframes pdp-announcement-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================
   3. CONTENT LAYOUT
   ============================================================ */

.pdp-announcement-bar__container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  padding: 0 clamp(16px, 2vw, 32px);
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* Campaign name — bold emphasis */
.pdp-announcement-bar__campaign {
  font-weight: 700;
  letter-spacing: 1px;
}

/* Separator dashes */
.pdp-announcement-bar__sep {
  opacity: 0.7;
}

/* Discount text */
.pdp-announcement-bar__discount {
  font-weight: 600;
}

/* "Ends in" label */
.pdp-announcement-bar__ends-in {
  opacity: 0.8;
  font-weight: 400;
}

/* ============================================================
   4. COUNTDOWN TIMER — Pill badge
   ============================================================ */

.pdp-announcement-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 10px;
  border-radius: 20px;
  margin-left: 8px;
  letter-spacing: 0.5px;
}

/* ============================================================
   5. RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 767px) {
  .pdp-announcement-bar {
    height: auto;
    min-height: 36px;
    font-size: 12.5px;
    padding: 6px 10px;
  }

  .pdp-announcement-bar__container {
    padding: 0 6px;
    gap: 0;
  }

  /* Hide "Ends in" on mobile — timer pill is self-explanatory */
  .pdp-announcement-bar__ends-in {
    display: none;
  }

  /* Smaller timer pill on mobile */
  .pdp-announcement-countdown {
    padding: 2px 8px;
    margin-left: 6px;
    font-size: 10.5px;
  }
}

@media (max-width: 374px) {
  .pdp-announcement-bar {
    font-size: 11px;
  }

  .pdp-announcement-countdown {
    padding: 2px 6px;
    margin-left: 4px;
  }
}

/* Hide on mobile if configured */
.pdp-announcement-bar.hide-on-mobile {
  display: none;
}

@media (min-width: 768px) {
  .pdp-announcement-bar.hide-on-mobile {
    display: flex;
  }
}

/* ============================================================
   END announcement-bar styles
   ============================================================ */
/* ============================================================
   BEFORE & AFTER SLIDER
   ============================================================ */

/*
   [STYLING] Before & After Multi-Card Comparison Slider

   Purpose: Grid of interactive before/after comparison cards with
   independent drag sliders. Responsive: 3 cards desktop, 2 tablet,
   carousel mobile.

   Dependencies:
   - styles/foundation/01-css-variables.txt: CSS variables (theme colors, layout tokens)
   - modules/sections/before-after.txt: BeforeAfterSlider module (JavaScript)
   - Template: html/sections/before-after.txt

   Sections:
   - 15.1: Container & Layout
   - 15.2: Section Header (shared)
   - 15.3: Body (Layer 3)
   - 15.4: Card Grid
   - 15.5: Card & Slider
   - 15.6: Images
   - 15.7: Divider & Handle
   - 15.8: Labels
   - 15.9: Caption (Review Style)
   - 15.10: Fallback State
   - 15.11: Carousel Mode (Mobile)
   - 15.12: Responsive Breakpoints

   Browser Compatibility:
   - Chrome 76+, Firefox 63+, Safari 12+ (clip-path, aspect-ratio)
   - Touch events: iOS Safari 13+, Chrome Android 61+
*/

/* ============================================================
   SECTION 15.1: CONTAINER & LAYOUT
   ============================================================ */

.pdp-before-after-section {
  width: 100%;
}

/* Before/After container — alignment handled by shared rule in styles/components/reviews.txt */
.pdp-before-after-container {
}

/* ============================================================
   SECTION 15.2: SECTION HEADER
   Header uses shared .pdp-section-header, .pdp-section-title,
   .pdp-section-subtitle (styles/components/reviews.txt) — no section-specific
   header styles needed here.
   ============================================================ */

/* ============================================================
   SECTION 15.3: BODY (Layer 3)
   Internal spacing — raw clamp() values, NO tokens.
   ============================================================ */

.pdp-before-after-body {
  margin-top: clamp(20px, 3vw, 32px);
}

/* ============================================================
   SECTION 15.4: CARD GRID
   ============================================================ */

.pdp-before-after-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 32px);
  align-items: stretch;
}

/* ============================================================
   SECTION 15.5: CARD & SLIDER
   ============================================================ */

.pdp-before-after-card {
  display: flex;
  flex-direction: column;
  background: var(--pdp-bg-elevated);
  border-radius: var(--pdp-radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.07);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--pdp-transition-fast);
}

.pdp-before-after-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Active slide gets brand border */
.pdp-before-after-card--active {
  border-color: var(--pdp-primary);
}

.pdp-before-after-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: default;
  border-radius: 0;
  box-shadow: none;
}

.pdp-before-after-slider--dragging {
  cursor: ew-resize;
}

/* ============================================================
   SECTION 15.6: IMAGES
   ============================================================ */

.pdp-before-after-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.pdp-before-after-image--before {
  z-index: 2;
  /* clip-path set dynamically via JavaScript */
}

.pdp-before-after-image--after {
  z-index: 1;
}

/* ============================================================
   SECTION 15.7: DIVIDER & HANDLE
   ============================================================ */

.pdp-before-after-divider {
  position: absolute;
  top: 0;
  /* left set dynamically via JavaScript */
  width: 2px;
  height: 100%;
  background: var(--pdp-white);
  cursor: ew-resize;
  z-index: 3;
  transform: translateX(-50%);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

/* Gradient fade at top and bottom of divider for elegance */
.pdp-before-after-divider::before,
.pdp-before-after-divider::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(24px, 4vw, 40px);
  pointer-events: none;
}

.pdp-before-after-divider::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--pdp-white));
}

.pdp-before-after-divider::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0), var(--pdp-white));
}

/* Circle handle — premium glass effect with brand accent */
.pdp-before-after-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid var(--pdp-primary);
  border-radius: var(--pdp-radius-full);
  transform: translate(-50%, -50%);
  cursor: ew-resize;
  z-index: 4;
  transition: transform var(--pdp-transition-fast), box-shadow var(--pdp-transition-fast), border-color var(--pdp-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  touch-action: none;
}

.pdp-before-after-handle:hover,
.pdp-before-after-handle:focus {
  transform: translate(-50%, -50%) scale(1.1);
  border-color: var(--pdp-secondary);
  outline: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.pdp-before-after-handle:focus {
  outline: 2px solid var(--pdp-primary);
  outline-offset: 2px;
}

.pdp-before-after-slider--dragging .pdp-before-after-handle {
  transform: translate(-50%, -50%) scale(1.05);
  border-color: var(--pdp-secondary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Handle Arrows — brand colored */
.pdp-before-after-handle-arrows {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  color: var(--pdp-primary);
}

.pdp-before-after-handle-arrows svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.5;
}

.pdp-before-after-handle:hover .pdp-before-after-handle-arrows {
  color: var(--pdp-secondary);
}

/* ============================================================
   SECTION 15.8: LABELS
   ============================================================ */

.pdp-before-after-label {
  position: absolute;
  bottom: clamp(12px, 1.5vw, 16px);
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--pdp-text);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--pdp-radius-sm);
  font-size: var(--pdp-text-xs);
  font-weight: var(--pdp-font-semibold);
  font-family: var(--pdp-font-family);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}

.pdp-before-after-label--before {
  left: clamp(12px, 1.5vw, 16px);
}

.pdp-before-after-label--after {
  right: clamp(12px, 1.5vw, 16px);
}

/* ============================================================
   SECTION 15.9: CAPTION (Review Style)
   Mini testimonial card below each slider card.
   Shows star rating + quote text + author name.
   ============================================================ */

.pdp-before-after-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px) clamp(16px, 2.5vw, 24px);
  font-family: var(--pdp-font-family);
  flex: 1;
}

/* Star rating row */
.pdp-before-after-caption-stars {
  display: flex;
  gap: 1px;
  margin-bottom: clamp(8px, 1vw, 10px);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 1px;
}

.pdp-before-after-star--filled {
  color: var(--pdp-star-active);
}

.pdp-before-after-star--half {
  color: var(--pdp-star-active);
  opacity: 0.5;
}

.pdp-before-after-star--empty {
  color: var(--pdp-gray-300);
}

/* Quote text — clamped to 3 lines for equal card heights */
.pdp-before-after-caption-text {
  font-size: clamp(13px, 1.2vw, 14px);
  color: var(--pdp-text);
  line-height: 1.55;
  font-style: italic;
  margin: 0 0 clamp(6px, 1vw, 10px) 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Author name — brand colored */
.pdp-before-after-caption-author {
  font-size: clamp(11px, 1vw, 12px);
  color: var(--pdp-primary);
  font-weight: var(--pdp-font-semibold);
  letter-spacing: 0.03em;
}

/* ============================================================
   SECTION 15.10: FALLBACK STATE
   ============================================================ */

.pdp-before-after-fallback {
  max-width: var(--pdp-container-max-md);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 32px);
  text-align: center;
}

.pdp-before-after-fallback img {
  max-width: 100%;
  height: auto;
  border-radius: var(--pdp-radius-lg);
  box-shadow: var(--pdp-shadow-lg);
}

.pdp-before-after-fallback p {
  font-family: var(--pdp-font-family);
  color: var(--pdp-text-muted);
  margin-top: clamp(16px, 2vw, 24px);
  font-size: var(--pdp-text-base);
}

/* ============================================================
   SECTION 15.11: CAROUSEL MODE (Mobile)
   Same pattern as steps carousel (CSS scroll-snap + dots).
   Hidden on desktop/tablet, shown on mobile via media query.
   ============================================================ */

.pdp-before-after-carousel-wrapper {
  position: relative;
  width: 100%;
  display: none; /* Hidden by default, shown on mobile via media query */
}

.pdp-before-after-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: clamp(12px, 2vw, 16px);
  padding: 0 clamp(12px, 2vw, 16px);
}

.pdp-before-after-carousel-track::-webkit-scrollbar {
  display: none;
}

.pdp-before-after-carousel-slide {
  flex-shrink: 0;
  width: 100%;
  padding: 0 clamp(12px, 1.5vw, 16px);
  box-sizing: border-box;
  scroll-snap-align: start;
}

/* Carousel Dots (same style as steps section) */
.pdp-before-after-carousel-dots {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1vw, 12px);
  margin-top: clamp(16px, 2vw, 24px);
}

.pdp-before-after-carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--pdp-radius-full);
  background: var(--pdp-gray-300);
  border: none;
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
  padding: 0;
}

.pdp-before-after-carousel-dot--active {
  background: var(--pdp-primary);
  width: 32px;
}

.pdp-before-after-carousel-dot:hover {
  background: var(--pdp-gray-400);
}

.pdp-before-after-carousel-dot--active:hover {
  background: var(--pdp-primary);
}

/* ============================================================
   SECTION 15.12: RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet (768px - 1023px) — keep 3 cards, slightly smaller gap */
@media (max-width: 1023px) {
  .pdp-before-after-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.5vw, 16px);
  }
}

/* Small tablet (max-width: 640px) — switch to carousel */
@media (max-width: 640px) {
  /* Hide grid, show carousel */
  .pdp-before-after-grid {
    display: none;
  }

  .pdp-before-after-carousel-wrapper {
    display: block;
  }

  /* 1 card per slide, full width with spacing */
  .pdp-before-after-carousel-slide {
    flex: 0 0 calc(100% - clamp(24px, 4vw, 32px));
    padding: 0;
    scroll-snap-align: center;
  }

  .pdp-before-after-handle {
    width: 44px;
    height: 44px;
  }

  .pdp-before-after-handle-arrows svg {
    width: 11px;
    height: 11px;
  }

  .pdp-before-after-label {
    font-size: 11px;
    padding: 4px 10px;
  }
}

/* Small mobile (≤479px) */
@media (max-width: 479px) {
  .pdp-before-after-label {
    font-size: 11px;
  }
}

/* ============================================================
   END OF BEFORE & AFTER SLIDER
   ============================================================ */
/* ============================================================
   COMPARISON CHART STYLES
   File: styles/sections/comparison-chart.txt
   ============================================================

   [STYLING] Comparison Chart Component

   Purpose: Styles for the 2-column comparison table component.
   Design: Middle column POPS with rich terracotta tint + vertical rails.
   Header uses brand gradient slab (primary → primary-dark) with white text.
   Badge is a glass pill on the brand slab.
   No horizontal terracotta grid lines. Only vertical rails.

   Highlight strategy:
   - Header: brand gradient slab + white text + glass badge + vertical rails
   - Body: rich terracotta tint gradient (0.26 → 0.16) + strong vertical rails
   - Badge: glass pill (white text, rgba white bg/border on brand header)

   Tint strength: 0.26 at top, 0.16 at bottom — clearly distinct from
   section bg (#faf0eb) which is ~0.05 equivalent.

   Layout: Per-row CSS Grid (block container, each row is own grid)
   Responsive: 3-column always; horizontal scroll on mobile (no stacking)

   Browser Compatibility:
   - CSS Grid: Chrome 58+, Firefox 52+, Safari 11.1+
   - @media (hover: hover): Chrome 63+, Firefox 64+, Safari 9+
   - IE11 NOT supported (market share <1% in 2026)

   Dependencies:
   - styles/foundation/01-css-variables.txt: CSS variables (colors, fonts, spacing)
   - styles/foundation/03-animations.txt: pdpBadgeShimmer keyframe
   - --pdp-section-bg-alternate: Section background color

   ============================================================ */

/* ────────────────────────────────────────────────────────
   SECTION 13.1: COMPARISON SECTION CONTAINER
   ──────────────────────────────────────────────────────── */

.pdp-comparison-section {
  /* Background set dynamically by styles/foundation/01-css-variables.txt alternating pattern */
}

/* Comparison container — section-specific overrides only (alignment handled by shared rule in styles/components/reviews.txt) */
.pdp-comparison-container {
}

/* ────────────────────────────────────────────────────────
   SECTION 13.2: SECTION HEADER
   Header uses shared .pdp-section-header, .pdp-section-title,
   .pdp-section-subtitle (styles/components/reviews.txt) — no section-specific
   header styles needed here.
   ──────────────────────────────────────────────────────── */

/* Section-specific: highlight span inside shared .pdp-section-title */
.pdp-comparison-title-highlight {
  color: var(--pdp-primary);
}

/* ────────────────────────────────────────────────────────
   SECTION 13.3: COMPARISON TABLE LAYOUT
   Block container with per-row grid. Compact sizing tokens.
   ──────────────────────────────────────────────────────── */

.pdp-comparison-table {
  --ct-primary: var(--pdp-primary, #d16839);
  --ct-primary-rgb: var(--pdp-primary-rgb, 209, 104, 56);
  --ct-primary-dark: var(--pdp-primary-dark, #b4562f);

  /* Neutrals */
  --ct-text: #1f1f1f;
  --ct-muted: rgba(31, 31, 31, 0.72);
  --ct-divider: rgba(31, 31, 31, 0.07);
  --ct-border: rgba(31, 31, 31, 0.06);

  /* Compact sizing */
  --ct-radius: 20px;
  --ct-cell-py: 14px;
  --ct-cell-px: 22px;
  --ct-row-min: 64px;
  --ct-header-min: 92px;

  /* Highlight look — rich tint that DOESN'T blend with #faf0eb */
  --ct-col2-bg-top: rgba(var(--ct-primary-rgb), 0.26);
  --ct-col2-bg-bot: rgba(var(--ct-primary-rgb), 0.16);
  --ct-rail-left: rgba(var(--ct-primary-rgb), 0.78);
  --ct-rail-right: rgba(var(--ct-primary-rgb), 0.32);

  position: relative;
  max-width: 100%;
  margin: clamp(16px, 2vw, 24px) auto clamp(16px, 2vw, 24px);
  background: #ffffff;
  border-radius: var(--ct-radius);
  overflow: hidden;
  border: 1px solid var(--ct-border);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Rows define 3-column grid */
.pdp-comparison-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(300px, 1.25fr) minmax(240px, 1fr);
  align-items: stretch;
  position: relative;
}

/* Neutral horizontal separators (NOT orange — behind cells) */
.pdp-comparison-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ct-divider);
  z-index: 0;
}

/* ────────────────────────────────────────────────────────
   SECTION 13.4: TABLE CELLS (SHARED STYLES)
   Compact padding via custom properties
   ──────────────────────────────────────────────────────── */

.pdp-comparison-cell {
  position: relative;
  z-index: 1;
  padding: var(--ct-cell-py) var(--ct-cell-px);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--ct-row-min);
  color: var(--ct-text);
  background: transparent;
}

/* Neutral vertical dividers between columns */
.pdp-comparison-cell:not(.pdp-comparison-cell-label) {
  border-left: 1px solid var(--ct-divider);
}

/* ────────────────────────────────────────────────────────
   SECTION 13.5: HEADER ROW STYLES
   Brand gradient slab on highlighted header.
   Premium glass badge. White text.
   ──────────────────────────────────────────────────────── */

.pdp-comparison-header-row .pdp-comparison-cell {
  min-height: var(--ct-header-min);
  padding: 16px var(--ct-cell-px);
}

/* Header cells: labels vertically centered + aligned across columns */
.pdp-comparison-cell-header {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

/* Hide top-left "Feature" text (keep cell for layout) */
.pdp-comparison-corner-label {
  display: none;
}

/* Header labels */
.pdp-comparison-column-label {
  font-weight: 950;
  font-size: 18px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ct-text);
}

/* Clean rail edges: remove neutral divider on highlighted column borders */
.pdp-comparison-row .pdp-comparison-cell-highlighted {
  border-left-color: transparent;
}

.pdp-comparison-row .pdp-comparison-cell-highlighted + .pdp-comparison-cell {
  border-left-color: transparent;
}

/* HIGHLIGHTED HEADER — brand gradient slab + white text + rails */
.pdp-comparison-header-row .pdp-comparison-cell-highlighted {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--ct-primary) 0%, var(--ct-primary-dark) 100%);
}

.pdp-comparison-header-row .pdp-comparison-cell-highlighted .pdp-comparison-column-label {
  color: #ffffff;
}

/* Recommended badge — glass pill, absolutely positioned above label */
.pdp-comparison-recommended-badge {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  line-height: 1;
  white-space: nowrap;
}

/* OPTIONAL: kill badge completely for cleanest look */
/* .pdp-comparison-recommended-badge { display: none; } */

/* ────────────────────────────────────────────────────────
   SECTION 13.6: FEATURE LABEL COLUMN (LEFT)
   Bold, compact labels
   ──────────────────────────────────────────────────────── */

.pdp-comparison-cell-label {
  justify-content: flex-start;
  text-align: left;
}

.pdp-comparison-feature-label {
  font-weight: 850;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ct-text);
}

/* ────────────────────────────────────────────────────────
   SECTION 13.7: VALUE COLUMNS
   Highlighted = rich terracotta tint gradient + vertical rails
   Traditional = readable muted (NOT "disabled")

   IMPORTANT: Tint at 0.26/0.16 is clearly stronger than
   the section bg (#faf0eb ≈ 0.05), so it never blends.
   ──────────────────────────────────────────────────────── */

.pdp-comparison-cell-value {
  background: transparent;
  justify-content: flex-start;
}

/* VALUE CONTENT: Icon + text left-aligned */
.pdp-comparison-value-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* TEXT HIERARCHY */
.pdp-comparison-value-text {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 780;
  color: var(--ct-text);
}

/* Traditional Methods: readable muted, NOT disabled */
.pdp-comparison-cell-value:not(.pdp-comparison-cell-highlighted) .pdp-comparison-value-text {
  color: var(--ct-muted);
  font-weight: 720;
}

/* HIGHLIGHTED BODY COLUMN: rich tint gradient + vertical rails */
.pdp-comparison-cell-value.pdp-comparison-cell-highlighted {
  background: linear-gradient(180deg, var(--ct-col2-bg-top) 0%, var(--ct-col2-bg-bot) 100%);
}

/* Highlighted text bolder for emphasis */
.pdp-comparison-cell-value.pdp-comparison-cell-highlighted .pdp-comparison-value-text {
  font-weight: 850;
}

/* ────────────────────────────────────────────────────────
   SECTION 13.8: STATUS INDICATORS (Premium badge system)
   Winner = solid brand coin + white check (high contrast)
   Other = neutral soft chip + minus (not scammy red X)
   ──────────────────────────────────────────────────────── */

/* Badge base */
.pdp-comparison-badge {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transform: translateZ(0);
}

.pdp-comparison-badge svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* WINNER (Our Solution) — solid brand coin */
.pdp-comparison-badge-check {
  background: linear-gradient(180deg, var(--ct-primary) 0%, var(--ct-primary-dark) 100%);
  color: #ffffff;
  box-shadow:
    0 10px 18px rgba(var(--ct-primary-rgb), 0.18),
    0 2px 6px rgba(var(--ct-primary-rgb), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Check stroke thicker for clarity */
.pdp-comparison-badge-check svg path {
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* COMPETITOR — neutral "minus" chip (not red X) */
.pdp-comparison-badge-cross {
  background: rgba(31, 31, 31, 0.06);
  border: 1px solid rgba(31, 31, 31, 0.10);
  color: rgba(31, 31, 31, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Minus stroke visually balanced */
.pdp-comparison-badge-cross svg path {
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* Louder check inside the colored middle column */
.pdp-comparison-cell-value.pdp-comparison-cell-highlighted .pdp-comparison-badge-check {
  box-shadow:
    0 12px 22px rgba(var(--ct-primary-rgb), 0.22),
    0 3px 8px rgba(var(--ct-primary-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* Unknown status fallback */
.pdp-comparison-badge-unknown {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #f3f4f6;
  color: transparent;
  font-size: 0;
}

/* ────────────────────────────────────────────────────────
   SECTION 13.8c: ROW HOVER EFFECTS
   Uses @media (hover: hover) to prevent sticky states on touch
   ──────────────────────────────────────────────────────── */

@media (hover: hover) {
  .pdp-comparison-table:hover {
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  .pdp-comparison-row:not(.pdp-comparison-header-row):hover .pdp-comparison-cell {
    background: rgba(31, 31, 31, 0.010);
  }

  .pdp-comparison-row:not(.pdp-comparison-header-row):hover .pdp-comparison-cell-value.pdp-comparison-cell-highlighted {
    background: linear-gradient(180deg, rgba(var(--ct-primary-rgb), 0.30) 0%, rgba(var(--ct-primary-rgb), 0.18) 100%);
  }
}

/* ────────────────────────────────────────────────────────
   SECTION 13.8d: ENTRANCE ANIMATION (CSS)
   ──────────────────────────────────────────────────────── */

.pdp-comparison-table.pdp-animate-ready .pdp-comparison-cell {
  opacity: 0;
  transform: translateY(30px);
  /* Transition on initial state so browser knows HOW to animate before
     .pdp-animated target values are applied — fixes mobile browsers
     that skip transitions when both property and value change in one frame */
  transition: opacity 0.6s var(--pdp-ease-luxury-out), transform 0.6s var(--pdp-ease-luxury-out);
}

.pdp-comparison-table.pdp-animate-ready .pdp-comparison-cell.pdp-animated {
  opacity: 1;
  transform: translateY(0);
}

/* ────────────────────────────────────────────────────────
   SECTION 13.9: RESPONSIVE BREAKPOINTS
   Tablet: refined 3-column with better spacing
   Mobile (≤767px): 2-column layout + full-width feature labels
   Small mobile: compact refinements
   ──────────────────────────────────────────────────────── */

/* Tablet (≤1023px) — refined 3-column layout */
@media (max-width: 1023px) {
  .pdp-comparison-row {
    grid-template-columns: minmax(130px, 0.85fr) minmax(210px, 1.25fr) minmax(160px, 1fr);
  }

  .pdp-comparison-cell {
    padding: 13px 18px;
    gap: 10px;
  }

  .pdp-comparison-feature-label {
    font-size: 14px;
  }

  .pdp-comparison-value-text {
    font-size: 14px;
  }

  .pdp-comparison-column-label {
    font-size: 16px;
  }
}

/* Mobile (≤767px) — 2-column table with inline feature labels */
@media (max-width: 767px) {
  .pdp-comparison-table {
    --ct-radius: 16px;
  }

  /* HEADER ROW: 2 columns, hide the empty corner cell */
  .pdp-comparison-header-row {
    grid-template-columns: 1fr 1fr;
  }

  .pdp-comparison-header-row .pdp-comparison-corner-cell {
    display: none;
  }

  .pdp-comparison-header-row .pdp-comparison-cell {
    min-height: 68px;
    padding: 14px 16px;
  }

  .pdp-comparison-column-label {
    font-size: 15px;
  }

  .pdp-comparison-recommended-badge {
    font-size: 8px;
    padding: 4px 10px;
    top: 10px;
  }

  /* FEATURE ROWS: 2-column grid, feature label hidden */
  .pdp-comparison-row:not(.pdp-comparison-header-row) {
    grid-template-columns: 1fr 1fr;
  }

  /* Hide the feature label cell — value texts are self-descriptive */
  .pdp-comparison-row:not(.pdp-comparison-header-row) .pdp-comparison-cell-label {
    display: none;
  }

  /* Value cells: generous spacing, full half-width */
  .pdp-comparison-cell-value {
    padding: 10px 16px 14px;
    min-height: 48px;
    gap: 10px;
  }

  .pdp-comparison-value-text {
    font-size: 14px;
  }

  /* Badges */
  .pdp-comparison-badge {
    width: 28px;
    height: 28px;
  }

  .pdp-comparison-badge svg {
    width: 15px;
    height: 15px;
  }
}

/* Small mobile (≤479px) — compact refinements */
@media (max-width: 479px) {
  .pdp-comparison-table {
    --ct-radius: 14px;
  }

  .pdp-comparison-cell-value {
    padding: 8px 12px 12px;
    gap: 8px;
    min-height: 44px;
  }

  .pdp-comparison-value-text {
    font-size: 13px;
  }

  .pdp-comparison-column-label {
    font-size: 14px;
  }

  .pdp-comparison-badge {
    width: 26px;
    height: 26px;
  }

  .pdp-comparison-badge svg {
    width: 13px;
    height: 13px;
  }

  .pdp-comparison-header-row .pdp-comparison-cell {
    min-height: 60px;
    padding: 12px;
  }

  .pdp-comparison-recommended-badge {
    font-size: 7px;
    padding: 3px 8px;
    top: 8px;
  }
}

/* ============================================================
   END OF COMPARISON CHART STYLES
   ============================================================ */
/* ============================================================
   SECTION 18: FAQ
   ============================================================ */

/* 18.1: Section Wrapper & Brand Tokens */
.pdp-faq-section {
  --faq-brand: var(--pdp-primary, #d46a3a);
  --faq-brand-ink: #ffffff;
  --faq-card: #ffffff;
  --faq-text: var(--pdp-text-primary, #121212);
  --faq-muted: rgba(18, 18, 18, .55);
  --faq-border: rgba(18, 18, 18, .08);
  --faq-shadow: 0 4px 16px rgba(18, 18, 18, .05);
  --faq-radius: 12px;
  --faq-radius-sm: 8px;
  --faq-focus: 0 0 0 3px rgba(212, 106, 58, .30);
  /* NO padding — container handles all spacing via alignment tokens */
}

/* 18.2: Container — alignment tokens applied via shared rule (styles/components/reviews.txt) */
.pdp-faq-container {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

/* 17.3: Header — reset shared margin-bottom (grid gap handles spacing) */
.pdp-faq-section .pdp-section-header {
  margin-bottom: 0;
}

/* 17.3b: Body — internal spacing for search, pills, card */
.pdp-faq-body {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

/* 17.4: Search */
.pdp-faq__controls {
  width: min(560px, 100%);
  margin: 0 auto;
}

.pdp-faq__searchLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pdp-faq__search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px clamp(12px, 1.5vw, 16px);
  border-radius: 999px;
  border: 1px solid rgba(18, 18, 18, .10);
  background: #ffffff;
  color: var(--faq-text);
  outline: none;
  font-size: 13px;
  line-height: 1.2;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.pdp-faq__search::placeholder {
  color: rgba(18, 18, 18, .35);
}

.pdp-faq__search:focus {
  border-color: rgba(212, 106, 58, .40);
  box-shadow: 0 0 0 3px rgba(212, 106, 58, .10);
}

/* 17.5: Filter Pills */
.pdp-faq__filtersWrap {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.pdp-faq__filtersTrack {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(18, 18, 18, .04);
  border: 1px solid rgba(18, 18, 18, .06);
  flex-wrap: wrap;
  justify-content: center;
}

.pdp-faq__filter {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(18, 18, 18, .60);
  padding: 8px clamp(12px, 1.5vw, 16px);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
  user-select: none;
}

.pdp-faq__filter:hover {
  background: rgba(18, 18, 18, .05);
  color: var(--faq-text);
}

.pdp-faq__filter:focus-visible {
  outline: none;
  box-shadow: var(--faq-focus);
}

.pdp-faq__filter.is-active {
  border-color: transparent;
  background: var(--faq-brand);
  color: var(--faq-brand-ink);
  box-shadow: 0 2px 8px rgba(212, 106, 58, .18);
}

/* 17.6: Card */
.pdp-faq__card {
  background: var(--faq-card);
  border: 1px solid var(--faq-border);
  border-radius: var(--faq-radius);
  box-shadow: var(--faq-shadow);
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.pdp-faq__list {
  padding: 0;
}

/* 17.7: Accordion Items */
.pdp-faq__item {
  border-radius: var(--faq-radius-sm);
  overflow: hidden;
  background: transparent;
  transition: background .18s ease;
}

.pdp-faq__item + .pdp-faq__item {
  border-top: 1px solid rgba(18, 18, 18, .06);
}

/* 17.8: Question Button */
.pdp-faq__q {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(12px, 1.5vw, 16px);
  padding: clamp(12px, 1.5vw, 16px) clamp(12px, 1.5vw, 16px);
  min-height: 44px; /* Touch target */
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--faq-text);
  font-family: inherit;
}

.pdp-faq__q:hover {
  background: rgba(18, 18, 18, .025);
}

.pdp-faq__q:focus-visible {
  outline: none;
  box-shadow: var(--faq-focus);
  border-radius: var(--faq-radius-sm);
}

.pdp-faq__qText {
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: color .18s ease;
}

.pdp-faq__item.is-open .pdp-faq__qText {
  color: var(--faq-brand);
}

/* 17.9: Plus/Minus Icon */
.pdp-faq__icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
  border-radius: 999px;
  border: 1.5px solid rgba(18, 18, 18, .12);
  background: transparent;
  flex-shrink: 0;
  transition: border-color .18s ease, background .18s ease;
}

.pdp-faq__item.is-open .pdp-faq__icon {
  border-color: var(--faq-brand);
  background: var(--faq-brand);
}

.pdp-faq__icon::before,
.pdp-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  background: rgba(18, 18, 18, .50);
  transform: translate(-50%, -50%);
  border-radius: 2px;
  transition: transform .16s ease, opacity .16s ease, background .16s ease;
}

.pdp-faq__icon::after {
  width: 1.5px;
  height: 10px;
}

.pdp-faq__item.is-open .pdp-faq__icon::before {
  background: #ffffff;
}

.pdp-faq__item.is-open .pdp-faq__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
  background: #ffffff;
}

/* 17.10: Answer Panel (grid-template-rows animation) */
.pdp-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
  padding: 0 16px;
}

.pdp-faq__item.is-open .pdp-faq__a {
  grid-template-rows: 1fr;
  padding-bottom: 6px;
}

.pdp-faq__aInner {
  overflow: hidden;
  color: rgba(18, 18, 18, .68);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 78ch;
}

.pdp-faq__aInner p {
  margin: 0;
}

.pdp-faq__aInner ul {
  margin: clamp(12px, 1.5vw, 16px) 0;
  padding-left: clamp(16px, 2vw, 24px);
}

.pdp-faq__aInner li {
  margin-bottom: clamp(12px, 1.5vw, 16px);
  line-height: 1.6;
}

.pdp-faq__aInner li:last-child {
  margin-bottom: 0;
}

/* 17.11: Empty State */
.pdp-faq__empty {
  padding: clamp(24px, 3vw, 32px) clamp(12px, 1.5vw, 16px) clamp(16px, 2vw, 24px);
  text-align: center;
}

.pdp-faq__emptyTitle {
  margin: 0 0 6px 0;
  font-weight: 800;
  color: var(--faq-text);
}

.pdp-faq__emptyText {
  margin: 0;
  color: var(--faq-muted);
}

/* 17.12: CTA Footer */
.pdp-faq__footer {
  border-top: 1px solid var(--faq-border);
  padding: clamp(12px, 1.5vw, 16px);
  background: rgba(18, 18, 18, .02);
}

.pdp-faq__cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(12px, 1.5vw, 16px);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(18, 18, 18, .08);
}

.pdp-faq__ctaText {
  display: grid;
  gap: 2px;
  color: rgba(18, 18, 18, .85);
  font-size: 13px;
  line-height: 1.35;
}

.pdp-faq__ctaText strong {
  font-size: 14px;
  color: var(--faq-text);
}

.pdp-faq__ctaBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--faq-brand);
  color: var(--faq-brand-ink);
  text-decoration: none;
  font-weight: 750;
  font-size: 13px;
  border: 1px solid rgba(212, 106, 58, .75);
  box-shadow: 0 10px 22px rgba(212, 106, 58, .18);
  transition: transform .12s ease, box-shadow .16s ease;
  white-space: nowrap;
}

.pdp-faq__ctaBtn:hover {
  transform: translateY(-1px);
}

.pdp-faq__ctaBtn:focus-visible {
  outline: none;
  box-shadow: var(--faq-focus);
}

/* 17.13: Responsive (Mobile ≤ 767px) */
@media (max-width: 767px) {
  /* Prevent horizontal overflow */
  .pdp-faq-section {
    overflow-x: hidden;
  }

  /* ROOT FIX: force grid columns to respect container width */
  .pdp-faq-container,
  .pdp-faq-body {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  /* Ensure grid children shrink properly */
  .pdp-faq-section .pdp-section-header,
  .pdp-faq-body,
  .pdp-faq__card,
  .pdp-faq__controls,
  .pdp-faq__filtersWrap {
    min-width: 0;
  }

  /* Search bar: hidden on mobile */
  .pdp-faq__controls {
    display: none;
  }

  /* Filter pills: 3-column grid, clean & symmetric */
  .pdp-faq__filtersWrap {
    display: block;
  }

  .pdp-faq__filtersTrack {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(18, 18, 18, .03);
    border: 1px solid rgba(18, 18, 18, .06);
  }

  .pdp-faq__filter {
    padding: 8px 4px;
    font-size: 11.5px;
    white-space: nowrap;
    text-align: center;
    border-radius: 8px;
    letter-spacing: 0;
  }

  .pdp-faq__filter.is-active {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(212, 106, 58, .20);
  }

  /* Card: less border-radius, tighter, respect parent */
  .pdp-faq__card {
    border-radius: 10px;
    box-shadow: none;
    border-color: rgba(18, 18, 18, .08);
    box-sizing: border-box;
  }

  /* Question: compact, border-box to contain width */
  .pdp-faq__q {
    padding: 14px 12px;
    gap: 10px;
    box-sizing: border-box;
  }

  .pdp-faq__qText {
    font-size: 13.5px;
    line-height: 1.3;
  }

  /* Icon: slightly smaller */
  .pdp-faq__icon {
    width: 18px;
    height: 18px;
  }
  .pdp-faq__icon::before { width: 8px; }
  .pdp-faq__icon::after { width: 1.5px; height: 8px; }

  /* Answer: compact, constrained */
  .pdp-faq__a {
    padding: 0 12px;
    box-sizing: border-box;
  }

  .pdp-faq__aInner {
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 100%;
  }

  /* Footer: border-box to prevent overflow */
  .pdp-faq__footer {
    box-sizing: border-box;
  }

  /* CTA: full-width stacked, border-box */
  .pdp-faq__cta {
    grid-template-columns: 1fr;
    padding: 16px 14px;
    gap: 10px;
    text-align: center;
    box-sizing: border-box;
  }

  .pdp-faq__ctaBtn {
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
  }
}

/* 17.14: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .pdp-faq__a,
  .pdp-faq__filter,
  .pdp-faq__icon::before,
  .pdp-faq__icon::after,
  .pdp-faq__ctaBtn,
  .pdp-faq__search {
    transition: none !important;
  }
}
/* ============================================================
   FOOTER SECTION
   ============================================================

   Purpose: Footer styling with brand, links, contact, payment icons
   Features:
   - 3-column grid layout (Brand | Information | Policies)
   - Review stats with star rating display
   - Payment method icons
   - Responsive design (desktop 3-col → mobile 1-col)
   - Clean, minimalist professional design

   Dependencies:
   - config/21-footer.txt (footer config)
   - modules/sections/footer.txt Footer Module (JavaScript)
   - CSS variables from styles/foundation/01-css-variables.txt (theme colors)

   Template: html/sections/footer.txt
============================================================ */

/* ────────────────────────────────────────────────────────
   SECTION 19.1: FOOTER CONTAINER & GRID LAYOUT
   ──────────────────────────────────────────────────────── */

.pdp-footer-section {
  width: 100%;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--pdp-primary-dark) 25%, #0a0a0a 75%) 0%,
    color-mix(in srgb, var(--pdp-primary) 12%, #111111 88%) 50%,
    #0d0d0d 100%
  );  /* Theme-derived gradient (primary color → near-black) */
  border-top: 3px solid var(--pdp-primary);  /* Accent border */
  box-sizing: border-box;
  color: #F1F5F9;  /* Light text for contrast */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);  /* Elevation effect */
  position: relative;
}

.pdp-footer__container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 64px 40px 48px;  /* More generous top padding */
  box-sizing: border-box;
}

.pdp-footer__main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;  /* Brand | Info | Policies | Contact */
  gap: 48px;
  margin-bottom: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  align-items: start;  /* Top-align all columns */
}

.pdp-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 24px;  /* Reduced from 32px */
  align-items: center;
  margin-top: 0;  /* Removed extra margin */
}

/* ────────────────────────────────────────────────────────
   SECTION 19.2: BRAND SECTION
   ──────────────────────────────────────────────────────── */

.pdp-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

/* Logo (matches header styling exactly - styles/sections/header.txt) */
.pdp-footer__logo {
  display: flex;
  align-items: center;
}

.pdp-footer__logo-img {
  max-width: 180px;  /* Same as header */
  height: auto;
  max-height: 50px;  /* Same as header */
  display: block;
  object-fit: contain;
}

.pdp-footer__logo-text {
  font-size: 26px;  /* Exact match with header */
  font-weight: 600;
  color: var(--pdp-primary);
  letter-spacing: -1px;  /* Exact match with header */
}

/* Tagline */
.pdp-footer__tagline {
  font-size: 15px;
  line-height: 1.7;
  color: #CBD5E1;  /* Light gray for readability */
  margin: 0;
  max-width: 380px;
  opacity: 0.9;
}

/* Review Stats - Minimal Professional Design */
.pdp-footer__reviews {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pdp-footer__reviews-badge {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--pdp-primary);
}

/* Row 1: Stars + numeric rating */
.pdp-footer__reviews-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pdp-footer__rating-stars {
  font-size: 14px;
  color: #FFB800;
  letter-spacing: 1.5px;
  line-height: 1;
}

.pdp-footer__rating-info {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pdp-footer__rating-text {
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1;
}

.pdp-footer__rating-label {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1;
}

/* Row 2: Verified badge + count */
.pdp-footer__reviews-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 0;
  border-top: none;
}

.pdp-footer__verified-icon {
  flex-shrink: 0;
  opacity: 0.75;
}

.pdp-footer__rating-count {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1;
}

/* ────────────────────────────────────────────────────────
   SECTION 19.3: INFORMATION LINKS
   ──────────────────────────────────────────────────────── */

.pdp-footer__links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pdp-footer__links-title {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.2;
}

.pdp-footer__links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdp-footer__link {
  font-size: 14px;
  color: #CBD5E1;  /* Light gray */
  text-decoration: none;
  transition: color var(--pdp-transition-normal) ease;
  display: block;
  line-height: 1.8;
}

.pdp-footer__link:hover {
  color: #FFFFFF;
}

/* ────────────────────────────────────────────────────────
   SECTION 19.4: POLICIES LINKS
   ──────────────────────────────────────────────────────── */

/* Uses same styling as information links (15.3) */
.pdp-footer__links--policies .pdp-footer__link {
  /* Inherits all link styles from 15.3 */
}

/* Modal trigger buttons - styled as links */
.pdp-footer__link--modal {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

/* ────────────────────────────────────────────────────────
   SECTION 19.5: CONTACT INFORMATION (4th grid column)
   ──────────────────────────────────────────────────────── */

.pdp-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Title styling (matches other columns) */
.pdp-footer__contact-title {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.2;
}

.pdp-footer__contact-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdp-footer__contact-label {
  font-size: 13px;
  font-weight: 600;
  color: #CBD5E1;  /* Lighter gray for label */
}

.pdp-footer__contact-link {
  font-size: 14px;
  color: #60A5FA;  /* Light blue for links */
  text-decoration: none;
  transition: all var(--pdp-transition-normal) ease;
  position: relative;
  padding-bottom: 2px;
  word-break: break-word;  /* Prevent overflow */
}

.pdp-footer__contact-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #FFFFFF;
  transition: width var(--pdp-transition-normal) ease;
}

.pdp-footer__contact-link:hover {
  color: #FFFFFF;
}

.pdp-footer__contact-link:hover::after {
  width: 100%;
}

/* ────────────────────────────────────────────────────────
   SECTION 19.6: PAYMENT ICONS
   ──────────────────────────────────────────────────────── */

.pdp-footer__payment {
  display: flex;
  justify-content: center;
  width: 100%;
}

.pdp-footer__payment-icons {
  display: flex;
  gap: 16px;  /* Reduced from 24px */
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.pdp-footer__payment-icon {
  /* Sized via config CSS custom properties (from config/05-product-catalog.txt sizes) */
  width: var(--pdp-icon-w, 24px);
  height: var(--pdp-icon-h, 24px);
  object-fit: contain;
  display: block;
  opacity: 0.85;
  transition: all var(--pdp-transition-normal) ease;
  filter: brightness(1.1);
}

.pdp-footer__payment-icon:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ────────────────────────────────────────────────────────
   SECTION 19.7: COPYRIGHT BAR
   ──────────────────────────────────────────────────────── */

.pdp-footer__copyright {
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  width: 100%;
}

.pdp-footer__copyright-text {
  font-size: 13px;
  color: #94A3B8;  /* Muted light gray */
  margin: 0;
  letter-spacing: 0.3px;
  opacity: 0.8;
}

/* ────────────────────────────────────────────────────────
   SECTION 19.8: RESPONSIVE - TABLET (768px)
   ──────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .pdp-footer__main {
    grid-template-columns: 1fr 1fr;  /* 2 columns on tablet: Brand+Contact | Links */
    gap: 32px;
  }

  /* Merge brand and contact in first column */
  .pdp-footer__brand {
    grid-column: 1;
  }

  .pdp-footer__contact {
    grid-column: 1;
    margin-top: 24px;
  }

  /* Merge info and policies in second column */
  .pdp-footer__links {
    grid-column: 2;
  }

  .pdp-footer__logo-img {
    max-width: 150px;
  }

  .pdp-footer__tagline {
    font-size: 13px;
  }
}

/* ────────────────────────────────────────────────────────
   SECTION 19.9: RESPONSIVE - MOBILE (<768px)
   ──────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .pdp-footer__container {
    padding: 40px 20px 28px;
  }

  /* ── Left-aligned professional DTC layout ── */
  /* Pattern: Brand (full) → Info|Policies (2-col) → Contact (full) */
  .pdp-footer__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
    margin-bottom: 20px;
    padding-bottom: 24px;
  }

  /* Brand — full width, left-aligned */
  .pdp-footer__brand {
    grid-column: 1 / -1;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .pdp-footer__logo {
    justify-content: flex-start;
  }

  .pdp-footer__logo-img {
    max-width: 140px;
  }

  .pdp-footer__logo-text {
    font-size: 22px;
  }

  .pdp-footer__tagline {
    text-align: left;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
  }

  .pdp-footer__reviews {
    align-items: flex-start;
  }

  .pdp-footer__reviews-badge {
    gap: 6px;
  }

  .pdp-footer__rating-stars {
    font-size: 12px;
  }

  .pdp-footer__rating-text {
    font-size: 15px;
  }

  .pdp-footer__rating-label {
    white-space: nowrap;
    font-size: 11px;
  }

  .pdp-footer__rating-count {
    font-size: 11px;
  }

  /* Navigation — 2-column side-by-side, left-aligned */
  .pdp-footer__links {
    grid-column: auto;  /* Override tablet grid-column: 2 */
    text-align: left;
    align-items: flex-start;
    gap: 12px;
  }

  .pdp-footer__links-title {
    font-size: 12px;
    margin-bottom: 2px;
    letter-spacing: 1.2px;
    text-align: left;
  }

  .pdp-footer__links-title::after {
    display: none;
  }

  .pdp-footer__links-list {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .pdp-footer__link {
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
  }

  .pdp-footer__link--modal {
    text-align: left;
  }

  /* Contact — full width, left-aligned */
  .pdp-footer__contact {
    grid-column: 1 / -1;
    align-items: flex-start;
    text-align: left;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .pdp-footer__contact .pdp-footer__links-title {
    font-size: 12px;
    text-align: left;
  }

  .pdp-footer__contact-item {
    align-items: flex-start;
  }

  .pdp-footer__contact-label {
    font-size: 12px;
  }

  .pdp-footer__contact-link {
    font-size: 13px;
  }

  /* Bottom section — centered (payment + copyright) */
  .pdp-footer__bottom {
    gap: 16px;
  }

  .pdp-footer__payment-icons {
    gap: 10px;
  }

  .pdp-footer__payment-icon {
    width: var(--pdp-icon-mw, 38px);
    height: var(--pdp-icon-mh, 38px);
  }

  .pdp-footer__copyright {
    padding-top: 16px;
  }

  .pdp-footer__copyright-text {
    font-size: 11px;
  }
}

/* ────────────────────────────────────────────────────────
   SECTION 19.10: PRINT STYLES
   ──────────────────────────────────────────────────────── */

@media print {
  .pdp-footer-section {
    background: white;
    color: #000;
    border-top: 1px solid #000;
    page-break-inside: avoid;
  }

  /* Reset all text colors for print */
  .pdp-footer__logo-text,
  .pdp-footer__tagline,
  .pdp-footer__rating-text,
  .pdp-footer__rating-count,
  .pdp-footer__links-title,
  .pdp-footer__link,
  .pdp-footer__contact-label,
  .pdp-footer__contact-link,
  .pdp-footer__copyright-text {
    color: #000 !important;
  }

  .pdp-footer__payment-icons {
    display: none;  /* Hide payment icons in print */
  }
}
/* ============================================================
   GUARANTEE SECTION STYLES
   ============================================================
   Layer 0: .pdp-guarantee-section (outer wrapper)
   Layer 1: .pdp-guarantee-container (alignment tokens via shared rule)
   Layer 2: Inner content (raw clamp() values)
   ============================================================ */

/* Layer 0: Outer wrapper - centered layout */
.pdp-guarantee-section {
  position: relative;
  overflow: hidden;
}

/* Layer 1: Alignment container - centered content */
.pdp-guarantee-container {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Shield Icon */
.pdp-guarantee-icon {
  width: clamp(48px, 5.5vw, 60px);
  height: clamp(48px, 5.5vw, 60px);
  margin: 0 auto clamp(12px, 1.4vw, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pdp-primary), var(--pdp-primary-dark));
  border-radius: var(--pdp-radius-lg);
  box-shadow: 0 4px 16px rgba(var(--pdp-primary-rgb), 0.3);
}

.pdp-guarantee-icon svg {
  width: clamp(24px, 2.8vw, 30px);
  height: clamp(24px, 2.8vw, 30px);
  fill: var(--pdp-white);
}

/* Title */
.pdp-guarantee-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pdp-text-primary);
  margin-bottom: clamp(8px, 1vw, 12px);
  letter-spacing: -0.02em;
}

/* Description */
.pdp-guarantee-description {
  font-size: clamp(13px, 1.15vw, 16px);
  color: var(--pdp-text-secondary);
  max-width: 520px;
  margin: 0 auto clamp(16px, 1.8vw, 24px);
  line-height: 1.7;
  font-weight: 400;
}

/* CTA Button */
.pdp-guarantee-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: clamp(12px, 1.2vw, 16px) clamp(30px, 3.5vw, 44px);
  background: linear-gradient(135deg, var(--pdp-primary) 0%, var(--pdp-primary-dark) 100%);
  color: var(--pdp-white);
  font-family: var(--pdp-font-family);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--pdp-radius-full);
  cursor: pointer;
  transition: transform var(--pdp-transition-base), box-shadow var(--pdp-transition-base);
  box-shadow: 0 4px 20px rgba(var(--pdp-primary-rgb), 0.35);
  margin-bottom: clamp(28px, 3vw, 40px);
}

.pdp-guarantee-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(var(--pdp-primary-rgb), 0.45);
}

.pdp-guarantee-cta:active {
  transform: translateY(0);
}

.pdp-guarantee-cta svg {
  width: 15px;
  height: 15px;
  fill: var(--pdp-white);
  flex-shrink: 0;
}

/* Trust Indicators — frosted glass pills, wrap on small screens */
.pdp-guarantee-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 12px);
}

.pdp-guarantee-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, 1vw, 14px);
  color: var(--pdp-text-primary);
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--pdp-radius-full);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  letter-spacing: 0.01em;
}

.pdp-guarantee-trust-check {
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border-radius: 0;
}

.pdp-guarantee-trust-check svg {
  width: 17px;
  height: 17px;
  fill: var(--pdp-primary);
}

/* Decorative product images (disabled by default, available via config) */
.pdp-guarantee-deco {
  position: relative;
  width: clamp(160px, 18vw, 260px);
  height: clamp(160px, 18vw, 260px);
  background: var(--pdp-white);
  border-radius: var(--pdp-radius-lg);
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  padding: 6px;
  display: none;
}

.pdp-guarantee-deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Mobile (<=767px) — compact pills */
@media (max-width: 767px) {
  .pdp-guarantee-trust-item {
    font-size: 12px;
    padding: 6px 14px;
    gap: 5px;
  }

  .pdp-guarantee-trust-check,
  .pdp-guarantee-trust-check svg {
    width: 13px;
    height: 13px;
  }
}

/* Small mobile (<=479px) */
@media (max-width: 479px) {
  .pdp-guarantee-title {
    font-size: 20px;
  }

  .pdp-guarantee-description {
    font-size: 13px;
  }

  .pdp-guarantee-cta {
    width: 100%;
    max-width: 280px;
  }
}
/* ============================================================
   HEADER STYLES
   ============================================================

   Contents:
   1. Base Header
   2. Logo Section
   3. Navigation (Desktop)
   4. Cart Icon
   5. Mobile Menu Button
   6. Mobile Menu Drawer
   7. Sticky Header
   8. Responsive Breakpoints
   ============================================================ */

/* ============================================================
   1. BASE HEADER
   ============================================================ */

.pdp-header {
  position: relative;
  width: 100%;
  height: var(--pdp-header-height);
  background: var(--pdp-header-bg);
  z-index: var(--pdp-header-z-index);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pdp-header--border-bottom {
  border-bottom: var(--pdp-header-border-width) solid var(--pdp-header-border-color);
}

.pdp-header__container {
  position: relative; /* For absolute nav positioning */
  /* No z-index needed — drawer/overlay are on body, not inside header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 2.5vw, 32px);
  box-sizing: border-box;
}

/* ============================================================
   2. LOGO SECTION
   ============================================================ */

.pdp-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: clamp(40px, 8vw, 100px);
}

.pdp-header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.pdp-header__logo-image {
  display: block;
  max-width: 180px;
  height: auto;
  max-height: 50px;
  object-fit: contain;
}

.pdp-header__logo-text {
  font-size: 26px;
  font-weight: 600;
  color: var(--pdp-primary);
  letter-spacing: -1px;
}

/* ============================================================
   3. NAVIGATION (DESKTOP)
   ============================================================ */

.pdp-header__nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.pdp-header__nav-list {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pdp-header__nav-item {
  margin: 0;
  padding: 0;
}

.pdp-header__nav-link {
  display: inline-block;
  font-family: var(--pdp-font-family-nav);
  font-size: var(--pdp-header-font-size);
  font-weight: var(--pdp-header-font-weight);
  letter-spacing: var(--pdp-header-letter-spacing);
  text-transform: var(--pdp-header-text-transform);
  color: var(--pdp-header-text);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}

.pdp-header__nav-link:hover {
  color: var(--pdp-header-text-hover);
}

/* Active state */
.pdp-header__nav-link.active {
  font-weight: var(--pdp-header-font-weight-active);
  color: var(--pdp-header-text-hover);
}

/* Underline animation on hover */
.pdp-header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--pdp-header-text-hover);
  transition: width 0.3s ease;
}

.pdp-header__nav-link:hover::after {
  width: 100%;
}

/* ============================================================
   4. CART ICON
   ============================================================ */

.pdp-header__cart {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-right: 72px;
}

.pdp-header__cart-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease;
}

.pdp-header__cart-button:hover {
  transform: scale(1.1);
}

.pdp-header__cart-button:active {
  transform: scale(0.95);
}

.pdp-header__cart-icon {
  width: 24px;
  height: 24px;
  color: var(--pdp-header-cart-icon);
}

.pdp-header__cart-count {
  position: absolute;
  top: 0;
  right: 0;
  display: none; /* Hidden by default, shown via JS when count > 0 */
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--pdp-header-cart-count-bg);
  color: var(--pdp-header-cart-count);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border-radius: 9px;
  box-sizing: border-box;
}

/* ============================================================
   5. MOBILE MENU BUTTON — Pure CSS Hamburger → X Morph
   ============================================================ */

.pdp-header__mobile-menu-button {
  display: none; /* Hidden on desktop */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}

/* Hamburger container — holds 3 lines */
.pdp-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 18px;
  position: relative;
}

/* Individual hamburger lines */
.pdp-header__hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--pdp-header-text);
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* Line positions: top / middle / bottom */
.pdp-header__hamburger-line:nth-child(1) { top: 0; }
.pdp-header__hamburger-line:nth-child(2) { top: 8px; }
.pdp-header__hamburger-line:nth-child(3) { top: 16px; }

/* Morph to X when menu is open */
.pdp-header--menu-open .pdp-header__hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.pdp-header--menu-open .pdp-header__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.pdp-header--menu-open .pdp-header__hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================================
   6. MOBILE MENU DRAWER — Fullscreen Premium
   ============================================================ */

.pdp-header__mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--pdp-header-bg);
  z-index: 10000; /* On body — must be above all page sections */
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  box-sizing: border-box;
  will-change: transform;
}

/* Drawer header — brand + close button */
.pdp-header__drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--pdp-border, #e5e5e5);
}

.pdp-header__drawer-brand {
  font-size: 22px;
  font-weight: 600;
  color: var(--pdp-primary);
  letter-spacing: -0.5px;
}

.pdp-header__drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--pdp-border, #e5e5e5);
  border-radius: 50%;
  cursor: pointer;
  color: var(--pdp-header-text);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}

.pdp-header__drawer-close:hover {
  background: var(--pdp-primary);
  border-color: var(--pdp-primary);
  color: white;
  transform: rotate(90deg);
}

/* Drawer visible — direct class toggle (drawer lives on body, not inside header) */
.pdp-header__mobile-drawer--open {
  transform: translateX(0);
}

.pdp-header__mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pdp-header__mobile-nav-item {
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Staggered entrance — drawer is on body, use --open class */
.pdp-header__mobile-drawer--open .pdp-header__mobile-nav-item {
  opacity: 1;
  transform: translateX(0);
}

.pdp-header__mobile-drawer--open .pdp-header__mobile-nav-item:nth-child(1) { transition-delay: 0.08s; }
.pdp-header__mobile-drawer--open .pdp-header__mobile-nav-item:nth-child(2) { transition-delay: 0.13s; }
.pdp-header__mobile-drawer--open .pdp-header__mobile-nav-item:nth-child(3) { transition-delay: 0.18s; }
.pdp-header__mobile-drawer--open .pdp-header__mobile-nav-item:nth-child(4) { transition-delay: 0.23s; }
.pdp-header__mobile-drawer--open .pdp-header__mobile-nav-item:nth-child(5) { transition-delay: 0.28s; }
.pdp-header__mobile-drawer--open .pdp-header__mobile-nav-item:nth-child(6) { transition-delay: 0.33s; }

.pdp-header__mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 18px 28px;
  font-family: var(--pdp-font-family-nav);
  font-size: 17px;
  font-weight: 500;
  color: var(--pdp-header-text);
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.pdp-header__mobile-nav-link:hover {
  color: var(--pdp-primary);
  background: rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.06);
  border-left-color: var(--pdp-primary);
}

/* Mobile overlay — fullscreen with blur */
.pdp-header__mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999; /* On body — below drawer (10000), above all page sections */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pdp-header__mobile-overlay--open {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   7. STICKY HEADER
   ============================================================ */

.pdp-header--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: var(--pdp-header-sticky-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
  animation: pdp-header-slide-down 0.3s ease;
}

@keyframes pdp-header-slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ============================================================
   8. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet (≤1023px) — reduce nav font to prevent wrapping on 820px */
@media (max-width: 1023px) {
  .pdp-header__nav-list {
    gap: 16px;
  }

  .pdp-header__nav-link {
    font-size: 13px;
  }

  .pdp-header__logo {
    margin-left: clamp(20px, 4vw, 40px);
  }

  .pdp-header__cart {
    margin-right: clamp(20px, 4vw, 40px);
  }
}

/* Mobile (≤767px) — hamburger menu, stacked layout */
@media (max-width: 767px) {
  .pdp-header.pdp-section {
    position: sticky;
    top: 0;
    height: var(--pdp-header-height-mobile);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    /* Must override .pdp-sections--ready .pdp-section { transition: opacity 0.15s } */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* Hide header on scroll down (JS adds this class) */
  .pdp-header.pdp-header--hidden {
    transform: translateY(-100%);
    box-shadow: none;
  }

  /* When menu open: bump z-index AND force visible (override --hidden) */
  .pdp-header.pdp-header--menu-open,
  .pdp-header.pdp-header--elevated {
    z-index: 10001;
    transform: translateY(0) !important;
  }

  /* Prevent desktop sticky animation from firing on mobile */
  .pdp-header--sticky {
    position: sticky;
    animation: none;
  }

  .pdp-header__container {
    padding: var(--pdp-header-padding-mobile);
    position: relative;
    display: flex;
    align-items: center;
  }

  /* Hide desktop navigation */
  .pdp-header__nav {
    display: none;
  }

  /* Mobile layout: Hamburger LEFT | Logo CENTER | Cart RIGHT */

  /* Hamburger menu button - LEFT (order -2 to be first) */
  .pdp-header__mobile-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    order: -2;
    z-index: 10;
    margin: 0;
    padding: 0;
  }

  /* Logo - CENTER (absolute positioned) */
  .pdp-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    z-index: 5;
  }

  .pdp-header__logo-image {
    max-width: 200px;
    max-height: 55px;
  }

  .pdp-header__logo-text {
    font-size: 26px;
  }

  /* Cart section - RIGHT */
  .pdp-header__cart {
    order: 1;
    margin-left: auto;
    margin-right: 0;
    display: flex;
    align-items: center;
  }

  .pdp-header__cart-button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  .pdp-header__cart-icon {
    width: 22px;
    height: 22px;
  }

  /* Mobile drawer — fullscreen with bottom space for sticky bar */
  .pdp-header__mobile-drawer {
    width: 100vw;
    padding-bottom: 70px; /* Reserve space for sticky cart bar */
  }
}

/* Sticky bar + floating bar stay visible above the drawer when menu is open.
   Uses --elevated (not --menu-open) because --elevated persists through the
   close animation (450ms), preventing z-index drop during overlay fade-out. */
body:has(.pdp-header--elevated) .pdp-sticky-cart-bar,
body:has(.pdp-header--elevated) .pdp-floating-product-bar {
  z-index: 10002;
}

/* Small mobile (≤479px) */
@media (max-width: 479px) {
  .pdp-header__logo-image {
    max-width: 120px;
  }
}

/* ============================================================
   END header styles
   ============================================================ */
/* ============================================================
   HERO SECTION STYLES
   ============================================================

   [INFO] Hero section + publication bar component styling

   Sections:
   - 14.1: Hero container & grid layout
   - 14.2: Skip link (accessibility)
   - 14.3: Social proof (stars + rating)
   - 14.4: Heading & description
   - 14.5: Trust indicators (checkmarks)
   - 14.6: CTA buttons
   - 14.7: Trust badges
   - 14.8: Hero visual (image/video)
   - 14.9: Publication bar
   - 14.10: Animations
   - 14.11: Responsive tablet
   - 14.12: Responsive mobile
   - 14.13: Utility classes

   Layout Token Status: EXEMPT (NO layout token validation)
   - Granted exception for flexible clamp() usage
   - Can use raw px, clamp(), vw units

   RGB Token Usage: Reuses existing tokens
   - var(--pdp-primary-rgb) for shadows/overlays
   - var(--pdp-secondary-rgb) for backgrounds

   ============================================================ */

/* ============================================================
   SECTION 14.1: HERO CONTAINER & GRID LAYOUT
   ============================================================ */

.pdp-hero-section {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--pdp-section-pad-top) var(--pdp-section-padding-x) var(--pdp-section-pad-bottom);
  overflow: hidden;  /* Contain child overflow on narrow viewports */
}

.pdp-hero-grid {
  display: grid;
  grid-template-columns: 50fr 50fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin-bottom: clamp(24px, 4vw, 48px);
}

.pdp-hero-content {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 20px);
  margin-left: clamp(40px, 8vw, 100px);
}

.pdp-hero-visual-wrapper {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

/* ============================================================
   SECTION 14.2: SKIP LINK (ACCESSIBILITY)
   ============================================================ */

.pdp-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--pdp-primary);
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
  z-index: 9999;
  transition: top 0.3s;
}

.pdp-skip-link:focus {
  top: 10px;
  outline: 3px solid rgba(var(--pdp-primary-rgb), 0.3);
  outline-offset: 2px;
}

/* ============================================================
   SECTION 14.3: SOCIAL PROOF (STARS + RATING)
   ============================================================ */

.pdp-hero-social-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #555;
}

.pdp-hero-stars {
  display: flex;
  gap: 2px;
}

.pdp-hero-star {
  font-size: 16px;
  line-height: 1;
}

.pdp-hero-star--full {
  color: #fbbf24;
}

.pdp-hero-star--half {
  color: #fbbf24;
  opacity: 0.5;
}

.pdp-hero-star--empty {
  color: #d1d5db;
}

.pdp-hero-rating-text {
  font-weight: 500;
}

/* ============================================================
   SECTION 14.4: HEADING & DESCRIPTION
   ============================================================ */

.pdp-hero-heading {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.pdp-hero-heading-highlight {
  color: var(--pdp-primary);
  display: inline;
}

.pdp-hero-description {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.7;
  color: #555;
  margin: 0;
  text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.05);
}

/* ============================================================
   SECTION 14.5: TRUST INDICATORS (CHECKMARKS)
   ============================================================ */

.pdp-hero-trust-indicators {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdp-hero-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #333;
}

.pdp-hero-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--pdp-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}

.pdp-hero-trust-text {
  font-weight: 500;
}

/* ============================================================
   SECTION 14.6: CTA BUTTONS
   ============================================================ */

.pdp-hero-cta-group {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

.pdp-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.pdp-hero-cta-primary {
  background: var(--pdp-primary);
  color: #fff;
  box-shadow: 0 4px 20px rgba(var(--pdp-primary-rgb), 0.3);
  position: relative;
  overflow: hidden;
}

/* Subtle gradient shine effect (luxe touch) */
.pdp-hero-cta-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%);
  transition: left 0.6s ease;
}

.pdp-hero-cta-primary:hover::before {
  left: 100%;
}

.pdp-hero-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(var(--pdp-primary-rgb), 0.4);
}

.pdp-hero-cta-primary:active {
  transform: translateY(0);
}

.pdp-hero-cta-secondary {
  background: transparent;
  color: var(--pdp-primary);
  padding: 12px 16px;
  font-weight: 600;
  position: relative;
}

.pdp-hero-cta-secondary::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--pdp-primary);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.pdp-hero-cta-secondary:hover::after {
  transform: scaleX(1.1);
}

/* ============================================================
   SECTION 14.7: TRUST BADGES
   ============================================================ */

.pdp-hero-trust-badges {
  display: flex;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: clamp(16px, 2.5vw, 28px) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.pdp-hero-trust-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pdp-hero-trust-badge {
  height: 56px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.pdp-hero-trust-badge:hover {
  opacity: 1;
  transform: scale(1.05);
}

.pdp-hero-trust-badge-label {
  font-size: 10px;
  font-weight: 600;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ============================================================
   SECTION 14.8: HERO VISUAL (IMAGE/VIDEO)
   ============================================================ */

.pdp-hero-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* SENIORS: Hero visual static (no hover effects for calm) */
.pdp-hero-visual--hover {
  /* Hover effect disabled for senior-friendly experience */
}

.pdp-hero-image,
.pdp-hero-video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.pdp-hero-visual-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 18px;
}

.pdp-hero-placeholder-text {
  color: #999;
  font-size: 14px;
}

/* ============================================================
   SECTION 14.9: PUBLICATION BAR (AUTO-SCROLLING SLIDER)
   ============================================================ */

.pdp-publication-bar-section {
  width: 100%;
  background: #FAFAF9;  /* Warmer off-white background */
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;  /* Re-added for line separation design */
  box-sizing: border-box;
  overflow: hidden;
}

.pdp-publication-bar {
  width: 100%;
  padding: 32px 0;  /* Balanced section spacing */
  text-align: center;
  box-sizing: border-box;
}

.pdp-publication-label {
  font-size: 14px;  /* Increased from 13px for better readability */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;  /* Reduced from 1px for refined look */
  color: #555;  /* Darker for better contrast */
  margin: 0 0 32px 0;  /* Increased spacing to logos */
  padding: 0 20px;  /* Raw px - hero section is EXEMPT from layout tokens */
}

/* Slider wrapper (overflow container) */
.pdp-publication-logos-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Slider track (animated) */
.pdp-publication-logos {
  display: flex;
  align-items: center;
  gap: 0;  /* Gap removed - using margin on logos instead */
  animation: pdp-publication-scroll 60s linear infinite;  /* Doubled from 30s for 8x duplication */
  width: fit-content;
}

/* Pause animation on hover */
.pdp-publication-logos:hover {
  animation-play-state: paused;
}

/* Individual logo styling */
.pdp-publication-logo,
.pdp-publication-logo-link img {
  max-height: 32px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;  /* Increased from 0.5 for better visibility */
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin: 0 40px;  /* Spacing between logos (80px total gap) */
}

.pdp-publication-logo:hover,
.pdp-publication-logo-link:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

.pdp-publication-logo-link {
  display: inline-block;
  text-decoration: none;
  flex-shrink: 0;
}

/* Infinite scroll animation */
@keyframes pdp-publication-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ============================================================
   SECTION 14.10: ANIMATIONS (SUBTLE SOPHISTICATION - INSTANT)
   ============================================================ */

[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(8px) scale(0.99);
  transition: opacity 0.4s ease-out,
              transform 0.4s ease-out;
}

[data-animate="fade-up"].pdp-hero-animate-in {
  opacity: 1;
  transform: translateY(0) scale(1.0);
}

/* ============================================================
   SECTION 14.13: UTILITY CLASSES
   ============================================================ */

.pdp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   RESPONSIVE: REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .pdp-publication-logos {
    animation: none;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;  /* Logo margin handles spacing */
    width: auto;
  }

  [data-animate="fade-up"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   SECTION 14.11: RESPONSIVE - TABLET (768px - 1023px)
   ============================================================ */

@media (max-width: 1023px) {
  .pdp-hero-grid {
    grid-template-columns: 50fr 50fr;
    gap: clamp(20px, 3vw, 36px);
  }

  .pdp-hero-heading {
    font-size: clamp(26px, 4vw, 40px);
  }

  .pdp-hero-description {
    font-size: clamp(14px, 1.8vw, 17px);
  }

  .pdp-hero-cta {
    padding: 12px 28px;
    font-size: 15px;
  }
}

/* ============================================================
   SECTION 14.12: RESPONSIVE - MOBILE (<768px)
   ============================================================ */

@media (max-width: 767px) {
  .pdp-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Visual first on mobile */
  .pdp-hero-visual-wrapper {
    order: -1;
    max-width: 100%;
  }

  .pdp-hero-visual {
    max-height: none;
  }

  /* Hero content: logical spacing hierarchy for mobile */
  .pdp-hero-content {
    margin-left: 0;
    text-align: left;
    gap: 16px;
  }

  .pdp-hero-social-proof {
    font-size: 13px;
    justify-content: flex-start;
  }

  .pdp-hero-star {
    font-size: 15px;
  }

  .pdp-hero-heading {
    font-size: clamp(24px, 7vw, 36px);
    text-align: left;
  }

  .pdp-hero-description {
    font-size: 15px;
    text-align: left;
  }

  .pdp-hero-trust-list {
    align-items: flex-start;
  }

  .pdp-hero-trust-item {
    font-size: 14px;
    text-align: left;
  }

  /* CTA group: extra separation from trust indicators (action area) */
  .pdp-hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 8px;
  }

  .pdp-hero-cta {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    font-size: 15px;
    text-align: center;
    border-radius: 10px;
  }

  /* Secondary CTA: text-link style matching desktop (no outlined button) */
  .pdp-hero-cta-secondary {
    background: transparent;
    border: none;
    width: auto;
    align-self: center;
    padding: 14px 20px;
  }

  .pdp-hero-cta-secondary::after {
    bottom: 12px;
    left: 20px;
    right: 20px;
  }

  /* Trust badges: tighter on mobile */
  .pdp-hero-trust-badges {
    gap: 20px;
    padding: 16px 0;
  }

  .pdp-hero-trust-badge {
    height: 44px;
  }

  .pdp-hero-trust-badge-label {
    font-size: 9px;
  }

  .pdp-publication-bar {
    padding: 24px 0;
  }

  .pdp-publication-label {
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
  }

  .pdp-publication-logos {
    gap: 0;
    animation-duration: 90s;  /* Slower on mobile (60s desktop → 90s) — smaller viewport = perceived faster */
  }

  .pdp-publication-logo,
  .pdp-publication-logo-link img {
    max-height: 28px;
    margin: 0 20px;
  }
}
/* ============================================================
   INGREDIENTS SECTION STYLES
   File: styles/sections/ingredients.txt

   3-Layer Structure (Section Alignment System):
   Layer 0: .pdp-ingredients-section (outer wrapper)
     Layer 1: .pdp-ingredients-container (alignment tokens via shared rule)
       Layer 2: .pdp-section-header (shared header classes)
       Layer 3: .pdp-ingredients-body (raw clamp() values)

   Configuration: config/23-ingredients.txt
   Module: modules/sections/ingredients.txt
   Template: html/sections/ingredients.txt
   ============================================================ */

/* ────────────────────────────────────────────────────────
   Outer Wrapper
   ──────────────────────────────────────────────────────── */

.pdp-ingredients-section {
  width: 100%;
  overflow: hidden;
  scroll-margin-top: 100px; /* 80px header + 20px breathing room */
}

/* Ingredients container — section-specific overrides only (alignment handled by shared rule in styles/components/reviews.txt) */
.pdp-ingredients-container {
}

/* ────────────────────────────────────────────────────────
   Tab Strip
   ──────────────────────────────────────────────────────── */

.pdp-ingredients-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-top: 6px;
  padding-bottom: 4px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* Hide scrollbar but keep scrolling */
.pdp-ingredients-tabs::-webkit-scrollbar {
  display: none;
}

.pdp-ingredients-tabs {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Tab pill button */
.pdp-ingredients-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(10px, 1.2vw, 13px) clamp(16px, 1.8vw, 22px);
  border: 1.5px solid var(--pdp-border-default);
  border-radius: 9999px;
  background: var(--pdp-bg-page);
  color: var(--pdp-text-secondary);
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: var(--pdp-font-semibold);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.pdp-ingredients-tab:hover {
  border-color: var(--pdp-primary);
  color: var(--pdp-primary);
  background: rgba(var(--pdp-primary-rgb), 0.04);
  box-shadow: 0 2px 8px rgba(var(--pdp-primary-rgb), 0.10);
  transform: translateY(-1px);
}

.pdp-ingredients-tab.active {
  background: linear-gradient(135deg, var(--pdp-primary) 0%, var(--pdp-primary-dark, var(--pdp-primary)) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow:
    0 4px 14px rgba(var(--pdp-primary-rgb), 0.30),
    0 1px 3px rgba(var(--pdp-primary-rgb), 0.15);
}

.pdp-ingredients-tab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────
   Content Grid (static image + text panels)
   ──────────────────────────────────────────────────────── */

.pdp-ingredients-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

/* ────────────────────────────────────────────────────────
   Panel Wrapper & Panels (text only)
   ──────────────────────────────────────────────────────── */

.pdp-ingredients-panel-wrapper {
  position: relative;
  min-height: 300px;
}

.pdp-ingredients-panel {
  display: none;
}

.pdp-ingredients-panel.active {
  display: block;
  animation: pdp-ingredients-fadeIn 350ms ease-out;
}

/* ────────────────────────────────────────────────────────
   Image Block
   ──────────────────────────────────────────────────────── */

.pdp-ingredients-image {
  aspect-ratio: 1;
  border-radius: var(--pdp-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
}

.pdp-ingredients-image svg {
  width: clamp(48px, 6vw, 80px);
  height: clamp(48px, 6vw, 80px);
  opacity: 0.6;
}

.pdp-ingredients-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.2s ease;
}

.pdp-ingredients-image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ────────────────────────────────────────────────────────
   Info Column
   ──────────────────────────────────────────────────────── */

.pdp-ingredients-info {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
}

/* Header Row (name + dosage) */
.pdp-ingredients-header-row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 18px);
}

.pdp-ingredients-header-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdp-ingredients-name {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  color: var(--pdp-text-primary);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.pdp-ingredients-dosage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--pdp-primary);
  color: #fff;
  border-radius: var(--pdp-radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  width: fit-content;
  border: none;
  box-shadow: 0 2px 8px rgba(var(--pdp-primary-rgb), 0.30);
}

.pdp-ingredients-description {
  color: var(--pdp-text-secondary);
  line-height: 1.75;
  font-size: clamp(13.5px, 1.15vw, 15px);
  margin: 0;
  max-width: 540px;
}

/* ────────────────────────────────────────────────────────
   Benefits — Horizontal Tags
   ──────────────────────────────────────────────────────── */

.pdp-ingredients-benefits {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--pdp-border-light, #f0f0f0);
  margin-top: 2px;
}

.pdp-ingredients-benefit-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  background: transparent;
  color: var(--pdp-text-primary);
  border-radius: 0;
  font-size: clamp(13px, 1.15vw, 14.5px);
  font-weight: 500;
  line-height: 1;
  border: none;
  border-bottom: 1px solid var(--pdp-border-light, #f0f0f0);
  transition: none;
  width: 100%;
}

.pdp-ingredients-benefit-tag:last-child {
  border-bottom: none;
}

.pdp-ingredients-benefit-tag:hover {
  background: transparent;
}

.pdp-ingredients-benefit-tag svg {
  width: 16px;
  height: 16px;
  color: var(--pdp-primary);
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────
   Sourcing — Subtle Inline
   ──────────────────────────────────────────────────────── */

.pdp-ingredients-sourcing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pdp-text-secondary);
}

.pdp-ingredients-sourcing svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--pdp-primary);
}

.pdp-ingredients-sourcing strong {
  color: var(--pdp-text-primary);
  font-weight: 700;
}

/* ────────────────────────────────────────────────────────
   Certification Bar
   ──────────────────────────────────────────────────────── */

.pdp-ingredients-certs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1vw, 12px);
  padding-top: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid var(--pdp-border-light);
}

.pdp-ingredients-cert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--pdp-white);
  border: 1px solid var(--pdp-border-default);
  border-radius: var(--pdp-radius-full);
  font-size: 13px;
  color: var(--pdp-text-secondary);
  font-weight: var(--pdp-font-semibold);
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.pdp-ingredients-cert:hover {
  border-color: rgba(var(--pdp-primary-rgb), 0.3);
  color: var(--pdp-primary);
  box-shadow: 0 2px 10px rgba(var(--pdp-primary-rgb), 0.08);
  transform: translateY(-1px);
}

.pdp-ingredients-cert svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────
   Animation
   ──────────────────────────────────────────────────────── */

@keyframes pdp-ingredients-fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ────────────────────────────────────────────────────────
   Reduced Motion
   ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pdp-ingredients-panel.active {
    animation: none;
  }
  .pdp-ingredients-tab,
  .pdp-ingredients-cert {
    transition-duration: 0s;
  }
}

/* ────────────────────────────────────────────────────────
   Responsive — Tablet (≤1023px)
   Optimized grid, scroll-safe tabs
   ──────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* ── Tab strip: prevent first-tab cutoff ── */
  .pdp-ingredients-tabs {
    scroll-padding-left: 4px;
    padding-left: 2px;
    padding-right: 2px;
  }

  /* ── Grid: give text column more room ── */
  .pdp-ingredients-content {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(20px, 2.5vw, 32px);
  }

  /* ── Image: softer, modern radius ── */
  .pdp-ingredients-image {
    border-radius: 20px;
  }

  /* ── Slightly tighter info spacing ── */
  .pdp-ingredients-info {
    gap: clamp(12px, 1.6vw, 18px);
  }
}

/* ────────────────────────────────────────────────────────
   Responsive — Mobile (≤767px)
   Premium DTC mobile layout: compact image, clean content,
   no card wrapper, streamlined checklist benefits
   ──────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .pdp-ingredients-section {
    scroll-margin-top: 125px;
  }

  /* ── Tab strip: compact, 3+ visible, no fade mask ── */
  .pdp-ingredients-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    margin-bottom: 20px;
    padding: 4px 2px 6px 2px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: 2px;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .pdp-ingredients-tab {
    padding: 8px 14px;
    font-size: 12.5px;
    flex-shrink: 0;
    scroll-snap-align: start;
    border-width: 1.5px;
    gap: 5px;
    box-shadow: none;
  }

  .pdp-ingredients-tab svg {
    width: 14px;
    height: 14px;
  }

  .pdp-ingredients-tab.active {
    box-shadow: 0 3px 10px rgba(var(--pdp-primary-rgb), 0.25);
  }

  /* ── Image: compact 16:9 banner ── */
  .pdp-ingredients-image {
    aspect-ratio: 16/9;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  }

  /* ── Content: single column, image on top ── */
  .pdp-ingredients-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ── Panel wrapper ── */
  .pdp-ingredients-panel-wrapper {
    min-height: unset;
  }

  /* ── Panel: NO card wrapper — clean whitespace layout ── */
  .pdp-ingredients-panel.active {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  /* ── Info column: premium spacing ── */
  .pdp-ingredients-info {
    gap: 14px;
  }

  /* ── Header: name + dosage stacked, strong hierarchy ── */
  .pdp-ingredients-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .pdp-ingredients-name {
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.03em;
  }

  .pdp-ingredients-dosage {
    font-size: 10px;
    padding: 4px 12px;
    letter-spacing: 0.6px;
    box-shadow: 0 1px 4px rgba(var(--pdp-primary-rgb), 0.20);
  }

  /* ── Description ── */
  .pdp-ingredients-description {
    font-size: 14px;
    line-height: 1.7;
    max-width: none;
    color: var(--pdp-text-secondary);
  }

  /* ── Benefits: mobile spacing tweaks ── */
  .pdp-ingredients-benefit-tag {
    padding: 11px 0;
    font-size: 13.5px;
  }

  /* ── Sourcing: subtle inline ── */
  .pdp-ingredients-sourcing {
    font-size: 12.5px;
    line-height: 1.5;
    padding-top: 4px;
    opacity: 0.85;
  }

  /* ── Certs: compact centered row ── */
  .pdp-ingredients-certs {
    justify-content: center;
    gap: 6px;
    padding-top: 18px;
    margin-top: 18px;
  }

  .pdp-ingredients-cert {
    padding: 6px 12px;
    font-size: 11.5px;
    gap: 6px;
    box-shadow: none;
  }

  .pdp-ingredients-cert svg {
    width: 13px;
    height: 13px;
  }
}

/* ────────────────────────────────────────────────────────
   Small mobile (≤479px) — Tighter, compact premium
   ──────────────────────────────────────────────────────── */

@media (max-width: 479px) {
  .pdp-ingredients-tabs {
    gap: 5px;
    margin-bottom: 16px;
  }

  .pdp-ingredients-tab {
    padding: 7px 12px;
    font-size: 11.5px;
    gap: 4px;
  }

  .pdp-ingredients-tab svg {
    width: 12px;
    height: 12px;
  }

  /* ── Image: even more compact 2:1 ── */
  .pdp-ingredients-image {
    aspect-ratio: 2/1;
    border-radius: 10px;
  }

  .pdp-ingredients-content {
    gap: 16px;
  }

  .pdp-ingredients-name {
    font-size: 20px;
  }

  .pdp-ingredients-dosage {
    font-size: 9.5px;
    padding: 4px 10px;
  }

  .pdp-ingredients-description {
    font-size: 13px;
    line-height: 1.65;
  }

  .pdp-ingredients-benefit-tag {
    padding: 10px 0;
    font-size: 13px;
  }

  .pdp-ingredients-certs {
    gap: 5px;
    padding-top: 14px;
    margin-top: 14px;
  }

  .pdp-ingredients-cert {
    padding: 5px 10px;
    font-size: 10.5px;
  }

  .pdp-ingredients-cert svg {
    width: 12px;
    height: 12px;
  }
}

/* ============================================================
   END OF INGREDIENTS SECTION STYLES
   ============================================================ */
/* ============================================================
   RESULTS TIMELINE SECTION
   ============================================================ */

/* ────────────────────────────────────────────────────────
   SECTION 24.1: CONTAINER & LAYOUT (3-LAYER PATTERN)
   ──────────────────────────────────────────────────────── */

/* Layer 0: Outer wrapper - Background controlled by Section Management System */
.pdp-results-timeline-section {
}

/* Layer 1: Alignment container — alignment handled by shared rule in styles/components/reviews.txt */
.pdp-results-timeline-container {
}

/* Layer 2: Section header uses GLOBAL classes:
   .pdp-section-header, .pdp-section-title, .pdp-section-subtitle
   No section-specific header styles needed. */

/* ────────────────────────────────────────────────────────
   SECTION 24.2: TIMELINE BODY
   ──────────────────────────────────────────────────────── */

.pdp-results-timeline-body {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  margin-top: var(--pdp-section-content-margin-top);
}

/* ────────────────────────────────────────────────────────
   SECTION 24.3: CONNECTOR LINE
   ──────────────────────────────────────────────────────── */

.pdp-timeline-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--pdp-primary) 8%,
    var(--pdp-primary) 92%,
    transparent 100%
  );
  opacity: 0.35;
  transform: translateX(-50%);
  border-radius: 2px;
  z-index: 1;
}

.pdp-timeline-spine-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--pdp-primary), var(--pdp-primary-light, #da8661));
  border-radius: 2px;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ────────────────────────────────────────────────────────
   SECTION 24.4: MILESTONE ROW (CSS GRID — ALTERNATING)
   ──────────────────────────────────────────────────────── */

.pdp-timeline-milestone {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: start;
  position: relative;
  z-index: 2;
  margin-bottom: clamp(20px, 2.5vw, 32px);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.pdp-timeline-milestone.pdp-timeline-milestone--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Grid placement for LEFT milestones (card | node | spacer) */
.pdp-timeline-milestone--left .pdp-timeline-card-side {
  grid-column: 1;
  grid-row: 1;
}
.pdp-timeline-milestone--left .pdp-timeline-node {
  grid-column: 2;
  grid-row: 1;
}
.pdp-timeline-milestone--left .pdp-timeline-spacer {
  grid-column: 3;
  grid-row: 1;
}

/* Grid placement for RIGHT milestones (spacer | node | card) */
.pdp-timeline-milestone--right .pdp-timeline-spacer {
  grid-column: 1;
  grid-row: 1;
}
.pdp-timeline-milestone--right .pdp-timeline-node {
  grid-column: 2;
  grid-row: 1;
}
.pdp-timeline-milestone--right .pdp-timeline-card-side {
  grid-column: 3;
  grid-row: 1;
}

/* Spacer (empty side) */
.pdp-timeline-spacer {
  display: block;
}

/* ────────────────────────────────────────────────────────
   SECTION 24.5: CONNECTOR NODE
   ──────────────────────────────────────────────────────── */

.pdp-timeline-node {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 16px;
}

.pdp-timeline-node-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pdp-primary), var(--pdp-primary-dark, #a8532e));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.12),
              0 4px 12px rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.2);
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.pdp-timeline-node-circle svg {
  width: 18px;
  height: 18px;
  fill: var(--pdp-white);
}

/* ────────────────────────────────────────────────────────
   SECTION 24.6: MILESTONE CARD
   ──────────────────────────────────────────────────────── */

.pdp-timeline-card {
  background: var(--pdp-white);
  border-radius: 12px;
  padding: clamp(20px, 2vw, 28px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: none;
  border-left: 3px solid var(--pdp-primary);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  position: relative;
}

.pdp-timeline-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Left card: small margin from spine */
.pdp-timeline-milestone--left .pdp-timeline-card {
  margin-right: 6px;
}

/* Right card: small margin from spine */
.pdp-timeline-milestone--right .pdp-timeline-card {
  margin-left: 6px;
}

/* ────────────────────────────────────────────────────────
   SECTION 24.7: CARD CONTENT
   ──────────────────────────────────────────────────────── */

.pdp-timeline-time {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pdp-primary);
  background: rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.08);
  border: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.pdp-timeline-headline {
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 700;
  color: var(--pdp-text);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 6px 0;
}

.pdp-timeline-description {
  font-size: 14px;
  color: #555;
  font-weight: 400;
  line-height: 1.65;
  margin: 0 0 10px 0;
}

/* ────────────────────────────────────────────────────────
   SECTION 24.8: STAT BADGE
   ──────────────────────────────────────────────────────── */

.pdp-timeline-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.04);
  border: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.1);
  color: var(--pdp-success, #10b981);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
}

.pdp-timeline-stat svg {
  width: 14px;
  height: 14px;
  fill: var(--pdp-success, #10b981);
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────
   SECTION 24.9: TESTIMONIAL QUOTE
   ──────────────────────────────────────────────────────── */

.pdp-timeline-testimonial {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.pdp-timeline-quote {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-style: italic;
  color: var(--pdp-text-muted);
  line-height: 1.6;
  margin: 0 0 2px 0;
}

.pdp-timeline-quote--expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.pdp-timeline-author {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: var(--pdp-text);
}

/* ────────────────────────────────────────────────────────
   SECTION 24.9A: CARD HEADER (RESPONSIVE INLINE ICON)
   ──────────────────────────────────────────────────────── */

/* Desktop: header dissolves — icon hidden, time badge flows normally */
.pdp-timeline-card-header {
  display: contents;
}

.pdp-timeline-card-icon {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pdp-primary);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.2);
}

.pdp-timeline-card-icon svg {
  width: 14px;
  height: 14px;
  fill: var(--pdp-white);
}

/* ────────────────────────────────────────────────────────
   SECTION 24.9B: TESTIMONIAL READ MORE
   ──────────────────────────────────────────────────────── */

.pdp-timeline-read-more {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--pdp-primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 0 0;
  font-family: inherit;
  transition: color var(--pdp-transition-fast, 150ms);
}

.pdp-timeline-read-more:hover {
  color: var(--pdp-primary-dark, #a8532e);
}

/* ────────────────────────────────────────────────────────
   SECTION 24.10: CTA GATE (ZEIGARNIK EFFECT)
   ──────────────────────────────────────────────────────── */

.pdp-timeline-cta-gate {
  position: relative;
  z-index: 10;
  margin: clamp(8px, 1vw, 16px) 0 clamp(16px, 2vw, 32px);
  text-align: center;
  padding: clamp(28px, 3vw, 40px) clamp(20px, 3vw, 40px);
  background: linear-gradient(135deg, #faf6f3 0%, #fff 100%);
  border: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  overflow: hidden;
}

.pdp-timeline-cta-gate.pdp-timeline-cta-gate--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Phase 1: Fade out content (JS sets this class first) */
.pdp-timeline-cta-gate.pdp-timeline-cta-gate--fading {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* Phase 2: Smooth height collapse (JS sets explicit height, then this class) */
.pdp-timeline-cta-gate.pdp-timeline-cta-gate--collapsing {
  opacity: 0;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Final collapsed state (after animation completes) */
.pdp-timeline-cta-gate.pdp-timeline-cta-gate--collapsed {
  display: none;
}

.pdp-timeline-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--pdp-primary);
  margin-bottom: 14px;
}

.pdp-timeline-cta-badge svg {
  width: 16px;
  height: 16px;
  fill: var(--pdp-primary);
}

.pdp-timeline-cta-headline {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  color: var(--pdp-text);
  line-height: 1.3;
  margin: 0 0 6px 0;
}

.pdp-timeline-cta-description {
  font-size: clamp(12px, 1vw, 14px);
  color: var(--pdp-text-muted);
  margin: 0 0 clamp(16px, 2vw, 24px) 0;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.pdp-timeline-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pdp-primary);
  color: var(--pdp-white);
  font-family: inherit;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 600;
  padding: clamp(14px, 1.5vw, 18px) clamp(28px, 3vw, 40px);
  border: none;
  border-radius: var(--pdp-radius-full);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.35);
  transition: background var(--pdp-transition-fast, 150ms), box-shadow var(--pdp-transition-fast, 150ms), transform var(--pdp-transition-fast, 150ms);
  min-height: 52px;
  min-width: 44px;
  position: relative;
  overflow: hidden;
  animation: pdp-timeline-cta-pulse 3s ease-in-out infinite;
}

/* Glossy gradient overlay on button */
.pdp-timeline-cta-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
  border-radius: inherit;
}

.pdp-timeline-cta-button:hover {
  background: var(--pdp-primary-dark, #a8532e);
  box-shadow: 0 6px 24px rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.45);
  transform: translateY(-1px);
  animation: none;
}

.pdp-timeline-cta-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.3);
}

.pdp-timeline-cta-button svg {
  width: 18px;
  height: 18px;
  fill: var(--pdp-white);
  transition: transform var(--pdp-transition-fast, 150ms);
}

.pdp-timeline-cta-button:hover svg {
  transform: translateX(3px);
}

@keyframes pdp-timeline-cta-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.35); }
  50% { box-shadow: 0 4px 24px rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.5); }
}

.pdp-timeline-cta-loss-aversion {
  font-size: clamp(11px, 0.85vw, 12px);
  color: var(--pdp-text-muted);
  margin-top: 12px;
  font-style: italic;
  opacity: 0.8;
}

/* ────────────────────────────────────────────────────────
   SECTION 24.11: LOCKED STATE (BLUR)
   ──────────────────────────────────────────────────────── */

/* Blur applied to entire milestone row (matches D3 mockup) */
.pdp-timeline-milestone--locked {
  filter: blur(2.5px);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  transition: filter 0.7s ease, opacity 0.7s ease, transform 0.6s ease-out;
}

/* Locked nodes: grey instead of primary */
.pdp-timeline-milestone--locked .pdp-timeline-node-circle {
  background: var(--pdp-border);
  box-shadow: none;
}

/* Revealed state (after CTA click — unlock animation) */
.pdp-timeline-milestone--locked.pdp-timeline-milestone--revealed {
  filter: blur(0);
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}

.pdp-timeline-milestone--revealed .pdp-timeline-node-circle {
  background: linear-gradient(135deg, var(--pdp-primary), var(--pdp-primary-dark, #a8532e));
  box-shadow: 0 0 0 4px rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.12),
              0 4px 12px rgba(var(--pdp-primary-rgb, 209, 104, 57), 0.2);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

.pdp-timeline-cta-button:focus-visible {
  outline: 2px solid var(--pdp-primary);
  outline-offset: 2px;
}

/* ────────────────────────────────────────────────────────
   SECTION 24.12: RESPONSIVE — NON-DESKTOP SHARED (≤ 1023px)
   ──────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* Hide spine — visual continuity via card accent borders */
  .pdp-timeline-spine {
    display: none;
  }

  /* Hide grid-based node — icon now inline in card header */
  .pdp-timeline-node {
    display: none;
  }

  /* Hide spacer */
  .pdp-timeline-spacer {
    display: none;
  }

  /* Stacked full-width card layout */
  .pdp-timeline-milestone {
    display: block;
    position: relative;
  }

  .pdp-timeline-milestone--left .pdp-timeline-card-side,
  .pdp-timeline-milestone--right .pdp-timeline-card-side {
    display: block;
  }

  /* Full-width card with left accent border */
  .pdp-timeline-milestone--left .pdp-timeline-card,
  .pdp-timeline-milestone--right .pdp-timeline-card {
    margin: 0;
    border-left: 3px solid var(--pdp-primary);
    text-align: left;
  }

  /* Remove desktop card arrows */
  .pdp-timeline-milestone--left .pdp-timeline-card::after,
  .pdp-timeline-milestone--right .pdp-timeline-card::after {
    display: none;
  }

  /* Card header: flex row with inline icon + time badge */
  .pdp-timeline-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  /* Show inline card icon */
  .pdp-timeline-card-icon {
    display: flex;
  }

  /* Testimonial truncation (2 lines on non-desktop) */
  .pdp-timeline-quote {
    -webkit-line-clamp: 2;
  }

  /* Expanded testimonial */
  .pdp-timeline-quote--expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .pdp-timeline-headline,
  .pdp-timeline-description {
    text-align: left;
  }

  /* CTA gate: centered, no offset */
  .pdp-timeline-cta-gate {
    margin-left: 0;
    text-align: center;
  }

  /* Progress connector — subtle centered dot */
  .pdp-timeline-milestone + .pdp-timeline-milestone::before,
  .pdp-timeline-cta-gate + .pdp-timeline-milestone::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pdp-primary);
    opacity: 0.15;
    margin: 0 auto clamp(12px, 1.5vw, 16px);
  }
}

/* ────────────────────────────────────────────────────────
   SECTION 24.12A: RESPONSIVE — TABLET (768px - 1023px)
   ──────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1023px) {
  .pdp-results-timeline-body {
    max-width: 620px;
  }

  .pdp-timeline-milestone {
    margin-bottom: clamp(24px, 3vw, 32px);
  }

  .pdp-timeline-card-icon {
    width: 36px;
    height: 36px;
  }

  .pdp-timeline-card-icon svg {
    width: 16px;
    height: 16px;
  }

  .pdp-timeline-milestone--left .pdp-timeline-card,
  .pdp-timeline-milestone--right .pdp-timeline-card {
    padding: clamp(20px, 2.5vw, 28px);
    border-radius: 14px;
  }

  .pdp-timeline-cta-gate {
    padding: clamp(28px, 3.5vw, 36px) clamp(24px, 3vw, 32px);
    border-radius: 16px;
  }
}

/* ────────────────────────────────────────────────────────
   SECTION 24.12B: RESPONSIVE — MOBILE (< 768px)
   ──────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .pdp-results-timeline-body {
    max-width: 100%;
  }

  .pdp-timeline-milestone {
    margin-bottom: clamp(20px, 3vw, 28px);
  }

  .pdp-timeline-milestone--left .pdp-timeline-card,
  .pdp-timeline-milestone--right .pdp-timeline-card {
    padding: clamp(16px, 2vw, 20px);
    border-radius: 12px;
  }

  .pdp-timeline-cta-gate {
    padding: clamp(24px, 3vw, 32px) clamp(16px, 2vw, 24px);
  }
}

/* ────────────────────────────────────────────────────────
   SECTION 24.12C: RESPONSIVE — SMALL MOBILE (< 480px)
   ──────────────────────────────────────────────────────── */

@media (max-width: 479px) {
  .pdp-timeline-card-icon {
    width: 28px;
    height: 28px;
  }

  .pdp-timeline-card-icon svg {
    width: 12px;
    height: 12px;
  }

  .pdp-timeline-milestone--left .pdp-timeline-card,
  .pdp-timeline-milestone--right .pdp-timeline-card {
    padding: clamp(14px, 1.8vw, 18px);
    border-radius: 10px;
  }

  .pdp-timeline-cta-gate {
    padding: clamp(20px, 2.5vw, 28px) clamp(14px, 1.8vw, 20px);
  }

  .pdp-timeline-cta-button {
    width: 100%;
    justify-content: center;
  }
}

/* ────────────────────────────────────────────────────────
   SECTION 24.14: ACCESSIBILITY
   ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pdp-timeline-milestone,
  .pdp-timeline-cta-gate,
  .pdp-timeline-spine-fill,
  .pdp-timeline-card,
  .pdp-timeline-node-circle {
    animation: none !important;
    transition: none !important;
  }

  .pdp-timeline-milestone {
    opacity: 1 !important;
    transform: none !important;
  }

  .pdp-timeline-cta-gate {
    opacity: 1 !important;
    transform: none !important;
  }

  .pdp-timeline-cta-button {
    animation: none !important;
  }
}
/* ============================================================
   STATISTICS SECTION
   ============================================================

   Purpose: Open horizontal stats row with vertical separators
   Features:
   - Flex row, 3 items side by side, no cards/boxes
   - Vertical separator lines between items
   - Large gradient counter numbers, centered
   - Scroll-triggered counter animations
   - Minimal footnote disclaimer

   Dependencies:
   - config/16-statistics-section.txt (statistics config)
   - modules/sections/statistics.txt Statistics Module (JavaScript)
   - CSS variables from config/01-theme-colors.txt (theme colors)

   Template: html/sections/statistics.txt
============================================================ */

/* ────────────────────────────────────────────────────────
   SECTION 1: CONTAINER & LAYOUT
   ──────────────────────────────────────────────────────── */

.pdp-statistics-section {
  width: 100%;
  box-sizing: border-box;
}

.pdp-statistics-container {
}

/* ────────────────────────────────────────────────────────
   SECTION 2: HEADER
   Header uses shared .pdp-section-header, .pdp-section-title,
   .pdp-section-subtitle (styles/components/reviews.txt) — no section-specific
   header styles needed here.
   ──────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────
   SECTION 3: STATS ROW (OPEN HORIZONTAL LAYOUT)
   ──────────────────────────────────────────────────────── */

.pdp-statistics-body {
  margin-top: var(--pdp-section-content-margin-top, clamp(16px, 2vw, 24px));
}

.pdp-stats-grid {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

/* ────────────────────────────────────────────────────────
   SECTION 4: STAT ITEM (no card, open style)
   ──────────────────────────────────────────────────────── */

.pdp-stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 4vw, 52px) clamp(16px, 3vw, 40px);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  gap: clamp(10px, 1.5vw, 16px);
  border: none;
  transition: none;
}

.pdp-stat-card:last-child {
  border: none;
}

/* ────────────────────────────────────────────────────────
   SECTION 5: COUNTER NUMBER (GRADIENT TEXT)
   ──────────────────────────────────────────────────────── */

.pdp-stat-number {
  /* Gradient using theme colors (primary → secondary-dark) */
  background: linear-gradient(
    135deg,
    var(--pdp-primary) 0%,
    var(--pdp-secondary-dark) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;

  /* Fallback for browsers without support */
  color: var(--pdp-primary);

  /* Typography — bigger since numbers are the hero */
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  line-height: 1;
  font-family: var(--pdp-font-family);
  letter-spacing: -0.02em;
  will-change: contents;
}

/* ────────────────────────────────────────────────────────
   SECTION 6: TEXT CONTENT
   ──────────────────────────────────────────────────────── */

.pdp-stat-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdp-stat-title {
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 600;
  color: var(--pdp-text);
  margin: 0;
  line-height: 1.3;
  font-family: var(--pdp-font-family);
  text-align: center;
}

.pdp-stat-description {
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 400;
  color: var(--pdp-text-muted);
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

/* ────────────────────────────────────────────────────────
   SECTION 7: DISCLAIMER (minimal footnote)
   ──────────────────────────────────────────────────────── */

.pdp-stats-disclaimer {
  margin-top: clamp(12px, 1.5vw, 18px);
  padding-top: 0;
}

.pdp-stats-disclaimer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  opacity: 0.45;
}

.pdp-stats-disclaimer-icon {
  flex-shrink: 0;
  color: var(--pdp-text-muted);
  line-height: 1;
}

.pdp-stats-disclaimer-icon svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  display: block;
}

.pdp-stats-disclaimer-text {
  font-size: 11px;
  font-weight: 400;
  color: var(--pdp-text-muted);
  margin: 0;
  line-height: 1.3;
  text-align: center;
}

.pdp-stats-disclaimer-text strong {
  color: var(--pdp-text-muted);
  font-weight: 500;
}

/* ────────────────────────────────────────────────────────
   SECTION 8: ANIMATION STATES
   ──────────────────────────────────────────────────────── */

/* Counter number entrance */
.pdp-stat-number.animating {
  animation: pdp-counter-entrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pdp-counter-entrance {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Item stagger entrance */
.pdp-stat-card {
  opacity: 0;
  animation: pdp-stat-entrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pdp-stat-card:nth-child(1) { animation-delay: 0.05s; }
.pdp-stat-card:nth-child(2) { animation-delay: 0.15s; }
.pdp-stat-card:nth-child(3) { animation-delay: 0.25s; }
.pdp-stat-card:nth-child(4) { animation-delay: 0.35s; }

@keyframes pdp-stat-entrance {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ────────────────────────────────────────────────────────
   SECTION 9: UTILITY CLASSES
   ──────────────────────────────────────────────────────── */

/* Hidden state (for module initialization) */
.pdp-statistics-section.pdp-hidden {
  display: none;
}

/* Loading skeleton (optional) */
.pdp-stat-skeleton {
  background: linear-gradient(
    90deg,
    var(--pdp-gray-100) 0%,
    var(--pdp-gray-200) 50%,
    var(--pdp-gray-100) 100%
  );
  background-size: 200% 100%;
  animation: pdp-shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* ────────────────────────────────────────────────────────
   SECTION 10: RESPONSIVE BREAKPOINTS
   ──────────────────────────────────────────────────────── */

/* Mobile: stack vertically, horizontal separators */
@media (max-width: 767px) {
  .pdp-stats-grid {
    flex-direction: column;
  }

  .pdp-stat-card {
    padding: clamp(24px, 4vw, 32px) 0;
  }

  .pdp-stat-number {
    font-size: clamp(42px, 10vw, 56px);
  }

  .pdp-stats-disclaimer {
    margin-top: 8px;
  }

  .pdp-stats-disclaimer-content {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .pdp-stats-disclaimer-icon svg {
    width: 13px;
    height: 13px;
  }

  .pdp-stats-disclaimer-text {
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
  }
}

/* Small mobile (≤479px) — compact numbers */
@media (max-width: 479px) {
  .pdp-stat-number {
    font-size: clamp(36px, 9vw, 48px);
  }

  .pdp-stat-title {
    font-size: 13px;
  }

  .pdp-stat-description {
    font-size: 12px;
  }

  .pdp-stat-card {
    padding: 20px 0;
  }
}

/* ────────────────────────────────────────────────────────
   SECTION 11: ACCESSIBILITY
   ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pdp-stat-card,
  .pdp-stat-number,
  .pdp-stat-skeleton {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}
/* ============================================================
   STEPS SECTION
   ============================================================ */

/* ────────────────────────────────────────────────────────
   SECTION 18.1: CONTAINER & LAYOUT
   ──────────────────────────────────────────────────────── */

/* Steps section container - Background controlled by Section Management System (modules/system/section-manager.txt) */
.pdp-steps-section {
}

/* Steps container — section-specific overrides only (alignment handled by shared rule in styles/components/reviews.txt) */
.pdp-steps-container {
}

/* ────────────────────────────────────────────────────────
   SECTION 18.2: HEADER
   ──────────────────────────────────────────────────────── */

/* Header uses GLOBAL classes: .pdp-section-header, .pdp-section-title, .pdp-section-subtitle
   These are defined centrally and shared across all sections (Reviews, YML, Comparison, Steps).
   No section-specific header styles needed here. */

/* ────────────────────────────────────────────────────────
   SECTION 18.3: STEPS LIST (GRID LAYOUT)
   ──────────────────────────────────────────────────────── */

.pdp-steps-list {
  display: flex;
  flex-direction: row;  /* DESKTOP DEFAULT: Steps side by side (horizontal) */
  flex-wrap: wrap;  /* Allow wrapping for >3 steps */
  justify-content: center;
  align-items: stretch;  /* Equal height cards */
  gap: clamp(24px, 3vw, 32px);
  margin-top: var(--pdp-section-content-margin-top);  /* Semantic token: spacing between header and content */
  margin-bottom: var(--pdp-section-content-margin-bottom);  /* Semantic token: 0px (no bottom spacing) */
  list-style: none;
  padding: 0;
}

.pdp-steps-list--horizontal {
  /* Modifier class - inherits horizontal layout from base */
}

/* ────────────────────────────────────────────────────────
   SECTION 18.4: CAROUSEL MODE
   ──────────────────────────────────────────────────────── */

.pdp-steps-carousel-wrapper {
  position: relative;
  width: 100%;
  display: none; /* Hidden by default, shown on mobile via media query */
  margin-top: var(--pdp-section-content-margin-top);  /* Consistent spacing with grid layout */
  margin-bottom: var(--pdp-section-content-margin-bottom);  /* 0px */
}

.pdp-steps-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Hide scrollbar Firefox */
  gap: clamp(12px, 2vw, 16px);
  padding: 0 clamp(12px, 2vw, 16px);
}

.pdp-steps-carousel-track::-webkit-scrollbar {
  display: none; /* Hide scrollbar Chrome/Safari */
}

.pdp-steps-carousel-slide {
  flex: 0 0 calc(100% - clamp(24px, 4vw, 32px));
  padding: 0;
  box-sizing: border-box;
  scroll-snap-align: center;
}

/* Carousel Navigation Arrows */
.pdp-steps-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--pdp-radius-full);
  background: var(--pdp-white);
  border: 2px solid var(--pdp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--pdp-transition-base);
  box-shadow: var(--pdp-shadow-md);
}

.pdp-steps-carousel-arrow:hover {
  background: var(--pdp-primary);
  border-color: var(--pdp-primary);
  color: var(--pdp-white);
  transform: translateY(-50%) scale(1.05);
}

.pdp-steps-carousel-arrow--prev {
  left: clamp(12px, 1.5vw, 16px);
}

.pdp-steps-carousel-arrow--next {
  right: clamp(12px, 1.5vw, 16px);
}

.pdp-steps-carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: translateY(-50%) scale(1);
}

.pdp-steps-carousel-arrow svg {
  width: 20px;
  height: 20px;
}

/* Carousel Dots */
.pdp-steps-carousel-dots {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1vw, 12px);
  margin-top: clamp(16px, 2vw, 24px);
}

.pdp-steps-carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--pdp-radius-full);
  background: var(--pdp-gray-300);
  border: none;
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
  padding: 0;
}

.pdp-steps-carousel-dot--active {
  background: var(--pdp-primary);
  width: 32px;
}

.pdp-steps-carousel-dot:hover {
  background: var(--pdp-gray-400);
}

.pdp-steps-carousel-dot--active:hover {
  background: var(--pdp-primary);
}

/* ────────────────────────────────────────────────────────
   SECTION 18.5: STEP CARD
   ──────────────────────────────────────────────────────── */

.pdp-step-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pdp-border);
  border-radius: var(--pdp-radius-lg);
  overflow: hidden;
  background: var(--pdp-white);
  transition: all var(--pdp-transition-base);
  box-shadow: var(--pdp-shadow-sm);
}

.pdp-step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pdp-shadow-lg);
  border-color: var(--pdp-primary);
}

.pdp-step-card--row {
  flex-direction: row;
}

/* ────────────────────────────────────────────────────────
   SECTION 18.6: IMAGE CONTAINER
   ──────────────────────────────────────────────────────── */

.pdp-step-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--pdp-gray-100);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-step-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--pdp-transition-base);
}

.pdp-step-card:hover .pdp-step-image {
  transform: scale(1.05);
}

.pdp-step-image--circle {
  border-radius: var(--pdp-radius-full);
}

/* ────────────────────────────────────────────────────────
   SECTION 18.7: CONTENT AREA
   ──────────────────────────────────────────────────────── */

.pdp-step-content {
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 16px);
  background: var(--pdp-white);
  flex: 1;
}

.pdp-step-title-container {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 16px);
}

/* ────────────────────────────────────────────────────────
   SECTION 18.8: NUMBER BADGE
   ──────────────────────────────────────────────────────── */

.pdp-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: var(--pdp-radius-full);
  border: 2px solid var(--pdp-primary);
  background: var(--pdp-white);
  color: var(--pdp-primary);
  font-size: var(--pdp-text-xl);
  font-weight: var(--pdp-font-bold);
  flex-shrink: 0;
  transition: all var(--pdp-transition-base);
}

.pdp-step-card:hover .pdp-step-number {
  background: var(--pdp-primary);
  color: var(--pdp-white);
  transform: scale(1.1);
}

/* Active carousel slide — same look as hover, applied via JS on current slide */
.pdp-steps-carousel-slide--active .pdp-step-card {
  border-color: var(--pdp-primary);
  box-shadow: var(--pdp-shadow-lg);
}

.pdp-steps-carousel-slide--active .pdp-step-number {
  background: var(--pdp-primary);
  color: var(--pdp-white);
}

/* ────────────────────────────────────────────────────────
   SECTION 18.9: TYPOGRAPHY
   ──────────────────────────────────────────────────────── */

.pdp-step-title {
  font-size: var(--pdp-text-xl);
  font-weight: var(--pdp-font-semibold);
  color: var(--pdp-text);
  margin: 0;
  line-height: 1.3;
  flex: 1;
}

.pdp-step-description {
  font-size: var(--pdp-text-base);
  font-weight: var(--pdp-font-normal);
  color: var(--pdp-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ────────────────────────────────────────────────────────
   SECTION 18.10: ANIMATIONS
   ──────────────────────────────────────────────────────── */

.pdp-step-card {
  opacity: 0;
  animation: pdp-step-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pdp-step-card:nth-child(1) { animation-delay: 0.1s; }
.pdp-step-card:nth-child(2) { animation-delay: 0.2s; }
.pdp-step-card:nth-child(3) { animation-delay: 0.3s; }
.pdp-step-card:nth-child(4) { animation-delay: 0.4s; }
.pdp-step-card:nth-child(5) { animation-delay: 0.5s; }

@keyframes pdp-step-entrance {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Focus styles for keyboard navigation */
.pdp-steps-carousel-arrow:focus-visible,
.pdp-steps-carousel-dot:focus-visible {
  outline: 2px solid var(--pdp-primary);
  outline-offset: 2px;
}

/* ────────────────────────────────────────────────────────
   SECTION 18.10B: LOADING STATES
   ──────────────────────────────────────────────────────── */

.pdp-steps-section[data-loading="true"] .pdp-step-card {
  animation: none;
  opacity: 0.5;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────
   SECTION 18.11: RESPONSIVE BREAKPOINTS
   ──────────────────────────────────────────────────────── */

/* Mobile: Carousel mode (< 768px) */
@media (max-width: 767px) {
  .pdp-steps-list {
    display: none; /* Hide grid, show carousel */
  }

  .pdp-steps-carousel-wrapper {
    display: block; /* Show carousel on mobile */
  }

  /* Carousel cards: no entrance animation — always visible, carousel handles transitions */
  .pdp-steps-carousel-wrapper .pdp-step-card {
    opacity: 1;
    animation: none;
  }

  .pdp-step-card {
    flex-direction: column;
  }

  .pdp-step-number {
    min-width: 36px;
    height: 36px;
    font-size: var(--pdp-text-lg);
  }

  .pdp-step-content {
    padding: clamp(16px, 2vw, 24px);
    text-align: left;
  }

  .pdp-step-title,
  .pdp-step-description {
    text-align: left;
  }

  /* Title/subtitle use GLOBAL classes with responsive clamp() tokens - no overrides needed */

  /* Hide arrows on mobile, dots only */
  .pdp-steps-carousel-arrow {
    display: none;
  }

  /* Container padding uses responsive tokens - no override needed */
}

/* Tablet: Grid layout (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .pdp-steps-carousel-wrapper {
    display: none; /* Hide carousel, show grid */
  }

  .pdp-steps-list {
    display: flex;
  }

  .pdp-step-card {
    flex: 0 1 280px;  /* Tablet: slightly smaller basis */
    min-width: 240px;
    max-width: 320px;
  }

  /* Tablet: 2-3 cards per row (depending on screen width) */
}

/* Desktop: Grid layout (≥ 1024px) */
@media (min-width: 1024px) {
  .pdp-steps-carousel-wrapper {
    display: none; /* Hide carousel, show grid */
  }

  .pdp-steps-list {
    display: flex;
  }

  .pdp-step-card {
    flex: 1 1 0;  /* Equal distribution, grows + shrinks */
    min-width: 0;  /* No minimum that forces wrapping */
    max-width: calc((100% - 2 * clamp(24px, 3vw, 32px)) / 3);  /* Exactly 3 per row */
  }
}

/* ────────────────────────────────────────────────────────
   SECTION 18.12: ACCESSIBILITY
   ──────────────────────────────────────────────────────── */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .pdp-step-card,
  .pdp-steps-carousel-track {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }

  .pdp-step-card:hover {
    transform: none;
  }

  .pdp-step-card:hover .pdp-step-image {
    transform: none;
  }

  .pdp-step-card:hover .pdp-step-number {
    transform: none;
  }
}
/* ============================================================
   CONTACT PAGE STYLES
   Hero with info strip, form + sidebar grid
   Shared page hero/layout classes → styles/pages/shared-page-layout.txt
   ============================================================ */

/* ============================================================
   CONTACT: INFO STRIP (inside page hero)
   ============================================================ */

/* Strip: zelfde breedte als grid, gelijke kolommen */
.pdp-page-hero .pdp-contact-info-strip {
  display: flex;
  width: 100%;
  max-width: 1060px;
  margin: clamp(28px, 3.5vw, 44px) auto 0;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.12);
  align-items: stretch;
  gap: 0;
}

.pdp-contact-info-item {
  /* Elke kolom exact 1/3 van de strip — lange tekst wrapat, domineert niet */
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 14px);
  padding: 0 clamp(16px, 2vw, 28px);
}

.pdp-contact-info-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pdp-secondary, #faf0eb);
  border: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.14);
  border-radius: 11px;
  color: var(--pdp-primary, #d16838);
  flex-shrink: 0;
}

.pdp-contact-info-icon svg {
  width: 18px;
  height: 18px;
}

.pdp-contact-info-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.pdp-contact-info-label {
  font-size: clamp(10px, 0.75vw, 11px);
  font-weight: 600;
  color: var(--pdp-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pdp-contact-info-strip .pdp-contact-method-link {
  display: inline;
  color: var(--pdp-text, #111827);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(12px, 0.9vw, 14px);
  transition: color 0.2s ease;
}

.pdp-contact-info-strip .pdp-contact-method-link:hover {
  color: var(--pdp-primary, #d16838);
}

.pdp-contact-info-strip .pdp-contact-method-value {
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 600;
  color: var(--pdp-text, #111827);
  margin: 0;
}

.pdp-contact-strip-divider {
  width: 1px;
  height: 32px;
  background: rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.15);
}

/* ============================================================
   CONTACT: FORM + SIDEBAR
   ============================================================ */

.pdp-contact-main {
  padding: var(--pdp-subpage-pad-y) clamp(20px, 5vw, 48px) var(--pdp-subpage-pad-y);
  /* Subtiele warme achtergrond zodat het witte form card zweeft */
  background: linear-gradient(180deg,
    rgba(var(--pdp-secondary-rgb, 250, 240, 235), 0.35) 0%,
    #fff 28%
  );
}

.pdp-contact-grid {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.pdp-contact-form-wrapper {
  background: #fff;
  border: 1px solid var(--pdp-border, #e5e7eb);
  border-radius: 16px;
  padding: clamp(28px, 3.5vw, 44px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.pdp-contact-form-header {
  margin-bottom: clamp(24px, 3vw, 36px);
  padding-bottom: clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--pdp-border, #e5e7eb);
}

/* Kicker label boven de form titel */
.pdp-contact-form-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pdp-primary, #d16838);
  margin-bottom: clamp(8px, 1vw, 12px);
}

.pdp-contact-form-kicker::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--pdp-primary, #d16838);
  flex-shrink: 0;
}

.pdp-contact-form-header h3 {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  color: var(--pdp-text, #111827);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.pdp-contact-form-header p {
  font-size: clamp(13px, 1vw, 15px);
  color: var(--pdp-text-muted, #6b7280);
  margin: 0;
}

.pdp-contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}

.pdp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.5vw, 20px);
}

.pdp-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdp-form-group label {
  font-size: clamp(12px, 0.85vw, 13px);
  font-weight: 600;
  color: var(--pdp-text, #111827);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pdp-required {
  color: var(--pdp-primary, #d16838);
}

.pdp-form-group input,
.pdp-form-group textarea,
.pdp-form-group select {
  padding: clamp(12px, 1.4vw, 16px) clamp(14px, 1.6vw, 18px);
  border: 1.5px solid var(--pdp-border, #e5e7eb);
  border-radius: 8px;
  font-size: clamp(14px, 1vw, 15px);
  font-family: inherit;
  color: var(--pdp-text, #111827);
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  outline: none;
  -webkit-appearance: none;
}

.pdp-form-group input::placeholder,
.pdp-form-group textarea::placeholder {
  color: #b0b0b0;
  font-weight: 300;
}

.pdp-form-group input:focus,
.pdp-form-group textarea:focus,
.pdp-form-group select:focus {
  border-color: var(--pdp-primary, #d16838);
  box-shadow: 0 0 0 3px rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.1);
}

.pdp-form-group textarea {
  min-height: 140px;
  resize: vertical;
}

.pdp-form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.pdp-form-submit {
  padding: clamp(14px, 1.5vw, 18px) clamp(32px, 3.5vw, 48px);
  background: var(--pdp-primary, #d16838);
  color: #fff;
  border: 2px solid var(--pdp-primary, #d16838);
  border-radius: 8px;
  font-size: clamp(13px, 1vw, 14px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  align-self: flex-start;
}

.pdp-form-submit:hover {
  background: var(--pdp-primary-dark, #b05530);
  border-color: var(--pdp-primary-dark, #b05530);
}

.pdp-form-submit:active {
  transform: translateY(1px);
}

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

/* ── Form feedback ── */
.pdp-form-feedback {
  padding: clamp(12px, 1.5vw, 16px);
  border-radius: 8px;
  font-size: clamp(13px, 1vw, 15px);
  display: none;
  font-weight: 500;
  margin-top: 8px;
}

.pdp-form-feedback.pdp-success {
  display: block;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.pdp-form-feedback.pdp-error {
  display: block;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ── Contact sidebar — wit panel ── */
.pdp-contact-sidebar {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--pdp-border, #e5e7eb);
  padding: clamp(24px, 3vw, 36px);
  gap: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Cards zijn transparant binnen het panel */
.pdp-contact-info-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--pdp-border, #e5e7eb);
  box-shadow: none;
  transition: none;
}

.pdp-contact-info-card:first-child {
  padding-top: 0;
}

.pdp-contact-info-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Card header: icon + titel */
.pdp-contact-card-header {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 14px);
  margin-bottom: clamp(10px, 1.3vw, 14px);
}

.pdp-contact-card-icon {
  width: 34px;
  height: 34px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-primary, #d16838);
  border: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.12);
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.08);
}

.pdp-contact-info-card h3 {
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 700;
  color: var(--pdp-text, #111827);
  margin: 0;
  letter-spacing: -0.01em;
}

.pdp-contact-info-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.8vw, 10px);
}

.pdp-contact-info-card li {
  font-size: clamp(12px, 0.9vw, 13px);
  color: var(--pdp-text, #111827);
  line-height: 1.6;
  padding-left: 14px;
  position: relative;
  opacity: 0.75;
}

.pdp-contact-info-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pdp-primary, #d16838);
}

/* ============================================================
   SELF-SERVICE QUICK LINKS STRIP
   ============================================================ */

/* Self-service strip — wit */
.pdp-contact-selfservice {
  max-width: 1060px;
  margin: clamp(28px, 3.5vw, 40px) auto 0;
  padding: clamp(18px, 2.2vw, 24px) clamp(24px, 3vw, 36px);
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--pdp-border, #e5e7eb);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.pdp-contact-selfservice-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 24px);
  flex-wrap: wrap;
}

.pdp-contact-selfservice-label {
  font-size: clamp(13px, 1vw, 14px);
  color: var(--pdp-text-muted, #6b7280);
  font-weight: 500;
  flex-shrink: 0;
}

.pdp-contact-selfservice-links {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  flex-wrap: wrap;
}

.pdp-contact-selfservice-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: 600;
  color: var(--pdp-text, #111827);
  text-decoration: none;
  padding: clamp(7px, 0.9vw, 9px) clamp(12px, 1.4vw, 16px);
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.12);
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.pdp-contact-selfservice-link:hover {
  color: var(--pdp-primary, #d16838);
  border-color: rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.28);
  box-shadow: 0 2px 8px rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.1);
}

.pdp-contact-selfservice-link svg {
  color: var(--pdp-primary, #d16838);
  flex-shrink: 0;
}

/* ── Contact fallback ── */
.pdp-contact-fallback {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(36px, 4vw, 56px);
  background: var(--pdp-secondary, #faf0eb);
  border-radius: 12px;
}

.pdp-contact-fallback p {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--pdp-text-muted, #6b7280);
  margin: 0 0 8px 0;
}

.pdp-contact-fallback a {
  color: var(--pdp-primary, #d16838);
  font-weight: 600;
  text-decoration: none;
}

.pdp-contact-fallback a:hover {
  text-decoration: underline;
}

/* ============================================================
   PAGE CTA BANNER (shared — contact page)
   ============================================================ */

.pdp-page-cta {
  background: linear-gradient(135deg, #1c1c1e 0%, #2c2420 50%, #1c1c1e 100%);
  padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 48px);
  text-align: center;
}

.pdp-page-cta-inner {
  max-width: 580px;
  margin: 0 auto;
}

.pdp-page-cta-kicker {
  display: inline-block;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pdp-primary, #d16838);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.pdp-page-cta-title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 clamp(12px, 1.5vw, 20px) 0;
  letter-spacing: -0.03em;
}

.pdp-page-cta-text {
  font-size: clamp(15px, 1.2vw, 17px);
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 clamp(28px, 3.5vw, 44px) 0;
  line-height: 1.65;
  font-weight: 300;
}

.pdp-page-cta-btn {
  display: inline-block;
  background: var(--pdp-primary, #d16838);
  color: #fff;
  padding: clamp(14px, 1.5vw, 18px) clamp(28px, 5vw, 56px);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  border: 2px solid var(--pdp-primary, #d16838);
  box-shadow: 0 4px 24px rgba(209, 104, 56, 0.3);
}

.pdp-page-cta-btn:hover {
  background: var(--pdp-primary-dark, #b05530);
  color: #fff;
  border-color: var(--pdp-primary-dark, #b05530);
  box-shadow: 0 6px 28px rgba(209, 104, 56, 0.45);
  transform: translateY(-1px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1023px) {
  .pdp-contact-grid {
    grid-template-columns: 1fr;
  }

  .pdp-page-hero .pdp-contact-info-strip {
    flex-direction: column;
    gap: clamp(12px, 2vw, 16px);
    align-items: flex-start;
    display: flex;
    padding-left: clamp(20px, 3vw, 32px);
  }

  .pdp-contact-strip-divider {
    display: none;
  }
}

@media (max-width: 767px) {
  .pdp-contact-grid {
    grid-template-columns: 1fr;
  }

  .pdp-form-row {
    grid-template-columns: 1fr;
  }

  .pdp-form-submit {
    align-self: stretch;
  }

  .pdp-page-hero .pdp-contact-info-strip {
    flex-direction: column;
    gap: clamp(12px, 2vw, 16px);
    align-items: flex-start;
    display: flex;
    padding-left: clamp(20px, 3vw, 32px);
  }

  .pdp-contact-strip-divider {
    display: none;
  }

  .pdp-contact-selfservice-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 2vw, 16px);
  }

  .pdp-form-group input,
  .pdp-form-group textarea,
  .pdp-form-group select {
    min-height: 48px;
  }
}
/* ============================================================
   SHARED PAGE LAYOUT — used by contact, track-order (and why-choose hero)
   Extracted to eliminate duplication (MIDDEN #9)
   ============================================================ */

/* ── Page content wrapper ── */
.pdp-page-content {
  max-width: 100%;
  margin: 0 auto;
  min-height: 60vh;
}

/* ============================================================
   PAGE HERO (shared across all pages)
   ============================================================ */

.pdp-page-hero {
  background: linear-gradient(180deg, var(--pdp-secondary, #faf0eb) 0%, #fff 100%);
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 48px) clamp(16px, 2vw, 28px);
  text-align: center;
}

.pdp-page-hero-title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  color: var(--pdp-primary, #d16838);
  margin: 0 0 clamp(10px, 1.2vw, 16px) 0;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.pdp-page-hero-subtitle {
  font-size: clamp(15px, 1.3vw, 19px);
  color: var(--pdp-text-muted, #6b7280);
  margin: 0 auto;
  max-width: 480px;
  line-height: 1.7;
  font-weight: 300;
}
/* ============================================================
   TRACK ORDER PAGE STYLES
   Search card + tabs, tracking results, timeline
   Shared page hero/layout classes → styles/pages/shared-page-layout.txt
   ============================================================ */

/* ============================================================
   TRACK ORDER: MAIN CONTAINER
   ============================================================ */

.pdp-track-main {
  padding: var(--pdp-subpage-pad-y) clamp(20px, 5vw, 48px) var(--pdp-subpage-pad-y);
  background: linear-gradient(180deg,
    rgba(var(--pdp-secondary-rgb, 250, 240, 235), 0.35) 0%,
    #fff 28%
  );
}

/* 2-kolom grid: search card + sidebar */
.pdp-track-grid {
  max-width: 1060px;
  margin: 0 auto clamp(20px, 2.5vw, 28px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

/* ============================================================
   TRACK ORDER: SEARCH CARD + TABS
   ============================================================ */

.pdp-track-search-card {
  background: #fff;
  border: 1px solid var(--pdp-border, #e5e7eb);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ── Sidebar — wit panel, zelfde als contact sidebar ── */
.pdp-track-sidebar {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--pdp-border, #e5e7eb);
  padding: clamp(24px, 3vw, 36px);
  gap: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.pdp-track-info-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--pdp-border, #e5e7eb);
}

.pdp-track-info-card:first-child {
  padding-top: 0;
}

.pdp-track-info-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pdp-track-card-header {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 14px);
  margin-bottom: clamp(10px, 1.3vw, 14px);
}

.pdp-track-card-icon {
  width: 34px;
  height: 34px;
  background: var(--pdp-secondary, #faf0eb);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-primary, #d16838);
  border: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.12);
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.08);
}

.pdp-track-info-card h3 {
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 700;
  color: var(--pdp-text, #111827);
  margin: 0;
  letter-spacing: -0.01em;
}

.pdp-track-info-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.7vw, 9px);
}

.pdp-track-info-card li {
  font-size: clamp(12px, 0.9vw, 13px);
  color: var(--pdp-text, #111827);
  line-height: 1.6;
  padding-left: 14px;
  position: relative;
  opacity: 0.75;
}

.pdp-track-info-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pdp-primary, #d16838);
}

/* Self-service strip — zelfde als contact */
.pdp-track-selfservice {
  max-width: 1060px;
  margin: clamp(28px, 3.5vw, 40px) auto 0;
  padding: clamp(18px, 2.2vw, 24px) clamp(24px, 3vw, 36px);
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--pdp-border, #e5e7eb);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.pdp-track-selfservice-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 24px);
  flex-wrap: wrap;
}

.pdp-track-selfservice-label {
  font-size: clamp(13px, 1vw, 14px);
  color: var(--pdp-text-muted, #6b7280);
  font-weight: 500;
  flex-shrink: 0;
}

.pdp-track-selfservice-links {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  flex-wrap: wrap;
}

.pdp-track-selfservice-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: 600;
  color: var(--pdp-text, #111827);
  text-decoration: none;
  padding: clamp(7px, 0.9vw, 9px) clamp(12px, 1.4vw, 16px);
  background: var(--pdp-gray-50, #f9fafb);
  border-radius: 8px;
  border: 1px solid var(--pdp-border, #e5e7eb);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.pdp-track-selfservice-link:hover {
  color: var(--pdp-primary, #d16838);
  border-color: rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.28);
  background: #fff;
}

.pdp-track-selfservice-link svg {
  color: var(--pdp-primary, #d16838);
  flex-shrink: 0;
}

/* Results panel: maximale breedte afstemmen op grid */
.pdp-track-results,
.pdp-track-loading,
.pdp-track-error {
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}

.pdp-track-tabs {
  display: flex;
  border-bottom: 1px solid var(--pdp-border, #e5e7eb);
}

.pdp-track-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(14px, 1.8vw, 18px);
  background: var(--pdp-surface, #f9fafb);
  border: none;
  font-family: inherit;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  color: var(--pdp-text-muted, #6b7280);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.pdp-track-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background 0.25s ease;
}

.pdp-track-tab:hover {
  color: var(--pdp-text, #111827);
  background: #fff;
}

.pdp-track-tab--active {
  background: #fff;
  color: var(--pdp-text, #111827);
  font-weight: 600;
}

.pdp-track-tab--active::after {
  background: var(--pdp-primary, #d16838);
}

.pdp-track-tab svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ============================================================
   TRACK ORDER: FORMS
   ============================================================ */

.pdp-track-form {
  display: none;
  padding: clamp(24px, 3vw, 36px);
}

.pdp-track-form--active {
  display: block;
}

.pdp-track-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.5vw, 20px);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.pdp-track-form-fields--single {
  grid-template-columns: 1fr;
}

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

.pdp-track-field--full {
  grid-column: 1 / -1;
}

.pdp-track-field label {
  font-size: clamp(12px, 0.85vw, 13px);
  font-weight: 600;
  color: var(--pdp-text, #111827);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pdp-track-field input {
  padding: clamp(12px, 1.3vw, 16px) clamp(14px, 1.5vw, 18px);
  border: 1.5px solid var(--pdp-border, #e5e7eb);
  border-radius: 8px;
  font-size: clamp(14px, 1.1vw, 16px);
  font-family: inherit;
  color: var(--pdp-text, #111827);
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  outline: none;
}

.pdp-track-field input::placeholder {
  color: #b0b0b0;
  font-weight: 300;
}

.pdp-track-field input:focus {
  border-color: var(--pdp-primary, #d16838);
  box-shadow: 0 0 0 3px rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.1);
}

.pdp-track-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: clamp(14px, 1.5vw, 18px);
  background: var(--pdp-primary, #d16838);
  color: #fff;
  border: 2px solid var(--pdp-primary, #d16838);
  border-radius: 8px;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.pdp-track-submit-btn:hover {
  background: var(--pdp-primary-dark, #b05530);
  border-color: var(--pdp-primary-dark, #b05530);
}

.pdp-track-submit-btn:active {
  transform: translateY(1px);
}

.pdp-track-submit-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ============================================================
   TRACK ORDER: RESULTS PANEL
   ============================================================ */

.pdp-track-results {
  margin-top: clamp(20px, 2.5vw, 28px);
  background: #fff;
  border: 1px solid var(--pdp-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.pdp-track-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid var(--pdp-border, #e5e7eb);
  background: var(--pdp-surface, #f9fafb);
}

.pdp-track-status-badge {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pdp-track-status-icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--pdp-border, #e5e7eb);
}

.pdp-track-status-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pdp-track-status-label {
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 700;
  color: var(--pdp-text, #111827);
}

.pdp-track-status-detail {
  font-size: clamp(12px, 0.9vw, 14px);
  color: var(--pdp-text-muted, #6b7280);
}

.pdp-track-carrier-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.pdp-track-carrier-name {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  color: var(--pdp-text, #111827);
}

.pdp-track-tracking-num {
  font-size: clamp(11px, 0.85vw, 13px);
  color: var(--pdp-text-muted, #6b7280);
  font-family: 'SFMono-Regular', 'Consolas', monospace;
}

/* ============================================================
   TRACK ORDER: TIMELINE
   ============================================================ */

.pdp-track-timeline {
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 28px);
}

.pdp-track-event {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.5vw, 20px);
  padding-bottom: clamp(20px, 2.5vw, 28px);
  position: relative;
}

.pdp-track-event:last-child {
  padding-bottom: 0;
}

.pdp-track-event::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--pdp-border, #e5e7eb);
}

.pdp-track-event:last-child::before {
  display: none;
}

.pdp-track-event-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pdp-border, #e5e7eb);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 2px;
}

.pdp-track-event--current .pdp-track-event-dot {
  background: var(--pdp-primary, #d16838);
  box-shadow: 0 0 0 4px rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.15);
}

.pdp-track-event-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.pdp-track-event-status {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 600;
  color: var(--pdp-text, #111827);
}

.pdp-track-event--current .pdp-track-event-status {
  color: var(--pdp-primary, #d16838);
}

.pdp-track-event-time {
  font-size: clamp(12px, 0.9vw, 14px);
  color: var(--pdp-text-muted, #6b7280);
}

/* ETA bar */
.pdp-track-eta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: clamp(14px, 1.5vw, 18px) clamp(20px, 2.5vw, 28px);
  background: var(--pdp-secondary, #faf0eb);
  border-top: 1px solid var(--pdp-border, #e5e7eb);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  color: var(--pdp-text, #111827);
}

.pdp-track-eta svg {
  color: var(--pdp-primary, #d16838);
  flex-shrink: 0;
}

/* ParcelPanel iframe */
.pdp-track-iframe {
  width: 100%;
  min-height: 500px;
  border: none;
  display: block;
}

/* ============================================================
   TRACK ORDER: LOADING + ERROR
   ============================================================ */

.pdp-track-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(40px, 5vw, 60px);
  text-align: center;
}

.pdp-track-loading p {
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--pdp-text-muted, #6b7280);
  margin: 0;
}

.pdp-track-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--pdp-border, #e5e7eb);
  border-top-color: var(--pdp-primary, #d16838);
  border-radius: 50%;
  animation: pdp-spin 0.8s linear infinite;
}

@keyframes pdp-spin {
  to { transform: rotate(360deg); }
}

.pdp-track-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(32px, 4vw, 48px);
  text-align: center;
  margin-top: clamp(20px, 2.5vw, 28px);
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 12px;
}

.pdp-track-error svg {
  color: #dc2626;
}

.pdp-track-error p {
  font-size: clamp(14px, 1.1vw, 16px);
  color: #991b1b;
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   TRACK ORDER: HELP
   ============================================================ */

.pdp-track-help {
  margin-top: clamp(24px, 3vw, 36px);
  text-align: center;
}

.pdp-track-help-text {
  font-size: clamp(13px, 1vw, 15px);
  color: var(--pdp-text-muted, #6b7280);
  margin: 0;
}

.pdp-track-help-link {
  color: var(--pdp-primary, #d16838);
  text-decoration: none;
  font-weight: 600;
  margin-left: 4px;
  transition: color 0.2s ease;
}

.pdp-track-help-link:hover {
  text-decoration: underline;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1023px) {
  .pdp-track-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .pdp-track-form-fields {
    grid-template-columns: 1fr;
  }

  .pdp-track-status-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .pdp-track-carrier-info {
    align-items: flex-start;
  }

  .pdp-track-status-icon {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  .pdp-track-iframe {
    min-height: 400px;
  }

  .pdp-track-selfservice-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 2vw, 16px);
  }

  .pdp-track-field input {
    min-height: 48px;
  }
}

@media (max-width: 479px) {
  .pdp-track-tab {
    font-size: 12px;
    padding: 12px 8px;
  }

  .pdp-track-tab svg {
    display: none;
  }
}
/* ============================================================
   WHY CHOOSE US PAGE — PREMIUM REDESIGN
   Centered manifesto · 4-col value cards · Timeline
   Quality dark · CTA same-dark-as-quality (CSS-variable afgeleid)
   ============================================================ */

/* ============================================================
   METRIC STRIP (inside shared page hero)
   ============================================================ */

.pdp-why-metrics-strip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.15);
}

.pdp-why-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 clamp(20px, 2.5vw, 36px);
}

.pdp-why-metric-value {
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 800;
  color: var(--pdp-primary, #d16838);
  letter-spacing: -0.02em;
}

.pdp-why-metric-label {
  font-size: clamp(10px, 0.75vw, 12px);
  color: var(--pdp-text-muted, #6b7280);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.pdp-why-metric-divider {
  width: 1px;
  height: 32px;
  background: rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.2);
  flex-shrink: 0;
}

/* ============================================================
   BRAND PHILOSOPHY — pdp-why-main
   Warm gradient · Gecentreerd manifesto · 4-col cards · Timeline
   ============================================================ */

.pdp-why-main {
  padding: var(--pdp-subpage-pad-y) clamp(20px, 5vw, 48px) var(--pdp-subpage-pad-y);
  background: linear-gradient(160deg,
    var(--pdp-secondary, #faf0eb) 0%,
    rgba(250, 240, 235, 0.5) 30%,
    #fff 55%
  );
  position: relative;
  overflow: hidden;
}

/* Subtiele decoratieve cirkel rechtsboven */
.pdp-why-main::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -6%;
  width: clamp(260px, 35vw, 480px);
  height: clamp(260px, 35vw, 480px);
  background: radial-gradient(circle,
    rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.05) 0%,
    transparent 65%
  );
  pointer-events: none;
}

/* ── Manifesto — gecentreerd, full-width brand statement ── */

.pdp-why-manifesto {
  max-width: 860px;
  margin: 0 auto clamp(52px, 6.5vw, 80px);
  text-align: center;
  position: relative;
}

.pdp-why-manifesto-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: clamp(11px, 0.8vw, 12px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pdp-primary, #d16838);
  margin-bottom: clamp(20px, 2.5vw, 28px);
}

.pdp-why-manifesto-label::before,
.pdp-why-manifesto-label::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.4);
  flex-shrink: 0;
}

/* De grote brand-quote */
.pdp-why-manifesto-quote {
  font-size: clamp(30px, 4.2vw, 56px);
  font-weight: 800;
  color: var(--pdp-text, #111827);
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin: 0 0 clamp(16px, 2vw, 24px) 0;
  padding: clamp(20px, 2.5vw, 32px) 0;
  border: none;
  font-style: normal;
  text-align: center;
}

.pdp-why-manifesto-body {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--pdp-text-muted, #6b7280);
  line-height: 1.78;
  margin: 0 auto;
  font-weight: 400;
  max-width: 540px;
  text-align: center;
}

/* Decoratief divider accent onder de body tekst */
.pdp-why-manifesto-divider {
  width: 44px;
  height: 3px;
  background: var(--pdp-primary, #d16838);
  margin: clamp(22px, 2.8vw, 32px) auto 0;
  border-radius: 2px;
}

/* ── Value Cards — 4 kolommen ── */

.pdp-why-values-grid {
  max-width: 1100px;
  margin: 0 auto clamp(52px, 6.5vw, 80px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}

.pdp-why-value-card {
  background: #fff;
  border-radius: var(--pdp-radius-xl, 16px);
  padding: clamp(24px, 3vw, 36px) clamp(18px, 2.2vw, 26px);
  border: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.07);
  border-top: 3px solid var(--pdp-secondary, #faf0eb);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.3vw, 14px);
  transition: transform 0.28s var(--pdp-ease-luxury-out, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 0.28s ease,
              border-top-color 0.28s ease;
}

.pdp-why-value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.1);
  border-top-color: var(--pdp-primary, #d16838);
}

.pdp-why-value-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pdp-why-value-icon {
  width: clamp(40px, 3.6vw, 46px);
  height: clamp(40px, 3.6vw, 46px);
  background: var(--pdp-secondary, #faf0eb);
  border-radius: var(--pdp-radius-md, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-primary, #d16838);
  border: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.1);
  flex-shrink: 0;
}

.pdp-why-value-number {
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 700;
  color: rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.28);
  letter-spacing: 0.08em;
}

.pdp-why-value-title {
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 700;
  color: var(--pdp-text, #111827);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.pdp-why-value-desc {
  font-size: clamp(12px, 0.9vw, 13px);
  color: var(--pdp-text-muted, #6b7280);
  margin: 0;
  line-height: 1.65;
  font-weight: 400;
  flex: 1;
}

/* ============================================================
   BRAND TIMELINE — horizontale merkgeschiedenis
   ============================================================ */

.pdp-why-timeline {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.14);
  position: relative;
}

.pdp-why-timeline-header {
  text-align: center;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.pdp-why-timeline-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(11px, 0.8vw, 12px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pdp-primary, #d16838);
}

.pdp-why-timeline-kicker::before,
.pdp-why-timeline-kicker::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.35);
  flex-shrink: 0;
}

.pdp-why-timeline-track {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.pdp-why-timeline-track::before {
  content: '';
  position: absolute;
  top: clamp(22px, 2.5vw, 27px);
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.25) 15%,
    rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.25) 85%,
    transparent 100%
  );
  pointer-events: none;
}

.pdp-why-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  padding: 0 clamp(4px, 0.8vw, 10px);
}

.pdp-why-timeline-date {
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 700;
  color: var(--pdp-primary, #d16838);
  letter-spacing: 0.08em;
  margin-bottom: clamp(8px, 1vw, 12px);
  text-align: center;
  line-height: 1;
}

.pdp-why-timeline-dot {
  width: clamp(12px, 1.2vw, 16px);
  height: clamp(12px, 1.2vw, 16px);
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--pdp-primary, #d16838);
  box-shadow: 0 0 0 4px rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.1);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.pdp-why-timeline-item:hover .pdp-why-timeline-dot {
  transform: scale(1.3);
  background: var(--pdp-primary, #d16838);
  box-shadow: 0 0 0 6px rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.15);
}

.pdp-why-timeline-content {
  padding-top: clamp(10px, 1.2vw, 14px);
  text-align: center;
}

.pdp-why-timeline-title {
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 700;
  color: var(--pdp-text, #111827);
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.pdp-why-timeline-text {
  font-size: clamp(11px, 0.8vw, 12px);
  color: var(--pdp-text-muted, #6b7280);
  margin: 0;
  line-height: 1.55;
  font-weight: 400;
}

/* ============================================================
   QUALITY STANDARD — pdp-why-quality
   Warm-donkere achtergrond, brand primary glow
   ============================================================ */

.pdp-why-quality {
  background: linear-gradient(145deg,
    rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.14) 0%,
    rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.05) 60%,
    rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.04) 100%
  ), #0d0604;
  padding: clamp(64px, 7vw, 104px) clamp(20px, 5vw, 48px);
  position: relative;
  overflow: hidden;
}

.pdp-why-quality::before {
  content: '';
  position: absolute;
  top: -15%;
  right: -5%;
  width: clamp(320px, 42vw, 600px);
  height: clamp(320px, 42vw, 600px);
  background: radial-gradient(circle,
    rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.1) 0%,
    rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.03) 40%,
    transparent 70%
  );
  pointer-events: none;
}

.pdp-why-quality::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: clamp(200px, 28vw, 400px);
  height: clamp(200px, 28vw, 400px);
  background: radial-gradient(circle,
    rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.05) 0%,
    transparent 65%
  );
  pointer-events: none;
}

.pdp-why-quality-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6vw, 80px);
  align-items: start;
  position: relative;
}

.pdp-why-quality-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(11px, 0.8vw, 12px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pdp-primary, #d16838);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.pdp-why-quality-kicker::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--pdp-primary, #d16838);
  flex-shrink: 0;
}

.pdp-why-quality-content h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 clamp(12px, 1.5vw, 18px) 0;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.pdp-why-quality-intro {
  font-size: clamp(14px, 1.1vw, 16px);
  color: rgba(250, 240, 235, 0.45);
  margin: 0 0 clamp(28px, 3.5vw, 44px) 0;
  line-height: 1.75;
  font-weight: 300;
}

.pdp-why-quality-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pdp-why-quality-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 14px);
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(250, 240, 235, 0.75);
  font-weight: 400;
  line-height: 1.6;
  padding: clamp(10px, 1.2vw, 13px) 0;
  border-bottom: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.08);
}

.pdp-why-quality-item:last-child {
  border-bottom: none;
}

.pdp-why-quality-item svg {
  color: var(--pdp-primary, #d16838);
  flex-shrink: 0;
  margin-top: 2px;
}

.pdp-why-quality-right {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 20px);
}

.pdp-why-quality-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.3vw, 14px);
}

.pdp-why-badge {
  background: rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.06);
  border: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.12);
  border-radius: clamp(10px, 1.2vw, 13px);
  padding: clamp(20px, 2.5vw, 28px) clamp(12px, 1.5vw, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vw, 11px);
  text-align: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  cursor: default;
}

.pdp-why-badge:hover {
  background: rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.12);
  border-color: rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.3);
  transform: translateY(-2px);
}

.pdp-why-badge-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-primary, #d16838);
}

.pdp-why-badge-label {
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 700;
  color: rgba(250, 240, 235, 0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.45;
}

.pdp-why-quality-promise {
  background: linear-gradient(135deg,
    rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.18) 0%,
    rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.1) 100%
  );
  border: 1px solid rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.28);
  border-radius: clamp(10px, 1.2vw, 13px);
  padding: clamp(18px, 2.2vw, 24px) clamp(16px, 2vw, 22px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 18px);
}

.pdp-why-promise-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-primary, #d16838);
  background: rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.15);
  border-radius: var(--pdp-radius-md, 8px);
  flex-shrink: 0;
}

.pdp-why-promise-content { flex: 1; }

.pdp-why-promise-title {
  font-size: clamp(14px, 1.1vw, 15px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}

.pdp-why-promise-text {
  font-size: clamp(12px, 0.9vw, 13px);
  color: rgba(250, 240, 235, 0.5);
  margin: 0;
  line-height: 1.55;
}

/* ============================================================
   CTA — zelfde donker als quality, afgeleid van CSS variabelen
   Override shared .pdp-page-cta (via pdp-why-cta modifier)
   ============================================================ */

/* Zelfde warm-donker formule als .pdp-why-quality maar via variabelen */
.pdp-why-cta {
  background:
    linear-gradient(145deg,
      rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.14) 0%,
      rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.05) 60%,
      rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.04) 100%
    ),
    #0d0604;
}

/* Radiale glow bovenaan — symmetrisch met quality ::before */
.pdp-why-cta::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(300px, 50vw, 700px);
  height: clamp(200px, 30vw, 400px);
  background: radial-gradient(ellipse,
    rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Knop: oranje (identiek aan de rest van de site) */
.pdp-why-cta-actions .pdp-page-cta-btn {
  background: var(--pdp-primary, #d16838);
  color: #fff;
  border-color: var(--pdp-primary, #d16838);
  box-shadow: 0 4px 20px rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.35);
}

/* Hover: iets donkerder oranje — geen kleur-inversie */
.pdp-why-cta-actions .pdp-page-cta-btn:hover {
  background: var(--pdp-primary-dark, #b05530);
  border-color: var(--pdp-primary-dark, #b05530);
  box-shadow: 0 6px 28px rgba(var(--pdp-primary-rgb, 209, 104, 56), 0.45);
  transform: translateY(-1px);
}

/* Actierij */
.pdp-why-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1023px) {
  .pdp-why-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pdp-why-quality-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .pdp-why-metrics-strip {
    flex-direction: column;
    gap: clamp(12px, 2vw, 16px);
  }

  .pdp-why-metric-divider {
    width: 40px;
    height: 1px;
  }

  /* Timeline: vertical on mobile */
  .pdp-why-timeline-track {
    flex-direction: column;
    gap: clamp(18px, 3vw, 26px);
  }

  .pdp-why-timeline-track::before {
    display: none;
  }

  .pdp-why-timeline-item {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(12px, 2vw, 16px);
    padding: 0;
  }

  .pdp-why-timeline-date {
    margin-bottom: 0;
    min-width: 40px;
    text-align: right;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .pdp-why-timeline-dot {
    flex-shrink: 0;
    margin-top: 2px;
  }

  .pdp-why-timeline-content {
    padding-top: 0;
    text-align: left;
  }
}

@media (max-width: 479px) {
  .pdp-why-values-grid {
    grid-template-columns: 1fr;
  }

  .pdp-why-quality-badges {
    grid-template-columns: 1fr 1fr;
  }
}
/* ============================================================
   SECTION 9: GLOBAL MEDIA QUERIES & LAYOUT WRAPPER
   Navigate: Search "SECTION 9" to jump here

   [INFO] This section contains global responsive breakpoints that
   apply across all PDP components. These media queries use a
   desktop-first approach with mobile overrides.

   Breakpoints:
   - Mobile: max-width 768px
   - Print: @media print
   - Reduced Motion: prefers-reduced-motion
   - High Contrast: prefers-contrast high
   ============================================================ */

/* ────────────────────────────────────────────────────────
   9.1: Mobile Visibility Toggle
   ──────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────
   9.2: Print Styles
   ──────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────
   9.3: Reduced Motion (Accessibility)
   ──────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────
   9.4: High Contrast Mode (Accessibility)
   ──────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────
   9.5: UTILITY OVERRIDES
   ──────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────
   9.5.1: Pulse Highlight Utility Class
   ──────────────────────────────────────────────────────── */

/* Pulse highlight - Applies pulse animation to any element */
.pdp-pulse-highlight {
  animation: pulseHighlight 1s ease;
}

/* ────────────────────────────────────────────────────────
   9.5.2: Product Modal System (Quickview)
   ──────────────────────────────────────────────────────── */

/* Product modal container - Fullscreen overlay for product quickview */
.pdp-product-modal {
  display: none;  /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--pdp-z-modal);  /* Above all other content */
}

/* Product modal active - Shows modal with flex centering */
.pdp-product-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal backdrop - Dark blurred background */
.pdp-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);  /* Semi-transparent black */
  backdrop-filter: blur(8px);  /* Blurs background content */
  -webkit-backdrop-filter: blur(8px);  /* Safari support */
  cursor: pointer;  /* Indicates clickable to close */
}

/* Modal content container - White card with product content */
.pdp-modal-content {
  position: relative;
  width: 90%;
  max-width: var(--pdp-container-max-md);
  height: 85vh;  /* 85% of viewport height */
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: pdp-modal-slide-up 0.3s ease-out;
}

/* Close animation for product quickview modal */
.pdp-modal-content.pdp-closing {
  animation: pdp-modal-slide-down 0.25s ease-in forwards;
}

/* Modal close button — defined centrally in modals.txt (removed duplicate) */

/* Modal loading state - Centered loading indicator */
.pdp-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: clamp(24px, 3vw, 32px);
}

/* Modal spinner - Animated loading spinner */
.pdp-modal-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--pdp-border);
  border-top-color: var(--pdp-primary);  /* Creates gap for spin effect */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Modal iframe - Embeds external product page */
.pdp-modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Modal error state - Centered error message */
.pdp-modal-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(32px, 4vw, 48px);
  text-align: center;
}

/* Modal error icon - Red error icon */
.pdp-modal-error svg {
  color: var(--pdp-danger);
}

/* Modal error heading - Bold error title */
.pdp-modal-error h3 {
  font-size: clamp(17px, 1.8vw, 20px);
  margin: 0;
}

/* Modal error text - Muted error description */
.pdp-modal-error p {
  color: var(--pdp-text-muted);
  margin: 0 0 20px 0;
}

/* Modal error button - Retry button */
.pdp-modal-error .pdp-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ────────────────────────────────────────────────────────
   9.5.3: Enhanced YML (You May Like) Clickable Elements
   ──────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────
   9.5.4: Mobile Modal Responsive
   ──────────────────────────────────────────────────────── */

/* [MIGRATED] Mini PDP Modal styles moved to styles/components/yml-modal.txt */

/* ────────────────────────────────────────────────────────
   14.14: Smart Selector System (Mix-Bundle)
   ──────────────────────────────────────────────────────── */

/* Smart selector container */
.pdp-smart-selector {
  margin: clamp(24px, 3vw, 32px) 0;
}

/* Label text - Uppercase small label */
.pdp-label {
  display: block;
  font-size: clamp(12px, 1vw, 13px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;  /* Gray-500 */
  margin-bottom: 12px;
}

/* Divider with text */
.pdp-divider::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #e5e7eb;  /* Gray-200 */
}

/* Divider text - White background to cover line */
.pdp-divider span {
  position: relative;
  background: white;
  padding: 0 16px;
}

/* Custom builder container */
.pdp-custom-builder {
  background: #fafbfc;  /* Very light gray */
  border-radius: 16px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid #e5e7eb;
}

/* Size grid - Vertical stack of size rows */
.pdp-variant-size-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

/* Size row - Horizontal layout for label + size options */
.pdp-variant-size-row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 16px);
  padding: clamp(12px, 1.5vw, 16px);
  background: white;
  border-radius: 12px;
}

/* Size row label - Fixed width size label */
.pdp-variant-size-row-label {
  min-width: 60px;
  font-weight: 600;
  font-size: clamp(13px, 1vw, 14px);
}

/* Size options container - Horizontal flex layout */
.pdp-variant-size-options {
  display: flex;
  gap: 8px;
  flex: 1;
}

/* Size box - Individual size button */
.pdp-variant-size-button {
  flex: 1;
  padding: 10px;
  background: #f3f4f6;  /* Gray-100 */
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  font-size: clamp(13px, 1vw, 14px);
  cursor: pointer;
  transition: all 0.15s;
}

/* Size box hover - Adds border and white background */
.pdp-variant-size-button:hover {
  background: white;
  border-color: var(--pdp-primary);
}

/* Size box selected - Fills with primary color */
.pdp-variant-size-button.selected {
  background: var(--pdp-primary);
  color: white;
  border-color: var(--pdp-primary);
}

/* Status bar - Status message at bottom */
.pdp-status-bar {
  margin-top: 20px;
  padding: clamp(12px, 1.5vw, 16px);
  border-radius: 8px;
  font-size: clamp(13px, 1vw, 14px);
  font-weight: 500;
  text-align: center;
  animation: fadeIn 0.3s;
}

/* Success status - Green background */
.pdp-status-bar.success {
  background: #dcfce7;  /* Green-100 */
  color: #16a34a;  /* Green-600 */
  border: 1px solid #86efac;  /* Green-300 */
}

/* Error status - Red background */
.pdp-status-bar.error {
  background: #fee2e2;  /* Red-100 */
  color: #dc2626;  /* Red-600 */
  border: 1px solid #fca5a5;  /* Red-300 */
}

/* Loading status - Yellow background */
.pdp-status-bar.loading {
  background: #fef3c7;  /* Amber-100 */
  color: #92400e;  /* Amber-800 */
  border: 1px solid #fcd34d;  /* Amber-300 */
}

/* ────────────────────────────────────────────────────────
   14.15: Simple Selectors (Volume & Quantity)
   ──────────────────────────────────────────────────────── */

/* Simple selector container */
.pdp-simple-selector {
  margin: clamp(24px, 3vw, 32px) 0;
}

/* Option pills and size pills - Horizontal flex layout */
.pdp-option-pills,
.pdp-variant-size-pills {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.5vw, 16px);
}

/* Option pill - Rounded pill with price (simple-volume type) */
.pdp-option-pill {
  padding: clamp(12px, 1.5vw, 16px) 20px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--pdp-transition-fast);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Option pill hover - Highlights with primary border and lifts */
.pdp-option-pill:hover {
  border-color: var(--pdp-primary);
  transform: translateY(-2px);
}

/* Option pill selected - Fills with primary color */
.pdp-option-pill.selected {
  background: var(--pdp-primary);
  color: white;
  border-color: var(--pdp-primary);
}

/* Option name - Bold option name */
.pdp-option-name {
  font-weight: 600;
  font-size: clamp(13px, 1vw, 14px);
}

/* Option price - Large bold price */
.pdp-option-price {
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 700;
}

/* ────────────────────────────────────────────────────────
   14.16: Mobile Responsive (Mini Modal)
   ──────────────────────────────────────────────────────── */


/* ============================================
   END OF OPTIMIZED CSS CONFIG
   ============================================ */
/* ============================================================
   LAYOUT WRAPPER & CONTAINER SYSTEM

   Contains: Layout Wrapper & Container System
   Generated: 2025-10-18
   Version: 11.0.0 (Streamlined Workflow)
   Note: CSS structure established in (Tag Wrapper Edition)

   ⚠️ CSS ISOLATION GUARANTEE:
   This part ONLY handles LAYOUT properties. It does NOT
   conflict with styling from other parts.

   PROPERTY OWNERSHIP (styles/layout/responsive-grid.txt):
   width, max-width, height, min-height
   padding, margin, gap
   display (grid/flex), grid-template-columns, align-items
   position (sticky/relative), top, left, right, bottom
   Responsive breakpoints (LAYOUT changes only)

   PROPERTY OWNERSHIP (Other style files):
   background, color, border, border-radius, box-shadow
   font-size, font-weight, line-height
   transition, animation (for STYLING)
   :hover states (for COLOR/STYLING changes)

   CO-EXISTENCE (No Conflicts):
   - .pdp-info-container: styles/components/product-info.txt (styling) + styles/layout/responsive-grid.txt (layout/sticky)
   - #pdp-reviews: styles/components/reviews.txt (styling) + styles/layout/responsive-grid.txt (margin-top)
   - #pdp-recommendations-section: styles/components/recommendations.txt (styling) + styles/layout/responsive-grid.txt (margin-top)
   - .pdp-content-grid: styles/layout/responsive-grid.txt ONLY (new class)

   NO !important RULES: Respects CSS cascade.
   ============================================================ */

/* ============================================================
   SECTION 9: LAYOUT WRAPPER & CONTAINER SYSTEM
   Navigate: Search "SECTION 9" to jump here

   PURPOSE:
   Professional layout system for 3-template structure with:
   - 50/50 Grid (desktop), stack (mobile)
   - Sticky ProductInfo (desktop only)
   - Responsive spacing & typography
   - Performance optimizations
   ============================================================ */

/* ────────────────────────────────────────────────────────
   9.1: MAIN WRAPPER & CONTAINER
   ──────────────────────────────────────────────────────── */

/* Box sizing reset for layout wrapper system */
.pdp-complete-wrapper *,
.pdp-complete-wrapper *::before,
.pdp-complete-wrapper *::after {
  box-sizing: border-box;
}

/* Complete wrapper - Full viewport container */
.pdp-complete-wrapper {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow-x: clip;  /* Prevent horizontal scrollbar without breaking position: sticky */
  /* Background set dynamically by styles/foundation/01-css-variables.txt alternating pattern */
}

/* Main container - Centered max-width with responsive padding */
.pdp-main-container {
  max-width: var(--pdp-container-max-md);  /* Balanced width for optimal readability */
  width: 100%;
  margin: 0 auto;  /* Horizontally centered */
  padding: var(--pdp-section-pad-top) var(--pdp-section-padding-x) var(--pdp-section-pad-bottom);  /* Responsive padding: config-driven (consistent with all other sections) */
  box-sizing: border-box;
}

/* ────────────────────────────────────────────────────────
   9.2: GRID LAYOUT SYSTEM
   ──────────────────────────────────────────────────────── */

/* Content grid - Gallery (50%) + ProductInfo (50%) - Perfectly balanced layout */
.pdp-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 50:50 ratio - Perfect balance between gallery and product info */
  gap: 48px;  /* Generous spacing for clear visual separation */
  align-items: start;
  width: 100%;
  max-width: 100%;
  /* No fixed height - let content determine height for sticky to work */
}

/* ────────────────────────────────────────────────────────
   9.3: PRODUCTINFO CONTAINER (scrolls normally, gallery is sticky)
   ──────────────────────────────────────────────────────── */

/* ProductInfo scrolls normally — Gallery is sticky (shorter column) */
.pdp-info-container {
  position: relative;
  align-self: start;
  width: 100%;
}

/* ────────────────────────────────────────────────────────
   9.4: GALLERY COLUMN
   ──────────────────────────────────────────────────────── */

/* Gallery takes full width of its column */
.pdp-gallery {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ────────────────────────────────────────────────────────
   9.5: SECTIONS BELOW GRID (FULL-WIDTH)
   ──────────────────────────────────────────────────────── */

/* Reviews section below grid */
#pdp-reviews {
  width: 100%;
}

/* YML recommendations section below reviews */
#pdp-recommendations-section {
  width: 100%;
}

/* ────────────────────────────────────────────────────────
   9.6: FOCUS STATES (ACCESSIBILITY)
   ──────────────────────────────────────────────────────── */

/* Enhanced focus states for keyboard navigation */
.pdp-info-container *:focus-visible:not(.pdp-radio-size-pill),
.pdp-content-grid *:focus-visible:not(.pdp-radio-size-pill) {
  outline: 3px solid var(--pdp-primary);
  outline-offset: 2px;
}

/* ────────────────────────────────────────────────────────
   9.7: HOVER EFFECTS (LAYOUT TRANSFORMS ONLY)
   ──────────────────────────────────────────────────────── */

/* Gallery thumbnail hover - Scale effect (NO color changes) */
.pdp-gallery-thumbnail:hover {
  transform: scale(1.05);
}

/* Add-to-cart button hover - Lift effect (NO color changes) */
.pdp-add-to-cart-btn:hover:not(:disabled) {
  transform: translateY(-3px);
}

/* Recommendation cards hover - Lift effect (NO color changes) */
.pdp-recommendation-card:hover {
  transform: translateY(-4px);
}

/* Size button hover - Lift effect (NO color changes) */
.pdp-variant-size-button:hover {
  transform: translateY(-2px);
}

/* Quantity card hover - Lift effect (NO color changes) */
.pdp-quantity-card:hover {
  transform: translateY(-2px);
}

/* ────────────────────────────────────────────────────────
   9.8: RESPONSIVE TYPOGRAPHY (FLUID SCALING)
   ──────────────────────────────────────────────────────── */

/* Product title - Fluid font scaling */
.pdp-product-title {
  font-size: clamp(var(--pdp-text-2xl), 3vw, var(--pdp-text-4xl));  /* 24px to 36px based on viewport */
  line-height: 1.2;
}

/* Product price - Fluid scaling */
.pdp-price-new {
  font-size: clamp(var(--pdp-text-xl), 2.5vw, var(--pdp-text-3xl));  /* 18px to 30px based on viewport */
}

/* Section headings - Fluid scaling (uses CENTRAL semantic token) */
.pdp-reviews-section h2,
.pdp-recommendations h2 {
  font-size: var(--pdp-section-title-size);  /* ✅ FIXED: Use semantic token (28px-40px) instead of hardcoded (24px-30px) */
}

/* Body text - Fluid scaling */
.pdp-product-description,
.pdp-info-text {
  font-size: clamp(var(--pdp-text-base), 1.5vw, var(--pdp-text-lg));  /* 14px to 16px based on viewport */
  line-height: 1.6;
}

/* Small text - Fluid scaling */
.pdp-text-small,
.pdp-card-save {
  font-size: clamp(var(--pdp-text-xs), 1.2vw, var(--pdp-text-base));  /* 12px to 14px based on viewport */
}

/* ────────────────────────────────────────────────────────
   9.9: RESPONSIVE BREAKPOINTS (LAYOUT ONLY)
   Expanded for universal device support
   ──────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────
   9.11: REDUCED MOTION (ACCESSIBILITY - LAYOUT ONLY)
   ──────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────
   9.12: SPECIAL VIEWPORT QUERIES
   ──────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────
   9.13: TEXT ALIGNMENT OVERRIDES
   ──────────────────────────────────────────────────────── */

/* [INFO] Forces left-alignment on main layout containers to
   prevent external CSS (host page theme) from centering content.
   Uses !important to override any external styles.

   [NOTE] Modal error states and specific centered elements are
   NOT included - they should remain centered by design. */

/* Main Layout Containers - Force left alignment */
.pdp-complete-wrapper,
.pdp-main-container,
.pdp-content-grid,
.pdp-layout-section {
  text-align: left !important;
}


/* ============================================
   END OF LAYOUT WRAPPER
   ============================================ */

/* ============================================================
   FEATURE: Print Styles
   ============================================================ */

@media print {
/* Hide all interactive and overlay elements */
  .pdp-cart-drawer,
  .pdp-sticky-cart-bar,
  .pdp-backdrop,
  .pdp-lightbox,
  .pdp-modal-container,
  .pdp-image-modal,
  .pdp-button,
  .pdp-gallery-nav,
  .pdp-gallery-zoom,
  .pdp-review-helpful {
    display: none !important;
  }

  /* Prevent page breaks inside these elements */
  .pdp-gallery,
  .pdp-info-container,
  .pdp-reviews-section,
  .pdp-recommendation-section {
    page-break-inside: avoid;  /* Keeps section on same page */
  }
  /* Simplify layout for printing */
  .pdp-content-grid {
    grid-template-columns: 1fr;
    gap: clamp(16px, 2vw, 24px);
  }

  /* Remove Gallery sticky positioning for printing */
  .pdp-gallery {
    position: static;
  }

  /* Hide cart drawer for printing */
  .pdp-cart-drawer {
    display: none;
  }

  /* Reduce spacing for printing */
  .pdp-main-container {
    padding: clamp(16px, 2vw, 24px);
  }
}

/* ============================================================
   FEATURE: Reduced Motion (Accessibility)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Disables all animations and transitions for users who prefer reduced motion */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;  /* Nearly instant */
    animation-iteration-count: 1 !important;  /* Single iteration only */
    transition-duration: 0.01ms !important;  /* Nearly instant */
    scroll-behavior: auto !important;  /* Instant scroll */
  }
  .pdp-gallery-thumbnail:hover,
  .pdp-recommendation-card:hover,
  .pdp-add-to-cart-btn:hover,
  .pdp-variant-size-button:hover,
  .pdp-quantity-card:hover {
    transform: none;
  }
}

/* ============================================================
   FEATURE: High Contrast (Accessibility)
   ============================================================ */

@media (prefers-contrast: high) {
  /* Adds solid borders to buttons for high contrast */
  .pdp-button {
    border: 2px solid currentColor;
  }

  /* Adds borders to badges for high contrast */
  .pdp-card-badge {
    border: 1px solid currentColor;
  }
}

/* ============================================================
   RESPONSIVE: Tablet & Below (max-width: 959px)
   ============================================================ */

@media (max-width: 959px) {
  /* Stack columns vertically */
  .pdp-content-grid {
    grid-template-columns: 1fr;
    gap: clamp(16px, 2vw, 24px);
  }

  /* Allow grid children to shrink below intrinsic content width */
  .pdp-gallery,
  .pdp-info-container {
    min-width: 0;
    overflow: hidden;
  }

  /* Center content with max-width on tablet (stacked layout) */
  .pdp-gallery {
    max-width: 600px;
    margin: 0 auto;
  }

  .pdp-info-container {
    max-width: 640px;
    margin: 0 auto;
  }

  /* Disable hover transform effects on touch devices */
  .pdp-gallery-thumbnail:hover,
  .pdp-recommendation-card:hover,
  .pdp-add-to-cart-btn:hover,
  .pdp-variant-size-button:hover,
  .pdp-quantity-card:hover {
    transform: none;
  }

  /* Product quickview modal — fullscreen on all non-desktop */
  .pdp-product-modal.active {
    align-items: stretch;
  }

  .pdp-modal-content {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .pdp-modal-close {
    top: 10px;
    right: 10px;
  }
}

/* ============================================================
   RESPONSIVE: Mobile (max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {
  /* Hide desktop-only elements on mobile */
  .pdp-desktop-only {
    display: none !important;
  }

  /* Show mobile-only elements on mobile */
  .pdp-mobile-only {
    display: flex;
  }

  /* ────────────────────────────────────────────────────────
     Empty Cart State - Mobile Responsive Overrides
     ────────────────────────────────────────────────────────── */

  /* Compact padding on mobile */
  .pdp-cart-empty {
    padding: clamp(16px, 2vw, 24px) clamp(12px, 1.5vw, 16px);
    min-height: 280px;
  }

  /* Balanced icon on mobile */
  .pdp-cart-empty-icon-wrapper svg {
    width: 42px;
    height: 42px;
  }

  /* Balanced count bubble on mobile */
  .pdp-cart-empty-count-bubble {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    border-width: 2px;
  }

  /* Balanced title on mobile */
  .pdp-cart-empty-title {
    font-size: 17px;
    letter-spacing: -0.2px;
  }

  /* Balanced subtitle on mobile */
  .pdp-cart-empty-subtitle {
    font-size: 12px;
  }

  /* Trust badges keep 2x2 grid on mobile */
  .pdp-cart-empty-trust-badges {
    gap: 9px;
  }

  /* Trust badges balanced on mobile */
  .pdp-cart-empty-trust-badge {
    font-size: 10px;
    padding: 8px 9px;
  }

  /* Benefits section - Slightly smaller padding on mobile */
  .pdp-cart-empty-benefits {
    padding: 13px;
  }

  /* Benefits heading - Slightly smaller on mobile */
  .pdp-cart-empty-benefits h3 {
    font-size: 13px;
    margin-bottom: 14px;
  }

  /* Benefits list - Tighter gap on mobile */
  .pdp-cart-empty-benefit-list {
    gap: 10px;
  }

  /* Benefit text - Slightly smaller on mobile */
  .pdp-cart-empty-benefit-item {
    font-size: 12px;
    gap: 8px;
  }

  /* Benefit checkmark - Slightly smaller on mobile */
  .pdp-cart-empty-benefit-icon {
    font-size: 13px;
  }

  /* CTA button balanced on mobile */
  .pdp-cart-empty-cta-section .pdp-button {
    width: 100%;
    font-size: 13px;
    padding: 10px 20px;
  }

  /* Container uses full height on mobile */
  .pdp-cart-empty {
    min-height: 450px;
  }
  /* Popular grid single column on mobile */
  .pdp-popular-grid {
    grid-template-columns: 1fr;
  }

  /* Amount pills stack vertically on mobile */
  .pdp-amount-pills {
    flex-direction: column;
  }

  /* Size options wrap on mobile */
  .pdp-variant-size-options {
    flex-wrap: wrap;
  }


  /* ── Section Header: mobile (scaled desktop design) ── */
  .pdp-section-header {
    text-align: center;
  }

  /* Force consistent title size across ALL sections */
  .pdp-section-title,
  .pdp-section-title.pdp-section-title,
  [class*="-section"] h2.pdp-section-title,
  .pdp-reviews-section h2,
  .pdp-recommendations h2 {
    font-size: clamp(22px, 5.5vw, 28px);
    font-weight: 700;
    letter-spacing: -0.15px;
    line-height: 1.25;
    gap: clamp(8px, 2vw, 12px);
    justify-content: center;
    text-align: center;
  }

  /* Flanking lines: shorter for mobile, same style as desktop */
  .pdp-section-title::before,
  .pdp-section-title::after {
    flex: 0 0 clamp(16px, 3.5vw, 28px);
    height: 1px;
  }

  .pdp-section-subtitle {
    text-align: center;
    font-size: clamp(12.5px, 3vw, 14px);
    line-height: 1.45;
  }
  /* Section body content — consistent left alignment */
  .pdp-ingredients-body,
  .pdp-before-after-body,
  .pdp-results-timeline-body,
  .pdp-faq-body,
  .pdp-steps-body,
  .pdp-guarantee-body {
    text-align: left;
  }
}

/* ============================================================
   RESPONSIVE: Small Mobile (max-width: 479px)
   ============================================================ */

@media (max-width: 479px) {
  /* Stack trust badges to 1 column on narrow screens */
  .pdp-cart-empty-trust-badges {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Full-width badges on narrow screens */
  .pdp-cart-empty-trust-badge {
    padding: 10px 14px;
  }
  /* Mobile container padding — 16px for readable margins */
  .pdp-main-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Tighter grid spacing for small screens */
  .pdp-content-grid {
    gap: clamp(12px, 1.5vw, 16px);
  }
}

/* ============================================================
   RESPONSIVE: Tablet Landscape (960px - 1108px)
   ============================================================ */

@media (min-width: 960px) and (max-width: 1108px) {
  .pdp-content-grid {
    grid-template-columns: 1fr 1fr;      /* Fluid 50:50 (prevents overflow) */
    gap: clamp(32px, 4vw, 48px);         /* Responsive gap */
    max-width: 100%;
  }
}

/* ============================================================
   RESPONSIVE: Desktop Large (>1108px)
   ============================================================ */

@media (min-width: 1109px) {
  .pdp-content-grid {
    grid-template-columns: 530px 530px;  /* Fixed 50:50 at 530px each */
    gap: 48px;
    justify-content: center;             /* Center the 1060px + 48px grid */
  }
}

/* ============================================================
   RESPONSIVE: Desktop 1280px+
   ============================================================ */

@media (min-width: 1280px) {
  /* Enhanced hover effects on large screens */
  .pdp-gallery-thumbnail:hover {
    transform: scale(1.08);
  }

  .pdp-recommendation-card:hover {
    transform: translateY(-6px);
  }

  .pdp-add-to-cart-btn:hover:not(:disabled) {
    transform: translateY(-4px);
  }
}

/* ============================================================
   RESPONSIVE: Extra Large Desktop (1440px+)
   ============================================================ */

@media (min-width: 1440px) {
  /* Increased max-width for extra large screens */
  .pdp-main-container {
    max-width: var(--pdp-container-max-lg);
  }
}

/* ============================================================
   RESPONSIVE: Full HD+ (1920px+)
   ============================================================ */

@media (min-width: 1920px) {
  /* Maximum content width for ultra-wide displays */
  .pdp-main-container {
    max-width: var(--pdp-container-max-md);  /* Balanced width for optimal readability */
  }
}

/* ============================================================
   SPECIAL: Nest Hub (wide + short viewport)
   ============================================================ */

@media (min-width: 1024px) and (max-height: 700px) {
  .pdp-gallery {
    position: relative;
  }
}

/* ============================================================
   SPECIAL: Landscape Phones
   ============================================================ */

@media (orientation: landscape) and (max-height: 500px) {
  .pdp-main-container {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}