/* RaRa Deals Mobile PDP Bundle — Auto-generated 2026-07-21 22:44 */

/* ── _variables.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Design Tokens  (_variables.css)
   Scope: Mobile only, consumed within @media (max-width: 991px)
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ── */
  --mp-primary:          #6D28D9;
  --mp-primary-light:    #8B5CF6;
  --mp-primary-dark:     #5B21B6;
  --mp-primary-glow:     rgba(109, 40, 217, 0.22);
  --mp-primary-soft:     #EDE9FE;
  --mp-success:          #16A34A;
  --mp-success-soft:     #DCFCE7;
  --mp-danger:           #EF4444;
  --mp-danger-soft:      #FEF2F2;
  --mp-warning:          #F59E0B;
  --mp-warning-soft:     #FFFBEB;

  /* ── Gradients ── */
  --mp-btn-gradient:     linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%);
  --mp-btn-gradient-h:   linear-gradient(135deg, #5B21B6 0%, #7C3AED 100%);

  /* ── Surfaces ── */
  --mp-bg:               #F4F6F9;
  --mp-card:             #FFFFFF;
  --mp-border:           #E8ECF0;
  --mp-border-light:     #F1F5F9;

  /* ── Text ── */
  --mp-text:             #0F172A;
  --mp-text-secondary:   #374151;
  --mp-muted:            #6B7280;
  --mp-muted-light:      #9CA3AF;

  /* ── Font Sizes (Reduced by ~3-4% for lighter visual weight) ── */
  --mp-text-xs:          10.5px;
  --mp-text-sm:          11.5px;
  --mp-text-base:        13.5px;
  --mp-text-md:          14.5px;
  --mp-text-lg:          15.5px;
  --mp-text-xl:          17.3px;
  --mp-text-2xl:         21.1px;
  --mp-text-3xl:         25px;


  /* ── Spacing ── */
  --mp-page-pad:         16px;
  --mp-gap-xs:           6px;
  --mp-gap-sm:           8px;
  --mp-gap:              12px;
  --mp-gap-md:           14px;
  --mp-gap-lg:           16px;
  --mp-gap-xl:           20px;

  /* ── Border Radius ── */
  --mp-radius-xs:        6px;
  --mp-radius-sm:        10px;
  --mp-radius:           14px;
  --mp-radius-lg:        18px;
  --mp-radius-xl:        22px;
  --mp-radius-full:      9999px;

  /* ── Shadows ── */
  --mp-shadow-xs:        0 1px 4px rgba(15, 23, 42, 0.05);
  --mp-shadow-sm:        0 2px 8px rgba(15, 23, 42, 0.07);
  --mp-shadow:           0 4px 16px rgba(15, 23, 42, 0.09);
  --mp-shadow-lg:        0 8px 30px rgba(15, 23, 42, 0.12);
  --mp-shadow-purple:    0 6px 20px rgba(109, 40, 217, 0.28);

  /* ── Transitions ── */
  --mp-transition:       all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --mp-transition-fast:  all 0.14s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Safe Area (iOS) ── */
  --mp-safe-top:         env(safe-area-inset-top, 0px);
  --mp-safe-bottom:      env(safe-area-inset-bottom, 0px);
  --mp-safe-left:        env(safe-area-inset-left, 0px);
  --mp-safe-right:       env(safe-area-inset-right, 0px);

  /* ── Header ── */
  --mp-header-h:         60px;
  --mp-header-h-sm:      52px;

  /* ── Bottom Bar ── */
  --mp-bar-h:            70px;
}


/* ── _header.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile Nav Header  (_header.css)
   SCOPE: @media (max-width: 991px) ONLY
   Desktop (> 991px) is completely untouched.
   New class system: .rara-mnav (avoids all CSS collisions)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

  /* ─────────────────────────────────────────────────────────────────
     1. OUTER SHELL — fixed sticky bar, 56px tall
     3-column: [left] [center flex:1] [right]
     ───────────────────────────────────────────────────────────────── */
  .rara-mnav {
    /* Layout */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    /* Positioning */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 56px !important;
    z-index: 99999 !important;

    /* Appearance */
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;

    /* Spacing */
    padding: 0 8px 0 4px !important;
    box-sizing: border-box !important;
    margin: 0 !important;

    /* No gap on the outer shell — gaps are handled per-region */
    gap: 0 !important;
  }

  /* Push page content below the 56px fixed bar */
  body.single-product .rara-pdp,
  body.woocommerce-checkout .woocommerce {
    padding-top: 56px !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     2. LEFT REGION — Back button wrapper
     Fixed width, never grows/shrinks
     ───────────────────────────────────────────────────────────────── */
  .rara-mnav__left {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     3. CENTER REGION — Product title
     Takes ALL remaining space between left and right.
     flex:1 is the key — right group stays pinned to the edge.
     ───────────────────────────────────────────────────────────────── */
  .rara-mnav__center {
    flex: 1 1 0% !important;       /* grow to fill, shrink if needed */
    min-width: 0 !important;       /* allow text truncation */
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    margin: 0 !important;
    overflow: hidden !important;

    /* Typography */
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.1px !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     4. RIGHT REGION — Action icons group
     Fixed width. Contains Share · Wishlist · Cart as pure flex siblings.
     DO NOT put margin/translate on individual buttons here.
     ───────────────────────────────────────────────────────────────── */
  .rara-mnav__right {
    flex: 0 0 auto !important;     /* never grows — stays at right edge */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;   /* vertical center in 56px bar */
    justify-content: flex-end !important;
    gap: 6px !important;              /* equal gap: Share <6px> Wish <6px> Cart */
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     5. ALL ACTION BUTTONS — identical 34×34px circular buttons (20% smaller)
     Share, Wishlist, Cart get exactly the same styles.
     ───────────────────────────────────────────────────────────────── */
  .rara-mnav__btn,
  .rara-mnav__back,
  .rara-mnav__right .rara-card__wishlist-btn {
    /* ── Reset browser defaults completely ── */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;

    /* ── Identical 34px dimensions ── */
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    flex: 0 0 34px !important;
    flex-shrink: 0 !important;

    /* ── Circle shape ── */
    border-radius: 50% !important;
    background: #f2f2f5 !important;
    border: none !important;
    outline: none !important;

    /* ── Color ── */
    color: #1a1a2e !important;

    /* ── Center SVG icon — flexbox ── */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* ── Self-alignment inside flex ── */
    align-self: center !important;
    flex-grow: 0 !important;

    /* ── Reset all spacing ── */
    padding: 0 !important;
    margin: 0 !important;

    /* ── Misc ── */
    cursor: pointer !important;
    text-decoration: none !important;
    position: relative !important;
    box-shadow: none !important;
    overflow: visible !important;
    line-height: 1 !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    vertical-align: middle !important;

    /* ── Transition ── */
    transition: background 0.15s ease, transform 0.12s ease !important;
  }

  /* Tap feedback */
  .rara-mnav__btn:active,
  .rara-mnav__back:active,
  .rara-mnav__right .rara-card__wishlist-btn:active {
    transform: scale(0.88) !important;
    background: #e4e4ea !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     6. SVG ICONS — 17×17 inside every button (identical size)
     ───────────────────────────────────────────────────────────────── */
  .rara-mnav__btn svg,
  .rara-mnav__back svg,
  .rara-mnav__right .rara-card__wishlist-btn svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
    flex: 0 0 17px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     8. WISHLIST ACTIVE STATE
     ───────────────────────────────────────────────────────────────── */
  .rara-mnav__wish.rara-mnav__wish--active {
    color: #e53935 !important;
    background: #ffeaea !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     9. CART BADGE
     ───────────────────────────────────────────────────────────────── */
  .rara-mnav__badge {
    position: absolute !important;
    top: -1px !important;
    right: -1px !important;
    background: #e53935 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    line-height: 1 !important;
    border: 2px solid #fff !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    font-family: -apple-system, sans-serif !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     10. HIDE SITE HEADER + SEARCH on mobile PDP & Checkout
     ───────────────────────────────────────────────────────────────── */
  body.single-product .rara-header,
  body.single-product .rara-header__top,
  body.single-product .rara-header__main,
  body.woocommerce-checkout .rara-header,
  body.woocommerce-checkout .rara-header__top,
  body.woocommerce-checkout .rara-header__main {
    display: none !important;
  }

  body.single-product .rara-search-field,
  body.single-product .rara-search-submit,
  body.single-product .rara-header__search-row,
  body.single-product .rara-header__search-wrap,
  body.single-product [class*="rara-search"],
  body.woocommerce-checkout .rara-search-field,
  body.woocommerce-checkout .rara-search-submit,
  body.woocommerce-checkout .rara-header__search-row,
  body.woocommerce-checkout .rara-header__search-wrap,
  body.woocommerce-checkout [class*="rara-search"] {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     11. ISOLATION — prevent site-wide .rara-card__wishlist-btn
     styles from bleeding into the nav wishlist button.
     Scope: only inside .rara-mnav__right
     ───────────────────────────────────────────────────────────────── */
  .rara-mnav__right .rara-card__wishlist-btn {
    /* Override any card-component styles with mnav values */
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    background: #f2f2f5 !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    color: #1a1a2e !important;
    transform: none !important;   /* remove any card-level transforms */
  }

  .rara-mnav__right .rara-card__wishlist-btn.rara-mnav__wish--active {
    color: #e53935 !important;
    background: #ffeaea !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     12. RESPONSIVE SAFETY — 320px phones
     ───────────────────────────────────────────────────────────────── */
  @media (max-width: 340px) {
    .rara-mnav__right {
      gap: 4px !important;
    }
    .rara-mnav__btn,
    .rara-mnav__right .rara-card__wishlist-btn {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      min-height: 38px !important;
      max-width: 38px !important;
      max-height: 38px !important;
    }
  }

}
/* END @media (max-width: 991px) — Desktop > 991px is completely untouched */


/* ── _gallery.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Gallery  (_gallery.css)
   Section 2: Full-width hero, thumbnails, dots, zoom, badges
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* Collapse empty woocommerce notices wrapper on mobile PDP to avoid top gap */
  body.single-product .woocommerce-notices-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  body.single-product .woocommerce-notices-wrapper:empty {
    display: none !important;
  }

  /* Make gallery container span edge-to-edge (full width) */
  .rara-pdp-gallery-container {
    width: calc(100% + (2 * var(--mp-page-pad))) !important;
    margin-inline: calc(-1 * var(--mp-page-pad)) !important;
    margin-top: 0 !important;
    margin-bottom: var(--mp-gap) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .rara-pdp-gallery {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
    background: #ffffff !important;
  }

  /* ── Hero Image Wrap ── */
  .rara-pdp-gallery__main-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 400px !important;
    background: #ffffff !important; /* Pure white background to match native apps */
    overflow: hidden !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  .rara-pdp-gallery__main {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }


  /* Fade transition during image swap */
  .rara-pdp-gallery__main.mp-gallery--fade-out {
    opacity: 0 !important;
    transform: scale(0.97) !important;
  }
  .rara-pdp-gallery__main.mp-gallery--fade-in {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  /* ── Discount Badge (Top-Left) ── */
  .rara-pdp-gallery__discount-badge {
    position: absolute !important;
    top: 12px !important;
    inset-inline-start: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    z-index: 2 !important;
  }

  .rara-pdp-gallery__discount-percent {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--mp-danger) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: var(--mp-radius-full) !important;
    line-height: 1 !important;
    letter-spacing: 0.2px !important;
  }

  .rara-pdp-gallery__discount-save {
    display: none !important; /* Kept minimal on mobile; shown in price section */
  }

  /* ── Floating Glass Zoom Button (Top-Right) ── */
  .rara-pdp-gallery__zoom-icon {
    position: absolute !important;
    top: 12px !important;
    inset-inline-end: 12px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--mp-radius-full) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    color: var(--mp-text) !important;
    box-shadow: var(--mp-shadow) !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    z-index: 2 !important;
    transition: var(--mp-transition-fast) !important;
  }

  .rara-pdp-gallery__zoom-icon:active {
    transform: scale(0.9) !important;
  }

  /* Future badges: Video, 360° */
  .mp-gallery__badge--video,
  .mp-gallery__badge--360 {
    position: absolute !important;
    bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: var(--mp-radius-full) !important;
    backdrop-filter: blur(8px) !important;
  }

  .mp-gallery__badge--video { inset-inline-start: 12px !important; }
  .mp-gallery__badge--360  { inset-inline-end: 12px !important; }

  /* ── Image Counter (Bottom Center) ── */
  .rara-pdp-gallery__counter {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: var(--mp-radius-full) !important;
    backdrop-filter: blur(6px) !important;
    white-space: nowrap !important;
    z-index: 2 !important;
  }

  /* ── Dots Indicator ── */
  .rara-pdp-gallery__dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 10px 0 6px !important;
  }

  .rara-pdp-gallery__dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: var(--mp-radius-full) !important;
    background: var(--mp-border) !important;
    transition: var(--mp-transition-fast) !important;
    cursor: pointer !important;
  }

  .rara-pdp-gallery__dot--active {
    background: var(--mp-primary) !important;
    width: 18px !important;
  }

  /* ── Thumbnail Strip ── */
  .rara-pdp-gallery__thumbs {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding: 6px var(--mp-page-pad) 10px !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }

  .rara-pdp-gallery__thumbs::-webkit-scrollbar {
    display: none !important;
  }

  .rara-pdp-gallery__thumb {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: var(--mp-radius-sm) !important;
    border: 2px solid var(--mp-border) !important;
    background: var(--mp-card) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: var(--mp-transition-fast) !important;
    scroll-snap-align: start !important;
  }

  .rara-pdp-gallery__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .rara-pdp-gallery__thumb--active {
    border-color: var(--mp-primary) !important;
    box-shadow: 0 0 0 2px var(--mp-primary-glow) !important;
  }

  .rara-pdp-gallery__thumb:active {
    transform: scale(0.94) !important;
  }

  /* Hide trust row on mobile */
  body.single-product .rara-pdp-gallery__trust-row {
    display: none !important;
  }

  /* Hide desktop zoom overlay on mobile */
  .rara-pdp-gallery__zoom {
    display: none !important;
  }

  /* Mobile lightbox z-index fix (place above .rara-mnav) & close button styling */
  .rara-pdp-lightbox {
    z-index: 999999 !important; /* Higher than .rara-mnav */
    background: rgba(10, 10, 20, 0.98) !important;
  }

  .rara-pdp-lightbox__close {
    position: absolute !important;
    top: 16px !important;
    inset-inline-end: 16px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-size: 28px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .rara-pdp-lightbox__close:active {
    transform: scale(0.9) !important;
    background: rgba(0, 0, 0, 0.8) !important;
  }

  .rara-pdp-lightbox__img {
    max-width: 95vw !important;
    max-height: 85vh !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
  }
}


/* ── _product-info.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Product Info  (_product-info.css)
   Section 3: Brand badge, title, store, verified, ratings, sold count
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Purchase box card (wraps all info sections) ── */
  .rara-pdp-card.rara-pdp-purchase {
    background: var(--mp-card) !important;
    border-radius: var(--mp-radius-lg) !important;
    padding: var(--mp-page-pad) !important;
    margin-bottom: var(--mp-gap) !important;
    box-shadow: var(--mp-shadow-sm) !important;
    border: 1px solid var(--mp-border-light) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* ── Brand Row ── */
  .rara-pdp-brand-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .rara-pdp-brand-logo {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: var(--mp-radius-sm) !important;
    background: var(--mp-primary-soft) !important;
    color: var(--mp-primary) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    display: grid !important;
    place-items: center !important;
  }

  .rara-pdp-brand {
    font-size: var(--mp-text-sm) !important;
    font-weight: 700 !important;
    color: var(--mp-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  /* ── Product Title ── */
  .rara-pdp-title {
    font-size: var(--mp-text-lg) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--mp-text) !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  /* ── Store Name Row (from seller card, injected as subtext) ── */
  .rara-pdp-store-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
  }

  .rara-pdp-store-name {
    font-size: var(--mp-text-base) !important;
    font-weight: 600 !important;
    color: var(--mp-text-secondary) !important;
  }

  .rara-pdp-verified-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: var(--mp-primary-soft) !important;
    color: var(--mp-primary) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: var(--mp-radius-full) !important;
  }

  /* ── Meta Row: Rating, Reviews, Sold ── */
  .rara-pdp-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 2px !important;
  }

  .rara-pdp-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: var(--mp-text-base) !important;
    color: var(--mp-text-secondary) !important;
  }

  .rara-pdp-meta-item strong {
    font-weight: 700 !important;
    color: var(--mp-text) !important;
  }

  .rara-pdp-rating-star {
    font-size: 12px !important;
  }

  .rara-pdp-meta-bullet {
    color: var(--mp-muted-light) !important;
    font-size: 10px !important;
  }

  .rara-pdp-no-ratings {
    color: var(--mp-muted) !important;
    font-style: italic !important;
  }

  .rara-pdp-first-review-link {
    color: var(--mp-primary) !important;
    font-size: var(--mp-text-sm) !important;
    text-decoration: underline !important;
  }

  /* ── Flash Deal Badge ── */
  .rara-pdp-flash-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--mp-warning) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: var(--mp-radius-full) !important;
    margin-bottom: 8px !important;
  }

  .rara-pdp-flash-timer-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    background: var(--mp-warning-soft) !important;
    border-radius: var(--mp-radius-sm) !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
  }

  .rara-pdp-flash-timer-lbl {
    font-size: var(--mp-text-sm) !important;
    font-weight: 600 !important;
    color: var(--mp-warning) !important;
  }

  .rara-pdp-timer {
    font-size: var(--mp-text-base) !important;
    font-weight: 800 !important;
    color: var(--mp-text) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 1px !important;
  }
}


/* ── _price.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Price  (_price.css)
   Section 4: Price, discount, savings, guarantee badge
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  .rara-pdp-pricing {
    border-top: 1px solid var(--mp-border-light) !important;
    padding-top: 14px !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
  }

  /* ── Price Row ── */
  .rara-pdp-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 4px !important;
  }

  /* Current Sale Price — large & bold */
  .rara-pdp-price--sale {
    font-size: var(--mp-text-3xl) !important;
    font-weight: 800 !important;
    color: var(--mp-primary) !important;
    line-height: 1 !important;
    letter-spacing: -0.5px !important;
  }

  /* Old Regular Price — strikethrough */
  .rara-pdp-price--regular {
    font-size: var(--mp-text-md) !important;
    font-weight: 500 !important;
    color: var(--mp-muted) !important;
    text-decoration: line-through !important;
    line-height: 1 !important;
  }

  /* Discount Percentage Badge */
  .rara-pdp-price--discount {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--mp-danger-soft) !important;
    color: var(--mp-danger) !important;
    font-size: var(--mp-text-sm) !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: var(--mp-radius-full) !important;
    line-height: 1 !important;
  }

  /* You Save — green */
  .rara-pdp-save {
    font-size: var(--mp-text-base) !important;
    font-weight: 700 !important;
    color: var(--mp-success) !important;
    margin-bottom: 8px !important;
    margin-top: 2px !important;
  }

  /* Lowest Price Guarantee Badge */
  .rara-pdp-lowest-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: var(--mp-success-soft) !important;
    color: var(--mp-success) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    border-radius: var(--mp-radius-full) !important;
    margin-top: 4px !important;
    border: 1px solid rgba(22, 163, 74, 0.2) !important;
  }

  .rara-pdp-lowest-badge svg {
    flex-shrink: 0 !important;
  }

  /* Stock Indicator */
  .rara-pdp-stock-progress {
    height: 5px !important;
    background: var(--mp-border) !important;
    border-radius: var(--mp-radius-full) !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    overflow: hidden !important;
  }

  .rara-pdp-stock-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--mp-danger), var(--mp-warning)) !important;
    border-radius: var(--mp-radius-full) !important;
    transition: width 0.6s ease !important;
  }
}


/* ── _variants.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Variants  (_variants.css)
   Section 5: Generic attribute system — Color swatches + Size/any pills
   Supports ALL WooCommerce attribute types automatically
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  .rara-pdp-variations {
    padding-top: 14px !important;
    padding-bottom: 2px !important;
    border-top: 1px solid var(--mp-border-light) !important;
    margin-top: 14px !important;
  }

  /* Each attribute row */
  .rara-pdp-variation-row {
    margin-bottom: 14px !important;
  }

  .rara-pdp-variation-row:last-child {
    margin-bottom: 0 !important;
  }

  /* Attribute label row */
  .rara-pdp-variation-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: var(--mp-text-base) !important;
    font-weight: 700 !important;
    color: var(--mp-text) !important;
    margin-bottom: 10px !important;
  }

  /* Selected value shown inline */
  .rara-pdp-variation-label::after {
    content: attr(data-selected);
    font-weight: 500 !important;
    color: var(--mp-muted) !important;
    font-size: var(--mp-text-sm) !important;
  }

  /* Options container — horizontal wrap */
  .rara-pdp-variation-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── Generic Variation Button (Pill style for most attributes) ── */
  .rara-pdp-variation-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: var(--mp-radius-full) !important;
    border: 1.5px solid var(--mp-border) !important;
    background: var(--mp-card) !important;
    color: var(--mp-text-secondary) !important;
    font-size: var(--mp-text-base) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--mp-transition-fast) !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .rara-pdp-variation-btn:active {
    transform: scale(0.95) !important;
  }

  /* Selected state */
  .rara-pdp-variation-btn.rara-pdp-variation-btn--selected,
  .rara-pdp-variation-btn[data-selected="true"],
  .rara-pdp-variation-btn.active {
    border-color: var(--mp-primary) !important;
    background: var(--mp-primary-soft) !important;
    color: var(--mp-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 2px var(--mp-primary-glow) !important;
  }

  /* Out-of-stock variation */
  .rara-pdp-variation-btn[data-available="false"],
  .rara-pdp-variation-btn.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
  }

  /* ── Color Swatch (circular) ─ applied via JS when detected ── */
  .rara-pdp-variation-btn.mp-swatch {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: var(--mp-radius-full) !important;
    position: relative !important;
    overflow: visible !important;
  }

  .rara-pdp-variation-btn.mp-swatch.rara-pdp-variation-btn--selected,
  .rara-pdp-variation-btn.mp-swatch.active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mp-primary) !important;
  }

  /* Generic dropdown as select element */
  .rara-pdp-variation-select {
    width: 100% !important;
    height: 44px !important;
    border: 1.5px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    padding-inline: 12px !important;
    font-size: var(--mp-text-base) !important;
    font-weight: 600 !important;
    color: var(--mp-text) !important;
    background: var(--mp-card) !important;
    appearance: auto !important;
    cursor: pointer !important;
  }

  .rara-pdp-variation-select:focus {
    outline: none !important;
    border-color: var(--mp-primary) !important;
    box-shadow: 0 0 0 2px var(--mp-primary-glow) !important;
  }

  /* ── Display WooCommerce variation dropdowns table with rounded rectangle corners on mobile ── */
  body.single-product form.variations_form table.variations,
  body.single-product .rara-pdp-wc-form-wrapper table.variations,
  body.single-product table.variations {
    display: table !important;
    width: 100% !important;
    margin-top: 12px !important;
    margin-bottom: 16px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }
}




/* ── _quantity.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Quantity  (_quantity.css)
   Section 6: Compact 44px quantity stepper
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  .rara-pdp-qty-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--mp-border-light) !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
  }

  .rara-pdp-qty-row > span {
    font-size: var(--mp-text-base) !important;
    font-weight: 700 !important;
    color: var(--mp-text) !important;
  }

  /* Stepper container */
  .rara-pdp-qty-stepper {
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    border: 1.5px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    background: var(--mp-card) !important;
  }

  /* +/- buttons */
  .rara-pdp-qty-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--mp-primary) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--mp-transition-fast) !important;
    line-height: 1 !important;
  }

  .rara-pdp-qty-btn:active {
    background: var(--mp-primary-soft) !important;
  }

  /* Qty value input */
  .rara-pdp-qty-input {
    width: 48px !important;
    height: 44px !important;
    text-align: center !important;
    font-size: var(--mp-text-md) !important;
    font-weight: 700 !important;
    color: var(--mp-text) !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid var(--mp-border) !important;
    border-right: 1px solid var(--mp-border) !important;
    outline: none !important;
    padding: 0 !important;
  }
}


/* ── _benefits.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Benefits  (_benefits.css)
   Section 7: 4-icon horizontal benefit row
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  .rara-pdp-highlights {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 12px 0 4px !important;
    border-top: 1px solid var(--mp-border-light) !important;
    margin-top: 14px !important;
  }

  .rara-pdp-highlights__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 10px 4px !important;
    background: var(--mp-border-light) !important;
    border-radius: var(--mp-radius-sm) !important;
    text-align: center !important;
    transition: var(--mp-transition-fast) !important;
  }

  .rara-pdp-highlights__item:active {
    transform: scale(0.97) !important;
  }

  .rara-pdp-highlights__icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--mp-radius-full) !important;
    background: var(--mp-primary-soft) !important;
    color: var(--mp-primary) !important;
    display: grid !important;
    place-items: center !important;
    flex-shrink: 0 !important;
  }

  .rara-pdp-highlights__icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .rara-pdp-highlights__title {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--mp-text-secondary) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }
}


/* ── _delivery.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Delivery  (_delivery.css)
   Section 8: Amazon-level delivery card with dynamic show/hide
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  .rara-pdp-delivery-card {
    background: var(--mp-card) !important;
    border-radius: var(--mp-radius-lg) !important;
    padding: 14px var(--mp-page-pad) !important;
    margin-bottom: var(--mp-gap) !important;
    box-shadow: var(--mp-shadow-sm) !important;
    border: 1px solid var(--mp-border-light) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Section header */
  .rara-pdp-delivery__heading {
    font-size: var(--mp-text-base) !important;
    font-weight: 700 !important;
    color: var(--mp-text) !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Location selector row */
  .rara-pdp-delivery__selector {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--mp-border-light) !important;
    border-radius: var(--mp-radius) !important;
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid var(--mp-border) !important;
  }

  .rara-pdp-delivery__icon {
    color: var(--mp-primary) !important;
    flex-shrink: 0 !important;
  }

  .rara-pdp-delivery__select {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    font-size: var(--mp-text-base) !important;
    font-weight: 600 !important;
    color: var(--mp-text) !important;
    appearance: auto !important;
    cursor: pointer !important;
    outline: none !important;
    min-width: 0 !important;
  }

  /* Change location button */
  .rara-pdp-delivery__change-btn {
    font-size: var(--mp-text-sm) !important;
    font-weight: 700 !important;
    color: var(--mp-primary) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-decoration: underline !important;
  }

  /* Delivery detail list */
  .rara-pdp-delivery__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .rara-pdp-delivery__item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--mp-border-light) !important;
  }

  .rara-pdp-delivery__item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  .rara-pdp-delivery__content {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .rara-pdp-delivery__title {
    display: block !important;
    font-size: var(--mp-text-base) !important;
    font-weight: 700 !important;
    color: var(--mp-text) !important;
    margin-bottom: 1px !important;
  }

  .rara-pdp-delivery__desc {
    font-size: var(--mp-text-sm) !important;
    color: var(--mp-muted) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
  }

  /* Dynamic hide: if no COD, no pickup — hide respective rows */
  .rara-pdp-delivery__item[data-available="false"] {
    display: none !important;
  }

  /* Future-ready: Accordion toggle */
  .mp-delivery--collapsible .rara-pdp-delivery__list {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
  }

  .mp-delivery--collapsible.mp-delivery--open .rara-pdp-delivery__list {
    max-height: 400px !important;
  }
}


/* ── _seller.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Seller Card  (_seller.css)
   Section 9: Full seller card — logo, metrics, Visit Store + Chat
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  .rara-pdp-card.rara-pdp-seller {
    background: var(--mp-card) !important;
    border-radius: var(--mp-radius-lg) !important;
    padding: 14px var(--mp-page-pad) !important;
    margin-bottom: var(--mp-gap) !important;
    box-shadow: var(--mp-shadow-sm) !important;
    border: 1px solid var(--mp-border-light) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* ── Seller Header Row ── */
  .rara-pdp-seller__header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .rara-pdp-seller__logo-wrap,
  .rara-pdp-seller__logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex: 0 0 48px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border: 1.5px solid var(--mp-border) !important;
    background: var(--mp-border-light) !important;
  }

  .rara-pdp-seller__header-info {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .rara-pdp-seller__name {
    display: block !important;
    font-size: var(--mp-text-md) !important;
    font-weight: 700 !important;
    color: var(--mp-text) !important;
    text-decoration: none !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .rara-pdp-seller__verified {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: var(--mp-primary-soft) !important;
    color: var(--mp-primary) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: var(--mp-radius-full) !important;
    border: 1px solid var(--mp-primary-glow) !important;
  }

  /* ── Stats Grid: Rating | Followers | Products ── */
  .rara-pdp-seller__stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    background: var(--mp-border-light) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    border: 1px solid var(--mp-border) !important;
  }

  .rara-pdp-seller__stats > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px 6px !important;
    border-inline-end: 1px solid var(--mp-border) !important;
    text-align: center !important;
  }

  .rara-pdp-seller__stats > div:last-child {
    border-inline-end: none !important;
  }

  .rara-pdp-seller__stat-num {
    font-size: var(--mp-text-md) !important;
    font-weight: 800 !important;
    color: var(--mp-text) !important;
    line-height: 1 !important;
    margin-bottom: 3px !important;
  }

  .rara-pdp-seller__stat-lbl {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--mp-muted) !important;
    line-height: 1.2 !important;
  }

  /* ── Response Info rows ── */
  .rara-pdp-seller__meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-bottom: 12px !important;
    padding: 8px 10px !important;
    background: var(--mp-border-light) !important;
    border-radius: var(--mp-radius-sm) !important;
    font-size: 11px !important;
    color: var(--mp-muted) !important;
  }

  .rara-pdp-seller__meta-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .rara-pdp-seller__meta-row strong {
    color: var(--mp-text-secondary) !important;
    font-weight: 700 !important;
  }

  /* ── Action Buttons ── */
  .rara-pdp-seller__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .rara-pdp-seller__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 44px !important;
    border-radius: var(--mp-radius) !important;
    font-size: var(--mp-text-base) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: var(--mp-transition-fast) !important;
    border: 1.5px solid !important;
    box-sizing: border-box !important;
  }

  .rara-pdp-seller__btn:active {
    transform: scale(0.97) !important;
  }

  .rara-pdp-seller__btn--visit {
    background: var(--mp-primary) !important;
    color: #fff !important;
    border-color: var(--mp-primary) !important;
  }

  .rara-pdp-seller__btn--chat {
    background: var(--mp-card) !important;
    color: var(--mp-primary) !important;
    border-color: var(--mp-primary) !important;
  }
}


/* ── _tabs.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Tabs  (_tabs.css)
   Section 10: Sticky tabs + Read More description (4 lines)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Tab Container Card ── */
  .rara-pdp-tabs-fullwidth {
    background: var(--mp-card) !important;
    border-radius: var(--mp-radius-lg) !important;
    margin-bottom: var(--mp-gap) !important;
    box-shadow: var(--mp-shadow-sm) !important;
    border: 1px solid var(--mp-border-light) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* ── Tab Header Strip (sticky) ── */
  .rara-pdp-tabs-fullwidth .rara-accordion-nav,
  .rara-pdp-tabs__nav {
    display: flex !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    border-bottom: 1px solid var(--mp-border-light) !important;
    position: sticky !important;
    top: var(--mp-header-h) !important;
    background: var(--mp-card) !important;
    z-index: 100 !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* Shrunk header offset */
  .mp-header--shrunk ~ * .rara-pdp-tabs__nav,
  .mp-header--shrunk ~ * .rara-accordion-nav {
    top: var(--mp-header-h-sm) !important;
  }

  .rara-pdp-tabs-fullwidth .rara-accordion-nav::-webkit-scrollbar,
  .rara-pdp-tabs__nav::-webkit-scrollbar {
    display: none !important;
  }

  /* Individual Tab Button */
  .rara-pdp-tabs-fullwidth .rara-accordion-tab,
  .rara-pdp-tabs__tab {
    flex: 1 !important;
    min-width: fit-content !important;
    white-space: nowrap !important;
    padding: 12px 14px !important;
    font-size: var(--mp-text-base) !important;
    font-weight: 600 !important;
    color: var(--mp-muted) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2.5px solid transparent !important;
    cursor: pointer !important;
    transition: var(--mp-transition-fast) !important;
    text-align: center !important;
  }

  .rara-pdp-tabs-fullwidth .rara-accordion-tab--active,
  .rara-pdp-tabs-fullwidth .rara-accordion-tab.active,
  .rara-pdp-tabs__tab--active {
    color: var(--mp-primary) !important;
    border-bottom-color: var(--mp-primary) !important;
    font-weight: 700 !important;
  }

  /* ── Tab Panel Content ── */
  .rara-pdp-tabs-fullwidth .rara-accordion-panel,
  .rara-pdp-tabs__panel {
    padding: 14px var(--mp-page-pad) !important;
    font-size: var(--mp-text-base) !important;
    color: var(--mp-text-secondary) !important;
    line-height: 1.65 !important;
  }

  /* ── Read More — Description truncated to 4 lines ── */
  .mp-description--truncated {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .mp-description--expanded {
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  .mp-read-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--mp-primary) !important;
    font-size: var(--mp-text-base) !important;
    font-weight: 700 !important;
    background: none !important;
    border: none !important;
    padding: 8px 0 0 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
  }

  /* Specs table mobile */
  .rara-pdp-tabs-fullwidth table,
  .rara-pdp-tabs__panel table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: var(--mp-text-sm) !important;
  }

  .rara-pdp-tabs-fullwidth table tr:nth-child(even) td {
    background: var(--mp-border-light) !important;
  }

  .rara-pdp-tabs-fullwidth table td {
    padding: 8px 10px !important;
    border: 1px solid var(--mp-border) !important;
    line-height: 1.4 !important;
    vertical-align: top !important;
  }

  .rara-pdp-tabs-fullwidth table td:first-child {
    font-weight: 700 !important;
    color: var(--mp-text) !important;
    width: 40% !important;
  }
}


/* ── _related.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Related Products  (_related.css)
   Section 11: Swipeable carousel — Similar, Frequently Bought, Recently Viewed, Seller
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Section Wrapper ── */
  .rara-pdp-related-section,
  .rara-pdp-more-seller,
  .rara-pdp-recently-viewed {
    background: var(--mp-card) !important;
    border-radius: var(--mp-radius-lg) !important;
    padding: 14px 0 !important;
    margin-bottom: var(--mp-gap) !important;
    box-shadow: var(--mp-shadow-sm) !important;
    border: 1px solid var(--mp-border-light) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* ── Section Header ── */
  .rara-pdp-related-header,
  .rara-pdp-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-inline: var(--mp-page-pad) !important;
    margin-bottom: 12px !important;
  }

  .rara-pdp-related-title,
  .rara-pdp-section-title {
    font-size: var(--mp-text-lg) !important;
    font-weight: 800 !important;
    color: var(--mp-text) !important;
    margin: 0 !important;
  }

  .rara-pdp-related-view-all,
  .rara-pdp-section-view-all {
    font-size: var(--mp-text-sm) !important;
    font-weight: 700 !important;
    color: var(--mp-primary) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── Scrollable Track ── */
  .rara-pdp-related-track {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding-inline: var(--mp-page-pad) !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }

  .rara-pdp-related-track::-webkit-scrollbar {
    display: none !important;
  }

  /* ── Individual Product Card in Carousel ── */
  .rara-pdp-related-item {
    flex: 0 0 155px !important;
    width: 155px !important;
    min-width: 155px !important;
    scroll-snap-align: start !important;
    border-radius: var(--mp-radius) !important;
    border: 1px solid var(--mp-border-light) !important;
    background: var(--mp-card) !important;
    overflow: hidden !important;
    transition: var(--mp-transition-fast) !important;
  }

  .rara-pdp-related-item:active {
    transform: scale(0.98) !important;
  }

  /* Product image in carousel card */
  .rara-pdp-related-item img,
  .rara-pdp-related-item .rara-card__img-wrap {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }

  /* Product info in carousel card */
  .rara-pdp-related-item .rara-card__info {
    padding: 8px !important;
  }

  .rara-pdp-related-item .rara-card__title {
    font-size: var(--mp-text-sm) !important;
    font-weight: 600 !important;
    color: var(--mp-text) !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
  }

  .rara-pdp-related-item .rara-card__price {
    font-size: var(--mp-text-base) !important;
    font-weight: 800 !important;
    color: var(--mp-primary) !important;
  }

  /* Future-ready: Multi-section tabs for carousel types */
  .mp-related-tabs {
    display: flex !important;
    gap: 6px !important;
    padding-inline: var(--mp-page-pad) !important;
    margin-bottom: 12px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .mp-related-tabs::-webkit-scrollbar { display: none !important; }

  .mp-related-tab {
    white-space: nowrap !important;
    padding: 5px 12px !important;
    border-radius: var(--mp-radius-full) !important;
    font-size: var(--mp-text-sm) !important;
    font-weight: 700 !important;
    border: 1.5px solid var(--mp-border) !important;
    background: var(--mp-card) !important;
    color: var(--mp-muted) !important;
    cursor: pointer !important;
    transition: var(--mp-transition-fast) !important;
  }

  .mp-related-tab--active {
    background: var(--mp-primary-soft) !important;
    color: var(--mp-primary) !important;
    border-color: var(--mp-primary) !important;
  }
}


/* ── _sticky-bar.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Sticky Bar  (_sticky-bar.css)
   Bottom CTA: Wishlist 52×52 | Add to Cart | Buy Now (gradient)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Bar Container ── */
  .rara-pdp-mobile-bar {
    display: grid !important;
    grid-template-columns: 52px 1fr 1fr !important;
    gap: 8px !important;
    position: fixed !important;
    bottom: 0 !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid var(--mp-border) !important;
    padding: 10px 14px !important;
    padding-bottom: max(10px, var(--mp-safe-bottom)) !important;
    padding-inline-start: max(14px, var(--mp-safe-left)) !important;
    padding-inline-end: max(14px, var(--mp-safe-right)) !important;
    box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.10) !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* ── Wishlist Button (col 1 — 52×52 square) ── */
  .rara-pdp-mobile-bar__wishlist-btn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: var(--mp-radius) !important;
    border: 1.5px solid var(--mp-border) !important;
    background: var(--mp-card) !important;
    color: var(--mp-muted) !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    box-shadow: var(--mp-shadow-xs) !important;
    transition: var(--mp-transition-fast) !important;
    box-sizing: border-box !important;
  }

  .rara-pdp-mobile-bar__wishlist-btn.rara-card__wishlist-btn--active {
    background: var(--mp-danger-soft) !important;
    border-color: var(--mp-danger) !important;
    color: var(--mp-danger) !important;
  }

  .rara-pdp-mobile-bar__wishlist-btn:active {
    transform: scale(0.93) !important;
  }

  /* ── Shared Base for Cart & Buy Now ── */
  .rara-pdp-mobile-bar .rara-pdp-mobile-bar__btn {
    height: 52px !important;
    min-height: 52px !important;
    border-radius: var(--mp-radius) !important;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 10px !important;
    transition: var(--mp-transition-fast) !important;
    border: none !important;
  }

  .rara-pdp-mobile-bar .rara-pdp-mobile-bar__btn svg {
    flex-shrink: 0 !important;
  }

  /* ── Add to Cart (col 2 — outline purple) ── */
  .rara-pdp-mobile-bar__btn--cart {
    background: var(--mp-card) !important;
    color: var(--mp-primary) !important;
    border: 1.5px solid var(--mp-primary) !important;
  }

  .rara-pdp-mobile-bar__btn--cart:active {
    background: var(--mp-primary-soft) !important;
    transform: scale(0.97) !important;
  }

  /* ── Buy Now (col 3 — solid gradient) ── */
  .rara-pdp-mobile-bar__btn--buy {
    background: var(--mp-btn-gradient) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: var(--mp-shadow-purple) !important;
  }

  .rara-pdp-mobile-bar__btn--buy:active {
    background: var(--mp-btn-gradient-h) !important;
    transform: scale(0.97) !important;
    box-shadow: none !important;
  }

  /* Hide old info/actions wrappers */
  .rara-pdp-mobile-bar__info,
  .rara-pdp-mobile-bar__actions {
    display: none !important;
  }

  /* Spacer so content doesn't hide behind bar */
  body.single-product .rara-pdp {
    padding-bottom: calc(var(--mp-bar-h) + var(--mp-safe-bottom) + 10px) !important;
  }
}


/* ── _animations.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Micro-Animations  (_animations.css)
   Heart pop, bounce, gallery fade, tab slide, seller fade-up
   ═══════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes mp-heart-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}

@keyframes mp-bounce {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-6px); }
  70%       { transform: translateY(-3px); }
}

@keyframes mp-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mp-slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mp-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes mp-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@media (max-width: 991px) {
  /* Wishlist heart pop */
  .rara-pdp-mobile-bar__wishlist-btn.mp-anim--heart-pop svg,
  .rara-card__wishlist-btn.mp-anim--heart-pop svg {
    animation: mp-heart-pop 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Add to Cart bounce */
  .rara-pdp-mobile-bar__btn--cart.mp-anim--bounce {
    animation: mp-bounce 0.4s ease !important;
  }

  /* Gallery image fade */
  .rara-pdp-gallery__main.mp-anim--fade {
    animation: mp-fade-in 0.3s ease !important;
  }

  /* Tab panel slide */
  .rara-accordion-panel.mp-anim--slide,
  .rara-pdp-tabs__panel.mp-anim--slide {
    animation: mp-slide-in 0.25s ease !important;
  }

  /* Seller card fade-up on mount */
  .rara-pdp-card.rara-pdp-seller {
    animation: mp-fade-up 0.4s cubic-bezier(0.4, 0, 0.2, 1) both !important;
    animation-delay: 0.1s !important;
  }

  /* Purchase card scale-in */
  .rara-pdp-card.rara-pdp-purchase {
    animation: mp-scale-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both !important;
  }

  /* Gallery container fade-up */
  .rara-pdp-gallery-container {
    animation: mp-fade-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) both !important;
  }

  /* Header fade-in */
  .rara-pdp-mobile-top-nav {
    animation: mp-fade-in 0.25s ease both !important;
  }

  /* Respect user preference for reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}


/* ── _skeleton.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Skeleton Loading  (_skeleton.css)
   Shimmer skeletons for gallery, price, buttons, seller, delivery
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base Shimmer Animation ── */
.mp-skeleton {
  background: linear-gradient(
    90deg,
    #f0f2f5 25%,
    #e4e6ea 50%,
    #f0f2f5 75%
  );
  background-size: 800px 100%;
  animation: mp-shimmer 1.4s infinite linear;
  border-radius: 8px;
  display: block;
}

@media (max-width: 991px) {

  /* ── Gallery Skeleton ── */
  .mp-skeleton-gallery {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: var(--mp-radius-lg) !important;
    margin-bottom: var(--mp-gap) !important;
  }

  .mp-skeleton-thumbs {
    display: flex !important;
    gap: 8px !important;
    padding-inline: var(--mp-page-pad) !important;
    margin-bottom: var(--mp-gap) !important;
  }

  .mp-skeleton-thumb {
    flex: 0 0 64px !important;
    height: 64px !important;
    border-radius: var(--mp-radius-sm) !important;
  }

  /* ── Purchase Box Skeleton ── */
  .mp-skeleton-card {
    background: var(--mp-card) !important;
    border-radius: var(--mp-radius-lg) !important;
    padding: var(--mp-page-pad) !important;
    margin-bottom: var(--mp-gap) !important;
    box-shadow: var(--mp-shadow-sm) !important;
    border: 1px solid var(--mp-border-light) !important;
  }

  .mp-skeleton-title {
    height: 18px !important;
    width: 75% !important;
    border-radius: var(--mp-radius-xs) !important;
    margin-bottom: 8px !important;
  }

  .mp-skeleton-title-sm {
    height: 14px !important;
    width: 50% !important;
    border-radius: var(--mp-radius-xs) !important;
    margin-bottom: 12px !important;
  }

  .mp-skeleton-badge {
    height: 22px !important;
    width: 80px !important;
    border-radius: var(--mp-radius-full) !important;
    margin-bottom: 10px !important;
  }

  .mp-skeleton-price {
    height: 30px !important;
    width: 45% !important;
    border-radius: var(--mp-radius-xs) !important;
    margin-bottom: 6px !important;
  }

  /* ── Seller Skeleton ── */
  .mp-skeleton-seller {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    margin-bottom: 12px !important;
  }

  .mp-skeleton-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--mp-radius) !important;
    flex-shrink: 0 !important;
  }

  .mp-skeleton-lines {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .mp-skeleton-line {
    height: 12px !important;
    border-radius: var(--mp-radius-xs) !important;
  }

  .mp-skeleton-line--sm {
    width: 60% !important;
  }

  /* ── Button Skeleton ── */
  .mp-skeleton-btn-row {
    display: grid !important;
    grid-template-columns: 52px 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .mp-skeleton-btn {
    height: 52px !important;
    border-radius: var(--mp-radius) !important;
  }

  /* ── Hide skeletons once content loaded ── */
  .mp-content--loaded .mp-skeleton,
  .mp-content--loaded .mp-skeleton-gallery,
  .mp-content--loaded .mp-skeleton-card {
    display: none !important;
  }
}


/* ── _responsive.css ── */
/* ═══════════════════════════════════════════════════════════════════
   RaRa Deals — Mobile PDP Responsive Fine-tuning  (_responsive.css)
   Breakpoints: 320 / 360 / 375 / 390 / 412 / 430px
   RTL-ready via logical CSS properties
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global Mobile Layout Resets (Mobile Width Rule) ── */
@media (max-width: 991px) {

  /* RTL-ready global mobile page container */
  body.single-product .rara-pdp {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    background: var(--mp-bg) !important;
    margin-top: 0 !important;
  }

  body.single-product .rara-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--mp-page-pad) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* All direct children of container: full width, no fixed sizes */
  body.single-product .rara-container > *,
  body.single-product .rara-pdp-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Single-column layout */
  .rara-pdp-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mp-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Remove sidebar sticky on mobile */
  .rara-pdp-col-right {
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* Collapse top whitespace */
  body.single-product #content,
  body.single-product .site-content,
  body.single-product #primary,
  body.single-product #main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Hide breadcrumbs on mobile */
  body.single-product .rara-product-breadcrumbs,
  body.single-product .woocommerce-breadcrumb,
  body.single-product .ast-breadcrumbs-wrapper {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Hide desktop-only elements & share block on mobile PDP */
  body.single-product #rara-buy-now-btn,
  body.single-product .rara-desktop-only-btn,
  body.single-product .rara-pdp-btn--buy:not(.rara-pdp-mobile-bar__btn--buy),
  body.single-product button.single_add_to_cart_button,
  body.single-product .rara-pdp-wc-form-wrapper button.single_add_to_cart_button,
  body.single-product .rara-pdp-wc-form-wrapper .rara-buy-now-button,
  body.single-product .rara-pdp-wc-form-wrapper .rara-pdp-actions,
  body.single-product .rara-pdp-extras,
  body.single-product .rara-pdp-purchase-actions,
  body.single-product .rara-pdp-wishlist-action-btn,
  body.single-product .rara-pdp-wishlist-card,
  body.single-product .rara-pdp-wishlist-action-btn-wrap,
  body.single-product .rara-pdp-gallery__trust-row,
  body.single-product .rara-pdp-share-block {
    display: none !important;
  }

  /* Future-ready placeholder components (hidden until implemented) */
  .mp-video-gallery,
  .mp-live-seller,
  .mp-coupon-strip,
  .mp-bundle-offer,
  .mp-emi-options,
  .mp-wallet,
  .mp-live-stock,
  .mp-recently-bought {
    display: none !important; /* Remove this when implementing */
  }
}

/* ── 320px — Smallest phones ── */
@media (max-width: 360px) {
  :root {
    --mp-page-pad: 12px;
    --mp-gap: 8px;
  }

  .rara-pdp-gallery__thumb {
    flex: 0 0 55px !important;
    width: 55px !important;
    height: 55px !important;
  }

  .rara-pdp-highlights {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .rara-pdp-price--sale {
    font-size: var(--mp-text-2xl) !important;
  }

  .rara-pdp-mobile-bar .rara-pdp-mobile-bar__btn {
    font-size: 13px !important;
    padding: 0 8px !important;
  }
}

/* ── 375px — iPhone SE, standard ── */
@media (min-width: 361px) and (max-width: 390px) {
  .rara-pdp-gallery__thumb {
    flex: 0 0 62px !important;
    width: 62px !important;
    height: 62px !important;
  }
}

/* ── 412–430px — Larger Android phones ── */
@media (min-width: 391px) and (max-width: 991px) {
  :root {
    --mp-page-pad: 16px;
  }

  .rara-pdp-gallery__thumb {
    flex: 0 0 68px !important;
    width: 68px !important;
    height: 68px !important;
  }

  .rara-pdp-related-item {
    flex: 0 0 165px !important;
    width: 165px !important;
    min-width: 165px !important;
  }
}

/* ── Remove Dokan Get Support Button on Mobile ── */
@media (max-width: 991px) {
  .dokan-store-support-btn,
  .dokan-store-support-btn-product {
    display: none !important;
  }
}

/* ── Mobile Product Details Page Refinements ── */
@media (max-width: 991px) {
  /* 1. Description Tabs Styling:
     Reduce overall height. Height: 44px, Border Radius: 12px, Horizontal Padding: 14px, Vertical Padding: 10px, Font Size: 14px, Font Weight: 600 */
  .rara-pdp-tabs-nav {
    background: #FAFAFC !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    display: flex !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
    height: auto !important;
  }
  .rara-pdp-tabs-nav::-webkit-scrollbar {
    display: none !important;
  }

  .rara-pdp-tab-btn {
    height: 44px !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    transition: all 0.2s ease !important;
    border: 1px solid #E5E7EB !important; /* Inactive Border */
    background: #FFFFFF !important; /* Inactive Background */
    color: #475569 !important; /* Inactive Text */
    box-shadow: none !important;
    position: relative !important;
  }

  .rara-pdp-tab-btn:hover {
    color: var(--mp-primary, #6D28D9) !important;
    border-color: #CBD5E1 !important;
  }

  /* Remove desktop style indicator line */
  .rara-pdp-tab-btn::after {
    display: none !important;
    content: none !important;
  }

  /* 2. Active Tab: Background: Purple Gradient, Text: #FFFFFF (Never use purple text on active tab) */
  .rara-pdp-tab-btn.active {
    background: var(--mp-btn-gradient, linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%)) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    font-weight: 600 !important;
  }

  /* Active Tab Count Badge styling */
  .rara-pdp-tab-btn.active .rara-pdp-tab-count {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
  }

  .rara-pdp-tab-count {
    background: #F1F5F9 !important;
    color: #64748B !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    border-radius: 8px !important;
    margin-left: 6px !important;
  }

  /* 3. Typography Refinement and Body content size/line-height:
     Reduce mobile typography scale by 3-4% consistently.
     Set Content Body Text to 14px, Line Height 1.65, maximum readable width.
     Ensured across: Description, Specifications, Reviews, Related Products, Product Highlights, Seller Info, Shipping Info */
  
  .rara-pdp-tab-panel,
  .rara-pdp-tab-panel p,
  .rara-pdp-tabs__panel,
  .rara-pdp-tabs__panel p,
  .rara-pdp-tab-panel td,
  .rara-pdp-tabs__panel td,
  .rara-pdp-tab-panel th,
  .rara-pdp-tabs__panel th,
  .rara-pdp-tab-panel li,
  .rara-pdp-tabs__panel li,
  .rara-pdp-delivery__content,
  .rara-pdp-delivery__content p,
  .rara-pdp-delivery__content li,
  .rara-pdp-seller-desc,
  .rara-pdp-seller-desc p,
  .rara-pdp-highlights__title,
  .rara-pdp-highlights__desc,
  .rara-pdp-highlights p,
  .rara-pdp-highlights li,
  .rara-pdp-review-content,
  .rara-pdp-review-content p,
  .comment-text,
  .comment-text p,
  .rara-pdp-related-item,
  .rara-pdp-related-item p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    max-width: 100% !important; /* Maximum readable width */
  }

  /* Adjust typography scale consistent scaling for other components */
  .rara-pdp-title {
    font-size: 15.5px !important; /* var(--mp-text-lg) is 15.5px */
  }

  .rara-pdp-section-title,
  .rara-pdp-related-title {
    font-size: 17.3px !important; /* var(--mp-text-xl) is 17.3px */
    font-weight: 700 !important;
  }

  .rara-pdp-price--sale {
    font-size: 25px !important; /* var(--mp-text-3xl) is 25px */
  }

  /* Scale down button typography on mobile by 3-4% */
  .single_add_to_cart_button,
  .rara-pdp-btn--buy,
  .rara-pdp-mobile-bar__btn,
  .rara-pdp-qty-btn {
    font-size: 13.5px !important; /* var(--mp-text-base) is 13.5px */
  }

  /* ── Related Products Mobile Refinements ── */
  .rara-pdp-related-wrapper {
    padding: 16px !important; /* Section Padding: 16px */
    border-radius: 16px !important;
  }

  .rara-pdp-related-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important; /* Header Bottom: 16px */
    border-bottom: 1px solid #F1F5F9 !important;
    padding-bottom: 12px !important;
    height: auto !important;
  }

  .rara-pdp-related-title-wrap {
    margin: 0 !important;
    padding: 0 !important;
  }

  .rara-pdp-related-title {
    font-size: 18px !important; /* Heading: 18px */
    font-weight: 700 !important; /* Weight: 700 */
    line-height: 1.2 !important; /* Line Height: 1.2 */
    color: var(--mp-text, #0F172A) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .rara-pdp-related-subtitle {
    display: none !important; /* Remove subtitle completely */
  }

  .rara-pdp-related-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important; /* compact spacing */
  }

  .rara-pdp-related-view-all {
    font-size: 14px !important; /* View All: 14px */
    font-weight: 700 !important;
    color: var(--mp-primary, #6D28D9) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .rara-pdp-related-nav {
    display: flex !important;
    gap: 6px !important;
  }

  /* Navigation buttons: Size 44x44px, Perfect circle, Border: 1px solid #E5E7EB, Soft shadow, centered icon */
  .rara-pdp-related-nav-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid #E5E7EB !important;
    background: #FFFFFF !important; /* Inactive Background: White */
    color: #334155 !important; /* Inactive Icon: Dark */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important; /* Soft shadow */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  /* Active: Purple background, White icon */
  .rara-pdp-related-nav-btn:active,
  .rara-pdp-related-nav-btn.active,
  .rara-pdp-related-nav-btn:hover {
    background: var(--mp-primary, #6D28D9) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.2) !important;
  }

  .rara-pdp-related-nav-btn:disabled,
  .rara-pdp-related-nav-btn.disabled {
    opacity: 0.4 !important;
    background: #F8FAFC !important;
    color: #94A3B8 !important;
    border-color: #E2E8F0 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
  }

  .rara-pdp-related-track {
    gap: 16px !important; /* Card Gap: 16px */
    padding-inline: 0 !important;
  }

  /* ── Mobile Spacing & Layout Bug Fix ── */
  /* 1. Collapse the simple product cart form to zero height so it occupies no layout space */
  body.product-type-simple form.cart {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: block !important;
  }

  /* 2. Collapse the variable product add-to-cart section to zero height while keeping variations table visible */
  body.product-type-variable .woocommerce-variation-add-to-cart {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: block !important;
  }

  /* 3. Ensure any empty tags, warranty paragraph or hidden extras do not reserve layout height */
  body.single-product form.cart .warranty_info,
  body.single-product form.cart p:empty {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.single-product .rara-pdp-wc-form-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.single-product .ast-stock-detail {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.single-product .rara-pdp-extras {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* 4. Enforce exact spacing between Availability (end of card) and Product Highlights (start of next section) */
  .rara-pdp-card.rara-pdp-purchase {
    padding-bottom: 16px !important; /* Spacing within the card */
    margin-bottom: 16px !important; /* Spacing between the card and next section */
  }

  .rara-pdp-highlights-wrap,
  .rara-pdp-highlights {
    margin-top: 0 !important; /* Prevent double margins on mobile */
  }
}