/* ============================================================
   PhoneGulf — Premium UI Layer
   Loads AFTER main.css. Redefines the theme's design tokens so
   existing rules inherit the new look, then refines components.
   Structure/markup unchanged — presentation only.
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
    /* Neutral ink ramp (slightly cool for a premium feel) */
    --ink-950: #0A0B0D;
    --ink-900: #14161B;
    --ink-800: #1F232B;
    --ink-700: #2E333E;
    --ink-600: #434A58;
    --ink-500: #5F6779;
    --ink-400: #868EA0;
    --ink-300: #B0B7C4;
    --ink-200: #D8DDE5;
    --ink-100: #EAEEF4;
    --ink-50:  #F5F7FA;

    /* Brand / interactive */
    --brand-700: #0742BE;
    --brand-600: #0A57EC;
    --brand-500: #2470FF;
    --brand-100: #DCE8FF;
    --brand-50:  #EFF5FF;

    /* Sale / urgency */
    --sale-700: #C4331F;
    --sale-600: #DF4229;
    --sale-500: #F2543D;
    --sale-50:  #FEF868;

    /* Eco / certified (refurbished trust signal) */
    --eco-700: #0A7D57;
    --eco-600: #0E9F6E;
    --eco-100: #D6F5E8;
    --eco-50:  #ECFBF4;

    --amber-600: #D68309;
    --amber-50:  #FFF8EB;

    /* ---- Remap the theme's original tokens ---- */
    --color-primary: var(--ink-950);
    --color-primary-light: var(--ink-800);
    --color-accent: var(--brand-600);
    --color-accent-dark: var(--brand-700);
    --color-accent-light: var(--brand-50);
    --color-success: var(--eco-600);
    --color-warning: var(--amber-600);
    --color-danger: var(--sale-600);
    --color-sale: var(--sale-600);
    --color-sale-light: #FEF877;
    --color-text: var(--ink-900);
    --color-text-secondary: var(--ink-600);
    --color-text-light: var(--ink-500);
    --color-text-muted: var(--ink-400);
    --color-bg: #FFFFFF;
    --color-bg-secondary: var(--ink-50);
    --color-bg-tertiary: var(--ink-100);
    --color-border: var(--ink-200);
    --color-border-light: var(--ink-100);
    --color-announcement-bg: var(--ink-950);
    --color-footer-bg: #0B0C0F;
    --color-footer-text: var(--ink-400);

    /* Elevation — layered and soft */
    --shadow-xs: 0 1px 2px rgba(12,16,24,.05);
    --shadow-sm: 0 1px 3px rgba(12,16,24,.07), 0 1px 2px rgba(12,16,24,.04);
    --shadow-md: 0 6px 16px rgba(12,16,24,.08), 0 2px 6px rgba(12,16,24,.04);
    --shadow-lg: 0 14px 32px rgba(12,16,24,.10), 0 4px 12px rgba(12,16,24,.05);
    --shadow-xl: 0 28px 60px rgba(12,16,24,.14), 0 10px 24px rgba(12,16,24,.07);
    --shadow-brand: 0 10px 26px rgba(10,87,236,.26);
    --ring: inset 0 0 0 1px var(--ink-100);
    --ring-strong: inset 0 0 0 1px var(--ink-200);

    /* Radii */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Motion */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --dur-fast: .16s;
    --dur: .28s;
    --dur-slow: .5s;
    --transition: all var(--dur) var(--ease-out);
    --transition-fast: all var(--dur-fast) var(--ease-out);

    --container-width: 1320px;
}

/* ------------------------------------------------------------
   2. BASE & TYPOGRAPHY
   ------------------------------------------------------------ */
body {
    color: var(--ink-900);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5 {
    letter-spacing: -0.022em;
    line-height: 1.18;
    color: var(--ink-950);
    font-weight: 700;
}

::selection { background: var(--brand-100); color: var(--ink-950); }

/* Prices and any numeric run read better aligned */
.price, .amount, .product-card-price, .price-from, .price-range,
.reviews-big-score, .dist-count {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Accessible focus — visible for keyboards, quiet for mouse */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

.container { max-width: var(--container-width); }

/* ------------------------------------------------------------
   3. HEADER
   ------------------------------------------------------------ */
.site-header {
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(16,20,28,.07);
    box-shadow: 0 1px 0 rgba(16,20,28,.02);
    transition: box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.site-header.is-stuck,
.site-header.sticky {
    box-shadow: var(--shadow-md);
    background: rgba(255,255,255,.94);
}

.site-logo-text {
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--ink-950);
    font-size: 1.4rem;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.site-logo-text:hover { opacity: .72; }

/* Search field — `form.search-form` already draws the pill (bg, border,
   radius), so the input must stay transparent or it renders a second
   outline nested inside the first. Style the form, focus the form. */
.header-search .search-form {
    transition: var(--transition-fast);
}
.header-search input[type="search"],
.header-search input[type="text"],
.search-field {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: var(--radius-pill);
    padding: 11px 18px;
    font-size: 14px;
    color: var(--ink-900);
}
.header-search input[type="search"]::placeholder,
.search-field::placeholder { color: var(--ink-400); }
.header-search input[type="search"]:focus,
.search-field:focus {
    background: transparent;
    box-shadow: none;
    outline: none;
}
/* Lift the whole control on focus instead of the bare input */
.header-search .search-form:focus-within {
    background: #fff;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px var(--brand-50);
}

/* Navigation links with an animated underline */
.main-navigation a,
.site-nav a {
    position: relative;
    font-weight: 600;
    color: var(--ink-700);
    transition: color var(--dur-fast) var(--ease-out);
}
.main-navigation a::after,
.site-nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-600);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur) var(--ease-out);
}
.main-navigation a:hover,
.site-nav a:hover { color: var(--ink-950); }
.main-navigation a:hover::after,
.site-nav a:hover::after,
.main-navigation .current-menu-item > a::after { transform: scaleX(1); }

/* Header icon actions */
.header-action,
.cart-icon,
.search-toggle,
.menu-toggle {
    color: var(--ink-800);
    border-radius: var(--radius-pill);
    transition: var(--transition-fast);
}
.header-action:hover,
.cart-icon:hover,
.search-toggle:hover { color: var(--brand-600); transform: translateY(-1px); }

.cart-count {
    background: var(--brand-600) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    box-shadow: 0 2px 6px rgba(10,87,236,.4);
    border: 2px solid #fff;
}

/* Country / language switchers */
.country-current,
.lang-option {
    border-radius: var(--radius-pill);
    font-weight: 600;
    transition: var(--transition-fast);
}
.lang-toggle {
    background: var(--ink-50);
    border-radius: var(--radius-pill);
    padding: 3px;
    box-shadow: var(--ring);
}
.lang-option {
    padding: 5px 12px;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--ink-500);
}
.lang-option.active {
    background: #fff;
    color: var(--ink-950);
    box-shadow: var(--shadow-xs);
}
.country-current:hover { background: var(--ink-50); }
.country-dropdown {
    border-radius: var(--radius-md);
    border: 1px solid var(--ink-100);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    padding: 6px;
}
.country-item {
    border-radius: var(--radius-xs);
    font-weight: 500;
    transition: var(--transition-fast);
}
.country-item:hover { background: var(--ink-50); }
.country-item.active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }

/* Search autocomplete — should read as an extension of the search field,
   not a detached window. Aligned edges, small gap, soft layered shadow.
   (Careful: an `overflow` shorthand here would kill the panel's scrolling.) */
.header-search { position: relative; }
/* The visible search control is `form.search-form` (it carries the pill
   background, border and 50px radius) — the input inside it is transparent.
   So the panel must align to the FORM's edges, not the input's. */
.search-suggestions,
.autocomplete-suggestions {
    left: 0 !important;
    right: 0 !important;
    margin-top: 6px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--ink-100) !important;
    box-shadow: 0 10px 30px rgba(12,16,24,.10), 0 2px 8px rgba(12,16,24,.06) !important;
    padding: 6px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-200) transparent;
}
.search-suggestions::-webkit-scrollbar { width: 8px; }
.search-suggestions::-webkit-scrollbar-track { background: transparent; }
.search-suggestions::-webkit-scrollbar-thumb {
    background: var(--ink-200);
    border-radius: 999px;
    border: 2px solid #fff;
}
.search-suggestions::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }
.suggestion-item {
    border-radius: var(--radius-sm);
    padding: 9px 12px !important;
    margin: 1px 0;
    gap: 12px;
    transition: background var(--dur-fast) var(--ease-out);
}
.suggestion-item:hover { background: var(--ink-50); }
.suggestion-img img {
    border-radius: 8px;
    background: var(--ink-50);
    object-fit: contain;
}
.suggestion-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.01em;
}
.suggestion-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-600);
    font-variant-numeric: tabular-nums;
}
.suggestion-view-all {
    display: block;
    margin-top: 4px;
    padding: 10px 12px !important;
    border-top: 1px solid var(--ink-100);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-600);
    text-align: center;
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease-out);
}
.suggestion-view-all:hover { background: var(--brand-50); }

/* ------------------------------------------------------------
   4. HERO BANNER
   ------------------------------------------------------------ */
.hero-banner {
    padding: 20px 0 8px;
    background: linear-gradient(180deg, var(--ink-50) 0%, #fff 100%);
}
.hero-banner .hero-banner-img,
.hero-banner-img {
    display: block;
    width: calc(100% - 40px);
    max-width: var(--container-width);
    margin: 0 auto;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Visually-hidden SEO heading stays hidden but accessible */
.homepage-seo-h1 {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------
   5. SECTION HEADERS
   ------------------------------------------------------------ */
.featured-section,
.hot-deals-section,
.express-section {
    padding: 3.5rem 0;
    border-top: 1px solid var(--ink-100);
}
.featured-section:first-of-type { border-top: 0; }

.section-header {
    align-items: flex-end;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ink-100);
}
.section-header .section-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--ink-950);
    position: relative;
    padding-left: 14px;
}
.section-header .section-title::before {
    content: '';
    position: absolute;
    left: 0; top: .22em; bottom: .22em;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
}

.view-all {
    border: 1px solid var(--ink-200);
    color: var(--ink-700);
    background: #fff;
    border-radius: var(--radius-pill);
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-fast);
}
.view-all:hover {
    background: var(--ink-950);
    border-color: var(--ink-950);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.products-grid { gap: 1.5rem; }

/* ------------------------------------------------------------
   6. PRODUCT CARDS  (homepage + archive)
   Existing rules use !important, so overrides match that weight.
   ------------------------------------------------------------ */
.products-grid li.product,
.featured-section li.product,
.hot-deals-section li.product,
.express-section li.product,
ul.products li.product,
.products-grid .phonegulf-product-card,
.products-grid .revibe-product-card {
    background: #fff !important;
    border: 0 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--ring-strong), var(--shadow-sm) !important;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out) !important;
    overflow: hidden !important;
}

/* Nested card shouldn't double up the frame */
.products-grid > li.product > .phonegulf-product-card,
.products-grid > li.product > .revibe-product-card,
ul.products > li.product > .phonegulf-product-card {
    box-shadow: none !important;
    border-radius: var(--radius-lg) !important;
    background: transparent !important;
}

.products-grid li.product:hover,
.featured-section li.product:hover,
.hot-deals-section li.product:hover,
.express-section li.product:hover,
ul.products li.product:hover {
    transform: translateY(-6px) !important;
    box-shadow: inset 0 0 0 1px transparent, var(--shadow-xl) !important;
    border-color: transparent !important;
}

/* Image stage */
.products-grid .product-card-image,
ul.products .product-card-image {
    background: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, var(--ink-50) 70%, var(--ink-100) 100%) !important;
    padding: 1.75rem !important;
    aspect-ratio: 1 / 1 !important;
    border-bottom: 1px solid var(--ink-100) !important;
}
.products-grid .product-card-image img,
ul.products .product-card-image img {
    transition: transform var(--dur-slow) var(--ease-out) !important;
    filter: drop-shadow(0 10px 18px rgba(12,16,24,.12));
    mix-blend-mode: multiply;
}
.products-grid li.product:hover .product-card-image img,
ul.products li.product:hover .product-card-image img {
    transform: scale(1.07) translateY(-2px) !important;
}

/* Savings badge */
.products-grid .revibe-savings-badge,
ul.products .revibe-savings-badge,
.revibe-savings-badge {
    top: 14px !important;
    left: 14px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 4px 12px rgba(12,16,24,.18) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.products-grid .revibe-savings-badge.badge-high,
.revibe-savings-badge.badge-high {
    background: linear-gradient(135deg, var(--sale-500), var(--sale-700)) !important;
}

/* Card body */
.products-grid .product-card-body,
ul.products .product-card-body {
    padding: 16px 18px 10px !important;
}
.products-grid .product-card-title,
ul.products .product-card-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.012em !important;
    color: var(--ink-900) !important;
    line-height: 1.42 !important;
    margin-bottom: 10px !important;
    min-height: 2.84em;
    transition: color var(--dur-fast) var(--ease-out) !important;
}
.products-grid li.product:hover .product-card-title,
ul.products li.product:hover .product-card-title { color: var(--brand-700) !important; }

/* Price — the strongest signal on the card */
.products-grid .product-card-price .price-from,
.products-grid .product-card-price .price-from .amount,
ul.products .product-card-price .price-from,
ul.products .product-card-price .price-from .amount,
.product-card-price .price-from,
.product-card-price .price-from .amount {
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--ink-950) !important;
}
.products-grid .product-card-price .price-range,
.products-grid .product-card-price .price-range .amount {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink-950) !important;
}
.products-grid .product-card-price del,
ul.products .product-card-price del {
    color: var(--ink-400) !important;
    font-size: 13px !important;
    text-decoration-thickness: 1px;
}
.products-grid .product-card-price ins,
ul.products .product-card-price ins {
    color: var(--sale-600) !important;
    font-weight: 800 !important;
}
.products-grid .color-count,
ul.products .color-count {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 12px !important;
    color: var(--ink-500) !important;
    font-weight: 500 !important;
}
.products-grid .color-count::before,
ul.products .color-count::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ink-300), var(--ink-500));
}

/* Card CTA */
.products-grid .product-card-actions,
ul.products .product-card-actions { padding: 0 18px 18px !important; }

.products-grid .add-to-cart-btn,
ul.products .add-to-cart-btn {
    padding: 12px 16px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--ink-950) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    box-shadow: var(--shadow-xs) !important;
    transition: background var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out) !important;
}
.products-grid .add-to-cart-btn:hover,
ul.products .add-to-cart-btn:hover {
    background: var(--brand-600) !important;
    box-shadow: var(--shadow-brand) !important;
    transform: translateY(-1px) !important;
}
.products-grid .add-to-cart-btn:active,
ul.products .add-to-cart-btn:active { transform: translateY(0) !important; }

/* Wishlist button floats in on hover */
.products-grid .tinvwl-shortcode-add-to-cart,
.products-grid .tinv-wishlist {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 3 !important;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.products-grid li.product:hover .tinvwl-shortcode-add-to-cart,
.products-grid li.product:hover .tinv-wishlist { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------
   7. QUALITY GUARANTEE SECTION
   ------------------------------------------------------------ */
.quality-guarantee-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, #fff 0%, var(--ink-50) 100%);
}
.quality-guarantee-inner {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 3rem 2.5rem;
    box-shadow: var(--ring-strong), var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.quality-guarantee-inner::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-600), var(--eco-600), var(--brand-500));
}
.quality-guarantee-header { text-align: center; margin-bottom: 2.5rem; }
.quality-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--eco-50);
    color: var(--eco-700);
    border: 1px solid var(--eco-100);
    border-radius: var(--radius-pill);
    padding: 7px 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.quality-title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--ink-950);
    margin-bottom: .6rem;
}
.quality-subtitle { color: var(--ink-500); font-size: 1rem; max-width: 560px; margin: 0 auto; }

/* All five guarantees on one row on desktop, stepping down cleanly. */
.quality-features-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .75rem;
    align-items: stretch;
}
.quality-feature {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem;
    background: var(--ink-50);
    border-radius: var(--radius-md);
    box-shadow: var(--ring);
    transition: var(--transition);
    min-width: 0;
}
.quality-feature:hover {
    background: #fff;
    box-shadow: var(--ring-strong), var(--shadow-md);
    transform: translateY(-3px);
}
.quality-check {
    flex-shrink: 0;
    width: 24px; height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--eco-600);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(14,159,110,.34);
}
.quality-feature-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.quality-feature-text strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-900);
    letter-spacing: -0.012em;
    line-height: 1.32;
}
.quality-feature-text span { font-size: 12px; color: var(--ink-500); line-height: 1.45; }

/* Narrower desktops can't hold five across comfortably. */
@media (max-width: 1180px) {
    .quality-features-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------
   8. REVIEWS
   ------------------------------------------------------------ */
.revibe-reviews-section { padding: 4rem 0; }
/* Inside the product tabs the panel already sits under the tab rule, so the
   homepage's 4rem top padding just leaves a dead band. */
.tab-content .revibe-reviews-section,
.product-tabs .revibe-reviews-section { padding-top: 0; }
.tab-content > .revibe-reviews-section:first-child { margin-top: 0; }

/* Two-column reviews layout: summary rail on the left (score, trust points,
   rating breakdown), review cards on the right. The three blocks are DOM
   siblings, so Grid places them without any markup change. */
/* IMPORTANT: the homepage nests these — <section class="revibe-reviews-section
   home-reviews-section"> wraps another <div class="revibe-reviews-section">.
   Gridding both put the inner one inside the outer's 340px column and
   collapsed its list track to 0. Only grid the one holding the real content. */
.revibe-reviews-section:not(.home-reviews-section) {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 1.25rem 1.5rem;
    align-items: start;
}
.revibe-reviews-section > .reviews-header       { grid-column: 1; grid-row: 1; }
.revibe-reviews-section > .reviews-distribution { grid-column: 1; grid-row: 2; }
.revibe-reviews-section > .reviews-list,
.revibe-reviews-section > .reviews-grid         { grid-column: 2; grid-row: 1 / -1; }
/* Anything else the template prints keeps the full width */
.revibe-reviews-section > .reviews-empty,
.revibe-reviews-section > .reviews-footer,
.revibe-reviews-section > .reviews-more-wrap    { grid-column: 1 / -1; }

.reviews-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    background: linear-gradient(150deg, var(--brand-50) 0%, var(--eco-50) 100%);
    color: var(--ink-900);
    border-radius: var(--radius-xl);
    padding: 1.6rem;
    margin-bottom: 0;
    box-shadow: var(--ring-strong), var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.reviews-header::after {
    content: '';
    position: absolute;
    top: -45%; right: -8%;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(10,87,236,.10) 0%, transparent 65%);
    pointer-events: none;
}
.reviews-header-left { position: relative; z-index: 1; }
.reviews-big-score {
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}
/* main.css colours .score-number with var(--color-primary); keep it dark
   here and just make the "/5" secondary. */
.reviews-header .reviews-big-score,
.reviews-header .reviews-big-score .score-number {
    color: var(--ink-950) !important;
}
.reviews-header .reviews-big-score .score-out {
    color: var(--ink-400) !important;
    font-weight: 600;
}
.reviews-stars-large { color: #FF9F0A; }
.reviews-count-text { color: var(--ink-500) !important; font-size: 13px; }

/* Trust points as a raised white card, one row per line */
.reviews-header-right {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: .2rem 1.1rem;
    box-shadow: var(--ring-strong), var(--shadow-md);
    min-width: 0;
}
.reviews-trust {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 0;
    color: var(--ink-800);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
}
.reviews-trust + .reviews-trust { border-top: 1px solid var(--ink-100); }
.reviews-trust svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--brand-600); }
/* Eco + savings points read better in green */
.reviews-trust:nth-child(1) svg,
.reviews-trust:nth-child(5) svg { color: var(--eco-600); }

/* Review cards stack in the right column */
.revibe-reviews-section > .reviews-list,
.revibe-reviews-section > .reviews-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }

/* "Load More" sits as a full-width row at the end of the card grid */
.pg-reviews-more { grid-column: 1 / -1; display: flex; justify-content: center; }
.pg-load-more {
    width: 100%;
    padding: 14px 24px;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-sm);
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ink-900);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-fast);
}
.pg-load-more:hover {
    background: var(--ink-950);
    border-color: var(--ink-950);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 1024px) {
    .revibe-reviews-section:not(.home-reviews-section) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
    }
    .revibe-reviews-section > .reviews-header,
    .revibe-reviews-section > .reviews-distribution,
    .revibe-reviews-section > .reviews-list,
    .revibe-reviews-section > .reviews-grid { grid-column: 1; grid-row: auto; }
    .revibe-reviews-section > .reviews-list,
    .revibe-reviews-section > .reviews-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Rating distribution bars */
/* NOTE: .reviews-distribution is a SIBLING of .reviews-header, so it sits on
   the white page — not on the dark panel. It must be styled for a light
   background (white-on-dark text here renders invisible). */
.reviews-distribution {
    display: grid;
    gap: 8px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--ring-strong), var(--shadow-xs);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    /* Full-container width makes these thin bars look stretched. */
    max-width: 560px;
}
.reviews-distribution .dist-row {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 12px;
    padding: 0;
}
.reviews-distribution .dist-bar-bg {
    height: 8px;
    background: var(--ink-100);
    border-radius: var(--radius-pill);
    overflow: hidden;
    flex: none;
}
.reviews-distribution .dist-bar-fill {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #FFB020, #FF8A00);
}
.reviews-distribution .dist-label,
.reviews-distribution .dist-count {
    font-size: 12px;
    color: var(--ink-600);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.reviews-distribution .dist-label { text-align: right; }
.reviews-distribution .dist-count { text-align: left; color: var(--ink-400); }

/* Review cards */
.reviews-list, .reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}
.review-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--ring-strong), var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.review-card-top { display: flex; align-items: center; gap: .8rem; }
.review-avatar {
    width: 42px; height: 42px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 4px 10px rgba(10,87,236,.28);
}
.review-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review-author { font-weight: 700; font-size: 14px; color: var(--ink-900); }
.review-product-name { font-size: 12px; color: var(--ink-500); }
.review-product-name a { color: var(--brand-600); font-weight: 600; }
.review-product-name a:hover { text-decoration: underline; }
.review-date { margin-left: auto; font-size: 11.5px; color: var(--ink-400); white-space: nowrap; }
.review-stars { color: #FFB020; letter-spacing: .06em; }
.review-text, .review-content { color: var(--ink-600); font-size: 13.5px; line-height: 1.65; }
.review-verified, .verified-purchase {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    margin-top: auto;
    background: var(--eco-50);
    color: var(--eco-700);
    border: 1px solid var(--eco-100);
    border-radius: var(--radius-pill);
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ------------------------------------------------------------
   9. SINGLE PRODUCT PAGE
   ------------------------------------------------------------ */
.woocommerce-breadcrumb, .breadcrumbs {
    font-size: 12.5px;
    color: var(--ink-400);
    padding: 1.25rem 0;
}

/* Desktop had ~183px of stacked padding between the nav and the product
   (site-content 32 + wrapper 24 + breadcrumb 20/20 + 24 margin). Tighten it
   on product pages only; mobile spacing is left untouched. */
@media (min-width: 769px) {
    body.single-product .site-content { padding-top: 14px; }
    body.single-product .revibe-single-product { padding-top: 6px; }
    body.single-product .woocommerce-breadcrumb,
    body.single-product .breadcrumbs {
        padding: 8px 0 !important;
        margin-bottom: 14px !important;
    }
}
.woocommerce-breadcrumb a, .breadcrumbs a { color: var(--ink-500); transition: color var(--dur-fast) var(--ease-out); }
.woocommerce-breadcrumb a:hover, .breadcrumbs a:hover { color: var(--brand-600); }

/* Gallery */
.product-gallery,
.woocommerce-product-gallery {
    background: radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--ink-50) 72%, var(--ink-100) 100%);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    box-shadow: var(--ring-strong), var(--shadow-sm);
}
.woocommerce-product-gallery__image img,
.product-gallery img {
    border-radius: var(--radius-md);
    filter: drop-shadow(0 14px 26px rgba(12,16,24,.14));
    mix-blend-mode: multiply;
}
.flex-control-thumbs img {
    border-radius: var(--radius-sm);
    box-shadow: var(--ring-strong);
    transition: var(--transition-fast);
    opacity: .6;
}
.flex-control-thumbs img:hover,
.flex-control-thumbs .flex-active {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--brand-600);
}

.product_title.entry-title {
    font-size: 2rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    color: var(--ink-950) !important;
    line-height: 1.16 !important;
    margin-bottom: .65rem !important;
}

/* Price block */
.revibe-price-wrapper {
    border-top: 0;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--ink-50), #fff);
    border-radius: var(--radius-md);
    box-shadow: var(--ring-strong);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.revibe-price-wrapper .price {
    font-size: 2.15rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.038em !important;
    color: var(--ink-950) !important;
    line-height: 1.1 !important;
}
.revibe-price-wrapper .price del {
    font-size: 1rem !important;
    color: var(--ink-400) !important;
    text-decoration-thickness: 1px;
}
.revibe-price-wrapper .price ins {
    text-decoration: none !important;
    color: var(--sale-600) !important;
    font-weight: 800 !important;
}
.savings-badge {
    background: var(--eco-50) !important;
    color: var(--eco-700) !important;
    border: 1px solid var(--eco-100);
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
}

/* Variation swatches */
.revibe-swatch.color-swatch {
    width: 38px;
    height: 38px;
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(12,16,24,.08);
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.revibe-swatch.color-swatch:hover { transform: scale(1.12); }
.revibe-swatch.color-swatch.selected {
    border-color: transparent;
    box-shadow: 0 0 0 2.5px var(--brand-600), 0 6px 14px rgba(10,87,236,.3);
    transform: scale(1.12);
}
.revibe-swatch.button-swatch {
    padding: 10px 20px;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--ink-800);
    font-size: .85rem;
    transition: var(--transition-fast);
}
.revibe-swatch.button-swatch:hover {
    border-color: var(--ink-950);
    color: var(--ink-950);
    background: var(--ink-50);
}
.revibe-swatch.button-swatch.selected {
    border-color: var(--ink-950);
    background: var(--ink-950);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.revibe-swatch.button-swatch.disabled,
.revibe-swatch.disabled {
    opacity: .45;
    cursor: not-allowed;
}
.revibe-swatch.disabled .pg-swatch-label { text-decoration: line-through; }
.revibe-swatch.disabled:hover { transform: none; box-shadow: var(--ring-strong); }

/* ---- Condition swatches with per-grade pricing ----
   NOTE: classes are pg-prefixed on purpose — main.css already has a
   .swatch-label rule capped at max-width:52px, which truncated the names. */
.revibe-swatches.has-swatch-prices { gap: 10px; }
.revibe-swatches.has-swatch-prices .revibe-swatch.button-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 118px;
    padding: 9px 18px;
    line-height: 1.25;
}
.revibe-swatch .pg-swatch-label {
    display: block;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-size: .85rem;
    font-weight: 600;
}
.revibe-swatch .pg-swatch-price {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-500);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.revibe-swatch.button-swatch.selected .pg-swatch-price { color: rgba(255,255,255,.75); }
.revibe-swatch .pg-swatch-price.is-na {
    font-weight: 600;
    font-size: 11px;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---- "You May Also Like" as a slider ----
   The markup already ships a flex .related-grid-track; stop it wrapping and
   let it scroll, with arrows injected by product.js. */
.revibe-related-grid.is-slider { position: relative; }
.revibe-related-grid.is-slider .related-grid-track {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-x;
    /* overflow-x:auto forces the vertical axis to clip too, which chopped the
       top off cards on hover-lift. Pad the track so the lift + shadow fit. */
    padding: 12px 3px 18px;
    margin: -12px -3px -18px;
}
.revibe-related-grid.is-slider .related-grid-track::-webkit-scrollbar { display: none; }
.revibe-related-grid.is-slider .related-grid-track.is-dragging { cursor: grabbing; }
.revibe-related-grid.is-slider .related-grid-item {
    flex: 0 0 auto;
    width: calc((100% - 3rem) / 4);
    min-width: 190px;
    scroll-snap-align: start;
}

.pg-slider-nav {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: .4rem;
}
.pg-slider-arrow {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--ink-200);
    background: #fff;
    color: var(--ink-700);
    font-size: 13px;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-fast);
}
.pg-slider-arrow:hover:not(:disabled) {
    background: var(--ink-950);
    border-color: var(--ink-950);
    color: #fff;
    transform: translateY(-1px);
}
.pg-slider-arrow:disabled { opacity: .35; cursor: default; }

@media (max-width: 1024px) {
    .revibe-related-grid.is-slider .related-grid-item { width: calc((100% - 2rem) / 3); }
}
@media (max-width: 768px) {
    .revibe-related-grid.is-slider .related-grid-item { width: calc((100% - 1rem) / 2); min-width: 150px; }
    .pg-slider-nav { display: none; }   /* swipe on touch */
}

/* ---- Premium Quality Guarantee box (Like-New products) ----
   Was a flat green wash with raw ✓ glyphs; now a proper card with a header
   rule and badge checks, so the copy reads instead of the background. */
.revibe-quality-box {
    background: #fff !important;
    border: 0 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--ring-strong), var(--shadow-xs);
    padding: 1.2rem 1.35rem !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}
.revibe-quality-box::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--eco-600), var(--brand-500));
}
.quality-box-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-bottom: .85rem;
    margin-bottom: .95rem;
    border-bottom: 1px solid var(--ink-100);
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em;
    color: var(--ink-950) !important;
}
.quality-box-header svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    padding: 6px;
    border-radius: 50%;
    background: var(--eco-50);
    color: var(--eco-700);
}
.quality-box-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem 1.3rem;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}
.quality-box-list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: 13px !important;
    line-height: 1.45;
    color: var(--ink-700) !important;
    margin: 0 !important;
}
.quality-box-list .q-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: .1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--eco-600);
    color: #fff !important;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}
@media (max-width: 560px) {
    .quality-box-list { grid-template-columns: 1fr; }
}

/* ---- Buy Now, Pay Later panel (UAE + KSA only) ----
   Sits directly under the cart buttons, so it needs a clear break to read
   as its own module rather than crowding them. */
.pg-bnpl {
    margin: 1.5rem 0 1.25rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--ink-100);
}
.pg-bnpl-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: none;
    border: 0;
    padding: 0 0 .8rem;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ink-950);
    cursor: pointer;
}
/* Collapsed by default: heading + logos visible, detail rows on click. */
.pg-bnpl-chev { transition: transform var(--dur) var(--ease-out); }
.pg-bnpl.is-collapsed .pg-bnpl-chev { transform: rotate(-90deg); }
.pg-bnpl.is-collapsed .pg-bnpl-body { display: none; }

/* Brand SVGs are full-bleed badges with their own background — no chip.
   Tamara's mark is transparent, so it gets the gradient plate behind it
   (same treatment revibe.me uses); the PNG matches the SVG aspect ratio. */
.pg-bnpl-logos { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.pg-bnpl-logos img {
    height: 40px;
    width: auto;
    display: block;
    border-radius: 8px;
}
.pg-bnpl-logos img.is-tamara,
.pg-bnpl-logo.is-tamara {
    background-image: url('../images/payment/tamara-bg-gradient.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.pg-bnpl:not(.is-collapsed) .pg-bnpl-logos { margin-bottom: .7rem; }

.pg-bnpl-body {
    background: var(--ink-50);
    border-radius: var(--radius-md);
    box-shadow: var(--ring-strong);
    padding: .35rem .9rem;
}
.pg-bnpl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
}
.pg-bnpl-row + .pg-bnpl-row { border-top: 1px solid var(--ink-100); }
.pg-bnpl-text { font-size: 13px; color: var(--ink-600); line-height: 1.45; }
.pg-bnpl-amount { color: var(--ink-950); font-weight: 800; font-variant-numeric: tabular-nums; }
.pg-bnpl-logo {
    flex-shrink: 0;
    height: 36px;
    width: auto;
    border-radius: 8px;
    background: #fff;
    padding: 5px 9px;
    box-shadow: var(--shadow-xs);
}
@media (max-width: 480px) {
    .pg-bnpl-row { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* ---- Inspection points rail (under the gallery) ---- */
.pg-inspection { margin-top: 1rem; }
.pg-inspection-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-600);
    margin: 0 0 .6rem;
    letter-spacing: -0.005em;
}
.pg-inspection-rail-wrap { position: relative; }
/* Fade hints that the rail scrolls */
.pg-inspection-rail-wrap::before,
.pg-inspection-rail-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 34px;
    pointer-events: none;
    z-index: 2;
}
.pg-inspection-rail-wrap::before { left: 0;  background: linear-gradient(90deg, #fff, transparent); }
.pg-inspection-rail-wrap::after  { right: 0; background: linear-gradient(270deg, #fff, transparent); }

.pg-inspection-rail {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-x;      /* keep native swipe on touch devices */
    scroll-behavior: auto;    /* direct manipulation must track 1:1, not animate */
}
.pg-inspection-rail.is-dragging { cursor: grabbing; }
.pg-inspection-rail::-webkit-scrollbar { display: none; }

.pg-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    background: var(--ink-50);
    box-shadow: var(--ring);
    color: var(--ink-700);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: var(--transition-fast);
}
.pg-chip:hover { background: #fff; box-shadow: var(--ring-strong), var(--shadow-xs); color: var(--ink-950); }
.pg-chip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--eco-600);
}

@media (max-width: 768px) {
    .pg-inspection-title { font-size: 12px; }
    .pg-chip { height: 32px; font-size: 12px; padding: 0 12px; }
    .pg-inspection-rail-wrap::before,
    .pg-inspection-rail-wrap::after { width: 20px; }
}

/* ---- Condition Guide link + modal ---- */
.pg-cg-link {
    float: right;
    background: none;
    border: 0;
    padding: 0 0 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-600);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}
.pg-cg-link:hover { color: var(--brand-700); }

body.pg-cg-open { overflow: hidden; }

.pg-cg-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 11, 13, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: pg-cg-fade var(--dur) var(--ease-out);
}
.pg-cg-overlay[hidden] { display: none; }
@keyframes pg-cg-fade { from { opacity: 0 } to { opacity: 1 } }

.pg-cg-modal {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: min(620px, 100%);
    max-height: min(86vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pg-cg-rise var(--dur) var(--ease-out);
}
@keyframes pg-cg-rise { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }

.pg-cg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--ink-100);
}
.pg-cg-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.pg-cg-close {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--ink-50);
    color: var(--ink-600);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-fast);
}
.pg-cg-close:hover { background: var(--ink-100); color: var(--ink-950); }

.pg-cg-tabs {
    display: flex;
    gap: .5rem;
    padding: 1.1rem 1.5rem 0;
    flex-wrap: wrap;
}
.pg-cg-tab {
    padding: 9px 18px;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-sm);
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-700);
    cursor: pointer;
    transition: var(--transition-fast);
}
.pg-cg-tab:hover { border-color: var(--ink-950); color: var(--ink-950); background: var(--ink-50); }
.pg-cg-tab.active {
    background: var(--ink-950);
    border-color: var(--ink-950);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.pg-cg-body { padding: 1.25rem 1.5rem 1.75rem; overflow-y: auto; }
.pg-cg-panel { display: none; }
.pg-cg-panel.active { display: block; animation: pg-cg-fade var(--dur) var(--ease-out); }
.pg-cg-panel-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink-950);
    margin: 0 0 .85rem;
}
.pg-cg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pg-cg-list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-600);
}
.pg-cg-list li::before {
    content: '';
    position: absolute;
    left: 0; top: .48em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--eco-600);
    box-shadow: 0 0 0 3px var(--eco-50);
}

@media (max-width: 600px) {
    .pg-cg-overlay { padding: 0; align-items: flex-end; }
    .pg-cg-modal {
        width: 100%;
        max-height: 88vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        animation: pg-cg-slide var(--dur) var(--ease-out);
    }
    @keyframes pg-cg-slide { from { transform: translateY(100%) } to { transform: none } }
    .pg-cg-head, .pg-cg-tabs, .pg-cg-body { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* ---- Wishlist: icon-only, square, sits beside Add to Cart ---- */
.woocommerce-variation-add-to-cart .tinv-wraper { display: inline-flex; align-items: stretch; }
.woocommerce-variation-add-to-cart .tinvwl_add_to_wishlist_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 54px;
    min-height: 54px;
    padding: 0 !important;
    margin: 0 !important;
    border: 1.5px solid var(--ink-200) !important;
    border-radius: var(--radius-sm) !important;
    background: #fff !important;
    color: var(--ink-700) !important;
    font-size: 19px !important;
    line-height: 1 !important;
    transition: var(--transition-fast) !important;
}
.woocommerce-variation-add-to-cart .tinvwl_add_to_wishlist_button:hover {
    border-color: var(--sale-500) !important;
    color: var(--sale-600) !important;
    background: var(--sale-50) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.woocommerce-variation-add-to-cart .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
    border-color: var(--sale-500) !important;
    color: var(--sale-600) !important;
}
/* Hide the label; the heart glyph is rendered by the plugin's ::before */
.woocommerce-variation-add-to-cart .tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.woocommerce-variation-add-to-cart .tinvwl_add_to_wishlist_button::before {
    margin: 0 !important;
    font-size: 19px;
    line-height: 1;
}

/* Primary actions — Buy Now leads, Add to Cart supports.
   Equal min-height so the pair lines up when shown side by side
   (Add to Cart carries a 1.5px border that Buy Now does not). */
.revibe-buy-now-btn,
.single_add_to_cart_button {
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* In the side-by-side row the buttons stretch to the line height; Buy Now's
   8px bottom margin made it render 8px shorter than Add to Cart. */
.woocommerce-variation-add-to-cart .revibe-buy-now-btn { margin-bottom: 0 !important; }
.revibe-buy-now-btn {
    border-radius: var(--radius-sm) !important;
    padding: 14px 30px !important;
    letter-spacing: .04em !important;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700)) !important;
    color: #fff !important;
    box-shadow: var(--shadow-brand) !important;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out) !important;
}
.revibe-buy-now-btn:hover {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-700)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 34px rgba(10,87,236,.36) !important;
}
.revibe-buy-now-btn:active { transform: translateY(0) !important; }

.single_add_to_cart_button {
    border-radius: var(--radius-sm) !important;
    padding: 13px 28px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    background: #fff !important;
    color: var(--ink-950) !important;
    border: 1.5px solid var(--ink-950) !important;
    box-shadow: var(--shadow-xs) !important;
    transition: var(--transition-fast) !important;
}
.single_add_to_cart_button:hover {
    background: var(--ink-950) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}
.single_add_to_cart_button:active { transform: translateY(0) !important; }

/* Delivery + returns + condition read as one strip, not three stacked lines.
   They are separate siblings in the summary column, so float them onto a
   single flex row via display:contents on a shared wrapper is not possible —
   instead each is inline-flex and the column lays them out in a row. */
.product-summary-column .revibe-delivery,
.product-summary-column .revibe-returns-badge,
.product-summary-column .product-condition-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    vertical-align: top;      /* equal min-height + top align = flush baseline */
    min-height: 36px;
    margin: 0 .6rem .5rem 0;
    font-size: 13px;
}
.product-summary-column .revibe-delivery {
    background: var(--eco-50);
    box-shadow: inset 0 0 0 1px var(--eco-100);
    border-radius: var(--radius-pill);
    padding: 7px 14px;
}
.product-summary-column .revibe-returns-badge {
    background: var(--ink-50);
    box-shadow: var(--ring-strong);
    border-radius: var(--radius-pill);
    padding: 7px 14px;
    color: var(--ink-600);
}
.product-summary-column .product-condition-badge {
    border-radius: var(--radius-pill) !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
/* Brand pill joins the same row as delivery / returns / condition rather
   than stretching to full width on a line of its own. */
.product-summary-column .woocommerce-product-details__short-description {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    min-height: 36px;
    width: auto;
    margin: 0 .6rem .5rem 0;
    padding: 6px 16px;
}
.product-summary-column .woocommerce-product-details__short-description p {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
}
.product-summary-column .revibe-delivery { margin-top: 0; }

/* Trust badges / warranty blocks */
.gallery-trust-badges { gap: .75rem; }
.gallery-trust-badge, .warranty-upsell, .seller-info {
    background: var(--ink-50);
    border-radius: var(--radius-md);
    box-shadow: var(--ring);
    transition: var(--transition-fast);
}
.gallery-trust-badge:hover { background: #fff; box-shadow: var(--ring-strong), var(--shadow-sm); }
.delivery-estimate { background: var(--eco-50); box-shadow: inset 0 0 0 1px var(--eco-100); }
.cashback-badge, .cashback {
    background: var(--amber-50);
    color: var(--amber-600);
    border-radius: var(--radius-pill);
    font-weight: 700;
}

/* Product tabs */
.product-tabs { margin-top: 3.5rem; }
.tab-nav {
    border-bottom: 1px solid var(--ink-100);
    gap: .25rem;
}
.tab-nav-item {
    color: var(--ink-400);
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    letter-spacing: .06em;
    transition: var(--transition-fast);
}
.tab-nav-item:hover { color: var(--ink-900); background: var(--ink-50); }
.tab-nav-item.active {
    color: var(--brand-700);
    border-bottom-color: var(--brand-600);
}

/* Specs table */
.woocommerce-product-attributes {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--ring-strong);
    border-collapse: separate !important;
    border-spacing: 0;
}
.woocommerce-product-attributes tr:nth-child(even) { background: var(--ink-50); }
.woocommerce-product-attributes th {
    font-weight: 600;
    color: var(--ink-600);
    padding: 13px 16px;
}
.woocommerce-product-attributes td { color: var(--ink-900); padding: 13px 16px; }

/* ------------------------------------------------------------
   10. ARCHIVE / CATEGORY PAGE
   ------------------------------------------------------------ */
.archive-header {
    background: linear-gradient(135deg, var(--ink-950) 0%, var(--ink-800) 55%, #16233F 100%);
    padding: 3.5rem 0;
    position: relative;
    overflow: hidden;
    border-bottom: 0;
}
.archive-header::after {
    content: '';
    position: absolute;
    top: -50%; left: 50%;
    transform: translateX(-50%);
    width: 900px; height: 520px;
    background: radial-gradient(ellipse, rgba(36,112,255,.22) 0%, transparent 66%);
    pointer-events: none;
}
.archive-header .container { position: relative; z-index: 1; }
.archive-title {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.038em !important;
    color: #fff !important;
}
.archive-description, .archive-subtitle { color: rgba(255,255,255,.66) !important; }

/* Filters sidebar */
.archive-sidebar { align-self: start; }
.filter-widget {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.4rem;
    box-shadow: var(--ring-strong), var(--shadow-xs);
    margin-bottom: 1rem;
}
.filter-widget-title, .filter-widget .widgettitle {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-400);
    padding-bottom: .65rem;
    margin-bottom: .95rem;
    border-bottom: 1px solid var(--ink-100);
}
.filter-widget .widgettitle { border-bottom: 0; padding-bottom: 0; margin-bottom: .5rem; }

/* Filter pills (storage, condition…) */
.revibe-filter-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.revibe-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--ink-200);
    background: #fff;
    color: var(--ink-700);
    font-size: 12.5px;
    font-weight: 600;
    transition: var(--transition-fast);
}
.revibe-filter-pill:hover {
    border-color: var(--ink-950);
    color: var(--ink-950);
    background: var(--ink-50);
    transform: translateY(-1px);
}
/* Theme marks the active filter with .chosen (see archive-product.php) */
.revibe-filter-pill.chosen, .revibe-filter-pill.active, .revibe-filter-pill.selected {
    background: var(--ink-950);
    border-color: var(--ink-950);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* Filter colour swatches.
   Markup is <a><span.swatch-circle><span.swatch-label>. A bare `span`
   selector here also hit the label and squashed it into a 28px circle —
   target the two spans separately. */
.revibe-filter-swatches { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.revibe-filter-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 62px;
    border-radius: var(--radius-sm);
    box-shadow: none;
    text-decoration: none;
    transition: transform var(--dur) var(--ease-spring);
}
.revibe-filter-swatch .swatch-circle {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: var(--shadow-xs), inset 0 0 0 1px rgba(12,16,24,.12);
    transition: box-shadow var(--dur) var(--ease-out);
}
.revibe-filter-swatch .swatch-label {
    display: block;
    max-width: 100%;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 600;
    text-align: center;
    color: var(--ink-500);
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.revibe-filter-swatch:hover { transform: translateY(-2px); }
.revibe-filter-swatch:hover .swatch-label { color: var(--ink-900); }
.revibe-filter-swatch.chosen .swatch-circle,
.revibe-filter-swatch.active .swatch-circle,
.revibe-filter-swatch.selected .swatch-circle {
    box-shadow: 0 0 0 2.5px var(--brand-600), 0 4px 10px rgba(10,87,236,.3);
}
.revibe-filter-swatch.chosen .swatch-label,
.revibe-filter-swatch.active .swatch-label,
.revibe-filter-swatch.selected .swatch-label { color: var(--brand-700); }

/* Price slider.
   The theme dequeues WooCommerce's stylesheets, and the slider's POSITIONING
   lives in woocommerce.css — without it the handles render as 4px inline stubs
   and the range collapses to 0 height, making the filter unusable. So the
   layout rules below are required, not cosmetic. */
.price_slider_wrapper .price_slider,
.price_slider_wrapper .ui-slider {
    position: relative;
    background: var(--ink-100);
    border-radius: var(--radius-pill);
    height: 6px;
    border: 0;
    margin: 6px 9px 1.4rem;
}
.price_slider_wrapper .ui-slider-range {
    position: absolute;
    top: 0;
    height: 100%;
    display: block;
    z-index: 1;
    border: 0;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
    border-radius: var(--radius-pill);
}
.price_slider_wrapper .ui-slider-handle {
    position: absolute;
    top: -6px;
    margin-left: -9px;
    z-index: 2;
    display: block;
    background: #fff;
    border: 2px solid var(--brand-600);
    border-radius: 50%;
    width: 18px; height: 18px;
    box-shadow: var(--shadow-sm);
    cursor: ew-resize;
    touch-action: none;
    transition: transform var(--dur-fast) var(--ease-out);
}
.price_slider_wrapper .ui-slider-handle:hover,
.price_slider_wrapper .ui-slider-handle.ui-state-active { transform: scale(1.15); }

/* Filter button and price label on one tidy row */
.price_slider_amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.price_slider_amount .clear { display: none; }
.price_slider_amount .button {
    background: var(--ink-950) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
}
.price_slider_amount .price_label { font-size: 12.5px; color: var(--ink-500); }

.archive-sidebar input[type="checkbox"] { accent-color: var(--brand-600); }

/* Pagination */
.woocommerce-pagination ul, .pagination { gap: .4rem; display: flex; }
.woocommerce-pagination a, .woocommerce-pagination span,
.page-numbers {
    border-radius: var(--radius-sm) !important;
    min-width: 42px;
    height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--ink-700);
    box-shadow: var(--ring-strong);
    background: #fff;
    border: 0 !important;
    transition: var(--transition-fast);
}
.page-numbers:hover { background: var(--ink-50); color: var(--ink-950); transform: translateY(-1px); }
.page-numbers.current {
    background: var(--ink-950) !important;
    color: #fff !important;
    box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------
   11. FOOTER
   ------------------------------------------------------------ */
.site-footer {
    background: var(--color-footer-bg);
    color: var(--ink-400);
    padding-top: 4rem;
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-600), var(--eco-600), var(--sale-500));
}
.footer-heading {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.footer-logo, .footer-logo a {
    color: #fff;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.035em;
}
.footer-menu a {
    color: var(--ink-400);
    font-size: 13.5px;
    transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    /* Measured 27px tall on mobile — under the comfortable tap minimum. */
    min-height: 40px;
    padding: 4px 0;
}
.footer-menu a:hover { color: #fff; padding-left: 5px; }
.footer-company-name, .footer-address { font-size: 12.5px; color: var(--ink-500); line-height: 1.65; }

.footer-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 3rem;
    padding: 1.75rem 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-trust .trust-badge {
    background: rgba(255,255,255,.04);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
    color: var(--ink-300);
    border-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1.1rem;
}
.footer-trust .trust-badge:hover { background: rgba(255,255,255,.07); color: #fff; }
.footer-trust .trust-badge svg { color: var(--eco-600); flex-shrink: 0; }

.footer-bottom {
    padding: 1.5rem 0;
    font-size: 12.5px;
    color: var(--ink-500);
}
.payment-methods { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.payment-methods > span {
    background: rgba(255,255,255,.94);
    border-radius: var(--radius-xs);
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 32px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-fast);
}
.payment-methods > span:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* mastercard.svg and cod.svg carry only a viewBox (no width/height attrs), so
   `max-height` alone leaves their size indefinite and they can collapse to 0.
   An explicit height + auto width resolves cleanly via the aspect ratio. */
.payment-methods img,
.payment-methods svg {
    display: block;
    height: 20px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ------------------------------------------------------------
   12. FORMS, NOTICES, MISC
   ------------------------------------------------------------ */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], select, textarea {
    border-radius: var(--radius-sm);
    border: 1px solid var(--ink-200);
    padding: 11px 14px;
    font-size: 14px;
    color: var(--ink-900);
    background: #fff;
    transition: var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px var(--brand-50);
    outline: none;
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
    border: 0 !important;
    border-left: 4px solid var(--brand-600) !important;
    background: var(--brand-50) !important;
    color: var(--ink-800) !important;
}
.woocommerce-error { border-left-color: var(--sale-600) !important; background: #FEF2F0 !important; }
.woocommerce-message { border-left-color: var(--eco-600) !important; background: var(--eco-50) !important; }

/* Buttons that WooCommerce renders generically */
.woocommerce .button, .wc-block-components-button {
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    transition: var(--transition-fast) !important;
}

/* ------------------------------------------------------------
   13. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .section-header .section-title { font-size: 1.35rem; }
    .quality-title { font-size: 1.6rem; }
    .reviews-header { padding: 1.75rem; }
    .reviews-big-score { font-size: 2.6rem; }
}

@media (max-width: 768px) {
    body { font-size: 14px; }
    .hero-banner { padding: 12px 0 4px; }
    .hero-banner-img { width: calc(100% - 24px); border-radius: var(--radius-md); }
    .featured-section, .hot-deals-section, .express-section { padding: 2.25rem 0; }
    .section-header { margin-bottom: 1.25rem; padding-bottom: .75rem; }
    .section-header .section-title { font-size: 1.15rem; padding-left: 10px; }
    .view-all { padding: 7px 14px; font-size: 11px; }
    .products-grid { gap: .9rem; }
    .products-grid .product-card-image, ul.products .product-card-image { padding: 1rem !important; }
    .products-grid .product-card-body, ul.products .product-card-body { padding: 12px 12px 8px !important; }
    .products-grid .product-card-title, ul.products .product-card-title { font-size: 12.5px !important; }
    .products-grid .product-card-price .price-from,
    .products-grid .product-card-price .price-from .amount { font-size: 17px !important; }
    .products-grid .product-card-actions, ul.products .product-card-actions { padding: 0 12px 12px !important; }
    /* Keep the card CTA a real tap target (>=44px tall).
       main.css ~1059/1247 force 8px padding, so match their specificity. */
    .products-grid .add-to-cart-btn,
    .products-grid li.product .add-to-cart-btn,
    ul.products li.product .add-to-cart-btn {
        padding: 14px 12px !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
    }
    .quality-guarantee-inner { padding: 2rem 1.25rem; border-radius: var(--radius-lg); }
    .quality-title { font-size: 1.35rem; }
    .quality-features-grid { grid-template-columns: repeat(2, 1fr); }
    .reviews-header { flex-direction: column; align-items: stretch; gap: 1.25rem; padding: 1.5rem; border-radius: var(--radius-lg); }
    .reviews-header-right { min-width: 0; width: 100%; }
    .product_title.entry-title { font-size: 1.5rem !important; }
    .archive-title { font-size: 1.65rem !important; }
    .archive-header { padding: 2.25rem 0; }
    .revibe-price-wrapper { padding: .9rem 1rem; }
    .revibe-price-wrapper .price { font-size: 1.6rem !important; }

    /* Gallery: give the product image real room. The theme caps the column
       (main.css ~3099) and our padding ate into it, leaving a tiny image. */
    .product-gallery-column { max-width: 84% !important; }
    .product-gallery,
    .woocommerce-product-gallery { padding: .85rem; border-radius: var(--radius-lg); }

    /* Buy Now / Add to Cart: equal full-width rows beat uneven halves */
    .woocommerce-variation-add-to-cart .revibe-buy-now-btn,
    .woocommerce-variation-add-to-cart .single_add_to_cart_button {
        flex: 1 0 100%;
        min-width: 0;
    }
    .revibe-buy-now-btn, .single_add_to_cart_button { padding: 15px 20px !important; }

    /* Comfortable touch targets (>=44px) */
    .revibe-swatch.color-swatch { width: 44px; height: 44px; }
    .revibe-filter-swatch { width: 66px; }
    .revibe-filter-swatch .swatch-circle { width: 34px; height: 34px; }
    .revibe-filter-pill { padding: 10px 16px; }
    .tab-nav-item { padding: 13px 18px; }

    /* Header icons are only 24–32px. Expand the tap area with a centred
       pseudo-element so the target reaches 44px without growing the sticky
       header (a min-height here pushed it 98px -> 138px). */
    .menu-toggle,
    .search-toggle,
    .cart-icon,
    .header-action { position: relative; }
    .menu-toggle::before,
    .search-toggle::before,
    .cart-icon::before,
    .header-action::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
    .lang-option { min-height: 36px; padding: 8px 13px; display: inline-flex; align-items: center; }
    /* Measured 40x21 — too short to tap reliably. */
    .country-current { min-height: 36px; padding: 6px 10px; display: inline-flex; align-items: center; }
    .view-all { min-height: 40px; display: inline-flex; align-items: center; }

    /* Remaining sub-40px controls found in the mobile audit. Padding is used
       rather than height so nothing shifts in the surrounding layout. */
    .site-logo-text { display: inline-flex; align-items: center; min-height: 40px; }
    .woocommerce-breadcrumb a,
    .breadcrumbs a { display: inline-block; padding: 11px 2px; }
    .pg-cg-link { padding: 10px 0 10px 12px; }
    .reset_variations { display: inline-block; padding: 11px 4px; }
    .pg-bnpl-toggle { min-height: 44px; padding-top: 4px; }
    /* Category page: price-filter submit and the sorting dropdown */
    .price_slider_amount .button { min-height: 42px !important; }
    .woocommerce-ordering .orderby { min-height: 42px; }
    /* Video slider dots are 8px. Grow the hit box with padding while
       background-clip keeps the dot itself visually small. */
    .video-slider-dots .dot {
        box-sizing: content-box;
        padding: 14px 7px;
        background-clip: content-box;
    }

    /* Touch devices: don't hide the wishlist behind hover */
    .products-grid .tinvwl-shortcode-add-to-cart,
    .products-grid .tinv-wishlist { opacity: 1; transform: none; }

    /* The mobile filter accordion sets `display:block` on every child when
       expanded, which would flatten our flex rows — restore them. */
    .filter-widget.expanded > .revibe-filter-pills,
    .filter-widget.expanded > .revibe-filter-swatches { display: flex; }
}

/* Tablet: main.css drops to 2 columns at 768px, which leaves ~320px-wide
   cards. Three across reads far better in this range. */
@media (min-width: 601px) and (max-width: 768px) {
    /* main.css forces 2 columns here via `.featured-section .products-grid`
       (0,2,0 + !important) — match that weight or it wins. */
    .featured-section .products-grid,
    .hot-deals-section .products-grid,
    .express-section .products-grid,
    .products-grid,
    .products-grid-4,
    .products-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
    ul.products { grid-template-columns: repeat(3, 1fr) !important; }
    .reviews-list, .reviews-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .product-gallery-column { max-width: 62% !important; }
}

@media (max-width: 600px) {
    .reviews-list, .reviews-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .products-grid, .products-grid-4, .products-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .review-card { padding: 1.1rem; }
    .quality-features-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   14. RTL (Arabic locales)
   ------------------------------------------------------------ */
html[dir="rtl"] .section-header .section-title { padding-left: 0; padding-right: 14px; }
html[dir="rtl"] .section-header .section-title::before { left: auto; right: 0; }
html[dir="rtl"] .revibe-savings-badge { left: auto !important; right: 14px !important; }
html[dir="rtl"] .review-date { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .footer-menu a:hover { padding-left: 0; padding-right: 5px; }
html[dir="rtl"] .specs-table th, html[dir="rtl"] .shop_attributes th { text-align: right; }

/* ------------------------------------------------------------
   15. MOTION PREFERENCES
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .products-grid li.product:hover,
    ul.products li.product:hover,
    .review-card:hover,
    .quality-feature:hover { transform: none !important; }
}