/* ============================================
   PRODUCT PAGE MOBILE — Enterprise Grade
   Organic Urban — Premium Mobile Shopping Experience
   ============================================

   OWNER: This file owns ALL mobile product page styles.
   No other file should contain PDP mobile rules.

   DESIGN SYSTEM ORDER (mobile):
   Image → Name → Price+Rating → CTA → Benefits → Trust → Description → Reviews

   Scoped to .product-page (body class) for specificity (0,2,0)
   which beats inline <style> bare selectors (0,1,0).

   ARCHITECTURE:
   - Zero !important except where overriding existing !important in product.css
   - CSS contain/content-visibility for paint performance
   - prefers-reduced-motion respected throughout
   - Touch-optimized tap targets (48px minimum)
   - Safe-area-inset for notched devices
   ============================================ */

/* ============================================
   CUSTOM PROPERTIES (mobile overrides)
   ============================================ */
@media screen and (max-width: 768px) {
  .product-page {
    --pdp-gutter: 16px;
    --pdp-radius-sm: 8px;
    --pdp-radius-md: 12px;
    --pdp-radius-lg: 16px;
    --pdp-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --pdp-image-bg: #faf8f4;
    --pdp-card-shadow: 0 -8px 30px rgba(0, 0, 0, 0.06);
    --pdp-sage: var(--accent-sage, #7A9A7A);
    --pdp-sage-light: rgba(122, 154, 122, 0.08);
    --pdp-border: rgba(0, 0, 0, 0.06);
    --pdp-text-primary: var(--text-dark, #1a1a1a);
    --pdp-text-secondary: var(--text-muted, #6b7280);
  }
}

@media screen and (max-width: 768px) {

  /* ============================================
     0. PERFORMANCE — Layout containment
     ============================================ */

  .product-page .product-ritual-outcome,
  .product-page .product-usage,
  .product-page .product-details-premium,
  .product-page .product-modules,
  .product-page .why-organic-urban,
  .product-page .product-faq,
  .product-page .related-products,
  .product-page .recently-viewed-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
  }

  /* ============================================
     1. PRODUCT HERO — Edge-to-edge, immersive
     ============================================ */

  .product-page .product-hero {
    padding: 0;
    padding-top: var(--header-height-mobile, 60px);
    background: var(--white, #fff);
    overflow: hidden;
    contain: layout style;
  }

  .product-page .product-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 100%;
  }

  /* Mobile: title + subtitle above image — title bigger, perfect center */
  .product-page .product-mobile-title-block {
    display: block;
    order: 0;
    padding: 16px var(--pdp-gutter) 12px;
    text-align: center;
    background: var(--white, #fff);
    width: 100%;
    box-sizing: border-box;
  }

  .product-page .product-mobile-title-block .product-title {
    font-size: 2.125rem;
    line-height: 1.1;
    margin: 0 auto 6px auto;
    max-width: 100%;
    color: var(--pdp-text-primary);
    letter-spacing: -0.015em;
    font-weight: 400;
    text-align: center;
  }

  .product-page .product-mobile-title-block .product-subtitle {
    font-size: 0.9375rem;
    color: var(--pdp-sage, var(--accent-sage, #7a9a7a));
    margin: 0 auto;
    line-height: 1.45;
    font-weight: 400;
    text-align: center;
  }

  /* ============================================
     2. PRODUCT IMAGE — Immersive, 40-45vh
     ============================================ */

  .product-page .product-media-card {
    order: 1;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    background: var(--pdp-image-bg);
    border-radius: 0;
    position: relative;
  }

  /* Badge on image — top-left, 50% opaque white background */
  .product-page .product-badge-on-image-mobile {
    display: block;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    pointer-events: none;
  }

  .product-page .product-badge-on-image-mobile .product-badge {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    line-height: 1.3;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    color: var(--pdp-text-primary, #1a1a1a);
  }

  /* --- Hide desktop gallery on mobile, show carousel --- */
  .product-page .desktop-gallery {
    display: none;
  }

  .product-page .zoom-hint {
    display: none;
  }

  /* ============================================
     2a. IMAGE CAROUSEL — Full-width swipe
     ============================================ */

  .product-page .pdp-image-carousel {
    display: block;
    width: 100%;
    position: relative;
    background: var(--pdp-image-bg);
  }

  .product-page .carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .product-page .carousel-track::-webkit-scrollbar {
    display: none;
  }

  .product-page .carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--pdp-image-bg);
    scroll-snap-align: center;
    overflow: hidden;
    cursor: zoom-in;
  }

  .product-page .carousel-slide img,
  .product-page .carousel-slide picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Horizontal scroll only — no dots or arrows on mobile */
  .product-page .carousel-dots {
    display: none;
  }

  /* ============================================
     2b. TRUST STRIP — Below image, calm reassurance
     ============================================ */
  .product-page .pdp-trust-strip {
    width: 100%;
    background: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }

  .product-page .pdp-trust-strip .desktop-trust-badges {
    display: none;
  }

  /* Override section 9 rules — trust strip in new position needs its own styles */
  .product-page .pdp-trust-strip .trust-badges-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px var(--pdp-gutter);
    margin: 0;
    background: linear-gradient(135deg, #faf8f4 0%, #f5f0e8 100%);
    border-radius: 0;
    border: none;
  }

  .product-page .pdp-trust-strip .trust-badge-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5a5a5a;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
  }

  .product-page .pdp-trust-strip .trust-badge-item svg {
    color: var(--pdp-sage);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

  .product-page .pdp-trust-strip .trust-badge-divider {
    width: 1px;
    height: 18px;
    background: rgba(0, 0, 0, 0.1);
  }

  .product-page .pdp-trust-strip .mobile-trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 10px var(--pdp-gutter);
    border: none;
    background: linear-gradient(135deg, #faf8f4 0%, #f5f0e8 100%);
    color: var(--pdp-text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .product-page .pdp-trust-strip .mobile-trust-line .dot {
    color: var(--pdp-sage);
    font-weight: bold;
    font-size: 0.55rem;
  }

  /* ============================================
     3. PRODUCT INFO — Elevated card container
     ============================================ */

  .product-page .product-info {
    order: 2;
    width: 100%;
    padding: 24px var(--pdp-gutter) var(--pdp-gutter);
    display: flex;
    flex-direction: column;
    background: var(--white, #fff);
    position: relative;
    /* App-style overlap — enough to fully cover trust strip bottom padding */
    margin-top: -32px;
    border-radius: var(--pdp-radius-lg) var(--pdp-radius-lg) 0 0;
    z-index: 2;
    box-shadow: var(--pdp-card-shadow);
  }

  /* Breadcrumb removed — editorial PDP redesign */

  /* Desktop trust badges hidden on mobile (trust line in .pdp-trust-strip instead) */
  .product-page .desktop-trust-badges {
    display: none;
  }

  /* ============================================
     3a. BADGE — Only on image (mobile); remove second pill below image
     ============================================ */

  .product-page .product-info .product-badges {
    display: none !important;
  }

  /* Hide title/subtitle in info card on mobile (shown above image instead) */
  .product-page .product-info .product-title,
  .product-page .product-info .product-subtitle {
    display: none !important;
  }

  .product-page .product-badge {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
    line-height: 1.4;
  }

  .product-page .badge-bestseller {
    background: rgba(122, 154, 122, 0.1);
    color: var(--pdp-sage);
    border: 1px solid rgba(122, 154, 122, 0.2);
  }

  .product-page .badge-bestseller svg {
    width: 10px;
    height: 10px;
    vertical-align: -1px;
    margin-right: 2px;
  }

  .product-page .badge-discount {
    background: rgba(46, 125, 50, 0.08);
    color: #2e7d32;
    border: 1px solid rgba(46, 125, 50, 0.15);
  }

  .product-page .badge-custom-label {
    background: rgba(0, 0, 0, 0.04);
    color: var(--pdp-text-secondary);
    border: 1px solid var(--pdp-border);
  }

  /* ============================================
     3b. PRODUCT NAME — Center-aligned, serif, spacious
     ============================================ */

  .product-page .product-title {
    order: 1;
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 6px;
    margin-top: 0;
    padding-top: 0;
    color: var(--pdp-text-primary);
    letter-spacing: -0.015em;
    font-weight: 600;
    text-align: center;
  }

  .product-page .product-subtitle {
    order: 2;
    font-size: 0.88rem;
    color: var(--pdp-text-secondary);
    margin-bottom: 16px;
    line-height: 1.45;
    font-weight: 400;
    text-align: center;
  }

  /* ============================================
     3c. VALUE CUES + PRICE + RATING — Grouped
     ============================================ */

  /* Value cues — hidden on mobile (duplicate of subtitle) */
  .product-page .value-cues {
    display: none;
  }

  .product-page .product-pricing {
    order: 5;
    margin-bottom: 6px;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .product-page .product-pricing .current-price {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--pdp-text-primary);
    letter-spacing: -0.01em;
  }

  .product-page .product-pricing .original-price {
    font-size: 0.95rem;
    color: var(--pdp-text-secondary);
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.3);
  }

  .product-page .product-pricing .discount-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: #2e7d32;
    background: rgba(46, 125, 50, 0.08);
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.3px;
  }

  /* Delivery reassurance */
  .product-page .delivery-estimate {
    order: 6;
    justify-content: center;
    margin-bottom: 8px;
    padding: 0;
    border: none;
    background: none;
  }

  .product-page .delivery-info {
    text-align: center;
  }

  .product-page .delivery-info .delivery-label {
    font-size: 0.78rem;
    color: var(--pdp-text-secondary);
  }

  .product-page .delivery-info .delivery-time {
    font-size: 0.75rem;
    color: var(--pdp-text-secondary);
  }

  .product-page .product-rating {
    order: 6;
    margin-bottom: 14px;
  }

  .product-page .product-rating .rating-stars {
    font-size: 0.8rem;
    gap: 6px;
    padding: 6px 10px;
  }

  .product-page .product-rating .rating-stars-display {
    font-size: 0.85rem;
  }

  .product-page .product-rating .rating-value,
  .product-page .product-rating .rating-count {
    font-size: 0.8rem;
  }

  /* ============================================
     3d. VARIANTS — Size selector
     ============================================ */

  .product-page .product-section.variants {
    order: 7;
    margin-bottom: 14px;
    padding-bottom: 0;
    border-bottom: none;
  }

  .product-page .product-section.variants::after {
    display: none;
  }

  .product-page .variants h3,
  .product-page .size-selector h3,
  .product-page .variant-selector h3,
  .product-page .product-section.variants h3 {
    display: none;
  }

  .product-page .size-option,
  .product-page .variant-option {
    padding: 12px 14px;
    font-size: 0.9rem;
    border-radius: 10px;
    margin-bottom: 6px;
  }

  .product-page .benefits-list li {
    padding: 8px 0 8px 26px;
    font-size: 0.875rem;
  }

  /* ============================================
     3e. CTA BUTTONS — Side by side, touch-ready
     ============================================ */

  .product-page .product-actions {
    order: 8;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 4px;
    width: 100%;
    align-items: stretch;
  }

  /* Full-width Add to Cart — primary CTA, premium pill shape */
  .product-page .product-actions .btn-add-cart {
    flex: 1 1 0;
    min-height: 46px;
    min-width: 0;
    width: auto;
    padding: 14px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 28px;
    border: 1px solid rgba(108, 140, 108, 0.35);
    box-shadow: 0 6px 16px rgba(108, 140, 108, 0.22), 0 1px 3px rgba(0, 0, 0, 0.06);
    letter-spacing: 0.2px;
    background: linear-gradient(180deg, #7f9b7b 0%, #6e8c6e 100%);
    color: #fff;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(122, 154, 122, 0.15);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .product-page .product-actions .btn-add-cart .cart-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: #fff;
  }

  .product-page .product-actions .btn-add-cart::before {
    display: none;
  }

  .product-page .product-actions .btn-add-cart:hover {
    transform: none;
    box-shadow: 0 4px 14px rgba(122, 154, 122, 0.35);
  }

  .product-page .product-actions .btn-add-cart:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
    box-shadow: 0 3px 10px rgba(108, 140, 108, 0.22);
  }

  /* CTA Micro-copy — reassurance line below button */
  .product-page .cta-microcopy {
    order: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--pdp-text-secondary);
    text-align: center;
    margin: 0 0 12px;
    padding: 0;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0.2px;
  }

  .product-page .cta-microcopy svg {
    color: var(--pdp-sage);
    flex-shrink: 0;
    width: 12px;
    height: 12px;
  }

  /* Hide Buy Now on mobile — one primary CTA only */
  .product-page .product-actions .btn-buy-now {
    display: none;
  }

  .product-page .product-actions .btn-coming-soon,
  .product-page .product-actions .btn-out-of-stock {
    flex: 1;
    width: 100%;
    min-height: 48px;
    padding: 14px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--pdp-radius-md);
    border: none;
  }

  .product-page .product-actions .btn-notify-me {
    flex: 1;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--pdp-radius-md);
  }

  .product-page .product-actions .btn-wishlist {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    min-width: 52px;
    padding: 0;
    border-radius: var(--pdp-radius-md);
    touch-action: manipulation;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, color 0.2s ease, border-color 0.2s ease;
    color: var(--pdp-text-secondary, #6b7280);
    background: var(--white, #fff);
    border: 2px solid var(--pdp-border, rgba(0, 0, 0, 0.1));
  }

  .product-page .product-actions .btn-wishlist:hover {
    transform: none;
    color: var(--pdp-sage);
    border-color: var(--pdp-sage);
  }

  .product-page .product-actions .btn-wishlist.active {
    color: var(--pdp-sage);
    border-color: var(--pdp-sage);
  }

  .product-page .product-actions .btn-wishlist:active {
    transform: scale(0.9);
    color: var(--pdp-sage);
    border-color: var(--pdp-sage);
  }

  /* ============================================
     4. BELOW-CTA SECTIONS
     ============================================ */

  /* --- Why You'll Love This — 2-col grid --- */
  .product-page .product-section.why-love-this {
    order: 10;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pdp-border);
  }

  .product-page .why-love-this h3 {
    font-size: 0.95rem;
    margin-bottom: 12px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0;
  }

  .product-page .love-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .product-page .love-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--pdp-text-primary);
    padding: 6px 0;
  }

  .product-page .love-check {
    flex-shrink: 0;
    color: var(--pdp-sage);
    margin-top: 1px;
    width: 14px;
    height: 14px;
  }

  .product-page .love-item span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    align-items: center;
    justify-content: center;
  }

  /* --- Delivery Estimate --- */
  .product-page .delivery-estimate {
    order: 11;
    margin: 0 0 14px 0;
    padding: 12px 14px;
    background: var(--pdp-sage-light);
    border-radius: var(--pdp-radius-md);
    border: 1px solid rgba(122, 154, 122, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .product-page .delivery-estimate .delivery-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .product-page .delivery-estimate .delivery-icon svg {
    width: 16px;
    height: 16px;
    color: var(--pdp-sage);
  }

  .product-page .delivery-estimate .delivery-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pdp-sage);
  }

  .product-page .delivery-estimate .delivery-time {
    font-size: 0.8rem;
    color: var(--pdp-text-secondary);
  }

  /* Mobile trust line moved to .pdp-trust-strip below image (section 2b) */

  /* --- Stock Urgency --- */
  .product-page .stock-urgency {
    order: 13;
    margin: 0 0 12px 0;
    padding: 10px 12px;
    border-radius: var(--pdp-radius-md);
  }

  /* --- Payment Methods --- */
  .product-page .payment-methods {
    order: 14;
    margin: 0 0 12px 0;
    padding: 12px 12px;
    background: var(--bg-cream, #faf8f4);
    border-radius: var(--pdp-radius-md);
    border: 1px solid rgba(0, 0, 0, 0.05);
  }

  .product-page .payment-methods .payment-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .product-page .payment-methods .payment-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--pdp-text-secondary);
  }

  .product-page .payment-methods .powered-by {
    font-size: 0.62rem;
    color: var(--pdp-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .product-page .payment-methods .powered-by svg {
    max-width: 52px;
    height: auto;
  }

  .product-page .payment-methods .payment-icons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .product-page .payment-methods .payment-icon {
    width: 40px;
    height: 26px;
    padding: 3px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
  }

  .product-page .payment-methods .payment-icon img,
  .product-page .payment-methods .payment-icon svg {
    max-height: 16px;
    max-width: 28px;
  }

  .product-page .payment-methods .cod-badge {
    font-size: 0.6rem;
    font-weight: 700;
    background: #f3faf6;
    color: #0f6b4a;
    padding: 3px 8px;
    border-radius: 8px;
    letter-spacing: 0.3px;
    width: auto;
    height: 26px;
    border: 1px solid rgba(15, 107, 74, 0.18);
  }

  /* --- WhatsApp Inquiry --- */
  .product-page .whatsapp-inquiry {
    order: 15;
    margin: 0 0 14px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--pdp-radius-sm);
    font-size: 0.82rem;
    font-weight: 500;
    border: 1.5px solid rgba(37, 211, 102, 0.3);
    background: rgba(37, 211, 102, 0.03);
    color: #128C7E;
    text-decoration: none;
    touch-action: manipulation;
    transition: background var(--pdp-transition), border-color var(--pdp-transition);
  }

  .product-page .whatsapp-inquiry:active {
    background: rgba(37, 211, 102, 0.08);
  }

  .product-page .whatsapp-inquiry svg {
    width: 16px;
    height: 16px;
    color: #25D366;
  }

  /* --- Social Share (compact inline) --- */
  .product-page .product-share {
    order: 16;
    margin: 12px 0;
    padding: 12px 0;
    border-top: 1px solid var(--pdp-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .product-page .product-share .share-label {
    font-size: 0.6875rem;
    margin: 0;
    flex-shrink: 0;
  }

  .product-page .product-share .share-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .product-page .product-share .share-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: var(--pdp-radius-sm);
    transition: none;
    touch-action: manipulation;
  }

  /* Kill desktop hover effects on share buttons */
  .product-page .product-share .share-btn:hover {
    transform: none;
  }

  .product-page .product-share .share-btn:active {
    transform: scale(0.9);
    transition: transform 0.1s ease;
  }

  .product-page .product-share .share-btn svg {
    width: 14px;
    height: 14px;
    color: #1e1919;
    fill: currentColor;
  }

  .product-page .product-share .share-btn svg path,
  .product-page .product-share .share-btn svg circle,
  .product-page .product-share .share-btn svg rect {
    fill: #1e1919;
  }

  /* --- Section divider accent — hide on mobile for cleaner look --- */
  .product-page .product-section::after {
    width: 30px;
    opacity: 0.3;
  }

  /* ============================================
     5. BELOW-HERO DESCRIPTION SECTIONS
     ============================================ */

  /* Consistent section spacing — MUST override desktop 50px vertical padding */
  .product-page .product-ritual-outcome,
  .product-page .product-usage,
  .product-page .product-details-premium,
  .product-page .product-modules,
  .product-page .why-organic-urban,
  .product-page .product-faq,
  .product-page .related-products,
  .product-page .recently-viewed-section {
    padding: 24px var(--pdp-gutter);
  }

  /* Section headings */
  .product-page .product-ritual-outcome h2,
  .product-page .product-usage h2,
  .product-page .product-details-premium h2,
  .product-page .why-organic-urban h2,
  .product-page .related-products h2,
  .product-page .product-faq h2 {
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: 16px;
  }

  /* Ritual & Outcome — beige bg, tighter top on mobile */
  .product-page .product-ritual-outcome {
    background: linear-gradient(135deg, #faf8f4 0%, #f5f0e8 100%);
    padding: 20px var(--pdp-gutter) 24px;
    margin-top: 0;
  }

  .product-page .product-ritual-outcome h2 {
    margin-bottom: 12px;
  }

  .product-page .product-ritual-outcome .ritual-text {
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: center;
    color: var(--pdp-text-primary);
  }

  /* ============================================
     5a. HOW TO USE — Container cards, auto-height
     ============================================ */

  .product-page .usage-steps-carousel {
    position: relative;
  }

  /* Stack cards vertically as container cards (no horizontal scroll) */
  .product-page .usage-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    overflow: visible;
  }

  .product-page .usage-steps::-webkit-scrollbar {
    display: none;
  }

  .product-page .usage-step {
    flex: none;
    width: 100%;
    min-width: 0;
    padding: 20px;
    border-radius: var(--pdp-radius-md);
    box-shadow: none;
    border: 1px solid var(--pdp-border);
    background: #fff;
    transition: none;
    text-align: center;
  }

  .product-page .usage-step:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--pdp-border);
  }

  .product-page .usage-step .step-number {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    box-shadow: none;
    margin: 0 auto 10px;
  }

  .product-page .usage-step h3 {
    font-size: 0.9rem;
    margin-bottom: 6px;
    margin-left: 0;
    display: block;
    font-weight: 600;
    text-align: center;
  }

  .product-page .usage-step p {
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--pdp-text-secondary);
    text-align: center;
  }

  /* Hide pagination dots — cards are stacked, no carousel */
  .product-page .usage-dots {
    display: none;
  }

  .product-page .usage-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .product-page .usage-dot.active {
    background: var(--pdp-sage);
    transform: scale(1.3);
  }

  /* ============================================
     5b. PRODUCT DETAILS — Single grid, stacked cards on mobile
     ============================================ */

  /* One grid for all viewports: 1 column on mobile */
  .product-page .details-grid,
  .product-page .product-info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Card styling: full width, soft corners, light bg, no heavy shadow, no fixed height */
  .product-page .detail-card {
    height: auto;
    min-height: unset;
    width: 100%;
    border-radius: 13px;
    background: #faf8f4;
    padding: 24px var(--pdp-gutter);
    border: 1px solid var(--pdp-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: visible;
  }

  .product-page .detail-card-content {
    overflow: visible;
    font-size: 0.9rem;
  }

  .product-page .detail-card-content h4,
  .product-page .detail-section h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }

  .product-page .detail-card-content p,
  .product-page .detail-section p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  /* Info grid inside detail cards */
  .product-page .info-grid {
    gap: 8px;
  }

  .product-page .info-grid .info-label {
    font-size: 0.75rem;
  }

  .product-page .info-grid .info-value {
    font-size: 0.82rem;
  }

  /* Why Organic Urban — Simplified 2x2 grid, icon + one line */
  .product-page .why-organic-urban {
    padding: 24px var(--pdp-gutter);
  }

  .product-page .why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .product-page .why-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, #faf8f4 0%, #f5f0e8 100%);
    border-radius: var(--pdp-radius-sm);
    transition: none;
  }

  .product-page .why-item:hover {
    transform: none;
    box-shadow: none;
  }

  .product-page .why-icon-wrap {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0;
    overflow: visible;
  }

  .product-page .why-icon-wrap .why-icon,
  .product-page .why-icon-wrap img.why-icon,
  .product-page .why-icon-wrap svg.why-icon {
    width: 68px;
    height: 68px;
    color: var(--pdp-sage);
  }

  .product-page .why-item span:not(.why-icon-wrap) {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--pdp-text-primary);
    line-height: 1.3;
  }

  /* Hide desktop h3 and p (we use inline span now) */
  .product-page .why-item h3,
  .product-page .why-item p {
    display: none;
  }

  /* ============================================
     6. PRODUCT MODULES (A+ Content)
     ============================================ */

  .product-page .product-modules {
    padding: 24px var(--pdp-gutter);
  }

  .product-page .product-module {
    margin-bottom: 24px;
  }

  .product-page .product-module img {
    width: 100%;
    height: auto;
    border-radius: var(--pdp-radius-md);
    margin-bottom: 12px;
  }

  /* ============================================
     7. FAQ — Mobile: quiet, list-like, touch-friendly (no cards/panels)
     ============================================ */

  .product-page .product-faq {
    padding: 20px var(--pdp-gutter) 28px;
    background: transparent;
  }

  .product-page .product-faq .section-inner {
    max-width: 100%;
  }

  /* Section header: minimal, tight, calm */
  .product-page .faq-header {
    margin-bottom: 16px;
    text-align: center;
  }

  .product-page .faq-header-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-page .faq-header-icon svg {
    width: 22px;
    height: 22px;
    color: var(--pdp-sage);
  }

  .product-page .product-faq h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: #1e1919;
  }

  /* Subtitle removed on mobile */
  .product-page .faq-subheading {
    display: none;
  }

  /* Flat list: no gap, no cards */
  .product-page .faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Each item = divider line, no box/shadow/radius */
  .product-page .faq-item {
    margin: 0;
    background: none;
    border: none;
    border-bottom: 1px solid #e6e1da;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  .product-page .faq-item:first-child {
    border-top: 1px solid #e6e1da;
  }

  /* Left icon column removed on mobile */
  .product-page .faq-q-icon {
    display: none;
  }

  /* Entire row tappable, full-width text, chevron right */
  .product-page .faq-question {
    width: 100%;
    min-height: 48px;
    padding: 14px 0;
    display: flex;
    align-items: center;
    gap: 0;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    color: #1e1919;
  }

  .product-page .faq-question h3 {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    flex: 1;
    text-align: left;
    margin: 0;
    padding-right: 12px;
    color: #1e1919;
  }

  /* Chevron: right, rotates on open, 200–250ms */
  .product-page .faq-toggle-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    margin-left: auto;
    color: #736c64;
    transition: transform 0.22s ease;
  }

  .product-page .faq-question[aria-expanded="true"] .faq-toggle-icon {
    transform: rotate(180deg);
    color: #736c64;
  }

  /* Expanded answer: soft cream bg, indentation, smaller text */
  .product-page .faq-answer {
    padding: 0;
    transition: max-height 0.25s ease-out;
  }

  .product-page .faq-question[aria-expanded="true"]+.faq-answer,
  .product-page .faq-item.open .faq-answer {
    background: #faf8f4;
    padding: 0 0 16px;
  }

  .product-page .faq-answer p {
    font-size: 14px;
    line-height: 1.6;
    color: #736c64;
    margin: 0;
    padding: 12px 0 0 0;
    padding-inline-start: 0;
  }

  /* Slight indentation for answer text (calm, readable) */
  .product-page .faq-item.open .faq-answer p,
  .product-page .faq-question[aria-expanded="true"]+.faq-answer p {
    padding-left: 8px;
    padding-right: 0;
  }

  /* ============================================
     8. RELATED / RECENTLY VIEWED — Compact
     ============================================ */

  .product-page .recently-viewed-section {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .product-page .recently-viewed-section h2 {
    font-size: 1.3rem;
    margin-bottom: 16px;
  }

  /* Related product cards — no hover transform on mobile */
  .product-page .product-card {
    transition: none;
  }

  .product-page .product-card:hover {
    transform: none;
    box-shadow: none;
  }

  .product-page .product-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* ============================================
     9. TRUST BADGES STRIP — Compact
     ============================================ */

  .product-page .trust-badges-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    padding: 12px var(--pdp-gutter);
    margin: 10px auto;
    background: linear-gradient(135deg, #faf8f4 0%, #f5f0e8 100%);
    border-radius: var(--pdp-radius-md);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
  }

  .product-page .trust-badges-strip.trust-badges-image {
    margin-top: 0;
    margin-bottom: 12px;
    justify-content: center;
  }

  .product-page .trust-badges-strip.trust-badges-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 48px;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .product-page .trust-badge-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5a5a5a;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.3px;
  }

  .product-page .trust-badge-item svg {
    color: var(--pdp-sage);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

  .product-page .trust-badge-divider {
    width: 1px;
    height: 18px;
    background: rgba(0, 0, 0, 0.1);
  }

  .product-page .trust-assurance-strip {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 10px 0;
    padding: 10px 0;
  }

  .product-page .trust-assurance-strip .trust-item {
    flex: 0 1 auto;
    min-width: 65px;
    font-size: 10px;
    gap: 4px;
  }

  .product-page .trust-assurance-strip .trust-item svg {
    width: 15px;
    height: 15px;
  }

  .product-page .trust-assurance-strip .trust-item span {
    font-size: 10px;
  }

  /* ============================================
     10. STICKY ADD TO CART BAR
     ============================================ */

  .product-page .sticky-cart-bar,
  .product-page #stickyCartBar,
  .product-page #stickyActionBar {
    position: fixed;
    bottom: calc(var(--mobile-bottom-nav-height, 64px) + var(--mobile-safe-area-bottom, env(safe-area-inset-bottom)));
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 8px var(--pdp-gutter);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
    z-index: calc(var(--z-sticky, 2000) + 1);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .product-page .sticky-cart-bar[hidden],
  .product-page #stickyCartBar[hidden],
  .product-page #stickyActionBar[hidden] {
    display: none;
  }

  .product-page .sticky-cart-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .product-page .sticky-cart-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pdp-text-primary);
    white-space: nowrap;
  }

  .product-page .sticky-cart-name {
    font-size: 0.72rem;
    color: var(--pdp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }

  .product-page .sticky-cart-btn {
    min-width: 120px;
    min-height: 40px;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 999px;
    background: linear-gradient(180deg, #7f9b7b 0%, #6e8c6e 100%);
    color: #fff;
    border: none;
    touch-action: manipulation;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }

  .product-page .sticky-cart-btn:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  .product-page .product-thumb {
    width: 38px;
    height: 38px;
    border-radius: var(--pdp-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
  }

  /* ============================================
     11. PRODUCT LIGHTBOX (Image Zoom)
     ============================================ */

  .product-page .product-lightbox {
    padding: var(--pdp-gutter);
  }

  .product-page .lightbox-close {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    touch-action: manipulation;
    z-index: 10001;
  }

  .product-page .lightbox-content {
    width: 100%;
    max-width: 100%;
    position: relative;
    max-height: 80vh;
  }

  .product-page .lightbox-content img {
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
  }

  .product-page .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
  }

  .product-page .lightbox-prev,
  .product-page .lightbox-next {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    touch-action: manipulation;
  }

  /* Override inline style positions for mobile */
  .product-page .lightbox-prev {
    left: 10px;
  }

  .product-page .lightbox-next {
    right: 10px;
  }

  .product-page .lightbox-nav button {
    padding: 10px 15px;
    font-size: 1.5rem;
  }

  /* ============================================
     12. FLOATING CHAT BUTTON — Hidden on PDP until scroll
     ============================================ */

  .product-page .ou-chatbot-button {
    bottom: calc(var(--mobile-bottom-nav-height, 64px) + 74px + env(safe-area-inset-bottom));
    transform: scale(0.7);
    right: 8px;
    opacity: 0;
    pointer-events: none;
    z-index: calc(var(--z-sticky, 2000) + 2);
    transition: opacity 0.4s ease, transform 0.3s ease;
  }

  /* JS toggles this class after scrolling past the hero */
  .product-page .ou-chatbot-button.chat-visible {
    opacity: 0.55;
    pointer-events: auto;
  }

  .product-page .ou-chatbot-button.chat-visible:active {
    transform: scale(0.65);
    opacity: 1;
  }

  /* ============================================
     13. NOTIFY MODAL — Mobile optimized
     ============================================ */

  .product-page .notify-modal-content {
    padding: 28px 20px;
    border-radius: var(--pdp-radius-lg);
    width: 92%;
    max-width: 360px;
  }

  /* ============================================
     14. FOCUS-VISIBLE — Accessibility
     ============================================ */

  .product-page .btn-add-cart:focus-visible,
  .product-page .btn-buy-now:focus-visible,
  .product-page .btn-wishlist:focus-visible,
  .product-page .sticky-cart-btn:focus-visible,
  .product-page .variant-btn:focus-visible,
  .product-page .share-btn:focus-visible,
  .product-page .faq-question:focus-visible,
  .product-page .whatsapp-inquiry:focus-visible,
  .product-page .lightbox-close:focus-visible,
  .product-page .lightbox-prev:focus-visible,
  .product-page .lightbox-next:focus-visible {
    outline: 2px solid var(--pdp-sage);
    outline-offset: 2px;
  }

  /* ============================================
     15. SMALL DEVICE ADJUSTMENTS (320px-374px)
     ============================================ */

  @media screen and (max-width: 374px) {
    .product-page .product-title {
      font-size: 1.25rem;
    }

    .product-page .product-pricing .current-price {
      font-size: 1.3rem;
    }

    /* Stack CTAs vertically on very small screens */
    .product-page .product-actions {
      flex-direction: column;
    }

    .product-page .product-actions .btn-add-cart,
    .product-page .product-actions .btn-buy-now {
      width: 100%;
    }

    .product-page .product-actions .btn-wishlist {
      align-self: center;
    }

    .product-page .details-grid {
      grid-template-columns: 1fr;
    }

    .product-page .why-grid {
      grid-template-columns: 1fr;
    }

    .product-page .sticky-cart-bar,
    .product-page #stickyCartBar {
      padding: 6px 12px;
    }

    .product-page .trust-badges-strip {
      flex-wrap: wrap;
      gap: 8px;
      padding: 10px 12px;
    }

    .product-page .trust-badge-item {
      font-size: 0.68rem;
    }

    .product-page .trust-badge-divider {
      display: none;
    }
  }

  /* ============================================
     16. EXTRA SMALL (below 360px, e.g. Galaxy Fold)
     ============================================ */

  @media screen and (max-width: 359px) {
    .product-page .product-mobile-title-block .product-title {
      font-size: 1.65rem;
    }

    .product-page .product-info {
      padding: 20px 12px 12px;
    }

    .product-page .sticky-cart-btn {
      min-width: 100px;
      padding: 8px 14px;
      font-size: 0.82rem;
    }
  }

}

/* End max-width: 768px */


/* ============================================
   REDUCED MOTION — Respect user preference
   ============================================ */
@media (prefers-reduced-motion: reduce) {

  .product-page .sticky-cart-bar,
  .product-page #stickyCartBar,
  .product-page #stickyActionBar,
  .product-page .btn-add-cart,
  .product-page .btn-buy-now,
  .product-page .btn-wishlist,
  .product-page .share-btn,
  .product-page .product-card,
  .product-page .why-item,
  .product-page .whatsapp-inquiry,
  .product-page .ou-chatbot-button,
  .product-page .faq-toggle-icon,
  .product-page .faq-answer {
    transition: none;
    animation: none;
  }

  .product-page .stock-urgency.critical {
    animation: none;
  }

  .product-page .stock-urgency.critical .urgency-icon svg {
    animation: none;
  }
}


/* ============================================
   DESKTOP: Hide mobile-only elements
   ============================================ */
@media screen and (min-width: 769px) {
  .product-page .mobile-trust-line {
    display: none;
  }

  /* Mobile-only blocks — hide on desktop */
  .product-page .product-mobile-title-block {
    display: none;
  }

  .product-page .product-badge-on-image-mobile {
    display: none;
  }

  /* Image carousel is mobile-only */
  .product-page .pdp-image-carousel {
    display: none;
  }

  /* Usage dots are mobile-only */
  .product-page .usage-dots {
    display: none;
  }

  /* Value cues + CTA micro-copy are mobile-only */
  .product-page .value-cues {
    display: none;
  }

  .product-page .cta-microcopy {
    display: none;
  }
}