@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
/* 
  =============================================================
  HARRISON & YORK (HAY) - PURE CUSTOM STYLESHEET (NO THEME)
  =============================================================
  Contains custom layout structures, global classes, and variables 
  as defined in the Figma and Google Doc.
*/

:root {
    /* Brand Colors (Updated based on user review) */
    --color-blue: #23A9BC;
    --color-purple: #87246A;
    --color-orange: #F27756;  /* Figma Approved Orange */
    --color-yellow: #F5B41A;  /* Testimonial & Top Bar Yellow */
    
    /* Top Bar Background Accent */
    --color-topbar: #F5B41A;
    
    /* Homepage Custom Accents */
    --color-homepage-beige: #C7BDA2;
    --color-homepage-brown: #B0A075;
    
    /* Layout & Neutrals */
    --color-text-dark: #181818;
    --color-text-muted: #808080;
    --color-bg-light: #F3EFE4;
    --color-bg-white: #ffffff;
    --color-overlay: rgba(240, 240, 240, 0.92);
    
    /* Maths Year Group Theme Colors */
    --maths-color-reception: #C7BDA2;
    --maths-color-y1: #84E9F7;
    --maths-color-y2: #23A9BC;
    --maths-color-y3: #C7CAE9;
    --maths-color-y4: #6E74B3;
    --maths-color-y5: #7AE5CD;
    --maths-color-y6: #3EB99D;
    --maths-color-y7: #8CA5B1;
    --maths-color-y8: #5C7E8E;
    --maths-color-y9: #315567;
    
    /* English Year Group Theme Colors */
    --english-color-reception: #B7AC8D;
    --english-color-y1: #C67DB1;
    --english-color-y2: #87246A;
    --english-color-y3: #F9D889;
    --english-color-y4: #F5B41A;
    --english-color-y5: #F7C0B1;
    --english-color-y6: #F27756;
    --english-color-y7: #D4D5D0;
    --english-color-y8: #A2A39A;
    --english-color-y9: #63655D;
    
    /* Typography */
    --font-primary: 'Poppins', sans-serif;
    --font-heading: 'Spartan', sans-serif;
    --font-script: 'Rock Salt', cursive;
    
    /* Layout Caps */
    --max-content-width: 1440px;
}

/* 1. Global Copy Readability Boost */
body {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

/* Responsive Width Lock (Prevent Distortion on Ultra-Wide Monitors) */
.container {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. Top Bar Section (#F5B41A) */
.top-bar {
    background-color: #F5B41A !important;
    color: var(--color-text-dark);
    padding: 10px 0;
}

.top-bar-icons svg,
.top-bar-icons i {
    font-size: 22px !important;
    width: 22px;
    height: 22px;
}

/* 3. Header Menu Tabs Font Size */
.navigation-menu a {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color 0.3s;
}
.navigation-menu a:hover {
    color: var(--color-purple);
}

/* 4. Transparent Light-Grey Search Overlay (Follows Figma Colors) */
.search-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--color-overlay);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 5. Hero Slider Zoom-on-Hover Effect */
.swiper-slide figure {
    overflow: hidden;
    border-radius: 8px;
}
.swiper-slide figure img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
    width: 100%;
}
.swiper-slide figure:hover img {
    transform: scale(1.15);
}

/* 6. Claire Balkind Testimonial Typography */
.testimonial-card .name {
    font-size: 18px;
    font-weight: 700;
}

/* 7. Product Shop Grid & Hover Indicators */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.product-price {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-blue);
}

/* Product Card Button Hovers */
.btn-add-to-cart {
    background-color: var(--color-orange);
    color: var(--color-bg-white);
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}
.btn-add-to-cart:hover {
    background-color: var(--color-blue);
}

/* 8. Product Stock Status Alert Colors */
.stock-status.in-stock {
    color: var(--color-blue);
    font-weight: 600;
}
.stock-status.low-stock {
    color: var(--color-orange);
    background-color: rgba(242, 119, 86, 0.1);
    border-left: 4px solid var(--color-orange);
    padding: 8px 12px;
}

/* 9. Free Resources Page Styling */
.crinkle-paper-box {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35);
    background-blend-mode: multiply;
    background-color: var(--color-bg-white);
    padding: 30px;
    border-radius: 12px;
}
.crinkle-paper-box.orange-accent {
    background-color: var(--color-orange);
}

/* Folder "Coming Soon" Hover overlay */
.diagnostic-folder-coming-soon {
    position: relative;
    cursor: not-allowed;
}
.diagnostic-folder-coming-soon::after {
    content: "Coming Soon";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 10;
}
.diagnostic-folder-coming-soon:hover::after {
    opacity: 1;
}

/* 10. About Us Page Banner Watermark Opacity */
.about-us-banner-bg {
    opacity: 0.85;
}

/* 11. Custom Forms Typography (Get in Touch / Report an Error) */
.form-group label {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-purple);
}

/* Custom Success Toast Modals */
.form-success-toast {
    font-size: 18px;
    padding: 20px 30px;
    border-radius: 12px;
    background-color: var(--color-blue);
    color: var(--color-bg-white);
}

/* 12. circular Paginated Numbers for Blog / Articles Page */
.pagination {
    display: flex;
    gap: 8px;
}
.pagination-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-purple);
    color: var(--color-purple);
    text-decoration: none;
    font-weight: bold;
}
.pagination-dot.active {
    background-color: var(--color-purple);
    color: var(--color-bg-white);
}

/* 13. Subject / Year Group Interactive Hover Colors (Maths) */
.year-tab.maths-reception:hover { color: var(--maths-color-reception) !important; }
.year-tab.maths-y1:hover { color: var(--maths-color-y1) !important; }
.year-tab.maths-y2:hover { color: var(--maths-color-y2) !important; }
.year-tab.maths-y3:hover { color: var(--maths-color-y3) !important; }
.year-tab.maths-y4:hover { color: var(--maths-color-y4) !important; }
.year-tab.maths-y5:hover { color: var(--maths-color-y5) !important; }
.year-tab.maths-y6:hover { color: var(--maths-color-y6) !important; }
.year-tab.maths-y7:hover { color: var(--maths-color-y7) !important; }
.year-tab.maths-y8:hover { color: var(--maths-color-y8) !important; }
.year-tab.maths-y9:hover { color: var(--maths-color-y9) !important; }

/* Subject / Year Group Interactive Hover Colors (English) */
.year-tab.english-reception:hover { color: var(--english-color-reception) !important; }
.year-tab.english-y1:hover { color: var(--english-color-y1) !important; }
.year-tab.english-y2:hover { color: var(--english-color-y2) !important; }
.year-tab.english-y3:hover { color: var(--english-color-y3) !important; }
.year-tab.english-y4:hover { color: var(--english-color-y4) !important; }
.year-tab.english-y5:hover { color: var(--english-color-y5) !important; }
.year-tab.english-y6:hover { color: var(--english-color-y6) !important; }
.year-tab.english-y7:hover { color: var(--english-color-y7) !important; }
.year-tab.english-y8:hover { color: var(--english-color-y8) !important; }
.year-tab.english-y9:hover { color: var(--english-color-y9) !important; }

/* GLOBAL FOOTER PURPLE BACKGROUND & TESTIMONIALS PADDING */
.footer-site,
.page-home .footer-site {
    background-color: #87246A !important;
    color: #ffffff !important;
    position: relative;
    top: 0 !important;
}

.page-home .section-why-choose-us {
    padding-bottom: 240px !important;
}

.page-home .section-testimonials {
    padding-bottom: 40px !important;
    min-height: auto !important;
}

.page-home .section-video {
    overflow: visible !important;
    position: relative !important;
    z-index: 20 !important;
    padding: 120px 0 !important;
    min-height: 500px !important;
}

/* SHOP HERO BANNER - CENTERING & ABSOLUTE FLUSH SIDE GRAPHICS */
.shop-hero-banner {
    position: relative !important;
    height: 333px !important;
    min-height: 333px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.shop-hero-banner .container {
    position: relative !important;
    z-index: 5 !important;
    max-width: 650px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.shop-banner-decor {
    position: absolute !important;
    top: 0 !important;
    height: 100% !important;
    width: auto !important;
    max-width: 38% !important;
    object-fit: contain !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.shop-banner-decor.left-decor {
    left: 0 !important;
    object-position: left center !important;
}

.shop-banner-decor.right-decor {
    right: 0 !important;
    object-position: right center !important;
}


/* ENGLISH SHOP BANNER ALL TEXT WHITE */
.shop-hero-banner.english-banner,
.shop-hero-banner.english-banner h1,
.shop-hero-banner.english-banner .shop-breadcrumb,
.shop-hero-banner.english-banner .shop-breadcrumb a,
.shop-hero-banner.english-banner .shop-breadcrumb span {
    color: #ffffff !important;
}

/* HARDWARE ACCELERATED CAROUSEL SMOOTHNESS */
.hero-slides-wrapper,
.audience-carousel-track,
.testi-carousel-track,
.shop-carousel-track {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* WAVE POSITIONING: TOP OF WAVE TIED TO BOTTOM OF PRECEDING SECTION */
.page-home .section-video .section-wave-top,
.page-home .section-articles .section-wave-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(0%) !important;
    line-height: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* HERO SLIDER & SHOP BANNERS FIGMA EXACT COLORS & WATERMARK OPACITY */
.page-home .hero-section {
    background-color: #B5AB92 !important;
}

.page-home .hero-section::before {
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    opacity: 0.18 !important;
}

.shop-hero-banner::before {
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    opacity: 0.18 !important;
}

.shop-hero-banner.maths-banner {
    background: #23A9BC !important;
}

.shop-hero-banner.english-banner {
    background: #F5B41A !important;
}

/* CAROUSEL SLIDE TRANSITION DURATION (0.65s SLOWER & SMOOTHER) */
.hero-slides-wrapper,
.audience-carousel-track,
.testi-carousel-track,
.shop-carousel-track,
.page-home .hero-slides-wrapper {
    transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* HOMEPAGE CAROUSEL #C7BDA2 & BRANDMARK TRANSPARENCY 0.08 */
.page-home .hero-section {
    background-color: #C7BDA2 !important;
    background: #C7BDA2 !important;
}

.page-home .hero-section::before {
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    opacity: 0.08 !important;
}

/* MATHS SHOP BANNER #23A9BC */
.shop-hero-banner.maths-banner {
    background-color: #23A9BC !important;
    background: #23A9BC !important;
}

/* ENGLISH SHOP BANNER #F5B41A */
.shop-hero-banner.english-banner {
    background-color: #F5B41A !important;
    background: #F5B41A !important;
    color: #ffffff !important;
}

/* SHOP BANNER BRANDMARK WATERMARK TRANSPARENCY 0.08 */
.shop-hero-banner::before {
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    opacity: 0.08 !important;
}

/* HEADER LOGO CONTAINER & IMAGE HEIGHT LOCK (PREVENT SPICING INTO TOP-BAR) */
.main-header .logo-brand {
    display: inline-flex !important;
    align-items: center !important;
    max-height: 55px !important;
    overflow: hidden !important;
}

.main-header .header-logo-img {
    height: 52px !important;
    max-height: 52px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* SINGLE PRODUCT HERO BANNER & BREADCRUMBS ALL 100% WHITE */
.page-single-product .shop-hero-banner h1,
.page-single-product .product-breadcrumb,
.page-single-product .product-breadcrumb *,
.page-single-product .product-breadcrumb a,
.page-single-product .product-breadcrumb span,
.page-single-product .woocommerce-breadcrumb,
.page-single-product .woocommerce-breadcrumb *,
.page-single-product .woocommerce-breadcrumb a,
.page-single-product .woocommerce-breadcrumb span,
.shop-hero-banner .shop-breadcrumb,
.shop-hero-banner .shop-breadcrumb *,
.shop-hero-banner .shop-breadcrumb a,
.shop-hero-banner .shop-breadcrumb span {
    color: #ffffff !important;
}

/* MATHS SHOP BANNER COLOR MATCH SVG SIDE GRAPHICS (#199EB3) */
.shop-hero-banner.maths-banner {
    background-color: #199EB3 !important;
    background: #199EB3 !important;
}

/* ENGLISH SHOP BANNER COLOR MATCH SVG SIDE GRAPHICS (#F5B41A) */
.shop-hero-banner.english-banner {
    background-color: #F5B41A !important;
    background: #F5B41A !important;
    color: #ffffff !important;
}



/* EXACT FIGMA BANNER COLORS & BALANCED WATERMARK OPACITY (0.12) */
.page-home .hero-section {
    background-color: #C7BDA2 !important;
    background: #C7BDA2 !important;
}

.page-home .hero-section::before {
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    opacity: 0.12 !important;
}

/* FIGMA MATHS SHOP BANNER MATCH SVG (#199EB3) */
.shop-hero-banner.maths-banner {
    background-color: #199EB3 !important;
    background: #199EB3 !important;
}

/* FIGMA ENGLISH SHOP BANNER MATCH SVG (#F5B41A) */
.shop-hero-banner.english-banner {
    background-color: #F5B41A !important;
    background: #F5B41A !important;
    color: #ffffff !important;
}

/* WATERMARK OPACITY BALANCED (0.12) */
.shop-hero-banner::before {
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    opacity: 0.12 !important;
}

/* SINGLE PRODUCT BREADCRUMBS ALL 100% SOLID WHITE */
.page-single-product .shop-hero-banner h1,
.page-single-product .product-breadcrumb,
.page-single-product .product-breadcrumb *,
.page-single-product .product-breadcrumb a,
.page-single-product .product-breadcrumb span,
.page-single-product .woocommerce-breadcrumb,
.page-single-product .woocommerce-breadcrumb *,
.page-single-product .woocommerce-breadcrumb a,
.page-single-product .woocommerce-breadcrumb span,
.shop-hero-banner .shop-breadcrumb,
.shop-hero-banner .shop-breadcrumb *,
.shop-hero-banner .shop-breadcrumb a,
.shop-hero-banner .shop-breadcrumb span {
    color: #ffffff !important;
}

/* ENGLISH SHOP BANNER EXACT FIGMA WATERMARK (DARKER GOLDEN TONE OVERLAY ON #F5B41A) */
.shop-hero-banner.english-banner {
    background-color: #F5B41A !important;
    background: #F5B41A !important;
    color: #ffffff !important;
}

.shop-hero-banner.english-banner::before {
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    filter: brightness(0.55) sepia(1) hue-rotate(355deg) saturate(6) !important;
    opacity: 0.22 !important;
}

/* FIGMA TAPED POST-IT NOTE GRAPHIC IN SHOP BANNER CORNER */
.shop-banner-postit {
    position: absolute !important;
    bottom: -35px !important;
    right: 5% !important;
    height: 60px !important;
    width: auto !important;
    z-index: 10 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
}

@media (max-width: 768px) {
    .shop-banner-postit {
        height: 75px !important;
        bottom: -20px !important;
        right: 2% !important;
    }
}

/* BANNER COLORS BACK TO #23A9BC & #F5B41A */
.shop-hero-banner.maths-banner {
    background-color: #23A9BC !important;
    background: #23A9BC !important;
}

.shop-hero-banner.english-banner {
    background-color: #F5B41A !important;
    background: #F5B41A !important;
    color: #ffffff !important;
}

/* FIGMA HEADLINE FULL CONTENT SPAN & FAR-RIGHT POST-IT NOTE */
.shop-lpc-showcase .headline-container {
    position: relative !important;
    margin-bottom: 40px !important;
}

.shop-lpc-showcase .lpc-main-headline {
    max-width: 74% !important;
    font-size: 23px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

.figma-postit-img {
    position: absolute !important;
    top: -85px !important;
    right: -25px !important;
    width: 290px !important;
    height: auto !important;
    z-index: 20 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.12));
}

.warning-sticky-note {
    display: none !important;
}

@media (max-width: 992px) {
    .figma-postit-img {
        width: 220px !important;
        top: -40px !important;
        right: 0 !important;
    }
}

@media (max-width: 600px) {
    .figma-postit-img {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        margin: 20px auto 0 auto !important;
        display: block !important;
        width: 240px !important;
    }
}

/* OVERRIDE HEADLINE CONTAINER TO BE FULL-WIDTH LEFT-ALIGNED (SPANNING CONTENT) */
.shop-lpc-showcase .headline-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 36px 0 !important;
    text-align: left !important;
    position: relative !important;
    display: block !important;
}

.shop-lpc-showcase .lpc-main-headline {
    width: 76% !important;
    max-width: 76% !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    color: #183B47 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    margin: 0 !important;
}

.figma-postit-img {
    position: absolute !important;
    top: -85px !important;
    right: 0 !important;
    width: 285px !important;
    height: auto !important;
    z-index: 20 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.12));
}

/* EXACT USER REQUESTED BANNERS (ENGLISH #F5B41A, MATHS #23A9BC) WITH SCREEN BLEND BRANDMARKS */
.shop-hero-banner.maths-banner {
    background-color: #23A9BC !important;
    background: #23A9BC !important;
}

.shop-hero-banner.english-banner {
    background-color: #F5B41A !important;
    background: #F5B41A !important;
    color: #ffffff !important;
}

/* SOFT SUBTLE WHITE BRANDMARK LOGOS (OPACITY: 0.08) */
.shop-hero-banner::before,
.page-articles .policy-hero-banner::before,
.shop-hero-banner.english-banner::before,
.shop-hero-banner.maths-banner::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    opacity: 0.08 !important;
    mix-blend-mode: screen !important;
    filter: none !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* POST-IT NOTE SHIFTED UP HIGH SO IT NEVER COVERS TEXT (-120px) */
.figma-postit-img {
    position: absolute !important;
    top: -180px !important;
    right: -10px !important;
    width: 280px !important;
    height: auto !important;
    z-index: 20 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.12));
}

/* =============================================================
   60FPS GPU HARDWARE ACCELERATION & SMOOTH PERFORMANCE ENGINE
   ============================================================= */

/* 1. Global smooth scrolling & font rendering acceleration */
html {
    scroll-behavior: smooth !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* 2. GPU Layer Promotion for Headers, Hero Banners, Waves & Cards */
.site-header,
.main-header,
.hero-section,
.shop-hero-banner,
.section-wave-top,
.section-wave-bottom,
.figma-postit-img,
.shop-banner-decor,
.product-card,
.article-card,
.testimonial-card,
.hero-slide {
    transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
}

/* 3. Hardware-Accelerated Smooth Carousel Transitions (JS Unlocked) */
.hero-slides-wrapper,
.carousel-track {
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    backface-visibility: hidden;
}

/* 4. Disable heavy mix-blend-mode compositing on scroll layers */
.shop-hero-banner,
.hero-section,
.section-video,
.section-articles,
.section-testimonials {
    mix-blend-mode: normal !important;
    isolation: isolate !important;
}

/* 5. Optimize hover transitions for smooth 60fps response */
.product-card,
.btn,
.nav-link,
.hero-dot,
.carousel-arrow {
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease, box-shadow 0.25s ease !important;
}

/* REMOVE NOISY SCRUNCHED PAPER OVERLAYS FROM HOMEPAGE SECTIONS & WAVES FOR PURE FIGMA SVGs */

.page-home .section-whychooseus::before,
.page-home .section-video::before,

.page-home .section-articles::before,
.page-home .scrunched-paper-overlay {
    display: none !important;
    background-image: none !important;
    content: none !important;
    opacity: 0 !important;
}



/* TESTIMONIALS TOP WAVE RENDERS ON TOP (Z-INDEX 15) WITH FULL SVG TEXTURE VISIBLE */
.page-home .section-testimonials .section-wave-top {
    position: relative !important;
    z-index: 15 !important;
    pointer-events: none !important;
}


/* UNLOCKED TESTIMONIALS SCRUNCHED PAPER OPACITY (VARIABLE & DIRECT OVERRIDE) */
:root,
.page-home .section-testimonials {
    --testimonials-paper-opacity: 0.081 !important; /* <--- CHANGE THIS VALUE (0.05 = subtle, 0.20 = medium, 0.50 = strong) */
    position: relative !important;
}

.page-home .section-testimonials::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('images/scrunched_paper.png') !important;
    background-size: 1728px auto !important;
    background-repeat: repeat !important;
    opacity: var(--testimonials-paper-opacity, 0.20) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* MOVE TESTIMONIALS SECTION CONTENT UP */
.page-home .section-testimonials {
    padding-top: 200px !important;
}

.page-home .section-testimonials .container {
    margin-top: -200px !important;
}

.page-home .testimonials-header-wrap {
    margin-bottom: 35px !important; /* Reduced bottom gap under title */
}

.page-home .section-articles {
    padding-top: 320px !important;
}

/* VIDEO SECTION ULTRA-WIDE RESPONSIVE STRETCH LOCK */
.page-home .section-video {
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    /* Scale padding and section min-height with viewport width so top/bottom waves never squish middle content */
    padding: clamp(160px, 12vw, 280px) 0 !important;
    min-height: clamp(540px, 42vw, 850px) !important;
}

/* Ensure Video Container Content Always Retains Full Breathing Room & Visibility */
.page-home .section-video .container,
.page-home .video-banner-container,
.page-home .video-content-wrap {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 !important;
    padding: 20px !important;
}

/* GUARANTEE ALL SECTION WAVE SVGS STRETCH 100% FULL-BLEED SIDE-TO-SIDE ACROSS ALL SCREENS */
.page-home .section-wave-top,
.page-home .section-wave-bottom {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow: visible !important;
}

.page-home .section-wave-svg,
.page-home .section-wave-svg--video,
.page-home .section-wave-svg--whychooseus,
.page-home .section-wave-svg--audience,
.page-home .section-wave-svg--testimonials,
.page-home /* =========================================================
   FLIP ARTICLES WAVE UPSIDE DOWN & MATCH TESTIMONIALS WAVE (#1C3D4E, 0.44 OPACITY)
========================================================= */
/* =========================================================
   ROTATE ARTICLES WAVE 180 DEGREES (MATCHING TESTIMONIALS WAVE)
========================================================= */
.section-wave-svg--articles {
    transform: none !important;
    opacity: 1 !important;
}

/* Dynamic proportional section expansion so middle video content is never squished */
.page-home .section-video {
    padding: clamp(180px, 13.5vw, 340px) 0 !important;
    min-height: clamp(560px, 45vw, 1500px) !important;
}

/* AUDIENCE SECTION SCRUNCHED PAPER TEXTURE OVERLAY */
.page-home .section-audience .section-wave-top {
    position: relative !important;
    z-index: 15 !important;
    pointer-events: none !important;
}

:root,
.page-home .section-audience {
    --audience-paper-opacity: 0.15 !important; /* <--- CHANGE THIS VALUE (0.05 = subtle, 0.25 = medium, 0.50 = strong) */
    position: relative !important;
}

.page-home .section-audience::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('images/scrunched_paper.png') !important;
    background-size: 1728px auto !important;
    background-repeat: repeat !important;
    opacity: var(--audience-paper-opacity, 0.25) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.page-home .section-audience .container {
    position: relative !important;
    z-index: 10 !important;
    top: -300px;
    max-height: 550px;
}

.page-home .section-why-choose-us .container {
    position: relative !important;
    z-index: 10 !important;
    top: -100px;
}

/* HEADER ENGLISH SHOP BUTTON: WHITE TEXT, YELLOW ON HOVER */
.nav-link.btn-
english,
.site-header .btn-tab-english,
.main-nav .btn-tab-english,
.header-navigation .btn-tab-english {
    color: #ffffff !important;
    transition: color 0.25s ease, background-color 0.25s ease !important;
}

.nav-link.btn-tab-english:hover,
.site-header .btn-tab-english:hover,
.main-nav .btn-tab-english:hover,
.header-navigation .btn-tab-english:hover {
    color: #F5B41A !important; /* Yellow on hover */
}

/* LOCK BOTTOM OF TESTIMONIALS WAVE TO TOP OF TESTIMONIALS SECTION */
.page-home .section-testimonials {
    position: relative !important;
    overflow: visible !important;
}

.page-home .section-testimonials .section-wave-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(-99%) !important; /* Locks bottom edge of wave to top of section */
    z-index: 15 !important;
    pointer-events: none !important;
}

.page-home .section-wave-svg--testimonials {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    min-width: 100% !important;
    display: block !important;
}

/* =========================================================
   60FPS GPU HARDWARE ACCELERATION ENGINE: CART & CAROUSEL
========================================================= */

/* 1. ULTRA-SMOOTH CART DRAWER (GPU TRANSFORM SLIDE-IN, 0% REFLOW) */
.cart-drawer-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.55) !important;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: opacity;
}

.cart-drawer-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 440px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    transform: translate3d(100%, 0, 0) !important;
    will-change: transform !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.cart-drawer-overlay.active .cart-drawer-panel {
    transform: translate3d(0, 0, 0) !important;
}

/* 2. SILKY-SMOOTH 60FPS HERO CAROUSEL SLIDER */
.page-home .hero-slides-wrapper,
.hero-slides-wrapper {
    display: flex !important;
    will-change: transform !important;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.hero-slide {
    transform: none !important;
    backface-visibility: visible !important;
    perspective: none !important;
}

/* PURE 60FPS GPU CART DRAWER SLIDE (ZERO REFLOW / DUAL TRANSITION CONFLICT) */
.cart-drawer-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.50) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
    will-change: opacity !important;
}

.cart-drawer-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.cart-drawer-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 440px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    transform: translate3d(100%, 0, 0) !important;
    will-change: transform !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    contain: layout style !important;
}

.cart-drawer-overlay.active .cart-drawer-panel {
    transform: translate3d(0, 0, 0) !important;
}

/* =========================================================
   FIGMA MY ACCOUNT SIDEBAR NAVIGATION STYLING
========================================================= */
/* LOGGED IN MY ACCOUNT GRID (SIDEBAR LEFT, CONTENT RIGHT - DESKTOP ONLY) */
@media (min-width: 992px) {
    .logged-in.woocommerce-account .woocommerce,
    .logged-in.page-template-default.woocommerce-account .woocommerce,
    .logged-in.page-my-account .woocommerce,
    .logged-in.woocommerce-page.woocommerce-account .woocommerce {
        display: grid !important;
        grid-template-columns: 260px 1fr !important;
        gap: 32px !important;
        align-items: start !important;
        max-width: 1240px !important;
        margin: 0 !important;
        padding: 40px 20px !important;
    }
}

/* LOGGED OUT LOGIN / CREATE ACCOUNT PAGE (CENTERED 2-COLUMN CARDS GRID) */
.woocommerce-account:not(.logged-in) .woocommerce,
.page-my-account:not(.logged-in) .woocommerce {
    display: block !important;
    width: 100% !important;
    max-width: 1040px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
}

.woocommerce-account:not(.logged-in) .account-cards-grid,
#customer_login.account-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px !important;
    width: 100% !important;
    max-width: 1040px !important;
    margin: 0 !important;
}

@media (max-width: 860px) {
    .woocommerce-account:not(.logged-in) .account-cards-grid,
    #customer_login.account-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

.auth-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 36px 32px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(200, 215, 225, 0.6) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.btn-social {
    width: 100% !important;
    height: 46px !important;
    padding: 0 16px !important;
    border-radius: 30px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.auth-form .auth-input,
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

@media (max-width: 850px) {
    .woocommerce-account .woocommerce,
    .page-template-default.woocommerce-account .woocommerce,
    .page-my-account .woocommerce,
    .woocommerce-page.woocommerce-account .woocommerce {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

.woocommerce-MyAccount-navigation {
    background: transparent !important;
    width: 100% !important;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.woocommerce-MyAccount-navigation li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-MyAccount-navigation li::before,
.woocommerce-MyAccount-navigation li::after {
    content: none !important;
    display: none !important;
}

.woocommerce-MyAccount-navigation a {
    display: block !important;
    padding: 13px 20px !important;
    border-radius: 12px !important;
    color: #751E5B !important;
    font-family: var(--font-heading, sans-serif) !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(117, 30, 91, 0.08) !important;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover {
    background-color: #751E5B !important;
    color: #ffffff !important;
    border-color: #751E5B !important;
    box-shadow: 0 6px 18px rgba(117, 30, 91, 0.25) !important;
    transform: translateX(3px) !important;
}

.woocommerce-MyAccount-content {
    width: 100% !important;
}


/* =========================================================
   PURE 60FPS GPU CART DRAWER (0% BACKDROP BLUR, INSTANT MOTION)
========================================================= */
.cart-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
    will-change: opacity !important;
}

.cart-drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.cart-drawer-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 440px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    background-color: var(--figma-drawer-bg, #751E5B) !important;
    color: #ffffff !important;
    z-index: 1000000 !important;
    box-shadow: -10px 0 35px rgba(0,0,0,0.3) !important;
    transform: translate3d(100%, 0, 0) !important;
    will-change: transform !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.cart-drawer-overlay.active .cart-drawer-panel {
    transform: translate3d(0, 0, 0) !important;
}

/* FORCE MY ACCOUNT SIDEBAR NAVIGATION ON LEFT (ORDER: 1) AND CONTENT ON RIGHT (ORDER: 2) */
.woocommerce-MyAccount-navigation {
    order: 1 !important;
    grid-column: 1 !important;
}

.woocommerce-MyAccount-content {
    order: 2 !important;
    grid-column: 2 !important;
}

@media (max-width: 850px) {
    .woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-content {
        grid-column: auto !important;
    }
}

/* =========================================================
   HOMEPAGE CAROUSEL #C7BDA2 BACKGROUND & 0.08 SCREEN BLEND BRANDMARK
========================================================= */
.page-home .hero-section {
    background-color: #C7BDA2 !important;
    background: #C7BDA2 !important;
}

.page-home .hero-section::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    opacity: 0.08 !important;
    mix-blend-mode: screen !important;
    filter: none !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* =========================================================
   FIGMA EXACT BRANDMARK GRID TILING & EQUAL X/Y AXIS GAPS (125px x 125px)
========================================================= */
.page-home .hero-section::before,
.shop-hero-banner::before,
.page-articles .policy-hero-banner::before,
.shop-hero-banner.english-banner::before,
.shop-hero-banner.maths-banner::before {
    background-size: 205px 205px !important;
    background-repeat: repeat !important;
}

/* =========================================================
   ALL PAGE HEADER BANNERS: 0.08 SCREEN BLEND BRANDMARK (ZERO COLOR ALTERATION)
========================================================= */
.shop-hero-banner::before,
.page-articles .policy-hero-banner::before,
.resources-hero-banner::before,
.about-hero-banner::before,
.methodology-hero-banner::before,
.single-res-hero-banner::before,
.page-home .hero-section::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    opacity: 0.08 !important;
    mix-blend-mode: screen !important;
    filter: none !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.shop-column-header {
    justify-content: flex-start !important;
}

/* =========================================================
   EXACT 205PX X 205PX BRANDMARK SIZE ACROSS ALL SECTIONS & HEADERS
========================================================= */
.page-home .hero-section::before,
.shop-hero-banner::before,
.page-articles .policy-hero-banner::before,
.shop-hero-banner.english-banner::before,
.shop-hero-banner.maths-banner::before,
.resources-hero-banner::before,
.about-hero-banner::before,
.methodology-hero-banner::before,
.single-res-hero-banner::before {
    background-size: 205px 205px !important;
    background-repeat: repeat !important;
}

/* =========================================================
   420PX HEIGHT FOR TITLE SECTIONS ON DESKTOP ONLY
========================================================= */
@media (min-width: 992px) {
    .about-hero-banner,
    .resources-hero-banner,
    .methodology-hero-banner,
    .page-about .about-hero-banner,
    .page-resources .resources-hero-banner,
    .page-methodology .methodology-hero-banner,
    .page-articles .policy-hero-banner,
    .page-articles .articles-hero-banner {
        min-height: 420px !important;
        height: 420px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
}

.about-hero-banner .container,
.resources-hero-banner .container,
.methodology-hero-banner .container,
.policy-hero-banner .container {
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================
   1. PREVENT RIGHT-SIDE BLANK OVERFLOW & HIDE MOBILE DRAWER ON DESKTOP
========================================================= */
html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
}

@media (min-width: 992px) {
    .mobile-navigation-drawer,
    .mobile-navigation-drawer * {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

.mobile-navigation-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 320px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    transform: translate3d(100%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
    z-index: 99999 !important;
}

.mobile-navigation-drawer.active {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* =========================================================
   2. 420PX HEIGHT FOR ALL TITLE SECTIONS (DESKTOP ONLY)
========================================================= */
@media (min-width: 992px) {
    .about-hero-banner,
    .resources-hero-banner,
    .methodology-hero-banner,
    .policy-hero-banner,
    .articles-hero-banner,
    .page-about .about-hero-banner,
    .page-resources .resources-hero-banner,
    .page-methodology .methodology-hero-banner,
    .page-articles .policy-hero-banner,
    .page-articles .articles-hero-banner {
        min-height: 420px !important;
        height: 420px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
}

.about-hero-banner .container,
.resources-hero-banner .container,
.methodology-hero-banner .container,
.policy-hero-banner .container {
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================
   ABOUT US PAGE UNLOCKED SCRUNCHED PAPER TEXTURE OPACITY (0.081)
========================================================= */
:root {
    --about-paper-opacity: 0.4;
}

.page-about .section-about-story::before,
.page-about .section-about-values::before,
.page-about .scrunched-paper-overlay {
    opacity: var(--about-paper-opacity) !important;
}

/* =========================================================
   ABOUT US WAVES: VISION WAVE & VALUES WAVE POSITION LOCK
========================================================= */
.page-about .section-about-story,
.page-about .section-about-impact {
    position: relative !important;
    overflow: visible !important;
}

.page-about .section-wave-bottom.section-wave--vision,
.page-about .section-wave-bottom.section-wave--values {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    transform: translateY(99%) !important; /* Locks top edge of wave flush to bottom of section */
    z-index: 15 !important;
    pointer-events: none !important;
}

.page-about .section-wave-svg--vision,
.page-about .section-wave-svg--values {
    position: relative !important;
    width: 100% !important;
    min-width: 100% !important;
    display: block !important;
    max-width: none !important;
}

.page-about .section-about-impact {
    padding-top: 320px !important;
}

.page-about .section-about-values {
    padding-top: 320px !important;
}

/* =========================================================
   IMPACT SECTION BUTTON HOVER COLOR STATES (MATCHING FIGMA SPEC)
========================================================= */
.page-about .btn-impact-purple {
    background-color: #A14389 !important;
    color: #ffffff !important;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.page-about .btn-impact-purple:hover {
    background-color: #751E5B !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(117, 30, 91, 0.3) !important;
}

.page-about .btn-impact-teal {
    background-color: #23A9BC !important;
    color: #ffffff !important;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.page-about .btn-impact-teal:hover {
    background-color: #188595 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(24, 133, 149, 0.3) !important;
}

.page-about .btn-impact-yellow {
    background-color: #F7BA2A !important;
    color: #ffffff !important;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.page-about .btn-impact-yellow:hover {
    background-color: #D69509 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(214, 149, 9, 0.3) !important;
}

/* =========================================================
   VALUES SECTION STICKY NOTES VECTOR SVGS (valuesnote1-4.svg)
========================================================= */
.page-about .values-notes-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
    margin-top: 40px !important;
}

@media (max-width: 991px) {
    .page-about .values-notes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 550px) {
    .page-about .values-notes-grid {
        grid-template-columns: 1fr !important;
    }
}

.page-about .sticky-note-img-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ABOUT US PAGE: POST-IT STICKY NOTES SPECIFIC ROTATIONS */
html body .page-about .note-yellow,
html body .page-about .note-orange,
body .page-about .note-yellow,
body .page-about .note-orange,
.page-about .note-yellow,
.page-about .note-orange {
    transform: rotate(-172.69deg) !important;
}

html body .page-about .note-pink,
html body .page-about .note-blue,
body .page-about .note-pink,
body .page-about .note-blue,
.page-about .note-pink,
.page-about .note-blue {
    transform: rotate(-9.76deg) !important;
}

.page-about .values-note-svg {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease !important;
}

/* POST-IT IMAGE HOVER SCALE & LIFT */
html body .page-about .sticky-note-img-wrap:hover .values-note-svg,
body .page-about .sticky-note-img-wrap:hover .values-note-svg,
.page-about .sticky-note-img-wrap:hover .values-note-svg {
    transform: scale(1.08) translateY(-8px) !important;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.3)) !important;
}

/* POST-IT TEXT OVERLAY (WHITE TEXT, CENTERED & CONSTRAINED) */
.page-about .postit-text-overlay {
    position: absolute !important;
    top: 8% !important;
    left: 8% !important;
    right: 8% !important;
    bottom: 8% !important;
    width: 84% !important;
    height: 84% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    z-index: 5 !important;
    overflow: hidden !important;
    word-break: break-word !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Pink and Blue Text Overlay Hover Scale & Lift */
html body .page-about .note-pink:hover .postit-text-overlay,
html body .page-about .note-blue:hover .postit-text-overlay,
body .page-about .note-pink:hover .postit-text-overlay,
body .page-about .note-blue:hover .postit-text-overlay,
.page-about .note-pink:hover .postit-text-overlay,
.page-about .note-blue:hover .postit-text-overlay {
    transform: scale(1.08) translateY(-8px) !important;
}

/* Yellow and Orange Post-it Text 180deg Rotation & Upward Shift in Normal State */
html body .page-about .note-yellow .postit-text-overlay,
html body .page-about .note-orange .postit-text-overlay,
body .page-about .note-yellow .postit-text-overlay,
body .page-about .note-orange .postit-text-overlay,
.page-about .note-yellow .postit-text-overlay,
.page-about .note-orange .postit-text-overlay {
    transform: rotate(180deg) translateY(-16px) !important;
}

/* Yellow and Orange Text Overlay Hover Scale & Synchronized Lift */
html body .page-about .note-yellow:hover .postit-text-overlay,
html body .page-about .note-orange:hover .postit-text-overlay,
body .page-about .note-yellow:hover .postit-text-overlay,
body .page-about .note-orange:hover .postit-text-overlay,
.page-about .note-yellow:hover .postit-text-overlay,
.page-about .note-orange:hover .postit-text-overlay {
    transform: rotate(180deg) translateY(-16px) scale(1.08) translateY(8px) !important;
}

.page-about .postit-title {
    font-family: var(--font-heading, 'Lexend', sans-serif) !important;
    font-size: 28.46px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.page-about .postit-body {
    font-family: var(--font-lexend, 'Lexend', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* =========================================================
   SITEWIDE UNIFIED FONT SYSTEM: LEXEND (SEMIBOLD 600) & ROCK SALT
========================================================= */
:root {
    --font-primary: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-lexend: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-script: 'Rock Salt', cursive;
}

/* 1. Global Lexend Body Copy */
body, p, li, a, input, button, select, textarea {
    font-family: var(--font-primary) !important;
}

/* 2. All Headings & Titles in Lexend SemiBold (600) */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .page-title, .card-title,
.shop-column-title-label, .btn-shop-all, .nav-link,
[class*="title"], [class*="heading"] {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
}

/* 3. Script & Handwritten Accents in Rock Salt */
.script-title, .script-prefix, .handwritten, .script-accent,
[class*="script"] {
    font-family: var(--font-script) !important;
    font-weight: 400 !important;
}

/* =========================================================
   REMOVE BRANDMARK PATTERN OVERLAY FROM ALL ARTICLES
========================================================= */
.page-articles .page-articles .articles-hero-banner::before,

.single-post .single-post .hero-banner::before,


.article-card-figma::before,
.article-hero::before {
    background-image: none !important;
    display: none !important;
    content: none !important;
}

/* =========================================================
   PERMANENTLY REMOVE BRANDMARK FROM ALL ARTICLE HERO BANNERS & POLICY BANNERS
========================================================= */
.policy-hero-banner::before,
.no-watermark::before,
.page-articles .policy-hero-banner::before,
.single-post .policy-hero-banner::before,
.single-article .policy-hero-banner::before,
[class*="policy-hero-banner"]::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

/* =========================================================
   RESTORE BRANDMARK ON ARTICLES MAIN PAGE HEADER
========================================================= */
.page-articles 

/* =========================================================
   TITLE FONTS SPECIFICATION: "The AUDIENCE" & "Why CHOOSE Us"
========================================================= */

/* 1. "The AUDIENCE": 'The' = Lexend SemiBold (600), 'AUDIENCE' = Rock Salt */
.audience-main-title .script-the,
.section-audience .script-the {
    font-family: var(--font-lexend) !important;
    font-weight: 600 !important;
}
.audience-main-title .script-audience,
.section-audience .script-audience {
    font-family: var(--font-script) !important;
    font-weight: 400 !important;
}

/* 2. "Why CHOOSE Us": 'Why' & 'Us' = Lexend SemiBold (600), 'CHOOSE' = Rock Salt */
.why-main-title .script-why,
.section-why-choose-us .script-why,
.why-main-title .script-us,
.section-why-choose-us .script-us {
    font-family: var(--font-lexend) !important;
    font-weight: 600 !important;
}

.why-main-title .title-choose,
.section-why-choose-us .title-choose {
    font-family: var(--font-script) !important;
    font-weight: 400 !important;
}

/* =========================================================
   TESTIMONIALS HOMEPAGE TITLE: THICK BOLD ROCK SALT
========================================================= */
.testimonials-main-title,
.page-home .testimonials-main-title {
    font-family: var(--font-script) !important;
    font-size: 42px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0.15px rgba(255, 255, 255, 0.3) !important;
}

/* Ensure all Rock Salt script elements render with rich thickness */
.script-title, .script-prefix, .handwritten, .script-accent,
[class*="script"], .title-choose, .script-audience {
    font-family: var(--font-script) !important;
    font-weight: 600 !important;
    text-shadow: 0 0 0.5px currentColor !important;
}

/* =========================================================
   NATURAL UNCLIPPED DROP SHADOWS SITEWIDE
========================================================= */

/* 1. Prevent overflow clipping on all card containers & carousel wrappers */
.shop-carousel-wrapper,
.shop-column-card,
.shop-column-grid,
.audience-carousel-wrapper,
.audience-grid-figma,
.testi-carousel-wrapper,
.testi-slider-col,
.testimonials-rows-container,
.product-card-figma,
.audience-card-figma,
.testi-card-figma,
.impact-card,
.sticky-note-card,
.sticky-note-img-wrap,
.article-card-figma,
.single-res-card {
    overflow: visible !important;
}

/* 2. Provide ample bottom padding for drop shadows before pagination dots & section edges */
.shop-carousel-wrapper,
.audience-carousel-wrapper,
.testi-carousel-wrapper,
.testimonials-rows-container {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
}

/* 3. Soft, natural multi-layered ambient shadows sitewide */
.product-card-figma,
.audience-card-figma,
.testi-card-figma,
.impact-card,
.sticky-note-card,
.article-card-figma {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}

.product-card-figma:hover,
.audience-card-figma:hover,
.testi-card-figma:hover,
.article-card-figma:hover {
    box-shadow: 0 18px 36px -6px rgba(0, 0, 0, 0.15), 0 12px 16px -8px rgba(0, 0, 0, 0.08) !important;
}

/* =========================================================
   60FPS GPU ULTRA-SMOOTH CART DRAWER WITH BACKDROP BLUR
========================================================= */
.cart-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.40) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s step-end !important;
    will-change: opacity, backdrop-filter !important;
}

.cart-drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s !important;
}

.cart-drawer-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 440px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    background-color: var(--figma-drawer-bg, #751E5B) !important;
    color: #ffffff !important;
    z-index: 1000000 !important;
    box-shadow: -12px 0 36px rgba(0,0,0,0.25) !important;
    transform: translate3d(100%, 0, 0) !important;
    will-change: transform !important;
    transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.cart-drawer-overlay.active .cart-drawer-panel {
    transform: translate3d(0, 0, 0) !important;
}

/* =========================================================
   PURE 60FPS ZERO-LAG HARDWARE ACCELERATED CART DRAWER
========================================================= */
.cart-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.60) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out !important;
    will-change: opacity !important;
}

.cart-drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.cart-drawer-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 440px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    background-color: var(--figma-drawer-bg, #751E5B) !important;
    color: #ffffff !important;
    z-index: 1000000 !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35) !important;
    transform: translate3d(100%, 0, 0) !important;
    will-change: transform !important;
    transition: transform 0.18s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.cart-drawer-overlay.active .cart-drawer-panel {
    transform: translate3d(0, 0, 0) !important;
}

/* =========================================================
   FREE RESOURCES CARDS SCRUNCHED PAPER TEXTURE & FIGMA SPEC
========================================================= */
.page-resources .res-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    padding: 44px 28px !important;
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.page-resources .res-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: url('images/scrunched_paper.png') !important;
    background-repeat: repeat !important;
    background-size: 500px auto !important;
    opacity: 0.45 !important;
    mix-blend-mode: overlay !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: 18px !important;
}

.page-resources .res-card > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Card Specific Colors */
.page-resources .res-card.card-diagnostics {
    background-color: #537586 !important;
    color: #ffffff !important;
}

.page-resources .res-card.card-userguides {
    background-color: #C8C0A6 !important;
    color: #ffffff !important;
}

.page-resources .res-card.card-maths {
    background-color: #1FA9C2 !important;
    color: #ffffff !important;
}

.page-resources .res-card.card-english {
    background-color: #F8BC2C !important;
    color: #ffffff !important;
}

/* Card Icon Badges */
.page-resources .card-icon-wrap {
    margin-bottom: 18px !important;
}

.page-resources .card-icon-wrap.circle-badge {
    background: rgba(0, 0, 0, 0.16) !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
}

.page-resources .guide-question-mark {
    font-size: 38px !important;
    font-weight: 700 !important;
    font-family: var(--font-heading) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.page-resources .card-icon-wrap.pill-badge {
    background: rgba(0, 0, 0, 0.16) !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.page-resources .math-symbols {
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: 4px !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.page-resources .english-letters {
    font-size: 26px !important;
    font-weight: 800 !important;
    font-style: italic !important;
    letter-spacing: 3px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-family: var(--font-heading) !important;
}

.page-resources .res-card h3 {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
}


/* =========================================================
   WORKING WAVE IMG OPACITY CONTROLS (TARGETING <img> CLASSES)
========================================================= */
/* =========================================================
   FLIP ARTICLES WAVE UPSIDE DOWN & MATCH TESTIMONIALS WAVE (#1C3D4E, 0.44 OPACITY)
========================================================= */
/* =========================================================
   ROTATE ARTICLES WAVE 180 DEGREES (MATCHING TESTIMONIALS WAVE)
========================================================= */
.section-wave-svg--articles {
    transform: none !important;
    opacity: 1 !important;
}

/* =========================================================
   UNIFY TRANSFORM FOR VIDEO & WHY CHOOSE US WAVES
========================================================= */
.section-wave-svg--video,
.section-wave-svg--whychooseus {
    transform: none !important;
    opacity: 1 !important;
}

.section-wave-svg--audience {
    opacity: 1 !important;
}

.section-wave-svg--whychooseus {
    opacity: 1 !important;
}

.section-wave-svg--testimonials {
    opacity: 1 !important;
}

.section-wave-svg--vision {
    opacity: 1 !important;
}

.section-wave-svg--values {
    opacity: 1 !important;
}

/* =========================================================
   PURE 1:1 ORIGINAL UNALTERED SVG DISPLAY (NO FILTERS OR OPACITY OVERRIDES)
========================================================= */
.section-wave-top,
.section-wave-bottom,
.section-wave-svg,
.section-wave-svg--audience,
.section-wave-svg--video,
.section-wave-svg--whychooseus,
.section-wave-svg--testimonials,
.section-wave-svg--articles,
.section-wave-svg--vision,
.section-wave-svg--values,
.section-wave--vision,
.section-wave--values {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
}

.section-wave-top::before,
.section-wave-bottom::before,
.section-wave-svg::before {
    display: none !important;
}

/* =========================================================
   EXACT FIGMA MATCH: HORIZONTAL WAVE DIRECTION & SMOOTH TEXTURE
========================================================= */
.page-home .section-wave-top,
.section-wave-svg--video,
.section-wave-svg--audience,
.section-wave-svg--whychooseus,
.section-wave-svg--testimonials,
/* =========================================================
   FLIP ARTICLES WAVE UPSIDE DOWN & MATCH TESTIMONIALS WAVE (#1C3D4E, 0.44 OPACITY)
========================================================= */
/* =========================================================
   ROTATE ARTICLES WAVE 180 DEGREES (MATCHING TESTIMONIALS WAVE)
========================================================= */
.section-wave-svg--articles {
    transform: none !important;
    opacity: 1 !important;
}

/* FLIP VIDEO & TESTIMONIAL WAVES HORIZONTALLY TO MATCH FIGMA SCREENSHOT CURVE */
.section-wave-svg--video,
.section-wave-svg--testimonials {
    transform: scaleX(-1) !important;
}

/* =========================================================
   TESTIMONIALS SECTION & WAVE SCRUNCHED OVERLAY MATCH
========================================================= */
.section-testimonials {
    background-color: #102E3C !important;
    position: relative !important;
}

.section-testimonials::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    background-image: url('images/scrunched_paper.png') !important;
    background-size: 1728px auto !important;
    background-repeat: repeat !important;
    opacity: 0.45 !important;
    mix-blend-mode: overlay !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* =========================================================
   TESTIMONIALS SECTION & WAVE EXACT COLOR (#1C3D4E) & HIGH VISIBILITY TEXTURE (0.65)
========================================================= */
html body.page-home .section-testimonials {
    background-color: #1C3D4E !important;
    position: relative !important;
}

html body.page-home .section-testimonials::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    background-image: url('images/scrunched_paper.png') !important;
    background-size: 1728px auto !important;
    background-repeat: repeat !important;
    opacity: 0.65 !important;
    mix-blend-mode: overlay !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* =========================================================
   100% IDENTICAL COLOR & TEXTURE: MAIN TESTIMONIALS SECTION & WAVE
========================================================= */
html body.page-home .section-testimonials,
html body .section-testimonials {
    background-color: #1C3D4E !important;
    position: relative !important;
}

html body.page-home .section-testimonials::before,
html body .section-testimonials::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    background-image: url('images/scrunched_paper.png') !important;
    background-size: 1728px auto !important;
    background-repeat: repeat !important;
    opacity: 0.35 !important;
    mix-blend-mode: overlay !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* =========================================================
   DARKENED TESTIMONIALS SECTION & IDENTICAL ARTICLES WAVE MATCH (#102E3C)
========================================================= */
html body.page-home .section-testimonials,
html body .section-testimonials {
    background-color: #102E3C !important;
    position: relative !important;
}

html body.page-home .section-testimonials::before,
html body .section-testimonials::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    background-image: url('images/scrunched_paper.png') !important;
    background-size: 1728px auto !important;
    background-repeat: repeat !important;
    opacity: 0.35 !important;
    mix-blend-mode: overlay !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* =========================================================
   FLIP ARTICLES WAVE UPSIDE DOWN & MATCH TESTIMONIALS WAVE (#1C3D4E, 0.44 OPACITY)
========================================================= */
/* =========================================================
   ROTATE ARTICLES WAVE 180 DEGREES (MATCHING TESTIMONIALS WAVE)
========================================================= */
.section-wave-svg--articles {
    transform: none !important;
    opacity: 1 !important;
}


/* =========================================================
   TIE TOP OF ARTICLES WAVE FLUSH TO BOTTOM OF TESTIMONIALS SECTION (#203a47)
========================================================= */
html body.page-home .section-testimonials,
html body .section-testimonials,
.section-testimonials {
    background-color: #203a47 !important;
    position: relative !important;
}

html body.page-home .section-testimonials::before,
html body .section-testimonials::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    background-image: url('images/scrunched_paper.png') !important;
    background-size: 1728px auto !important;
    background-repeat: repeat !important;
    opacity: 0.44 !important;
    mix-blend-mode: overlay !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* ARTICLES WAVE TOP CONTAINER - TIE TOP FLUSH TO BOTTOM OF TESTIMONIALS SECTION (top:0, translateY(0)) */
html body.page-home .section-articles .section-wave-top,
html body .section-articles .section-wave-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(0%) !important;
    line-height: 0 !important;
    z-index: 5 !important;
}

.section-wave-svg--articles {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    display: block !important;
    opacity: 1 !important;
}

/* =========================================================
   CHANGE TESTIMONIALS SECTION BACKGROUND COLOR HERE
========================================================= */
html body.page-home .section-testimonials,
html body .section-testimonials,
.section-testimonials {
    background-color: #243740 !important; /* <--- EDIT THIS HEX COLOR (e.g. #102E3C, #183848, #153240) */
}

/* =========================================================
   TIE BOTTOM OF WHY CHOOSE US & AUDIENCE WAVES TO TOP OF THEIR SECTIONS (translateY(-99%))
========================================================= */
/* WHY CHOOSE US TOP WAVE CONTAINER */
html body.page-home .section-why-choose-us .section-wave-top,
html body .section-why-choose-us .section-wave-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(-99%) !important;
    line-height: 0 !important;
    z-index: 5 !important;
}

.section-wave-svg--whychooseus {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    display: block !important;
    opacity: 1 !important;
}

/* AUDIENCE TOP WAVE CONTAINER */
html body.page-home .section-audience .section-wave-top,
html body .section-audience .section-wave-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(-99%) !important;
    line-height: 0 !important;
    z-index: 5 !important;
}

.section-wave-svg--audience {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    display: block !important;
    opacity: 1 !important;
}


/* =========================================================
   AUDIENCE SECTION SIZE & INNER CONTENT POSITION CONTROLS
========================================================= */
/* 1. MAKE THE AUDIENCE SECTION BIGGER (INCREASE SECTION HEIGHT) */
html body.page-home .section-audience,
html body .section-audience,
.section-audience {
    padding-top: 140px !important;
    padding-bottom: 120px !important;
    min-height: 900px !important;
    position: relative !important;
    top: 0 !important;
}

/* 2. MOVE THE CONTENT INSIDE THE AUDIENCE SECTION DOWN */
html body.page-home .section-audience .container,
html body .section-audience .container {
    padding-top: 150px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* =========================================================
   CART DRAWER ITEM TITLE VISIBILITY & WHITE TEXT ENFORCEMENT
========================================================= */
.drawer-item-title,
.cart-drawer-item-title,
#cartDrawerBody .drawer-item-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =========================================================
   RESTORE SCRUNCHED PAPER TEXTURE & GRAPHICS FOR ARTICLES TITLE BANNER
========================================================= */
.articles-hero-banner,
.page-articles .articles-hero-banner,
.article-hero-banner {
    position: relative !important;
    overflow: visible !important;
}

.articles-hero-banner::before,
.page-articles .articles-hero-banner::before,
.article-hero-banner::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    background-image: url('images/scrunched_paper.png') !important;
    background-size: 1728px auto !important;
    background-repeat: repeat !important;
    opacity: 0.44 !important;
    mix-blend-mode: overlay !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.articles-hero-banner .container,
.page-articles .articles-hero-banner .container {
    position: relative !important;
    z-index: 10 !important;
}

/* =========================================================
   ARTICLES HERO BANNER: SCRUNCHED PAPER TEXTURE & HAY BRANDMARK WATERMARK
========================================================= */
.policy-hero-banner,
.page-articles .policy-hero-banner {
    position: relative !important;
    overflow: visible !important;
    background-color: #1C3D4E !important;
    min-height: 240px !important;
}

/* SCRUNCHED PAPER TEXTURE OVERLAY */
.policy-hero-banner::before,
.page-articles .policy-hero-banner::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    background-image: url('images/scrunched_paper.png') !important;
    background-size: 1728px auto !important;
    background-repeat: repeat !important;
    opacity: 0.44 !important;
    mix-blend-mode: overlay !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* HAY BRANDMARK WHITE WATERMARK PATTERN OVERLAY */
.policy-hero-banner::after,
.page-articles .policy-hero-banner::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    opacity: 0.08 !important;
    mix-blend-mode: screen !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.policy-hero-banner .container,
.page-articles .policy-hero-banner .container {
    position: relative !important;
    z-index: 10 !important;
}

/* =========================================================
   HERO BANNER LEFT AND RIGHT SIDE GRAPHICS POSITIONING
========================================================= */
.hero-banner-side-graphic {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 85% !important;
    max-height: 280px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    z-index: 4 !important;
}

.hero-banner-graphic-left {
    left: 0 !important;
}

.hero-banner-graphic-right {
    right: 0 !important;
}

@media (max-width: 768px) {
    .hero-banner-side-graphic {
        display: none !important;
    }
}

/* =========================================================
   ARTICLES TITLE BANNER SIDE GRAPHICS STYLING
========================================================= */
.policy-hero-banner .hero-banner-side-graphic,
.hero-banner-side-graphic {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 85% !important;
    max-height: 280px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    z-index: 4 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hero-banner-graphic-left {
    left: 10px !important;
}

.hero-banner-graphic-right {
    right: 10px !important;
}

@media (max-width: 768px) {
    .hero-banner-side-graphic {
        display: none !important;
    }
}

/* =========================================================
   HERO BANNER CORNER GRAPHICS (TOP-RIGHT & BOTTOM-LEFT)
========================================================= */
.hero-banner-side-graphic {
    position: absolute !important;
    max-height: 240px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    z-index: 4 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hero-banner-graphic-left {
    left: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
}

.hero-banner-graphic-right {
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    transform: none !important;
}

@media (max-width: 768px) {
    .hero-banner-side-graphic {
        display: none !important;
    }
}

/* =========================================================
   ENLARGE HERO BANNER SIDE GRAPHICS TO FILL 100% BANNER HEIGHT
========================================================= */
.policy-hero-banner .hero-banner-side-graphic,
.hero-banner-side-graphic {
    position: absolute !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    pointer-events: none !important;
    z-index: 4 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hero-banner-graphic-left {
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    object-position: left bottom !important;
}

.hero-banner-graphic-right {
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    object-position: right top !important;
}

@media (max-width: 768px) {
    .hero-banner-side-graphic {
        display: none !important;
    }
}



/* =========================================================
   CHANGE ABOUT US PAGE WAVE & SECTION FILL COLORS HERE
========================================================= */
/* 1. VISION SECTION & WAVE (Between Our Story & Vision) */
html body.page-about .section-vision,
html body .section-vision,
.section-vision {
    background-color: #537586 !important; /* <--- EDIT THIS HEX COLOR FOR VISION SECTION */
}

/* VISION WAVE COLOR CONTROL (RECOLORS INSTANTLY IN BROWSER) */
.section-wave--vision,
.section-wave-svg--vision {
    background-color: #537586 !important; /* <--- EDIT THIS HEX COLOR FOR VISION WAVE */
    -webkit-mask-image: url('images/visionwave.svg') !important;
    mask-image: url('images/visionwave.svg') !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    display: block !important;
}

/* 2. VALUES SECTION & WAVE (Between Vision & Values) */
html body.page-about .section-values,
html body .section-values,
.section-values {
    background-color: #FAFDFF !important; /* <--- EDIT THIS HEX COLOR FOR VALUES SECTION */
}

/* VALUES WAVE COLOR CONTROL (RECOLORS INSTANTLY IN BROWSER) */
.section-wave--values,
.section-wave-svg--values {
    background-color: #FAFDFF !important; /* <--- EDIT THIS HEX COLOR FOR VALUES WAVE */
    -webkit-mask-image: url('images/valueswave.svg') !important;
    mask-image: url('images/valueswave.svg') !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    display: block !important;
}

/* =========================================================
   STICKY MAIN PURPLE HEADER BAR (TOP BAR SCROLLS AWAY)
========================================================= */
.top-bar {
    position: relative !important;
    z-index: 100 !important;
}

.main-header,
header.main-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background-color: #87246A !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* =========================================================
   100% GUARANTEED FIXED STICKY PURPLE HEADER
========================================================= */
body {
    padding-top: 0 !important;
}

.top-bar {
    position: relative !important;
    z-index: 100 !important;
}

.main-header,
header.main-header,
.main-header.is-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background-color: #87246A !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Add padding to body when header is fixed so top content is not obscured */
body.has-fixed-header {
    padding-top: 80px !important;
}

/* =========================================================
   ABOUT US HERO BANNER: SCRUNCH TEXTURE, BRANDMARK WATERMARK & CORNER GRAPHICS
========================================================= */
@media (min-width: 992px) {
    .about-hero-banner,
    .page-about .about-hero-banner,
    .page-about-us .about-hero-banner {
        position: relative !important;
        overflow: visible !important;
        background-color: #C7BDA2 !important;
        background: #C7BDA2 !important;
        min-height: 240px !important;
    }
}

.about-hero-banner,
.page-about .about-hero-banner,
.page-about-us .about-hero-banner {
    position: relative !important;
    background-color: #C7BDA2 !important;
    background: #C7BDA2 !important;
}

.about-hero-banner::before,
.page-about .about-hero-banner::before,
.page-about-us .about-hero-banner::before {
    display: none !important;
    background-image: none !important;
    content: none !important;
}

.about-hero-banner::after,
.page-about .about-hero-banner::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    opacity: 0.08 !important;
    mix-blend-mode: screen !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.about-hero-banner .container,
.page-about .about-hero-banner .container {
    position: relative !important;
    z-index: 10 !important;
}

/* =========================================================
   COMPREHENSIVE FIGMA MOBILE HOMEPAGE RESPONSIVE LAYOUT
========================================================= */
@media (max-width: 991px) {
    /* 1. HERO SECTION MOBILE OPTIMIZATION */
    .section-hero {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
        text-align: center !important;
    }

    .section-hero .hero-grid,
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .section-hero .hero-title,
    .hero-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .section-hero .hero-subtitle,
    .hero-subtitle {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin: 0 auto 24px auto !important;
        max-width: 90% !important;
    }

    .section-hero .hero-cta-group,
    .hero-cta-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
    }

    .section-hero .hero-cta-group .btn,
    .hero-cta-group .btn {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .hero-mockup-wrap,
    .hero-image-wrap {
        margin: 0 !important;
        max-width: 320px !important;
    }

    /* 2. WHY CHOOSE US MOBILE OPTIMIZATION */
    .section-whychooseus {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .section-whychooseus .whychooseus-grid,
    .whychooseus-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .whychooseus-card {
        padding: 24px 20px !important;
        text-align: center !important;
    }

    /* 3. VIDEO TOUR SECTION MOBILE OPTIMIZATION */
    .section-video {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .section-video .video-wrapper,
    .video-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    /* 4. TARGETED AUDIENCE (CPL) SECTION MOBILE OPTIMIZATION */
    .section-audience {
        padding-top: 80px !important;
        padding-bottom: 60px !important;
    }

    .section-audience .audience-grid,
    .audience-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .section-audience .container {
        padding-top: 20px !important;
    }

    /* 5. ARTICLES & INSIGHTS SECTION MOBILE OPTIMIZATION */
    .section-articles {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .section-articles .articles-grid,
    .articles-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* 6. TESTIMONIALS SECTION MOBILE OPTIMIZATION */
    .section-testimonials {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .section-testimonials .testimonials-grid,
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* =====

/* =========================================================
   EXACT FIGMA MOBILE HOMEPAGE LAYOUT (ALL VERIFIED WORKING FEATURES)
========================================================= */
@media (max-width: 991px) {
    /* HEADER MOBILE BURGER MENU & LOGO */
    .main-header .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 16px !important;
    }

    .main-header .logo-brand img {
        height: 70px !important;
        width: auto !important;
    }

    /* HERO SECTION FIGMA MOBILE */
    .section-hero {
        padding: 30px 16px 50px 16px !important;
        text-align: center !important;
    }

    .hero-tag-pill {
        display: inline-block !important;
        background-color: #87246A !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        font-size: 10px !important;
        letter-spacing: 1px !important;
        padding: 4px 12px !important;
        border-radius: 20px !important;
        margin-bottom: 4px !important;
        text-transform: uppercase !important;
    }

    /* SLIDE 1 TITLE & ROTATING WORDS IN SAME PLACE */
    .page-home .hero-headline-slide4,
    .hero-headline-slide4 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }

    .hero-headline-slide4 br {
        display: none !important;
    }

    .page-home .hero-headline-slide4 .text-cyan,
    .hero-headline-slide4 .text-cyan {
        display: block !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        margin: 0 0 2px 0 !important;
        padding: 0 !important;
    }

    .page-home .hero-headline-slide4 .headline-rotating-box,
    .hero-headline-slide4 .headline-rotating-box,
    .headline-rotating-box {
        display: block !important;
        position: relative !important;
        height: 28px !important;
        min-height: 28px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        overflow: visible !important;
    }

    .page-home .hero-headline-slide4 .script-excellence,
    .hero-headline-slide4 .script-excellence,
    .headline-rotating-box .script-excellence {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        white-space: nowrap !important;
        font-family: var(--font-script) !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .page-home .hero-headline-slide4 .text-purple-dark,
    .hero-headline-slide4 .text-purple-dark {
        display: block !important;
        font-size: 20px !important;
        line-height: 1.15 !important;
        color: #72245C !important;
        margin-top: 2px !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* SLIDE 1 SIDE-BY-SIDE SHOP BUTTONS */
    .page-home .hero-cta-buttons.slide4-cta,
    .hero-cta-buttons.slide4-cta,
    .slide4-cta {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 4px !important;
        box-sizing: border-box !important;
    }

    .page-home .slide4-cta .btn,
    .slide4-cta .btn,
    .slide4-cta .btn-cyan-fill,
    .slide4-cta .btn-gold-fill {
        flex: 1 1 48% !important;
        max-width: 48% !important;
        width: auto !important;
        padding: 10px 12px !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        letter-spacing: 0.5px !important;
    }

    /* SLIDE 2: COMPACT LIST TEXT & 24PX BADGES */
    .page-home .cpl-list-text,
    .cpl-list-text {
        font-size: 16px !important;
        line-height: 1.4 !important;
        color: #ffffff !important;
    }

    .page-home .cpl-list-text strong,
    .cpl-list-text strong {
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    .page-home .cpl-num-badge,
    .cpl-num-badge {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        font-size: 16px !important;
        margin-top: 1px !important;
        flex-shrink: 0 !important;
    }

    .page-home .cpl-list-card,
    .cpl-list-card,
    .page-home .cpl-list-item,
    .cpl-list-item {
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .page-home .cpl-road-graphic-img,
    .cpl-road-graphic-img {
        width: 100% !important;
        height: auto !important;
        margin: 16px auto !important;
        display: block !important;
    }

    /* SLIDE 5: COMPACT TESTIMONIAL QUOTE & HERO HEIGHT */
    .page-home .slide2-quote,
    .slide2-quote {
        font-size: 13.5px !important;
        line-height: 1.45 !important;
        margin-bottom: 10px !important;
        color: #ffffff !important;
    }

    .page-home .slide2-headline,
    .slide2-headline {
        font-size: 24px !important;
        margin-bottom: 4px !important;
    }

    .page-home .slide2-pencil-line,
    .slide2-pencil-line {
        max-width: 180px !important;
        width: 100% !important;
    }

    .page-home .slide2-author,
    .slide2-author {
        font-size: 11.5px !important;
        margin-bottom: 14px !important;
    }

    .page-home .slide2-testi-card,
    .slide2-testi-card {
        padding: 16px 12px !important;
    }

    /* TESTIMONIALS 2X2 GRID & STAT PIE CHARTS (95PX) */
    .testimonials-grid-figma {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .stat-pie-chart-figma,
    .pie-circle {
        width: 95px !important;
        height: 95px !important;
    }

    .stat-pie-chart-figma .stat-num-figma {
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    .testi-category-subtitle-pill {
        font-size: 11px !important;
        padding: 4px 10px !important;
        border-radius: 12px !important;
        display: inline-block !important;
        margin-bottom: 10px !important;
    }

    /* HIGH SPECIFICITY: FORCE ALL SLIDE & SECTION TITLES & CHILD SPANS TO 24PX ON MOBILE */
    html body.page-home h1,
    html body.page-home h2,
    html body.page-home h3,
    html body .hero-slide h1,
    html body .hero-slide h2,
    html body .section-title,
    .page-home .hero-headline-slide4,
    .page-home .hero-headline-slide5,
    .page-home .slide2-headline,
    .page-home .audience-main-title,
    .page-home .whychooseus-main-title,
    .page-home .video-main-title,
    .page-home .testimonials-main-title,
    .page-home .testi-category-title,
    .page-home .articles-main-title,
    .hero-headline-slide4,
    .hero-headline-slide5,
    .slide2-headline,
    .audience-main-title,
    .whychooseus-main-title,
    .video-main-title,
    .testimonials-main-title,
    .testi-category-title,
    .articles-main-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    html body.page-home h1 span,
    html body.page-home h2 span,
    html body.page-home h3 span,
    html body .hero-headline-slide4 span,
    html body .hero-headline-slide5 span,
    html body .slide2-headline span,
    html body .audience-main-title span,
    html body .articles-main-title span,
    html body .testi-category-title span,
    .hero-headline-slide4 .text-cyan,
    .hero-headline-slide4 .script-excellence,
    .hero-headline-slide4 .text-purple-dark,
    .hero-headline-slide5 .script-discover,
    .hero-headline-slide5 .text-white-unique,
    .hero-headline-slide5 .text-cpl-purple,
    .hero-headline-slide5 .text-white-method,
    .hero-content h1 .script-highlight-small,
    .hero-content h1 .script-highlight,
    .audience-main-title .script-the,
    .audience-main-title .script-audience,
    .articles-main-title .articles-title-script-our,
    .articles-main-title .articles-title-script-articles,
    .testi-category-title .script-highlight {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }
}

/* =========================================================
   BULLETPROOF HIGH SPECIFICITY MOBILE STYLES FOR SLIDE 1 & SLIDE 2
========================================================= */
@media (max-width: 991px) {

    /* --- SLIDE 1 MOBILE OVERRIDES --- */
    html body.page-home .hero-grid-slide4,
    html body .hero-grid-slide4 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }

    html body.page-home .hero-pill-tag,
    html body .hero-pill-tag {
        font-size: 10px !important;
        padding: 4px 10px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin-bottom: 4px !important;
        max-width: 90% !important;
        word-wrap: break-word !important;
        display: inline-block !important;
    }

    html body.page-home .hero-headline-slide4,
    html body .hero-headline-slide4 {
        display: block !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        margin: 0 0 10px 0 !important;
        text-align: center !important;
    }

    html body.page-home .hero-headline-slide4 br,
    html body .hero-headline-slide4 br {
        display: none !important;
    }

    html body.page-home .hero-headline-slide4 .text-cyan,
    html body .hero-headline-slide4 .text-cyan {
        display: block !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        color: #1BB9CC !important;
        margin: 0 0 2px 0 !important;
        padding: 0 !important;
    }

    html body.page-home .hero-headline-slide4 .headline-rotating-box,
    html body .hero-headline-slide4 .headline-rotating-box,
    html body .headline-rotating-box {
        display: block !important;
        position: relative !important;
        height: 28px !important;
        min-height: 28px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        overflow: visible !important;
    }

    html body.page-home .hero-headline-slide4 .script-excellence,
    html body .hero-headline-slide4 .script-excellence,
    html body .headline-rotating-box .script-excellence {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        white-space: nowrap !important;
        font-family: var(--font-script) !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    html body.page-home .hero-headline-slide4 .text-purple-dark,
    html body .hero-headline-slide4 .text-purple-dark {
        display: block !important;
        font-size: 20px !important;
        line-height: 1.15 !important;
        color: #72245C !important;
        margin-top: 2px !important;
        padding: 0 !important;
        position: relative !important;
    }

    html body.page-home .slide4-pencil-line,
    html body .slide4-pencil-line {
        max-width: 220px !important;
        width: 100% !important;
        margin: 4px auto 12px auto !important;
        display: block !important;
    }

    html body.page-home .slide4-desc,
    html body .slide4-desc {
        font-size: 13px !important;
        line-height: 1.45 !important;
        text-align: center !important;
        margin: 0 auto 16px auto !important;
        max-width: 100% !important;
    }

    html body.page-home .slide4-cta,
    html body .slide4-cta,
    html body .hero-cta-buttons.slide4-cta {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 4px !important;
        box-sizing: border-box !important;
    }

    html body.page-home .slide4-cta .btn,
    html body.page-home .slide4-cta .btn-cyan-fill,
    html body.page-home .slide4-cta .btn-gold-fill,
    html body .slide4-cta .btn-cyan-fill,
    html body .slide4-cta .btn-gold-fill {
        flex: 1 1 48% !important;
        max-width: 48% !important;
        width: 48% !important;
        padding: 10px 8px !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        letter-spacing: 0.5px !important;
    }

    html body.page-home .hero-covers-dual,
    html body .hero-covers-dual {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    html body.page-home .dual-cover-item img,
    html body .dual-cover-item img {
        max-height: 190px !important;
        width: auto !important;
        display: block !important;
    }


    /* --- SLIDE 2 MOBILE OVERRIDES --- */
    html body.page-home .hero-grid-slide5,
    html body .hero-grid-slide5 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }

    html body.page-home .hero-headline-slide5,
    html body .hero-headline-slide5 {
        font-size: 24px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }

    html body.page-home .slide5-desc,
    html body .slide5-desc {
        font-size: 13px !important;
        line-height: 1.45 !important;
        text-align: center !important;
        margin: 0 auto 16px auto !important;
    }

    html body.page-home .cpl-graphic-col,
    html body .cpl-graphic-col {
        width: 100% !important;
        margin: 10px 0 !important;
    }

    html body.page-home .cpl-road-graphic-img,
    html body .cpl-road-graphic-img {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        margin: 0 !important;
        display: block !important;
    }

    html body.page-home .cpl-list-card,
    html body .cpl-list-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    html body.page-home .cpl-list-item,
    html body .cpl-list-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        text-align: left !important;
    }

    html body.page-home .cpl-num-badge,
    html body .cpl-num-badge {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        font-size: 16px !important;
        margin-top: 2px !important;
        flex-shrink: 0 !important;
    }

    html body.page-home .cpl-list-text,
    html body .cpl-list-text {
        font-size: 16px !important;
        line-height: 1.4 !important;
        color: #ffffff !important;
    }

    html body.page-home .cpl-list-text strong,
    html body .cpl-list-text strong {
        font-size: 16px !important;
        font-weight: 800 !important;
    }
}

/* =========================================================
   TRIPLE FIXES: SLIDE 2 COLUMN LAYOUT & 70PX PIE CHARTS
========================================================= */
@media (max-width: 991px) {
    /* SLIDE 2 LPC & TEXT ENFORCED COLUMN LAYOUT */
    html body.page-home .hero-grid-slide5,
    html body .hero-grid-slide5,
    .hero-grid-slide5 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
        width: 100% !important;
    }

    html body.page-home .hero-content-slide5,
    html body.page-home .cpl-graphic-col,
    html body.page-home .cpl-list-col,
    .cpl-graphic-col,
    .cpl-list-col {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }

    html body.page-home .cpl-road-graphic-img,
    .cpl-road-graphic-img {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        margin: 0 !important;
        display: block !important;
    }

    /* COMPACT PIE CHARTS (70PX) ON SLIDE 5 & TESTIMONIALS SECTION */
    .stat-pie-chart-figma,
    .pie-circle,
    .slide2-stats-grid .stat-pie,
    .stat-pie {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    .stat-pie-chart-figma .stat-num-figma,
    .stat-pie span {
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    .slide2-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 16px auto 0 auto !important;
    }
}

/* =========================================================
   SLIDE 2: ENFORCED 1-COLUMN VERTICAL STACK (HEADER -> LPC ROAD -> POINTS)
========================================================= */
@media (max-width: 991px) {
    html body.page-home .hero-slide.slide-cpl-method .hero-grid-slide5,
    html body .hero-slide.slide-cpl-method .hero-grid-slide5,
    html body.page-home .hero-grid-slide5,
    html body .hero-grid-slide5,
    .hero-grid-slide5 {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        gap: 16px !important;
        width: 100% !important;
    }

    html body.page-home .hero-slide.slide-cpl-method .hero-content-slide5,
    html body.page-home .hero-slide.slide-cpl-method .cpl-graphic-col,
    html body.page-home .hero-slide.slide-cpl-method .cpl-list-col,
    html body .cpl-graphic-col,
    html body .cpl-list-col,
    .cpl-graphic-col,
    .cpl-list-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: block !important;
        margin: 0 !important;
        clear: both !important;
        float: none !important;
    }

    html body.page-home .cpl-road-graphic-img,
    html body .cpl-road-graphic-img,
    .cpl-road-graphic-img {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        margin: 0 !important;
        display: block !important;
    }
}

/* =========================================================
   BULLETPROOF FIXES: PIE CHART NUMBERS, SLIDE 4 LOGO SIZE & SLIDE 2 COLUMN STACK
========================================================= */
@media (max-width: 991px) {

    /* 1. SLIDE 4 PEOPLE LOGO SIZE (CAP AT 220PX) */
    html body.page-home .floating-people-logo,
    html body .floating-people-logo,
    .floating-people-logo {
        max-width: 220px !important;
        width: 100% !important;
        height: auto !important;
        margin: 10px auto !important;
        display: block !important;
    }

    /* 2. STAT PIE CHARTS & PERFECTLY CENTERED 18PX NUMBERS */
    .stat-pie-chart-figma,
    .pie-circle,
    .slide2-stats-grid .stat-pie,
    .stat-pie {
        width: 75px !important;
        height: 75px !important;
        min-width: 75px !important;
        min-height: 75px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        margin: 0 auto 8px auto !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }

    .stat-pie-chart-figma .stat-num-figma,
    .stat-pie span,
    .pie-number-98,
    .pie-number-96,
    .pie-number-94,
    .pie-number-92 {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        z-index: 2 !important;
    }

    /* 3. SLIDE 2 ENFORCED 1-COLUMN STACK (HEADER -> LPC ROAD -> POINTS) */
    html body.page-home .hero-slide.slide-cpl-method .hero-grid-slide5,
    html body .hero-slide.slide-cpl-method .hero-grid-slide5,
    html body.page-home .hero-grid-slide5,
    html body .hero-grid-slide5,
    .hero-grid-slide5 {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        text-align: center !important;
        gap: 16px !important;
        width: 100% !important;
    }

    html body.page-home .hero-slide.slide-cpl-method .hero-content-slide5,
    html body.page-home .hero-slide.slide-cpl-method .cpl-graphic-col,
    html body.page-home .hero-slide.slide-cpl-method .cpl-list-col,
    html body .cpl-graphic-col,
    html body .cpl-list-col,
    .hero-grid-slide5 > div,
    .cpl-graphic-col,
    .cpl-list-col {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: block !important;
        margin: 0 !important;
        clear: both !important;
        float: none !important;
    }

    html body.page-home .cpl-road-graphic-img,
    html body .cpl-road-graphic-img,
    .cpl-road-graphic-img {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        margin: 0 !important;
        display: block !important;
    }
}

/* =========================================================
   QUAD FIXES: YELLOW TOP BAR, MOBILE BURGER NAV, PIE COLORS & LPC CENTERED
========================================================= */

/* 1. YELLOW TOP BAR ABOVE PURPLE MAIN HEADER */
.top-bar {
    background-color: #F5B41A !important;
    color: #181818 !important;
    position: relative !important;
    z-index: 1000 !important;
    display: block !important;
    width: 100% !important;
}

.main-header {
    background-color: #87246A !important;
    position: relative !important;
    z-index: 999 !important;
    display: block !important;
    width: 100% !important;
}

/* 2. STAT PIE CHART PERCENTAGE COLORS & UPWARD SHIFT */
.pie-number-98 {
    color: #87246A !important;
    transform: translateY(-3px) !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

.pie-number-96 {
    color: #E5A100 !important;
    transform: translateY(-3px) !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

.pie-number-94 {
    color: #1BB9CC !important;
    transform: translateY(-3px) !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

.pie-number-92 {
    color: #D9367F !important;
    transform: translateY(-3px) !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

@media (max-width: 991px) {
    /* 3. MOBILE HEADER BURGER NAVIGATION TOGGLE */
    .main-header .header-nav-wrap,
    .header-nav-wrap,
    .nav-menu {
        display: none !important;
    }

    .main-header .mobile-hamburger-btn,
    .mobile-hamburger-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 4px !important;
        z-index: 100 !important;
    }

    .mobile-hamburger-btn .hamburger-svg-img {
        width: 28px !important;
        height: 28px !important;
        display: block !important;
    }

    /* 4. SLIDE 2 CENTERED 1-COLUMN STACK (NO LEFT OFFSET) */
    html body.page-home .hero-slide.slide-cpl-method,
    html body .hero-slide.slide-cpl-method {
        overflow: hidden !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        padding: 20px 16px !important;
    }

    html body.page-home .hero-slide.slide-cpl-method .container,
    html body .hero-slide.slide-cpl-method .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }

    html body.page-home .hero-slide.slide-cpl-method .hero-grid-slide5,
    html body .hero-slide.slide-cpl-method .hero-grid-slide5,
    html body.page-home .hero-grid-slide5,
    html body .hero-grid-slide5,
    .hero-grid-slide5 {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin: 0 !important;
        gap: 16px !important;
    }

    html body.page-home .hero-slide.slide-cpl-method .hero-content-slide5,
    html body.page-home .hero-slide.slide-cpl-method .cpl-graphic-col,
    html body.page-home .hero-slide.slide-cpl-method .cpl-list-col,
    html body .cpl-graphic-col,
    html body .cpl-list-col,
    .hero-grid-slide5 > div,
    .cpl-graphic-col,
    .cpl-list-col {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        clear: both !important;
        float: none !important;
    }

    html body.page-home .cpl-road-graphic-img,
    html body .cpl-road-graphic-img,
    .cpl-road-graphic-img {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        margin: 0 !important;
        display: block !important;
    }
}

/* =========================================================
   HEADER DESKTOP/MOBILE RULES & 15PX UPWARD PIE CHART COLORS
========================================================= */

/* 1. TOP BAR ALWAYS ABOVE PURPLE HEADER (NOT FIXED OVERLAPPING) */
.top-bar {
    background-color: #F5B41A !important;
    color: #181818 !important;
    position: relative !important;
    z-index: 1001 !important;
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
}

.main-header {
    background-color: #87246A !important;
    position: relative !important;
    top: auto !important;
    z-index: 999 !important;
    display: block !important;
    width: 100% !important;
}

/* 2. DESKTOP VIEW: HIDE HAMBURGER BUTTON (SHOW ONLY MENU & UTILITY ICONS) */
@media (min-width: 992px) {
    html body.page-home .mobile-hamburger-btn,
    html body .mobile-hamburger-btn,
    .mobile-hamburger-btn {
        display: none !important;
    }
}

/* 3. STAT PIE CHART PERCENTAGE COLORS & 15PX UPWARD SHIFT */
html body.page-home .stat-pie .pie-number-98,
html body .pie-number-98,
.pie-number-98 {
    color: #87246A !important;
    transform: translateY(-15px) !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

html body.page-home .stat-pie .pie-number-96,
html body .pie-number-96,
.pie-number-96 {
    color: #E5A100 !important;
    transform: translateY(-15px) !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

html body.page-home .stat-pie .pie-number-94,
html body .pie-number-94,
.pie-number-94 {
    color: #1BB9CC !important;
    transform: translateY(-15px) !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

html body.page-home .stat-pie .pie-number-92,
html body .pie-number-92,
.pie-number-92 {
    color: #D9367F !important;
    transform: translateY(-15px) !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

/* 4. MOBILE VIEW: HIDE UTILITY ICONS, PLACE HAMBURGER ON FAR RIGHT CORNER */
@media (max-width: 991px) {
    /* Hide search, user, cart utility icons on mobile header bar */
    html body.page-home .main-header .header-right-icons,
    html body .main-header .header-right-icons,
    .header-right-icons {
        display: none !important;
    }

    /* Hide desktop nav menu */
    html body.page-home .main-header .header-nav-wrap,
    html body .main-header .header-nav-wrap,
    .header-nav-wrap,
    .nav-menu {
        display: none !important;
    }

    /* Align brand logo left, hamburger button far right */
    html body.page-home .main-header-container,
    html body .main-header-container,
    .main-header-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    html body.page-home .mobile-hamburger-btn,
    html body .mobile-hamburger-btn,
    .mobile-hamburger-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 4px !important;
        z-index: 100 !important;
    }

    .mobile-hamburger-btn .hamburger-svg-img {
        width: 28px !important;
        height: 28px !important;
        display: block !important;
    }
}

/* =========================================================
   FORCE YELLOW TOP BAR ABOVE PURPLE HEADER & EXACT PIE COLORS
========================================================= */

/* 1. FORCE YELLOW TOP BAR AT ABSOLUTE TOP OF PAGE */
html body {
    display: flex !important;
    flex-direction: column !important;
}

html body .top-bar,
.top-bar {
    order: -2 !important;
    background-color: #F5B41A !important;
    color: #181818 !important;
    position: relative !important;
    top: 0 !important;
    z-index: 10001 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 !important;
}

html body .main-header,
.main-header {
    order: -1 !important;
    background-color: #87246A !important;
    position: relative !important;
    top: 0 !important;
    z-index: 10000 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 2. STAT PIE CHART PERCENTAGES: 98%, 85%, 97%, 99% WITH EXACT HEX COLORS & UPWARD SHIFT */
html body.page-home .stat-pie .pie-number-98,
html body .pie-number-98,
.pie-number-98 {
    color: #C7CAE9 !important;
    transform: translateY(-20px) !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

html body.page-home .stat-pie .pie-number-85,
html body .pie-number-85,
.pie-number-85 {
    color: #4DD1E3 !important;
    transform: translateY(-20px) !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

html body.page-home .stat-pie .pie-number-97,
html body .pie-number-97,
.pie-number-97 {
    color: #F49C85 !important;
    transform: translateY(-20px) !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

html body.page-home .stat-pie .pie-number-99,
html body .pie-number-99,
.pie-number-99 {
    color: #C67DB1 !important;
    transform: translateY(-20px) !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

/* =========================================================
   SLIDE ALIGNMENTS & GLOBAL TYPOGRAPHY (24PX TITLES, 16PX PASSAGE TEXT)
========================================================= */

@media (max-width: 991px) {

    /* --- GLOBAL TYPOGRAPHY: 24PX TITLES & 16PX PASSAGE TEXT --- */
    html body.page-home h1,
    html body.page-home h2,
    html body.page-home h3,
    html body .hero-slide h1,
    html body .hero-slide h2,
    html body .section-title,
    .page-home .hero-headline-slide4,
    .page-home .hero-headline-slide5,
    .page-home .slide2-headline,
    .page-home .audience-main-title,
    .page-home .whychooseus-main-title,
    .page-home .video-main-title,
    .page-home .testimonials-main-title,
    .page-home .testi-category-title,
    .page-home .articles-main-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    html body.page-home h1 span,
    html body.page-home h2 span,
    html body.page-home h3 span,
    html body .hero-headline-slide4 span,
    html body .hero-headline-slide5 span,
    html body .slide2-headline span,
    html body .audience-main-title span,
    html body .articles-main-title span,
    html body .testi-category-title span,
    .hero-headline-slide4 .text-cyan,
    .hero-headline-slide4 .script-excellence,
    .hero-headline-slide4 .text-purple-dark,
    .hero-headline-slide5 .script-discover,
    .hero-headline-slide5 .text-white-unique,
    .hero-headline-slide5 .text-cpl-purple,
    .hero-headline-slide5 .text-white-method,
    .audience-main-title .script-the,
    .audience-main-title .script-audience,
    .articles-main-title .articles-title-script-our,
    .articles-main-title .articles-title-script-articles,
    .testi-category-title .script-highlight {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    /* ALL PASSAGE / PARAGRAPH TEXT 16PX */
    html body.page-home p,
    html body.page-home .slide4-desc,
    html body.page-home .slide5-desc,
    html body.page-home .slide2-quote,
    html body.page-home .cpl-list-text,
    html body.page-home .cpl-list-text strong,
    html body.page-home .audience-sub-title,
    html body.page-home .section-subtitle,
    html body.page-home .hero-slide p,
    .slide4-desc,
    .slide5-desc,
    .slide2-quote,
    .cpl-list-text,
    .audience-sub-title {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    /* --- SLIDE 1: ALL TEXT CENTERED & BUTTONS DIRECTLY ABOVE COVERS --- */
    html body.page-home .hero-slide.slide-hero-main,
    html body .hero-slide.slide-hero-main,
    .slide-hero-main {
        text-align: center !important;
    }

    html body.page-home .hero-grid-slide4,
    html body .hero-grid-slide4 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }

    html body.page-home .slide4-desc,
    html body .slide4-desc {
        text-align: center !important;
        margin: 0 auto 16px auto !important;
    }

    /* Slide 1 CTA buttons & Dual Covers Centered Container */
    html body.page-home .slide4-cta,
    html body .slide4-cta {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto 12px auto !important;
    }

    html body.page-home .hero-covers-dual,
    html body .hero-covers-dual {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 !important;
    }

    html body.page-home .dual-cover-item,
    html body .dual-cover-item {
        flex: 1 1 48% !important;
        max-width: 48% !important;
        width: 48% !important;
    }

    html body.page-home .dual-cover-item img,
    html body .dual-cover-item img {
        width: 100% !important;
        height: auto !important;
        max-height: 220px !important;
        display: block !important;
        margin: 0 !important;
    }

    /* --- SLIDES 2, 3, 4, 5: ALL TEXT ALIGNED LEFT --- */
    html body.page-home .hero-slide.slide-cpl-method,
    html body.page-home .hero-slide.slide-testimonial-stats,
    html body.page-home .hero-slide:not(.slide-hero-main),
    html body .hero-slide:not(.slide-hero-main) {
        text-align: left !important;
    }

    html body.page-home .hero-headline-slide5,
    html body.page-home .slide5-desc,
    html body.page-home .slide2-headline,
    html body.page-home .slide2-quote,
    html body.page-home .slide2-author,
    html body.page-home .hero-content h1,
    html body.page-home .hero-content p {
        text-align: left !important;
    }
}

/* =========================================================
   BULLETPROOF SLIDE 1 DEAD-CENTERED LAYOUT & COVERS FIX
========================================================= */

@media (max-width: 991px) {
    /* SLIDE 1 CONTAINER & GRID FORCE CENTERED */
    html body.page-home .hero-slide.slide-hero-main,
    html body .hero-slide.slide-hero-main,
    .slide-hero-main {
        text-align: center !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow: hidden !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }

    html body.page-home .hero-slide.slide-hero-main .container,
    html body .hero-slide.slide-hero-main .container,
    .slide-hero-main .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }

    html body.page-home .hero-grid-slide4,
    html body .hero-grid-slide4,
    .hero-grid-slide4 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        gap: 16px !important;
    }

    html body.page-home .hero-content-slide4,
    html body .hero-content-slide4,
    .hero-content-slide4 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }

    /* ALL SLIDE 1 TEXT ELEMENTS DEAD CENTERED */
    html body.page-home .hero-pill-tag,
    html body.page-home .hero-headline-slide4,
    html body.page-home .hero-headline-slide4 *,
    html body.page-home .slide4-desc,
    html body.page-home .slide4-desc *,
    .hero-pill-tag,
    .hero-headline-slide4,
    .slide4-desc {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* BUTTONS & DUAL COVERS CONTAINER DEAD CENTERED IN MIDDLE */
    html body.page-home .slide4-cta,
    html body .slide4-cta,
    .slide4-cta {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto 16px auto !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }

    html body.page-home .hero-covers-dual,
    html body .hero-covers-dual,
    .hero-covers-dual {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        clear: both !important;
        float: none !important;
    }

    html body.page-home .dual-cover-item,
    html body .dual-cover-item,
    .dual-cover-item {
        flex: 1 1 48% !important;
        max-width: 48% !important;
        width: 48% !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin: 0 !important;
    }

    html body.page-home .dual-cover-item img,
    html body .dual-cover-item img,
    .dual-cover-item img {
        width: 100% !important;
        height: auto !important;
        max-height: 220px !important;
        display: block !important;
        margin: 0 !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }
}

/* =========================================================
   PERFECT SLIDE 1 ROTATING WORDS & PASSAGE PARAGRAPH CENTERING
========================================================= */

@media (max-width: 991px) {
    /* 1. PASSAGE PARAGRAPH DEAD CENTERED */
    html body.page-home .hero-slide.slide-hero-main p,
    html body.page-home .hero-content-slide4 p,
    html body.page-home .slide4-desc,
    html body .slide4-desc,
    .slide4-desc {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* 2. HEADLINE & ROTATING WORDS CONTAINER DEAD CENTERED */
    html body.page-home .hero-headline-slide4,
    html body .hero-headline-slide4,
    .hero-headline-slide4 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 10px auto !important;
    }

    html body.page-home .headline-rotating-box,
    html body .headline-rotating-box,
    .headline-rotating-box {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;
        text-align: center !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    html body.page-home .script-excellence,
    html body .script-excellence,
    .script-excellence,
    .word-1, .word-2, .word-3, .word-4 {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        white-space: nowrap !important;
        text-align: center !important;
        width: auto !important;
        margin: 0 !important;
    }
}

/* =========================================================
   NUDGE ROTATING SCRIPT WORDS PERFECTLY CENTERED (CLEAR MARGIN/PADDING OFFSETS)
========================================================= */

@media (max-width: 991px) {
    html body.page-home .headline-rotating-box,
    html body .headline-rotating-box,
    .headline-rotating-box {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    html body.page-home .script-excellence,
    html body .script-excellence,
    .script-excellence,
    .word-1, .word-2, .word-3, .word-4 {
        position: absolute !important;
        top: 50% !important;
        left: 48.5% !important;
        transform: translate(-50%, -50%) !important;
        white-space: nowrap !important;
        text-align: center !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        letter-spacing: 0 !important;
    }
}

/* =========================================================
   REDUCE SLIDE 2 TOP PADDING & MARGIN (MOVE CONTENT UP)
========================================================= */

@media (max-width: 991px) {
    html body.page-home .hero-slide.slide-cpl-method,
    html body .hero-slide.slide-cpl-method,
    .slide-cpl-method {
        padding-top: 15px !important;
        padding-bottom: 25px !important;
        min-height: auto !important;
        height: auto !important;
        margin-top: 0 !important;
    }

    html body.page-home .hero-slide.slide-cpl-method .container,
    html body .hero-slide.slide-cpl-method .container,
    .slide-cpl-method .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    html body.page-home .hero-slide.slide-cpl-method .hero-grid-slide5,
    html body .hero-slide.slide-cpl-method .hero-grid-slide5,
    .hero-grid-slide5 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        gap: 12px !important;
    }

    html body.page-home .hero-content-slide5,
    html body .hero-content-slide5,
    .hero-content-slide5 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    html body.page-home .hero-headline-slide5,
    html body .hero-headline-slide5,
    .hero-headline-slide5 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 8px !important;
    }
}

/* =========================================================
   REDUCE TOP GAP ON ALL SLIDES BELOW MAIN HEADER (TIGHT 10PX GAP)
========================================================= */

@media (max-width: 991px) {
    html body.page-home .section-hero,
    html body.page-home .hero-slider-section,
    html body.page-home .hero-slider,
    html body .section-hero,
    html body .hero-slider,
    .section-hero,
    .hero-slider-section,
    .hero-slider {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }

    html body.page-home .hero-slide,
    html body .hero-slide,
    .hero-slide {
        padding-top: 10px !important;
        margin-top: 0 !important;
        min-height: auto !important;
    }

    html body.page-home .hero-slide .container,
    html body .hero-slide .container,
    .hero-slide .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    html body.page-home .hero-grid,
    html body.page-home .hero-grid-slide4,
    html body.page-home .hero-grid-slide5,
    html body.page-home .hero-grid-slide2,
    html body .hero-grid,
    .hero-grid {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    html body.page-home .hero-pill-tag,
    html body.page-home .hero-headline-slide4,
    html body.page-home .hero-headline-slide5,
    html body.page-home .slide2-headline,
    html body.page-home .hero-content h1,
    .hero-pill-tag,
    .hero-headline-slide4,
    .hero-headline-slide5,
    .slide2-headline {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =========================================================
   REMOVE ALL HERO TOP PADDING & MIN-HEIGHT CONSTRAINTS ACROSS ALL SLIDES
========================================================= */

@media (max-width: 991px) {
    /* WIPE ALL TOP PADDING, MARGINS & HEIGHT CONSTRAINTS */
    html body.page-home .hero-section,
    html body.page-home .section-hero,
    html body.page-home .hero-slider-section,
    html body.page-home .hero-slider,
    html body.page-home .hero-slides-wrapper,
    html body.page-home .hero-slide,
    html body.page-home .hero-slide .container,
    html body.page-home .hero-grid,
    html body.page-home .hero-grid-slide4,
    html body.page-home .hero-grid-slide5,
    html body.page-home .hero-grid-slide2,
    html body.page-home .hero-content,
    html body.page-home .hero-content-slide4,
    html body.page-home .hero-content-slide5,
    html body .hero-section,
    html body .section-hero,
    html body .hero-slider-section,
    html body .hero-slider,
    html body .hero-slides-wrapper,
    html body .hero-slide,
    html body .hero-slide .container,
    html body .hero-grid,
    html body .hero-content,
    .hero-section,
    .section-hero,
    .hero-slider-section,
    .hero-slider,
    .hero-slides-wrapper,
    .hero-slide,
    .hero-grid,
    .hero-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        top: 0 !important;
    }

    /* APPLY CLEAN TIGHT 8PX GAP BELOW MAIN HEADER */
    html body.page-home .hero-slide,
    html body .hero-slide,
    .hero-slide {
        padding-top: 8px !important;
        padding-bottom: 20px !important;
    }

    html body.page-home .hero-pill-tag,
    html body.page-home .hero-headline-slide4,
    html body.page-home .hero-headline-slide5,
    html body.page-home .slide2-headline,
    html body.page-home .hero-content h1,
    html body.page-home .hero-content h2,
    .hero-pill-tag,
    .hero-headline-slide4,
    .hero-headline-slide5,
    .slide2-headline {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =========================================================
   RESTORE HERO CAROUSEL FLEX SLIDING (ALLOW JS TRANSFORM)
========================================================= */

/* HERO CAROUSEL WRAPPER & FLEX SLIDE REQUIREMENTS */
.hero-slider-section,
.hero-slider,
.section-hero {
    overflow: hidden !important;
    width: 100% !important;
    position: relative !important;
}

html body.page-home .hero-slides-wrapper,
html body .hero-slides-wrapper,
.hero-slides-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.page-home .hero-slide,
html body .hero-slide,
.hero-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
}

@media (max-width: 991px) {
    /* REMOVE TOP PADDING CONSTRAINTS WHILE ALLOWING JS TRANSFORMS */
    html body.page-home .hero-section,
    html body.page-home .section-hero,
    html body.page-home .hero-slider-section,
    html body.page-home .hero-slider,
    html body .hero-section,
    html body .section-hero,
    html body .hero-slider-section,
    html body .hero-slider {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }

    html body.page-home .hero-slide,
    html body .hero-slide,
    .hero-slide {
        padding-top: 8px !important;
        padding-bottom: 20px !important;
    }

    html body.page-home .hero-slide .container,
    html body .hero-slide .container,
    .hero-slide .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    html body.page-home .hero-grid,
    html body .hero-grid,
    .hero-grid {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* =========================================================
   FORCE ALL 5 HERO CAROUSEL SLIDES VISIBLE, FLEX 100% & SLIDING
========================================================= */

.hero-slider-container,
.hero-section {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
}

html body.page-home #heroSlidesWrapper,
html body .hero-slides-wrapper,
#heroSlidesWrapper,
.hero-slides-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.page-home .hero-slide,
html body .hero-slide,
.hero-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* =========================================================
   FORCE CAROUSEL SLIDER FLEX-WRAP NOWRAP & FLEX-SHRINK 0
========================================================= */

.hero-slider-section,
.hero-slider-container,
.hero-section {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
}

html body.page-home #heroSlidesWrapper,
html body.page-home .hero-slides-wrapper,
html body #heroSlidesWrapper,
html body .hero-slides-wrapper,
#heroSlidesWrapper,
.hero-slides-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform !important;
}

html body.page-home .hero-slide,
html body .hero-slide,
.hero-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* =========================================================
   CLEAN HERO CAROUSEL TRACK (NO BLOCKING TRANSFORM IN CSS)
========================================================= */

.hero-slider-section,
.hero-slider-container,
.hero-section {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
}

html body.page-home #heroSlidesWrapper,
html body.page-home .hero-slides-wrapper,
html body #heroSlidesWrapper,
html body .hero-slides-wrapper,
#heroSlidesWrapper,
.hero-slides-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform !important;
}

html body.page-home .hero-slide,
html body .hero-slide,
.hero-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* =========================================================
   WELCOME PILL TAG PADDING & VERTICAL BREATHING ROOM FIX
========================================================= */

html body.page-home .hero-pill-tag,
html body .hero-pill-tag,
.hero-pill-tag {
    background-color: #87246A !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.8px !important;
    padding: 10px 18px !important;
    border-radius: 20px !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}
/* =========================================================
   WELCOME TAG BADGE: RECTANGULAR SHAPE WITH 6PX ROUNDED CORNERS
========================================================= */

html body.page-home .hero-pill-tag,
html body .hero-pill-tag,
.hero-pill-tag {
    background-color: #87246A !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.8px !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}

/* =========================================================
   COMPACT TYPOGRAPHY: SLIDE 2 POINTS (12PX) & SLIDE 5 PIE LABELS (10.5PX)
========================================================= */

@media (max-width: 991px) {
    /* 1. SLIDE 2: COMPACT 12PX POINTS TEXT */
    html body.page-home .cpl-list-text,
    html body.page-home .cpl-list-text strong,
    html body .cpl-list-text,
    html body .cpl-list-text strong,
    .cpl-list-text,
    .cpl-list-text strong {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    /* 2. SLIDE 5: COMPACT 10.5PX SUBTITLE PILL TEXT UNDER EACH PIE CHART */
    html body.page-home .slide2-stats-grid .stat-pill,
    html body.page-home .stat-card .stat-pill,
    html body .stat-pill,
    .stat-pill,
    .pill-purple,
    .pill-teal,
    .pill-coral,
    .pill-magenta {
        font-size: 10.5px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        padding: 4px 8px !important;
        text-align: center !important;
        margin-top: 4px !important;
    }
}

/* =========================================================
   STAT PIE CHARTS SLIGHTLY BIGGER (85PX) WITH 20PX STAT NUMBERS
========================================================= */

.stat-pie-chart-figma,
.pie-circle,
.slide2-stats-grid .stat-pie,
.stat-pie {
    width: 85px !important;
    height: 85px !important;
    min-width: 85px !important;
    min-height: 85px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin: 0 auto 8px auto !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
}

html body.page-home .stat-pie .pie-number-98,
html body .pie-number-98,
.pie-number-98 {
    color: #C7CAE9 !important;
    transform: translateY(-22px) !important;
    display: inline-block !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

html body.page-home .stat-pie .pie-number-85,
html body .pie-number-85,
.pie-number-85 {
    color: #4DD1E3 !important;
    transform: translateY(-22px) !important;
    display: inline-block !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

html body.page-home .stat-pie .pie-number-97,
html body .pie-number-97,
.pie-number-97 {
    color: #F49C85 !important;
    transform: translateY(-22px) !important;
    display: inline-block !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

html body.page-home .stat-pie .pie-number-99,
html body .pie-number-99,
.pie-number-99 {
    color: #C67DB1 !important;
    transform: translateY(-22px) !important;
    display: inline-block !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* =========================================================
   BULLETPROOF HAMBURGER ICON STYLING
========================================================= */
.mobile-hamburger-btn .hamburger-fa-icon {
    font-size: 26px !important;
    color: #ffffff !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* =========================================================
   DESKTOP STAT PIE CHARTS (MIN-WIDTH 992PX): 140PX DIAMETER, 32PX NUMBERS, 14PX LABELS
========================================================= */
@media (min-width: 992px) {
    .stat-pie-chart-figma,
    .pie-circle,
    .slide2-stats-grid .stat-pie,
    .stat-pie {
        width: 140px !important;
        height: 140px !important;
        min-width: 140px !important;
        min-height: 140px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        margin: 0 auto 12px auto !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }

    html body.page-home .stat-pie .pie-number-98,
    html body .pie-number-98,
    .pie-number-98 {
        color: #C7CAE9 !important;
        transform: translateY(-38px) !important;
        display: inline-block !important;
        font-size: 32px !important;
        font-weight: 800 !important;
    }

    html body.page-home .stat-pie .pie-number-85,
    html body .pie-number-85,
    .pie-number-85 {
        color: #4DD1E3 !important;
        transform: translateY(-38px) !important;
        display: inline-block !important;
        font-size: 32px !important;
        font-weight: 800 !important;
    }

    html body.page-home .stat-pie .pie-number-97,
    html body .pie-number-97,
    .pie-number-97 {
        color: #F49C85 !important;
        transform: translateY(-38px) !important;
        display: inline-block !important;
        font-size: 32px !important;
        font-weight: 800 !important;
    }

    html body.page-home .stat-pie .pie-number-99,
    html body .pie-number-99,
    .pie-number-99 {
        color: #C67DB1 !important;
        transform: translateY(-38px) !important;
        display: inline-block !important;
        font-size: 32px !important;
        font-weight: 800 !important;
    }

    html body.page-home .slide2-stats-grid .stat-pill,
    html body.page-home .stat-card .stat-pill,
    html body .stat-pill,
    .stat-pill,
    .pill-purple,
    .pill-teal,
    .pill-coral,
    .pill-magenta {
        font-size: 13.5px !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        padding: 6px 12px !important;
        text-align: center !important;
        margin-top: 6px !important;
    }
}

/* =========================================================
   MOBILE STAT PIE CHARTS (MAX-WIDTH 991PX): 94PX DIAMETER, 22PX NUMBERS, 11PX LABELS
========================================================= */
@media (max-width: 991px) {
    .stat-pie-chart-figma,
    .pie-circle,
    .slide2-stats-grid .stat-pie,
    .stat-pie {
        width: 94px !important;
        height: 94px !important;
        min-width: 94px !important;
        min-height: 94px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        margin: 0 auto 8px auto !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }

    html body.page-home .stat-pie .pie-number-98,
    html body .pie-number-98,
    .pie-number-98 {
        color: #C7CAE9 !important;
        transform: translateY(-20px) !important;
        display: inline-block !important;
        font-size: 22px !important;
        font-weight: 800 !important;
    }

    html body.page-home .stat-pie .pie-number-85,
    html body .pie-number-85,
    .pie-number-85 {
        color: #4DD1E3 !important;
        transform: translateY(-20px) !important;
        display: inline-block !important;
        font-size: 22px !important;
        font-weight: 800 !important;
    }

    html body.page-home .stat-pie .pie-number-97,
    html body .pie-number-97,
    .pie-number-97 {
        color: #F49C85 !important;
        transform: translateY(-20px) !important;
        display: inline-block !important;
        font-size: 22px !important;
        font-weight: 800 !important;
    }

    html body.page-home .stat-pie .pie-number-99,
    html body .pie-number-99,
    .pie-number-99 {
        color: #C67DB1 !important;
        transform: translateY(-20px) !important;
        display: inline-block !important;
        font-size: 22px !important;
        font-weight: 800 !important;
    }

    html body.page-home .slide2-stats-grid .stat-pill,
    html body.page-home .stat-card .stat-pill,
    html body .stat-pill,
    .stat-pill,
    .pill-purple,
    .pill-teal,
    .pill-coral,
    .pill-magenta {
        font-size: 11px !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
        padding: 4px 8px !important;
        text-align: center !important;
        margin-top: 4px !important;
    }
}
/* =========================================================
   DESKTOP STAT PIE CHARTS (MIN-WIDTH 992PX): 200PX DIAMETER & 44PX NUMBERS MOVED DOWN
========================================================= */
@media (min-width: 992px) {
    .stat-pie-chart-figma,
    .pie-circle,
    .slide2-stats-grid .stat-pie,
    .stat-pie {
        width: 200px !important;
        height: 200px !important;
        min-width: 200px !important;
        min-height: 200px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        margin: 0 auto 16px auto !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }

    html body.page-home .stat-pie .pie-number-98,
    html body .pie-number-98,
    .pie-number-98 {
        color: #C7CAE9 !important;
        transform: translateY(-50px) !important;
        display: inline-block !important;
        font-size: 44px !important;
        font-weight: 800 !important;
    }

    html body.page-home .stat-pie .pie-number-85,
    html body .pie-number-85,
    .pie-number-85 {
        color: #4DD1E3 !important;
        transform: translateY(-50px) !important;
        display: inline-block !important;
        font-size: 44px !important;
        font-weight: 800 !important;
    }

    html body.page-home .stat-pie .pie-number-97,
    html body .pie-number-97,
    .pie-number-97 {
        color: #F49C85 !important;
        transform: translateY(-50px) !important;
        display: inline-block !important;
        font-size: 44px !important;
        font-weight: 800 !important;
    }

    html body.page-home .stat-pie .pie-number-99,
    html body .pie-number-99,
    .pie-number-99 {
        color: #C67DB1 !important;
        transform: translateY(-50px) !important;
        display: inline-block !important;
        font-size: 44px !important;
        font-weight: 800 !important;
    }

    html body.page-home .slide2-stats-grid .stat-pill,
    html body.page-home .stat-card .stat-pill,
    html body .stat-pill,
    .stat-pill,
    .pill-purple,
    .pill-teal,
    .pill-coral,
    .pill-magenta {
        font-size: 14px !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        padding: 6px 12px !important;
        text-align: center !important;
        margin-top: 6px !important;
    }
}
/* =========================================================
   DESKTOP STAT PIE PERCENTAGES: 54PX, SEMIBOLD (600), SHIFTED 25PX DOWN (-25PX)
========================================================= */
@media (min-width: 992px) {
    .stat-pie-chart-figma,
    .pie-circle,
    .slide2-stats-grid .stat-pie,
    .stat-pie {
        width: 200px !important;
        height: 200px !important;
        min-width: 200px !important;
        min-height: 200px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        margin: 0 auto 16px auto !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }

    html body.page-home .stat-pie .pie-number-98,
    html body .pie-number-98,
    .pie-number-98 {
        color: #C7CAE9 !important;
        transform: translateY(-25px) !important;
        display: inline-block !important;
        font-size: 54px !important;
        font-weight: 600 !important;
    }

    html body.page-home .stat-pie .pie-number-85,
    html body .pie-number-85,
    .pie-number-85 {
        color: #4DD1E3 !important;
        transform: translateY(-25px) !important;
        display: inline-block !important;
        font-size: 54px !important;
        font-weight: 600 !important;
    }

    html body.page-home .stat-pie .pie-number-97,
    html body .pie-number-97,
    .pie-number-97 {
        color: #F49C85 !important;
        transform: translateY(-25px) !important;
        display: inline-block !important;
        font-size: 54px !important;
        font-weight: 600 !important;
    }

    html body.page-home .stat-pie .pie-number-99,
    html body .pie-number-99,
    .pie-number-99 {
        color: #C67DB1 !important;
        transform: translateY(-25px) !important;
        display: inline-block !important;
        font-size: 54px !important;
        font-weight: 600 !important;
    }

    html body.page-home .slide2-stats-grid .stat-pill,
    html body.page-home .stat-card .stat-pill,
    html body .stat-pill,
    .stat-pill,
    .pill-purple,
    .pill-teal,
    .pill-coral,
    .pill-magenta {
        font-size: 14px !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        padding: 6px 12px !important;
        text-align: center !important;
        margin-top: 6px !important;
    }
}
/* =========================================================
   DESKTOP STAT PIE PERCENTAGES: SHIFTED FURTHER DOWN TO -5PX
========================================================= */
@media (min-width: 992px) {
    .stat-pie-chart-figma,
    .pie-circle,
    .slide2-stats-grid .stat-pie,
    .stat-pie {
        width: 200px !important;
        height: 200px !important;
        min-width: 200px !important;
        min-height: 200px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        margin: 0 auto 16px auto !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }

    html body.page-home .stat-pie .pie-number-98,
    html body .pie-number-98,
    .pie-number-98 {
        color: #C7CAE9 !important;
        transform: translateY(-5px) !important;
        display: inline-block !important;
        font-size: 54px !important;
        font-weight: 600 !important;
    }

    html body.page-home .stat-pie .pie-number-85,
    html body .pie-number-85,
    .pie-number-85 {
        color: #4DD1E3 !important;
        transform: translateY(-5px) !important;
        display: inline-block !important;
        font-size: 54px !important;
        font-weight: 600 !important;
    }

    html body.page-home .stat-pie .pie-number-97,
    html body .pie-number-97,
    .pie-number-97 {
        color: #F49C85 !important;
        transform: translateY(-5px) !important;
        display: inline-block !important;
        font-size: 54px !important;
        font-weight: 600 !important;
    }

    html body.page-home .stat-pie .pie-number-99,
    html body .pie-number-99,
    .pie-number-99 {
        color: #C67DB1 !important;
        transform: translateY(-5px) !important;
        display: inline-block !important;
        font-size: 54px !important;
        font-weight: 600 !important;
    }

    html body.page-home .slide2-stats-grid .stat-pill,
    html body.page-home .stat-card .stat-pill,
    html body .stat-pill,
    .stat-pill,
    .pill-purple,
    .pill-teal,
    .pill-coral,
    .pill-magenta {
        font-size: 14px !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        padding: 6px 12px !important;
        text-align: center !important;
        margin-top: 6px !important;
    }
}

/* =========================================================
   SLIDE 2: STACK LPC ROAD GRAPHIC AND 3 POINTS ONE ON TOP OF ANOTHER
========================================================= */

.hero-cpl-graphic-wrap,
.page-home .hero-cpl-graphic-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 20px !important;
    margin-top: 16px !important;
}

.cpl-road-col,
.cpl-list-col,
.page-home .cpl-road-col,
.page-home .cpl-list-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: block !important;
    margin: 0 !important;
    clear: both !important;
    float: none !important;
}

.cpl-road-col img,
.cpl-road-graphic-img {
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
}

.cpl-list-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* =========================================================
   SLIDE 2 DESKTOP: 2-COLUMN GRID (LEFT TEXT, RIGHT GRAPHIC & POINTS STACKED - NO OVERLAP)
========================================================= */

@media (min-width: 992px) {
    html body.page-home .hero-grid-slide5,
    html body .hero-grid-slide5,
    .hero-grid-slide5 {
        display: grid !important;
        grid-template-columns: 1fr 1.15fr !important;
        gap: 40px !important;
        align-items: center !important;
        width: 100% !important;
    }

    html body.page-home .hero-cpl-graphic-wrap,
    html body .hero-cpl-graphic-wrap,
    .hero-cpl-graphic-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 20px !important;
        margin-left: 20px !important;
    }

    .cpl-road-col,
    .cpl-list-col {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
}
/* =========================================================
   SLIDE 2 DESKTOP: STRICT 48%/48% SPLIT - LPC STACK ALIGNED FAR RIGHT (ZERO OVERLAP)
========================================================= */

@media (min-width: 992px) {
    html body.page-home .hero-grid-slide5,
    html body .hero-grid-slide5,
    .hero-grid-slide5 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 4% !important;
        box-sizing: border-box !important;
    }

    html body.page-home .hero-content-slide5,
    html body .hero-content-slide5,
    .hero-content-slide5 {
        width: 48% !important;
        max-width: 48% !important;
        flex: 0 0 48% !important;
        box-sizing: border-box !important;
    }

    html body.page-home .hero-cpl-graphic-wrap,
    html body .hero-cpl-graphic-wrap,
    .hero-cpl-graphic-wrap {
        width: 48% !important;
        max-width: 48% !important;
        flex: 0 0 48% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        gap: 20px !important;
    }

    .cpl-road-col,
    .cpl-list-col {
        width: 100% !important;
        max-width: 420px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        display: block !important;
    }

    .cpl-road-col img,
    .cpl-road-graphic-img {
        width: 100% !important;
        max-width: 360px !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        display: block !important;
    }
}

/* =========================================================
   REMOVE OPAQUE BACKGROUND ON CPL LIST CARD & MOVE FURTHER RIGHT
========================================================= */

/* 1. REMOVE OPAQUE BACKGROUND ON CPL LIST CARD */
html body.page-home .cpl-list-card,
html body .cpl-list-card,
.cpl-list-card {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}

/* 2. DESKTOP: SHIFT LPC ROAD & POINTS STACK FURTHER RIGHT */
@media (min-width: 992px) {
    html body.page-home .hero-cpl-graphic-wrap,
    html body .hero-cpl-graphic-wrap,
    .hero-cpl-graphic-wrap {
        margin-right: -40px !important;
        margin-left: auto !important;
        align-items: flex-end !important;
    }

    .cpl-road-col,
    .cpl-list-col {
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    .cpl-road-col img,
    .cpl-road-graphic-img {
        margin-right: 0 !important;
        margin-left: auto !important;
    }
}
/* =========================================================
   OVERRIDE LEFT: -325PX & KILL OPAQUE BACKGROUND ON SLIDE 2
========================================================= */

html body.page-home .hero-cpl-graphic-wrap,
html body .hero-cpl-graphic-wrap,
.hero-cpl-graphic-wrap {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;
}

html body.page-home .cpl-list-card,
html body .cpl-list-card,
.cpl-list-card {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}

@media (min-width: 992px) {
    html body.page-home .hero-grid-slide5,
    html body .hero-grid-slide5,
    .hero-grid-slide5 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 60px !important;
        align-items: center !important;
        width: 100% !important;
    }

    html body.page-home .hero-content-slide5,
    html body .hero-content-slide5,
    .hero-content-slide5 {
        grid-column: 1 !important;
        width: 100% !important;
    }

    html body.page-home .hero-cpl-graphic-wrap,
    html body .hero-cpl-graphic-wrap,
    .hero-cpl-graphic-wrap {
        grid-column: 2 !important;
        left: 40px !important; /* Pushes graphic and 3 points 40px further right! */
        width: 100% !important;
        margin: 0 !important;
    }

    .cpl-road-col,
    .cpl-list-col {
        width: 100% !important;
        max-width: 440px !important;
    }
}
/* =========================================================
   SLIDE 2 DESKTOP: BALANCED 2-COLUMN LAYOUT (UNSQUISHED TEXT & FULL RIGHT STACK)
========================================================= */

html body.page-home .hero-cpl-graphic-wrap,
html body .hero-cpl-graphic-wrap,
.hero-cpl-graphic-wrap {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;
}

html body.page-home .cpl-list-card,
html body .cpl-list-card,
.cpl-list-card {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}

@media (min-width: 992px) {
    html body.page-home .hero-grid-slide5,
    html body .hero-grid-slide5,
    .hero-grid-slide5 {
        display: grid !important;
        grid-template-columns: 1.15fr 1fr !important;
        gap: 36px !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html body.page-home .hero-content-slide5,
    html body .hero-content-slide5,
    .hero-content-slide5 {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body.page-home .hero-cpl-graphic-wrap,
    html body .hero-cpl-graphic-wrap,
    .hero-cpl-graphic-wrap {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .cpl-road-col,
    .cpl-list-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .cpl-road-col img,
    .cpl-road-graphic-img {
        width: 100% !important;
        max-width: 380px !important;
        height: auto !important;
        margin: 0 !important;
        display: block !important;
    }
}

/* =========================================================
   EXACT FIGMA FOOTER STYLING (#87246A PURPLE, WHITE LANDSCAPE LOGO, CORAL SUBSCRIBE, WHITE CIRCLE SOCIALS)
========================================================= */

footer.footer-site,
.footer-site {
    background-color: #87246A !important;
    color: #ffffff !important;
    padding: 60px 0 30px 0 !important;
    font-family: var(--font-lexend, 'Lexend', sans-serif) !important;
}

.footer-main-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr !important;
    gap: 32px !important;
    align-items: flex-start !important;
}

@media (max-width: 991px) {
    .footer-main-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

.footer-brand-logo {
    max-width: 220px !important;
    height: auto !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.footer-brand-col p {
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin-bottom: 4px !important;
}

.footer-email-link {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.footer-email-link:hover {
    color: #F5B41A !important;
}

.footer-nav-col h4,
.footer-newsletter-col h4 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.footer-nav-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-nav-col ul li {
    margin-bottom: 10px !important;
}

.footer-nav-col ul li a {
    color: #ffffff !important;
    font-size: 14px !important;
    text-decoration: none !important;
    opacity: 0.9 !important;
    transition: opacity 0.2s ease, color 0.2s ease !important;
}

.footer-nav-col ul li a:hover {
    opacity: 1 !important;
    color: #F5B41A !important;
}

.footer-newsletter-col p {
    color: #ffffff !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
}

.footer-subscribe-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 4px !important;
}

.footer-subscribe-form input[type="email"] {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: none !important;
    width: 100% !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.footer-subscribe-form input[type="email"]::placeholder {
    color: #777777 !important;
}

.footer-subscribe-form button.btn-subscribe,
.footer-subscribe-form button[type="submit"] {
    background-color: #F49C85 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    border: none !important;
    width: 100% !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.footer-subscribe-form button.btn-subscribe:hover {
    background-color: #EE7354 !important;
    transform: translateY(-1px) !important;
}

.footer-social-icons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.footer-social-circle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    color: #87246A !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.footer-social-circle:hover {
    transform: scale(1.1) translateY(-2px) !important;
    background-color: #F5B41A !important;
    color: #ffffff !important;
}

.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding-top: 24px !important;
    margin-top: 40px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* =========================================================
   COMPACT TIGHT FOOTER LINK SPACING (4PX GAP) & 2026 COPYRIGHT
========================================================= */

.footer-nav-col h4,
.footer-newsletter-col h4 {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.footer-nav-col ul li {
    margin-bottom: 4px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.footer-nav-col ul li a {
    color: #ffffff !important;
    font-size: 16px !important;
    text-decoration: none !important;
    opacity: 0.9 !important;
    display: inline-block !important;
    padding: 2px 0 !important;
    transition: opacity 0.2s ease, color 0.2s ease !important;
}

.footer-nav-col ul li a:hover {
    opacity: 1 !important;
    color: #F5B41A !important;
}

.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding-top: 20px !important;
    margin-top: 30px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* =========================================================
   SIDE-BY-SIDE SHOP & RESOURCES COLUMNS & CLEAN &COPY; ENTITY
========================================================= */

.footer-nav-cols-wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: 32px !important;
    align-items: flex-start !important;
}

.footer-nav-cols-wrapper .footer-nav-col {
    flex: 1 1 48% !important;
    min-width: 0 !important;
}

@media (max-width: 991px) {
    .footer-nav-cols-wrapper {
        gap: 20px !important;
        width: 100% !important;
    }
}
/* =========================================================
   FORCE SIDE-BY-SIDE FLEX ROW FOR FOOTER NAV COLUMNS
========================================================= */

.footer-nav-group-row,
html body.page-home .footer-nav-group-row,
html body .footer-nav-group-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
    grid-column: span 3 !important;
}

.footer-nav-group-row .footer-nav-col,
html body.page-home .footer-nav-group-row .footer-nav-col,
html body .footer-nav-group-row .footer-nav-col {
    flex: 1 1 28% !important;
    min-width: 120px !important;
    display: block !important;
}

@media (max-width: 991px) {
    .footer-main-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }

    .footer-nav-group-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .footer-nav-group-row .footer-nav-col {
        flex: 1 1 45% !important;
        min-width: 130px !important;
    }
}

/* =========================================================
   FROSTED GLASS BACKDROP & PURPLE NAVIGATION DRAWER CARD
========================================================= */

#mobileNavigationDrawer.mobile-navigation-drawer,
html body #mobileNavigationDrawer,
.mobile-navigation-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background-color: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

#mobileNavigationDrawer.active,
.mobile-navigation-drawer.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.mobile-navigation-drawer > div,
.mobile-navigation-drawer .mobile-drawer-content {
    background-color: #87246A !important;
    color: #ffffff !important;
    width: 100% !important;
    max-width: 330px !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}
/* =========================================================
   TOP-RIGHT CORNER PURPLE CARD & FULL-SITE FROSTED GLASS BLUR OVERLAY
========================================================= */

.mobile-hamburger-btn .hamburger-svg-img {
    width: 31px !important;
    height: 24px !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
}

#mobileNavigationDrawer.mobile-navigation-drawer,
html body #mobileNavigationDrawer,
.mobile-navigation-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background-color: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: none !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 16px 16px 0 0 !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

#mobileNavigationDrawer.active,
html body #mobileNavigationDrawer.active,
.mobile-navigation-drawer.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#mobileNavigationDrawer > div,
.mobile-navigation-drawer > div,
.mobile-navigation-drawer .mobile-drawer-content {
    background-color: #87246A !important;
    color: #ffffff !important;
    width: 320px !important;
    max-width: 85vw !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}
/* =========================================================
   FULL-SITE 100VW/100VH FROSTED GLASS BLUR & TOP-RIGHT COMPACT PURPLE CARD
========================================================= */

/* 1. OVERRIDE LEGACY 300PX LEFT DRAWER & FORCE FULLSCREEN BACKDROP CONTAINER */
html body #mobileNavigationDrawer.mobile-navigation-drawer,
html body #mobileNavigationDrawer,
#mobileNavigationDrawer.mobile-navigation-drawer,
#mobileNavigationDrawer,
.mobile-navigation-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 999999 !important;
    background-color: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: none !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 20px 20px 0 0 !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

html body #mobileNavigationDrawer.active,
#mobileNavigationDrawer.active,
.mobile-navigation-drawer.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 2. INNER PURPLE CARD: COMPACT HEIGHT (FITS CONTENT) & TOP-RIGHT CORNER */
html body #mobileNavigationDrawer > div,
#mobileNavigationDrawer > div,
.mobile-navigation-drawer > div,
.mobile-navigation-drawer .mobile-drawer-content {
    background-color: #87246A !important;
    color: #ffffff !important;
    width: 320px !important;
    max-width: 85vw !important;
    height: auto !important;
    max-height: 85vh !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    position: relative !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}
/* =========================================================
   DARK BACKDROP OVERLAY (NO BLUR) & FIGMA PURPLE DRAWER CARD
========================================================= */

#mobileNavigationDrawer.mobile-navigation-drawer,
html body #mobileNavigationDrawer,
.mobile-navigation-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: none !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 16px 16px 0 0 !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

#mobileNavigationDrawer.active,
html body #mobileNavigationDrawer.active,
.mobile-navigation-drawer.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.mobile-drawer-card-box,
#mobileNavigationDrawer > div {
    background-color: #87246A !important;
    color: #ffffff !important;
    width: 320px !important;
    max-width: 85vw !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

.mobile-drawer-top-row {
    display: flex !important;
    justify-content: flex-end !important;
    margin-bottom: 8px !important;
}

.close-drawer-btn {
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 28px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.mobile-search-group label {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.mobile-search-input-wrap {
    position: relative !important;
    margin-bottom: 4px !important;
}

.mobile-search-input-wrap .search-icon-inside {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
}

.mobile-search-input-wrap input {
    width: 100% !important;
    padding: 10px 14px 10px 36px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.mobile-search-input-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.mobile-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

.mobile-menu-list li {
    margin-bottom: 4px !important;
}

.mobile-menu-list li a {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: opacity 0.2s ease !important;
}

.mobile-menu-list li a:hover {
    opacity: 0.8 !important;
}

.mobile-drawer-footer-actions {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    margin-top: 10px !important;
    padding-top: 12px !important;
}

.mobile-drawer-footer-actions .action-item {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mobile-drawer-footer-actions .action-item i {
    font-size: 16px !important;
    opacity: 0.9 !important;
}
/* =========================================================
   ABSOLUTE TOP-RIGHT ALIGNMENT & DARK OVERLAY (ZERO BLUR/FROST)
========================================================= */

html body #mobileNavigationDrawer.mobile-navigation-drawer,
html body #mobileNavigationDrawer,
#mobileNavigationDrawer.mobile-navigation-drawer,
#mobileNavigationDrawer,
.mobile-navigation-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    display: none !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 10px 10px 0 0 !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

html body #mobileNavigationDrawer.active,
#mobileNavigationDrawer.active,
.mobile-navigation-drawer.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

html body #mobileNavigationDrawer .mobile-drawer-card-box,
html body #mobileNavigationDrawer > div,
#mobileNavigationDrawer > div,
.mobile-navigation-drawer .mobile-drawer-card-box {
    background-color: #87246A !important;
    color: #ffffff !important;
    width: 320px !important;
    max-width: 88vw !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    transform: none !important;
}
/* =========================================================
   HIGH SPECIFICITY OVERRIDE FOR MOBILE DRAWER & FULL DARK OVERLAY
========================================================= */

/* 1. FULLSCREEN DARK OVERLAY CONTAINER (100VW X 100VH) */
html body #mobileNavigationDrawer.mobile-navigation-drawer,
html body.page-home #mobileNavigationDrawer.mobile-navigation-drawer,
html body #mobileNavigationDrawer,
#mobileNavigationDrawer.mobile-navigation-drawer,
#mobileNavigationDrawer,
.mobile-navigation-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 999999 !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    display: none !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 10px 10px 0 0 !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

html body #mobileNavigationDrawer.active,
html body.page-home #mobileNavigationDrawer.active,
#mobileNavigationDrawer.active,
.mobile-navigation-drawer.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

/* 2. INNER PURPLE CARD: TOP-RIGHT CORNER & COMPACT FIT */
html body #mobileNavigationDrawer .mobile-drawer-card-box,
html body #mobileNavigationDrawer > div,
#mobileNavigationDrawer .mobile-drawer-card-box,
#mobileNavigationDrawer > div,
.mobile-navigation-drawer > div,
.mobile-navigation-drawer .mobile-drawer-card-box {
    background-color: #87246A !important;
    color: #ffffff !important;
    width: 320px !important;
    max-width: 88vw !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    transform: none !important;
}
/* =========================================================
   V2 MENU CODE: CART-LIKE DARK OVERLAY (NO BLUR) & TOP-RIGHT PURPLE CARD
========================================================= */

/* 1. FULLSCREEN DARK OVERLAY CONTAINER (MATCHES CART DRAWER OVERLAY) */
html body #mobileNavigationDrawer.mobile-navigation-drawer,
html body.page-home #mobileNavigationDrawer.mobile-navigation-drawer,
html body #mobileNavigationDrawer,
#mobileNavigationDrawer.mobile-navigation-drawer,
#mobileNavigationDrawer,
.mobile-navigation-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    display: none !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 12px 12px 0 0 !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
}

html body #mobileNavigationDrawer.active,
html body.page-home #mobileNavigationDrawer.active,
#mobileNavigationDrawer.active,
.mobile-navigation-drawer.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

/* 2. INNER PURPLE CARD PANEL: TOP RIGHT CORNER & COMPACT FIT */
html body #mobileNavigationDrawer .mobile-drawer-content-card,
html body #mobileNavigationDrawer > div,
#mobileNavigationDrawer .mobile-drawer-content-card,
#mobileNavigationDrawer > div,
.mobile-navigation-drawer > div,
.mobile-navigation-drawer .mobile-drawer-content-card {
    background-color: #87246A !important;
    color: #ffffff !important;
    width: 320px !important;
    max-width: 85vw !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    transform: none !important;
}
/* =========================================================
   ABSOLUTE TOP-RIGHT VIEWPORT ANCHOR FOR MOBILE DRAWER CARD
========================================================= */

/* 1. FULLSCREEN DARK OVERLAY CONTAINER (100VW X 100VH) */
html body #mobileNavigationDrawer.mobile-navigation-drawer,
html body.page-home #mobileNavigationDrawer.mobile-navigation-drawer,
html body #mobileNavigationDrawer,
#mobileNavigationDrawer.mobile-navigation-drawer,
#mobileNavigationDrawer,
.mobile-navigation-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    display: none !important;
    pointer-events: none !important;
}

html body #mobileNavigationDrawer.active,
html body.page-home #mobileNavigationDrawer.active,
#mobileNavigationDrawer.active,
.mobile-navigation-drawer.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 2. THE PURPLE CARD BOX: ANCHORED ABSOLUTELY TO TOP-RIGHT VIEWPORT (10PX TOP, 10PX RIGHT) */
html body #mobileNavigationDrawer .mobile-drawer-content-card,
html body #mobileNavigationDrawer > div,
#mobileNavigationDrawer .mobile-drawer-content-card,
#mobileNavigationDrawer > div,
.mobile-navigation-drawer > div,
.mobile-navigation-drawer .mobile-drawer-content-card {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    background-color: #87246A !important;
    color: #ffffff !important;
    width: 320px !important;
    max-width: 85vw !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    z-index: 1000000 !important;
}

/* =========================================================
   UNIFIED DESKTOP & MOBILE SLIDE-OUT CART SIDEBAR
========================================================= */

.cart-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 9999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.cart-drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.cart-drawer-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 600px !important;
    max-width: 95vw !important;
    height: 100vh !important;
    background-color: #87246A !important;
    color: #ffffff !important;
    z-index: 10000000 !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translate3d(100%, 0, 0) !important;
    will-change: transform !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cart-drawer-overlay.active .cart-drawer-panel,
.cart-drawer-panel.active {
    transform: translate3d(0, 0, 0) !important;
}

/* =========================================================
   CART SIDEBAR DRAWER BACKGROUND: #8CA5B1 & WIDTH: 600px
========================================================= */

:root {
    --figma-drawer-bg: #8CA5B1 !important;
}

html body .cart-drawer-panel,
html body #figmaCartDrawerOverlay .cart-drawer-panel,
body .cart-drawer-panel,
#figmaCartDrawerOverlay .cart-drawer-panel,
.cart-drawer-panel {
    width: 600px !important;
    max-width: 95vw !important;
    background-color: #8CA5B1 !important;
    background: #8CA5B1 !important;
    color: #ffffff !important;
}

@media (max-width: 620px) {
    html body .cart-drawer-panel,
    html body #figmaCartDrawerOverlay .cart-drawer-panel,
    body .cart-drawer-panel,
    #figmaCartDrawerOverlay .cart-drawer-panel,
    .cart-drawer-panel {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* =========================================================
   CART DRAWER HEADER, CENTERED TITLE & VISIBLE CLOSE BUTTON
========================================================= */
html body .drawer-header,
body .drawer-header,
.drawer-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 24px !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html body .drawer-header-title,
body .drawer-header-title,
.drawer-header-title {
    margin: 0 auto !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #ffffff !important;
}

html body .drawer-close-btn,
body .drawer-close-btn,
.drawer-close-btn,
#closeDrawerBtn {
    position: absolute !important;
    top: 50% !important;
    right: 24px !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 32px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    z-index: 10 !important;
}

html body .drawer-close-btn:hover,
body .drawer-close-btn:hover,
.drawer-close-btn:hover {
    transform: translateY(-50%) scale(1.1) !important;
    opacity: 0.9 !important;
}

/* =========================================================
   CART DRAWER ITEM TITLE, QTY & PRICE (15px, WEIGHT 400)
========================================================= */
html body .drawer-item-title,
body .drawer-item-title,
.drawer-item-title {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
}

html body input.drawer-qty-input,
body input.drawer-qty-input,
.drawer-qty-input,
#drawerItemsBody input.drawer-qty-input {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .drawer-items-table td:nth-child(3),
body .drawer-items-table td:nth-child(3),
.drawer-items-table td:nth-child(3),
html body .drawer-item-price,
body .drawer-item-price,
.drawer-item-price {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
}

/* =========================================================
   CART DRAWER ITEM CARD BOX: WHITE ROUNDED OUTLINE (FIGMA SPEC)
========================================================= */
html body .drawer-items-table,
body .drawer-items-table,
.drawer-items-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    margin-bottom: 20px !important;
}

html body #drawerItemsBody tr,
body #drawerItemsBody tr,
#drawerItemsBody tr {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body #drawerItemsBody tr td,
body #drawerItemsBody tr td,
#drawerItemsBody tr td {
    padding: 14px 16px !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    vertical-align: middle !important;
}

html body #drawerItemsBody tr td:first-child,
body #drawerItemsBody tr td:first-child,
#drawerItemsBody tr td:first-child {
    border-left: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

html body #drawerItemsBody tr td:last-child,
body #drawerItemsBody tr td:last-child,
#drawerItemsBody tr td:last-child {
    border-right: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* =========================================================
   FIGMA DISCOVER WHAT'S INSIDE SECTION STYLING
========================================================= */

.section-products {
    background-color: #F3EFE4 !important;
    padding: 40px 0 60px 0 !important;
}

.products-header-bar-center {
    text-align: center !important;
    margin-bottom: 30px !important;
}

.products-header-bar-center .section-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1A3644 !important;
    margin-bottom: 4px !important;
}

.products-header-bar-center .section-title .script-word {
    font-family: var(--font-script, 'Rock Salt', cursive) !important;
    font-weight: 400 !important;
    font-size: 34px !important;
    color: #23A9BC !important;
    margin-right: 6px !important;
}

.products-subtitle-bar-center .section-header-sub {
    font-size: 15px !important;
    color: #333333 !important;
    max-width: 500px !important;
    margin: 0 !important;
}

.discover-shops-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 45px !important;
    max-width: 480px !important;
    margin: 0 auto 40px auto !important;
}

.shop-column-card {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.shop-column-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 4px !important;
}

.shop-block-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.shop-block-title.title-english {
    color: #E29500 !important;
}

.shop-block-title.title-maths {
    color: #23A9BC !important;
}

.btn-shop-all {
    display: inline-block !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
}

.btn-all-english {
    background-color: #E29500 !important;
}

.btn-all-maths {
    background-color: #23A9BC !important;
}

/* CAROUSEL PRODUCT ITEM CARD */
.shop-carousel-wrapper {
    position: relative !important;
    margin-bottom: 4px !important;
}

.shop-carousel-wrapper .shop-nav-btn {
    position: absolute !important;
    top: 35% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    color: #333333 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.shop-carousel-wrapper .shop-nav-btn:hover {
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
}

.shop-carousel-wrapper .shop-prev {
    left: -16px !important;
}

.shop-carousel-wrapper .shop-next {
    right: -16px !important;
}

.shop-item-card {
    text-align: center !important;
    background: transparent !important;
    padding: 0 !important;
}

.shop-item-thumb {
    position: relative !important;
    margin: 0 auto 16px auto !important;
    max-width: 320px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.shop-item-thumb img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 12px !important;
}

.shop-item-thumb .quickview-trigger {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    color: #ffffff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

.shop-item-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1A3644 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.35 !important;
}

.shop-item-title a {
    color: #1A3644 !important;
    text-decoration: none !important;
}

.shop-item-pills-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.product-badge-pill {
    display: inline-block !important;
    padding: 4px 14px !important;
    border: 1px solid #B0C4DE !important;
    border-radius: 20px !important;
    font-size: 12.5px !important;
    color: #607D8B !important;
    background: #ffffff !important;
    font-weight: 500 !important;
}

.shop-item-stars-row {
    color: #F5B41A !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    margin-bottom: 10px !important;
}

.shop-item-stars-row .reviews-count-text {
    color: #888888 !important;
    font-size: 13px !important;
    margin-left: 4px !important;
}

.shop-item-retail-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #87246A !important;
    margin-bottom: 4px !important;
}

.shop-item-retail-price .retail-label {
    color: #87246A !important;
    font-weight: 700 !important;
}

.shop-item-retail-price .retail-val {
    color: #87246A !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

.shop-item-action-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.item-qty-input {
    width: 48px !important;
    height: 38px !important;
    border: 1px solid #cccccc !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: #ffffff !important;
}

.btn-add-basket-purple {
    background-color: #87246A !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0 20px !important;
    height: 38px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.btn-add-basket-purple:hover {
    background-color: #6e1c56 !important;
}

.shop-dots-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
}

.shop-dots-pagination .shop-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: #cccccc !important;
    display: inline-block !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.shop-dots-pagination .shop-dot.active {
    background-color: #87246A !important;
}

/* FIGMA PURPLE FREE SAMPLE PAGES CARD */
.figma-free-sample-card {
    background-color: #87246A !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 30px 24px !important;
    text-align: center !important;
    max-width: 480px !important;
    margin: 0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.figma-free-sample-card .free-sample-card-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.2 !important;
}

.figma-free-sample-card .free-sample-card-title .script-word-free {
    font-family: var(--font-script, 'Rock Salt', cursive) !important;
    font-weight: 400 !important;
    font-size: 24px !important;
}

.figma-free-sample-card .free-sample-card-desc {
    font-size: 14px !important;
    color: #ffffff !important;
    line-height: 1.5 !important;
    margin: 0 0 20px 0 !important;
    opacity: 0.95 !important;
}

.figma-free-sample-card .btn-free-sample-download {
    display: inline-block !important;
    background-color: #E29500 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 10px 24px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.figma-free-sample-card .btn-free-sample-download:hover {
    transform: translateY(-2px) !important;
    background-color: #c98400 !important;
}
/* =========================================================
   SCOPED DISCOVER WHAT'S INSIDE: DESKTOP VS MOBILE LAYOUT
========================================================= */

/* 1. DESKTOP VIEW (MIN-WIDTH: 992PX): PRESERVE SPACIOUS 2-COLUMN LAYOUT */
@media (min-width: 992px) {
    .discover-shops-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 50px !important;
        max-width: 1200px !important;
        margin: 0 auto 50px auto !important;
    }

    .shop-column-card {
        background: rgba(255, 255, 255, 0.4) !important;
        border-radius: 16px !important;
        padding: 30px !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
    }

    .shop-column-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    .shop-nav-btn {
        display: none !important;
    }

    .shop-dots-pagination {
        display: none !important;
    }

    .figma-free-sample-card {
        display: none !important;
    }

    .free-sample-banner-box {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background-color: #87246A !important;
        color: #ffffff !important;
        border-radius: 16px !important;
        padding: 40px 50px !important;
        margin-top: 50px !important;
    }
}

/* 2. MOBILE VIEW (MAX-WIDTH: 991PX): COMPACT MOBILE CAROUSEL & CARD LAYOUT */
@media (max-width: 991px) {
    .discover-shops-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 45px !important;
        max-width: 480px !important;
        margin: 0 auto 40px auto !important;
    }

    .shop-column-card {
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
    }

    .shop-column-grid {
        display: flex !important;
        overflow-x: clip !important;
    }

    .shop-column-grid .shop-item-card {
        min-width: 100% !important;
        box-sizing: border-box !important;
    }

    .free-sample-banner-box {
        display: none !important;
    }

    .figma-free-sample-card {
        display: block !important;
        background-color: #87246A !important;
        color: #ffffff !important;
        border-radius: 12px !important;
        padding: 30px 24px !important;
        text-align: center !important;
        max-width: 480px !important;
        margin: 0 !important;
    }
}

/* =========================================================
   FIX PRODUCT THUMBNAIL HEIGHT & CAROUSEL SLIDING NO BLANK SPACE
========================================================= */

@media (max-width: 991px) {
    .shop-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
        padding: 4px 0 !important;
    }

    .shop-column-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
        transform: translateX(0);
    }

    .shop-column-grid .shop-item-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 8px !important;
    }

    .shop-item-thumb {
        position: relative !important;
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 auto 16px auto !important;
        border-radius: 12px !important;
        overflow: visible !important; /* Show full image without clipping */
    }

    .shop-item-thumb a {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .shop-item-thumb img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        border-radius: 12px !important;
        object-fit: contain !important;
    }
}
/* =========================================================
   CAROUSEL ARROWS HIGH Z-INDEX & IN-BOUNDS POSITIONING
========================================================= */

@media (max-width: 991px) {
    .shop-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .shop-column-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    .shop-column-grid .shop-item-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
    }

    .shop-carousel-wrapper .shop-nav-btn {
        position: absolute !important;
        top: 32% !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e2e2 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        color: #333333 !important;
        font-size: 16px !important;
        cursor: pointer !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .shop-carousel-wrapper .shop-prev {
        left: 6px !important;
    }

    .shop-carousel-wrapper .shop-next {
        right: 6px !important;
    }
}
/* =========================================================
   CAROUSEL FLEX TRACK & 4-PRODUCT SLIDE NO BLANK SPACE
========================================================= */

@media (max-width: 991px) {
    .shop-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .shop-column-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    .shop-column-grid .shop-item-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
    }

    .shop-carousel-wrapper .shop-nav-btn {
        position: absolute !important;
        top: 32% !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e2e2 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        color: #333333 !important;
        font-size: 16px !important;
        cursor: pointer !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .shop-carousel-wrapper .shop-prev {
        left: 6px !important;
    }

    .shop-carousel-wrapper .shop-next {
        right: 6px !important;
    }
}
/* =========================================================
   HIGH SPECIFICITY OVERRIDE FOR PAGE-HOME MOBILE CAROUSEL GRID
========================================================= */

@media (max-width: 991px) {
    html body.page-home .shop-carousel-wrapper,
    html body .shop-carousel-wrapper,
    .shop-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html body.page-home .shop-column-grid,
    html body .shop-column-grid,
    #gridEnglish.shop-column-grid,
    #gridMaths.shop-column-grid,
    .shop-column-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        width: 100% !important;
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    html body.page-home .shop-item-card,
    html body .shop-item-card,
    .discover-shops-wrapper .shop-item-card,
    .shop-column-grid .shop-item-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }

    .shop-carousel-wrapper .shop-nav-btn {
        position: absolute !important;
        top: 32% !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e2e2 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        color: #333333 !important;
        font-size: 16px !important;
        cursor: pointer !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .shop-carousel-wrapper .shop-prev {
        left: 6px !important;
    }

    .shop-carousel-wrapper .shop-next {
        right: 6px !important;
    }
}

/* =========================================================
   ROUNDED PILL CAPSULE SHOP BUTTONS (MATCHING SCREENSHOT)
========================================================= */

.shop-column-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-bottom: 4px !important;
}

.btn-shop-all {
    display: inline-block !important;
    padding: 10px 24px !important;
    border-radius: 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.btn-all-english {
    background-color: #E59800 !important;
    color: #ffffff !important;
}

.btn-all-maths {
    background-color: #23A9BC !important;
    color: #ffffff !important;
}

.btn-shop-all:hover {
    transform: translateY(-1px) !important;
    opacity: 0.95 !important;
}
/* =========================================================
   SOFT RECTANGULAR SHOP BUTTONS WITH LARGER TYPOGRAPHY
========================================================= */

.shop-column-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-bottom: 4px !important;
}

.btn-shop-all {
    display: inline-block !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.btn-all-english {
    background-color: #E59800 !important;
    color: #ffffff !important;
}

.btn-all-maths {
    background-color: #23A9BC !important;
    color: #ffffff !important;
}

.btn-shop-all:hover {
    transform: translateY(-1px) !important;
    opacity: 0.95 !important;
}
/* =========================================================
   ALIGN SHOP BUTTON LEFT EDGE WITH THUMBNAIL LEFT EDGE
========================================================= */

.shop-column-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    max-width: 320px !important;
    margin: 0 auto 20px auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.btn-shop-all {
    display: inline-block !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    margin: 0 !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.btn-all-english {
    background-color: #E59800 !important;
    color: #ffffff !important;
}

.btn-all-maths {
    background-color: #23A9BC !important;
    color: #ffffff !important;
}

.btn-shop-all:hover {
    transform: translateY(-1px) !important;
    opacity: 0.95 !important;
}

/* =========================================================
   MOBILE QUICK VIEW MODAL: TEXT STACKED UNDER THUMBNAIL
========================================================= */

@media (max-width: 991px) {
    html body .quickview-modal-overlay,
    .quickview-modal-overlay {
        padding: 16px 10px !important;
        align-items: center !important;
        justify-content: center !important;
        overflow-y: auto !important;
    }

    html body .figma-quickview-card,
    #quickViewModal .figma-quickview-card,
    .figma-quickview-card {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        max-width: 95vw !important;
        width: 100% !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        padding: 24px 18px !important;
        gap: 16px !important;
        box-sizing: border-box !important;
        border-radius: 16px !important;
    }

    .qv-cover-side {
        width: 100% !important;
        max-width: 240px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .qv-cover-side img {
        width: 100% !important;
        height: auto !important;
        max-height: 260px !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    .qv-details-side,
    .qv-info-side,
    .figma-quickview-card > div:not(.qv-cover-side) {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .qv-product-title {
        font-size: 19px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }
}


/* =========================================================
   PERMANENT MOBILE CAROUSEL FLEX TRACK OVERRIDE
========================================================= */

@media (max-width: 991px) {
    html body.page-home .shop-carousel-wrapper,
    html body .shop-carousel-wrapper,
    .shop-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html body.page-home .shop-column-grid,
    html body .shop-column-grid,
    #gridEnglish.shop-column-grid,
    #gridMaths.shop-column-grid,
    .shop-column-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        width: 100% !important;
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    html body.page-home .shop-item-card,
    html body .shop-item-card,
    .discover-shops-wrapper .shop-item-card,
    .shop-column-grid .shop-item-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }

    .shop-carousel-wrapper .shop-nav-btn {
        position: absolute !important;
        top: 32% !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e2e2 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        color: #333333 !important;
        font-size: 16px !important;
        cursor: pointer !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .shop-carousel-wrapper .shop-prev {
        left: 6px !important;
    }

    .shop-carousel-wrapper .shop-next {
        right: 6px !important;
    }
}
/* =========================================================
   NATIVE SCROLL-SNAP CAROUSEL ENGINE (MOBILE PERFECT SLIDING)
========================================================= */

@media (max-width: 991px) {
    html body.page-home .shop-carousel-wrapper,
    html body .shop-carousel-wrapper,
    .shop-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html body.page-home .shop-column-grid,
    html body .shop-column-grid,
    #gridEnglish.shop-column-grid,
    #gridMaths.shop-column-grid,
    .shop-column-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        width: 100% !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        -webkit-overflow-scrolling: touch !important;
        transform: none !important;
    }

    .shop-column-grid::-webkit-scrollbar {
        display: none !important;
    }

    html body.page-home .shop-item-card,
    html body .shop-item-card,
    .discover-shops-wrapper .shop-item-card,
    .shop-column-grid .shop-item-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
        margin: 0 !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    .shop-carousel-wrapper .shop-nav-btn {
        position: absolute !important;
        top: 32% !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e2e2 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        color: #333333 !important;
        font-size: 16px !important;
        cursor: pointer !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .shop-carousel-wrapper .shop-prev {
        left: 6px !important;
    }

    .shop-carousel-wrapper .shop-next {
        right: 6px !important;
    }
}


/* =========================================================
   DISCOVER WHAT'S INSIDE COLORS, 16PX SUBTITLE & PENCIL REDUCTION
========================================================= */

.products-header-bar-center {
    text-align: center !important;
    margin-bottom: 24px !important;
}

.products-header-bar-center .section-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #315567 !important;
    margin-bottom: 4px !important;
}

.products-header-bar-center .section-title .script-word {
    font-family: var(--font-script, 'Rock Salt', cursive) !important;
    font-weight: 400 !important;
    font-size: 34px !important;
    color: #5C7E8E !important;
    margin-right: 6px !important;
}

.products-header-bar-center .section-title .title-whats-inside {
    color: #315567 !important;
    font-weight: 700 !important;
}

.products-header-bar-center .pencil-wrap {
    text-align: center !important;
    margin: 2px auto 14px auto !important;
}

.products-header-bar-center .pencil-line--products {
    width: 230px !important;
    max-width: 230px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
}

.products-subtitle-bar-center .section-header-sub {
    font-size: 16px !important;
    color: #1C3D4E !important;
    max-width: 520px !important;
    margin: 0 !important;
    line-height: 1.45 !important;
}

.shop-item-stars-row {
    color: #F5B41A !important;
}


/* =========================================================
   DESKTOP SHOP BUTTONS LEFT ALIGNMENT WITH FIRST THUMBNAIL
========================================================= */

@media (min-width: 992px) {
    .shop-column-header-row {
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        padding-left: 0 !important;
        justify-content: flex-start !important;
        display: flex !important;
        align-items: center !important;
    }

    .shop-column-header-row .btn-shop-all {
        margin-left: 0 !important;
    }

    .shop-column-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}


/* =========================================================
   BULLETPROOF INLINE HAMBURGER SVG STYLING FOR LIVE WORDPRESS
========================================================= */

.mobile-hamburger-btn {
    background: none !important;
    border: none !important;
    padding: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hamburger-inline-svg {
    width: 28px !important;
    height: 22px !important;
    display: block !important;
}

.hamburger-inline-svg rect {
    fill: #ffffff !important;
}


/* =========================================================
   FOOTER WHITE BRAND LOGO STYLING
========================================================= */

.footer-brand-logo {
    max-height: 52px !important;
    width: auto !important;
    display: block !important;
    margin-bottom: 4px !important;
    object-fit: contain !important;
}


/* =========================================================
   CAROUSEL DRAG & SWIPE PREVENT DEFAULT IMAGE SELECTION
========================================================= */

.shop-column-grid,
.audience-grid-figma,
.articles-grid-figma,
.shop-carousel-wrapper {
    touch-action: pan-y !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    cursor: grab !important;
}

.shop-column-grid img,
.audience-grid-figma img,
.articles-grid-figma img,
.shop-item-card img,
.audience-card-figma img,
.article-card img {
    pointer-events: none !important;
    -webkit-user-drag: none !important;
    user-select: none !important;
}

.footer-brand-logo-svg {
    max-height: 52px !important;
    width: auto !important;
    display: block !important;
    margin-bottom: 4px !important;
}


/* =========================================================
   MAIN HERO CAROUSEL DRAG & SWIPE PREVENT DEFAULT SELECTION
========================================================= */

.hero-slider-wrap,
.hero-slides-wrapper,
#heroSlidesWrapper {
    touch-action: pan-y !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    cursor: grab !important;
}

.hero-slides-wrapper img,
#heroSlidesWrapper img,
.hero-grid-slide1 img,
.hero-grid-slide2 img,
.hero-grid-slide3 img,
.hero-grid-slide4 img,
.hero-grid-slide5 img {
    pointer-events: none !important;
    -webkit-user-drag: none !important;
    user-select: none !important;
}


/* =========================================================
   FOOTER WHITE BRAND LOGO PNG FOR LIVE WORDPRESS COMPATIBILITY
========================================================= */

.footer-brand-logo {
    max-height: 48px !important;
    width: auto !important;
    max-width: 240px !important;
    display: block !important;
    margin-bottom: 4px !important;
    object-fit: contain !important;
}


/* =========================================================
   AUDIENCE SECTION FIGMA 1:1 MATCH
========================================================= */

html body.page-home .audience-carousel-wrapper,
html body .audience-carousel-wrapper,
.audience-carousel-wrapper {
    margin: 0 auto !important;
    max-width: 1140px !important;
}

html body.page-home .audience-grid-figma,
html body .audience-grid-figma,
.audience-grid-figma {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    justify-content: center !important;
    align-items: stretch !important;
    margin: 0 auto !important;
}

html body.page-home .audience-card-figma,
html body .audience-card-figma {
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Card 1: Parents - Yellow Background & Dark Maroon Text */
html body.page-home .audience-card-figma.card-parents,
html body .audience-card-figma.card-parents {
    background-color: #F4BA3E !important;
    color: #FFFFFF !important;
}

html body.page-home .audience-card-figma.card-parents .audience-card-body h3,
html body.page-home .audience-card-figma.card-parents .audience-card-body p,
html body .audience-card-figma.card-parents .audience-card-body h3,
html body .audience-card-figma.card-parents .audience-card-body p {
    color: #FFFFFF !important;
}

/* Card 2: Home Educators - Coral Background & White Text */
html body.page-home .audience-card-figma.card-home-educators,
html body .audience-card-figma.card-home-educators {
    background-color: #F26C4F !important;
    color: #FFFFFF !important;
}

html body.page-home .audience-card-figma.card-home-educators .audience-card-body h3,
html body.page-home .audience-card-figma.card-home-educators .audience-card-body p,
html body .audience-card-figma.card-home-educators .audience-card-body h3,
html body .audience-card-figma.card-home-educators .audience-card-body p {
    color: #FFFFFF !important;
}

/* Card 3: Teachers & Tutors - Teal Background & White Text */
html body.page-home .audience-card-figma.card-teachers-tutors,
html body .audience-card-figma.card-teachers-tutors {
    background-color: #17A2B8 !important;
    color: #FFFFFF !important;
}

html body.page-home .audience-card-figma.card-teachers-tutors .audience-card-body h3,
html body.page-home .audience-card-figma.card-teachers-tutors .audience-card-body p,
html body .audience-card-figma.card-teachers-tutors .audience-card-body h3,
html body .audience-card-figma.card-teachers-tutors .audience-card-body p {
    color: #FFFFFF !important;
}

/* Card Thumb & Wavy Divider */
html body.page-home .audience-card-thumb,
html body .audience-card-thumb {
    position: relative !important;
    height: 220px !important;
    overflow: hidden !important;
}

html body.page-home .audience-card-thumb img,
html body .audience-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body.page-home .card-wave-divider,
html body .card-wave-divider {
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 100% !important;
    line-height: 0 !important;
    z-index: 2 !important;
}

html body.page-home .card-wave-divider svg,
html body .card-wave-divider svg {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
}

html body.page-home .fill-card-yellow, html body .fill-card-yellow { fill: #F4BA3E !important; }
html body.page-home .fill-card-orange, html body .fill-card-orange { fill: #F26C4F !important; }
html body.page-home .fill-card-teal, html body .fill-card-teal { fill: #17A2B8 !important; }

/* Circular Badge Overlapping Right Edge */
html body.page-home .card-badge-circle,
html body .card-badge-circle {
    position: absolute !important;
    right: 20px !important;
    top: -24px !important;
    width: 70px !important;
    height: 70px !important;
    background-color: #FFF9EE !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 5 !important;
}

html body.page-home .card-badge-circle.badge-yellow, html body .card-badge-circle.badge-yellow { color: #E09900 !important; }
html body.page-home .card-badge-circle.badge-orange, html body .card-badge-circle.badge-orange { color: #F26C4F !important; }
html body.page-home .card-badge-circle.badge-teal, html body .card-badge-circle.badge-teal { color: #17A2B8 !important; }

/* Card Body & Typography */
html body.page-home .audience-card-body,
html body .audience-card-body {
    padding: 24px 24px 28px 24px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    text-align: center !important;
}

html body.page-home .audience-card-body h3,
html body .audience-card-body h3 {
    font-family: var(--font-lexend, 'Lexend', sans-serif) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    text-align: center !important;
}

html body.page-home .audience-card-body p,
html body .audience-card-body p {
    font-family: var(--font-lexend, 'Lexend', sans-serif) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
    text-align: center !important;
    font-weight: 400 !important;
}

/* Download PDF Button - Deep Purple Pill */
html body.page-home .btn-pdf-download,
html body .btn-pdf-download {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #87246A !important;
    color: #FFFFFF !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    margin: 0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
    width: fit-content !important;
}

html body.page-home .btn-pdf-download:hover,
html body .btn-pdf-download:hover {
    background-color: #6d1b54 !important;
    transform: translateY(-2px) !important;
    color: #FFFFFF !important;
}

/* Mobile Carousel Adjustments (< 992px) */
@media (max-width: 991px) {
    html body.page-home .audience-carousel-wrapper,
    html body .audience-carousel-wrapper {
        position: relative !important;
        overflow: hidden !important;
        padding: 0 16px 20px 16px !important;
    }

    html body.page-home .audience-grid-figma,
    html body .audience-grid-figma {
        display: flex !important;
        grid-template-columns: unset !important;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        width: 100% !important;
    }

    html body.page-home .audience-card-figma,
    html body .audience-card-figma {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html body.page-home .audience-nav-btn,
    html body .audience-nav-btn {
        position: absolute !important;
        top: 45% !important;
        transform: translateY(-50%) !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: #FFFFFF !important;
        color: #333333 !important;
        font-size: 18px !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        cursor: pointer !important;
    }

    html body.page-home .audience-prev, html body .audience-prev { left: 4px !important; }
    html body.page-home .audience-next, html body .audience-next { right: 4px !important; }

    html body.page-home .audience-dots-pagination,
    html body .audience-dots-pagination {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }

    html body.page-home .audience-dot,
    html body .audience-dot {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.40) !important;
        cursor: pointer !important;
        transition: background 0.3s ease, transform 0.3s ease !important;
    }

    html body.page-home .audience-dot.active,
    html body .audience-dot.active {
        background: #FFFFFF !important;
        transform: scale(1.2) !important;
    }
}


/* =========================================================
   MOBILE AUDIENCE SECTION: TALLER BG & 100% CENTERED CAROUSEL
========================================================= */

@media (max-width: 991px) {
    /* Taller Background Section with Top Wave */
    html body.page-home .section-audience,
    html body .section-audience {
        padding-top: 85px !important;
        padding-bottom: 90px !important;
        position: relative !important;
        overflow: hidden !important;
        min-height: 860px !important;
        box-sizing: border-box !important;
    }

    html body.page-home .section-audience .section-wave-top,
    html body .section-audience .section-wave-top {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 3 !important;
    }

    /* 100% Centered Single Card Carousel Wrapper */
    html body.page-home .audience-carousel-wrapper,
    html body .audience-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 440px !important;
        margin: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    html body.page-home .audience-grid-figma,
    html body .audience-grid-figma {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(0);
    }

    html body.page-home .audience-card-figma,
    html body .audience-card-figma {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Floating White Navigation Buttons */
    html body.page-home .audience-nav-btn,
    html body .audience-nav-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #FFFFFF !important;
        color: #222222 !important;
        font-size: 16px !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 25 !important;
        cursor: pointer !important;
    }

    html body.page-home .audience-prev, html body .audience-prev { left: 4px !important; }
    html body.page-home .audience-next, html body .audience-next { right: 4px !important; }

    /* 3-Dot Pagination Below Card */
    html body.page-home .audience-dots-pagination,
    html body .audience-dots-pagination {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 24px !important;
    }

    html body.page-home .audience-dot,
    html body .audience-dot {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.45) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    html body.page-home .audience-dot.active,
    html body .audience-dot.active {
        background: #FFFFFF !important;
        transform: scale(1.3) !important;
    }
}


/* =========================================================
   AUDIENCE SECTION: HIGH Z-INDEX CONTENT & PERFECT 100% CENTERING
========================================================= */

/* Ensure all section content sits above background layers */
html body.page-home .section-audience,
html body .section-audience {
    position: relative !important;
    z-index: 1 !important;
}

html body.page-home .section-audience .section-wave-top,
html body .section-audience .section-wave-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

html body.page-home .section-audience .container,
html body .section-audience .container {
    position: relative !important;
    z-index: 10 !important;
}

html body.page-home .audience-header-wrap,
html body .audience-header-wrap,
html body.page-home .audience-main-title,
html body .audience-main-title,
html body.page-home .audience-sub-title,
html body .audience-sub-title {
    position: relative !important;
    z-index: 12 !important;
}

html body.page-home .audience-carousel-wrapper,
html body .audience-carousel-wrapper {
    position: relative !important;
    z-index: 12 !important;
}

/* Mobile Centering (< 992px) */
@media (max-width: 991px) {
    html body.page-home .section-audience,
    html body .section-audience {
        padding-top: 90px !important;
        padding-bottom: 90px !important;
        min-height: 870px !important;
    }

    html body.page-home .audience-carousel-wrapper,
    html body .audience-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html body.page-home .audience-grid-figma,
    html body .audience-grid-figma {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        scroll-snap-type: none !important;
        overflow-x: visible !important;
    }

    html body.page-home .audience-card-figma,
    html body .audience-card-figma {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 15 !important;
    }

    /* Floating Arrow Buttons High Z-Index */
    html body.page-home .audience-nav-btn,
    html body .audience-nav-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #FFFFFF !important;
        color: #222222 !important;
        font-size: 16px !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 50 !important;
        cursor: pointer !important;
    }

    html body.page-home .audience-prev, html body .audience-prev { left: 2px !important; }
    html body.page-home .audience-next, html body .audience-next { right: 2px !important; }

    /* Pagination Dots High Z-Index */
    html body.page-home .audience-dots-pagination,
    html body .audience-dots-pagination {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 24px !important;
        position: relative !important;
        z-index: 50 !important;
    }
}


/* =========================================================
   FIX AUDIENCE SECTION OVERLAP: PLACE AUDIENCE ON TOP OF SHOP SECTION
========================================================= */

/* Section 2 (Shop section) stack order */
html body.page-home .section-shop,
html body .section-shop,
.section-shop {
    position: relative !important;
    z-index: 2 !important;
}

/* Section 3 (Audience section) sits ON TOP of Section 2 */
html body.page-home .section-audience,
html body .section-audience,
.section-audience {
    position: relative !important;
    z-index: 10 !important;
    margin-top: -30px !important;
    padding-top: 50px !important;
}

/* Top Wave of Audience section */
html body.page-home .section-audience .section-wave-top,
html body .section-audience .section-wave-top,
.section-wave-svg--audience {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* Audience Header & Title High Z-Index & Clear Margin */
html body.page-home .section-audience .container,
html body .section-audience .container {
    position: relative !important;
    z-index: 15 !important;
}

html body.page-home .audience-header-wrap,
html body .audience-header-wrap {
    position: relative !important;
    z-index: 20 !important;
    margin-top: 35px !important;
    text-align: center !important;
}

html body.page-home .audience-main-title,
html body .audience-main-title {
    position: relative !important;
    z-index: 20 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #FFFFFF !important;
    margin-bottom: 4px !important;
    text-align: center !important;
}

html body.page-home .audience-sub-title,
html body .audience-sub-title {
    position: relative !important;
    z-index: 20 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #FFFFFF !important;
    max-width: 720px !important;
    margin: 0 auto 32px auto !important;
    text-align: center !important;
}
/* =========================================================
   FIX AUDIENCE SECTION CUTOFF: FULL VISIBILITY & HIGH Z-INDEX
========================================================= */

/* Force Section 2 (Shop section) to a low z-index */
html body.page-home #shop,
html body.page-home .section-shop,
html body #shop,
html body .section-shop,
.section-shop {
    position: relative !important;
    z-index: 1 !important;
}

/* Force Section 3 (Audience section) to sit ON TOP of Section 2 with zero clipping */
html body.page-home #audience,
html body.page-home .section-audience,
html body #audience,
html body .section-audience,
.section-audience {
    position: relative !important;
    z-index: 99 !important;
    margin-top: -40px !important;
    padding-top: 100px !important;
    padding-bottom: 90px !important;
    overflow: visible !important;
}

/* Top Wave of Audience Section */
html body.page-home .section-audience .section-wave-top,
html body .section-audience .section-wave-top,
.section-wave-svg--audience {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Audience Container & Header Wrap High Z-Index */
html body.page-home .section-audience .container,
html body .section-audience .container {
    position: relative !important;
    z-index: 100 !important;
}

html body.page-home .audience-header-wrap,
html body .audience-header-wrap {
    position: relative !important;
    z-index: 105 !important;
    margin-top: 40px !important;
    margin-bottom: 24px !important;
    text-align: center !important;
}

html body.page-home .audience-main-title,
html body .audience-main-title {
    position: relative !important;
    z-index: 110 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #FFFFFF !important;
    margin-bottom: 4px !important;
    text-align: center !important;
    font-size: 32px !important;
}

html body.page-home .audience-sub-title,
html body .audience-sub-title {
    position: relative !important;
    z-index: 110 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #FFFFFF !important;
    max-width: 720px !important;
    margin: 0 auto 28px auto !important;
    text-align: center !important;
}

@media (max-width: 991px) {
    html body.page-home .section-audience,
    html body .section-audience {
        margin-top: -30px !important;
        padding-top: 110px !important;
        padding-bottom: 80px !important;
        min-height: 880px !important;
    }

    html body.page-home .audience-header-wrap,
    html body .audience-header-wrap {
        margin-top: 50px !important;
        margin-bottom: 4px !important;
    }

    html body.page-home .audience-main-title,
    html body .audience-main-title {
        font-size: 26px !important;
    }
}
/* =========================================================
   MOVE AUDIENCE SECTION CONTENT DOWN FOR CLEARANCE
========================================================= */

html body.page-home .section-audience,
html body .section-audience,
.section-audience {
    position: relative !important;
    z-index: 99 !important;
    margin-top: -40px !important;
    padding-top: 150px !important;
    padding-bottom: 100px !important;
    overflow: visible !important;
}

html body.page-home .audience-header-wrap,
html body .audience-header-wrap {
    position: relative !important;
    z-index: 105 !important;
    margin-top: 75px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
}

@media (max-width: 991px) {
    html body.page-home .section-audience,
    html body .section-audience {
        margin-top: -30px !important;
        padding-top: 160px !important;
        padding-bottom: 90px !important;
        min-height: 940px !important;
    }

    html body.page-home .audience-header-wrap,
    html body .audience-header-wrap {
        margin-top: 85px !important;
        margin-bottom: 24px !important;
    }
}
/* =========================================================
   AUDIENCE SECTION: REVERT DESKTOP & BORDERLESS MOBILE SLIDER
========================================================= */

/* --- DESKTOP VIEW (MIN-WIDTH: 992PX) --- */
@media (min-width: 992px) {
    html body.page-home .section-audience,
    html body .section-audience,
    .section-audience {
        position: relative !important;
        z-index: 10 !important;
        margin-top: 0 !important;
        padding-top: 80px !important;
        padding-bottom: 80px !important;
        overflow: visible !important;
    }

    html body.page-home .audience-header-wrap,
    html body .audience-header-wrap {
        margin-top: 0 !important;
        margin-bottom: 28px !important;
        text-align: center !important;
    }

    html body.page-home .audience-carousel-wrapper,
    html body .audience-carousel-wrapper,
    .audience-carousel-wrapper {
        max-width: 1140px !important;
        margin: 0 auto !important;
        overflow: visible !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    html body.page-home .audience-grid-figma,
    html body .audience-grid-figma,
    .audience-grid-figma {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 28px !important;
        justify-content: center !important;
        align-items: stretch !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    html body.page-home .audience-card-figma,
    html body .audience-card-figma {
        flex: unset !important;
        width: auto !important;
        min-width: unset !important;
        max-width: unset !important;
        border-radius: 20px !important;
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12) !important;
    }
}

/* --- MOBILE VIEW (MAX-WIDTH: 991PX) --- */
@media (max-width: 991px) {
    html body.page-home .section-audience,
    html body .section-audience,
    .section-audience {
        position: relative !important;
        z-index: 10 !important;
        margin-top: -30px !important;
        padding-top: 160px !important;
        padding-bottom: 90px !important;
        min-height: 920px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body.page-home .audience-header-wrap,
    html body .audience-header-wrap {
        position: relative !important;
        z-index: 15 !important;
        margin-top: 85px !important;
        margin-bottom: 24px !important;
        text-align: center !important;
    }

    html body.page-home .audience-carousel-wrapper,
    html body .audience-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 16px 20px 16px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    html body.page-home .audience-grid-figma,
    html body .audience-grid-figma {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    html body.page-home .audience-card-figma,
    html body .audience-card-figma {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        border-radius: 20px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
        position: relative !important;
        z-index: 15 !important;
        border: none !important;
    }

    html body.page-home .audience-nav-btn,
    html body .audience-nav-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #FFFFFF !important;
        color: #222222 !important;
        font-size: 16px !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 50 !important;
        cursor: pointer !important;
    }

    html body.page-home .audience-prev, html body .audience-prev { left: 4px !important; }
    html body.page-home .audience-next, html body .audience-next { right: 4px !important; }

    html body.page-home .audience-dots-pagination,
    html body .audience-dots-pagination {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 24px !important;
        position: relative !important;
        z-index: 50 !important;
    }
}
/* =========================================================
   AUDIENCE SECTION: REVERT DESKTOP & FULL WIDTH MOBILE SLIDER WITH CARD GAPS
========================================================= */

/* --- DESKTOP VIEW (MIN-WIDTH: 992PX) --- */
@media (min-width: 992px) {
    html body.page-home .section-audience,
    html body .section-audience,
    .section-audience {
        position: relative !important;
        z-index: 10 !important;
        margin-top: 0 !important;
        padding-top: 80px !important;
        padding-bottom: 80px !important;
        overflow: visible !important;
    }

    html body.page-home .audience-header-wrap,
    html body .audience-header-wrap {
        margin-top: 0 !important;
        margin-bottom: 28px !important;
        text-align: center !important;
    }

    html body.page-home .audience-carousel-wrapper,
    html body .audience-carousel-wrapper,
    .audience-carousel-wrapper {
        max-width: 1140px !important;
        margin: 0 auto !important;
        overflow: visible !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    html body.page-home .audience-grid-figma,
    html body .audience-grid-figma,
    .audience-grid-figma {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 28px !important;
        justify-content: center !important;
        align-items: stretch !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
    }

    html body.page-home .audience-card-figma,
    html body .audience-card-figma {
        flex: unset !important;
        width: auto !important;
        min-width: unset !important;
        max-width: unset !important;
        border-radius: 20px !important;
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12) !important;
        scroll-snap-align: unset !important;
    }
}

/* --- MOBILE VIEW (MAX-WIDTH: 991PX) --- */
@media (max-width: 991px) {
    html body.page-home .section-audience,
    html body .section-audience,
    .section-audience {
        position: relative !important;
        z-index: 10 !important;
        margin-top: -30px !important;
        padding-top: 160px !important;
        padding-bottom: 90px !important;
        min-height: 920px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body.page-home .audience-header-wrap,
    html body .audience-header-wrap {
        position: relative !important;
        z-index: 15 !important;
        margin-top: 85px !important;
        margin-bottom: 24px !important;
        text-align: center !important;
    }

    html body.page-home .audience-carousel-wrapper,
    html body .audience-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    html body.page-home .audience-grid-figma,
    html body .audience-grid-figma {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 20px !important;
        padding: 10px 24px 20px 24px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        transform: none !important;
    }

    html body.page-home .audience-grid-figma::-webkit-scrollbar,
    html body .audience-grid-figma::-webkit-scrollbar {
        display: none !important;
    }

    html body.page-home .audience-card-figma,
    html body .audience-card-figma {
        flex: 0 0 calc(100vw - 48px) !important;
        min-width: calc(100vw - 48px) !important;
        max-width: 400px !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        border-radius: 20px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
        position: relative !important;
        z-index: 15 !important;
        border: none !important;
    }

    html body.page-home .audience-nav-btn,
    html body .audience-nav-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #FFFFFF !important;
        color: #222222 !important;
        font-size: 16px !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 50 !important;
        cursor: pointer !important;
    }

    html body.page-home .audience-prev, html body .audience-prev { left: 4px !important; }
    html body.page-home .audience-next, html body .audience-next { right: 4px !important; }

    html body.page-home .audience-dots-pagination,
    html body .audience-dots-pagination {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 20px !important;
        position: relative !important;
        z-index: 50 !important;
    }
}


/* =========================================================
   REMOVE SHADOWS BEHIND AUDIENCE CARDS & ALL WHITE PARENTS TEXT
========================================================= */

html body.page-home .audience-card-figma,
html body .audience-card-figma,
.audience-card-figma,
.audience-card-figma:hover {
    box-shadow: none !important;
}

html body.page-home .audience-card-figma.card-parents,
html body.page-home .audience-card-figma.card-parents .audience-card-body h3,
html body.page-home .audience-card-figma.card-parents .audience-card-body p,
html body .audience-card-figma.card-parents,
html body .audience-card-figma.card-parents .audience-card-body h3,
html body .audience-card-figma.card-parents .audience-card-body p {
    color: #FFFFFF !important;
}


/* =========================================================
   AUDIENCE SUBTITLE: LEXEND REGULAR (DESKTOP & MOBILE)
========================================================= */
html body.page-home .audience-sub-title,
html body .audience-sub-title,
.audience-sub-title {
    font-family: var(--font-lexend, 'Lexend', sans-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* =========================================================
   MOBILE VIDEO SECTION RECTIFIED SIZING & SHORTER HEIGHT
========================================================= */
@media (max-width: 991px) {
    html body.page-home .section-video,
    html body .section-video,
    .section-video {
        min-height: auto !important;
        height: auto !important;
        padding-top: 100px !important;
        padding-bottom: 90px !important;
        box-sizing: border-box !important;
    }

    html body.page-home .video-banner-container,
    html body .video-banner-container,
    .video-banner-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    html body.page-home .video-play-btn-circle,
    html body .video-play-btn-circle,
    .video-play-btn-circle {
        width: 70px !important;
        height: 70px !important;
        font-size: 18px !important;
        margin-bottom: 4px !important;
    }

    html body.page-home .video-banner-title,
    html body .video-banner-title {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }

    html body.page-home .video-banner-title-thin,
    html body .video-banner-title-thin {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}


/* =========================================================
   WHY CHOOSE US SECTION: MOBILE STACKED CARDS & FULL SCREEN WIDTH
========================================================= */
@media (max-width: 991px) {
    html body.page-home .section-why-choose-us,
    html body .section-why-choose-us,
    .section-why-choose-us {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    html body.page-home .section-why-choose-us .container,
    html body .section-why-choose-us .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    html body.page-home .why-rows-wrapper,
    html body.page-home .why-row,
    html body.page-home .why-col-left,
    html body.page-home .why-col-right,
    html body .why-rows-wrapper,
    html body .why-row,
    html body .why-col-left,
    html body .why-col-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 20px !important;
        box-sizing: border-box !important;
    }

    html body.page-home .why-card-box,
    html body.page-home .why-graphic-card,
    html body .why-card-box,
    html body .why-graphic-card {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 10px 0 !important;
        border-radius: 16px !important;
    }

    html body.page-home .cpl-road-img,
    html body .cpl-road-img {
        width: 100% !important;
        height: auto !important;
        border-radius: 16px !important;
    }
}
/* =========================================================
   WHY CHOOSE US SECTION: GUARANTEE WAVE VISIBILITY & OVERFLOW VISIBLE
========================================================= */
html body.page-home .section-why-choose-us,
html body .section-why-choose-us,
.section-why-choose-us {
    position: relative !important;
    z-index: 10 !important;
    overflow: visible !important;
}

html body.page-home .section-why-choose-us .section-wave-top,
html body .section-why-choose-us .section-wave-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(-99%) !important;
    line-height: 0 !important;
    z-index: 10 !important;
    pointer-events: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body.page-home .section-wave-svg--whychooseus,
html body .section-wave-svg--whychooseus,
.section-wave-svg--whychooseus {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 991px) {
    html body.page-home .section-why-choose-us,
    html body .section-why-choose-us,
    .section-why-choose-us {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    html body.page-home .section-why-choose-us .container,
    html body .section-why-choose-us .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    html body.page-home .why-rows-wrapper,
    html body.page-home .why-row,
    html body.page-home .why-col-left,
    html body.page-home .why-col-right,
    html body .why-rows-wrapper,
    html body .why-row,
    html body .why-col-left,
    html body .why-col-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 20px !important;
        box-sizing: border-box !important;
    }

    html body.page-home .why-card-box,
    html body.page-home .why-graphic-card,
    html body .why-card-box,
    html body .why-graphic-card {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 10px 0 !important;
        border-radius: 16px !important;
    }

    html body.page-home .cpl-road-img,
    html body .cpl-road-img {
        width: 100% !important;
        height: auto !important;
        border-radius: 16px !important;
    }
}
/* =========================================================
   WHY CHOOSE US SECTION: HIGHER Z-INDEX (30+) ABOVE VIDEO SECTION
========================================================= */
html body.page-home #video-section,
html body.page-home .section-video,
html body #video-section,
html body .section-video,
.section-video {
    position: relative !important;
    z-index: 15 !important;
    overflow: visible !important;
}

html body.page-home #why-choose-us,
html body.page-home .section-why-choose-us,
html body #why-choose-us,
html body .section-why-choose-us,
.section-why-choose-us {
    position: relative !important;
    z-index: 30 !important;
    overflow: visible !important;
}

html body.page-home .section-why-choose-us .section-wave-top,
html body .section-why-choose-us .section-wave-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(-99%) !important;
    line-height: 0 !important;
    z-index: 35 !important;
    pointer-events: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body.page-home .section-wave-svg--whychooseus,
html body .section-wave-svg--whychooseus,
.section-wave-svg--whychooseus {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 991px) {
    html body.page-home .section-why-choose-us,
    html body .section-why-choose-us,
    .section-why-choose-us {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        z-index: 30 !important;
    }

    html body.page-home .section-why-choose-us .container,
    html body .section-why-choose-us .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    html body.page-home .why-rows-wrapper,
    html body.page-home .why-row,
    html body.page-home .why-col-left,
    html body.page-home .why-col-right,
    html body .why-rows-wrapper,
    html body .why-row,
    html body .why-col-left,
    html body .why-col-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 20px !important;
        box-sizing: border-box !important;
    }

    html body.page-home .why-card-box,
    html body.page-home .why-graphic-card,
    html body .why-card-box,
    html body .why-graphic-card {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 10px 0 !important;
        border-radius: 16px !important;
    }

    html body.page-home .cpl-road-img,
    html body .cpl-road-img {
        width: 100% !important;
        height: auto !important;
        border-radius: 16px !important;
    }
}




/* =========================================================
   OUR ARTICLES SECTION: FIGMA MOBILE LAYOUT MATCHING SCREENSHOT
========================================================= */

@media (max-width: 991px) {
    html body.page-home .section-articles,
    html body .section-articles,
    .section-articles {
        padding-top: 60px !important;
        padding-bottom: 70px !important;
        background-color: #E8E5D8 !important;
    }

    html body.page-home .articles-header-wrap,
    html body .articles-header-wrap {
        text-align: center !important;
        margin-bottom: 24px !important;
    }

    html body.page-home .articles-carousel-wrapper,
    html body .articles-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body.page-home .articles-grid,
    html body .articles-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 16px !important;
        padding: 10px 24px 20px 24px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body.page-home .articles-grid::-webkit-scrollbar,
    html body .articles-grid::-webkit-scrollbar {
        display: none !important;
    }

    html body.page-home .article-card,
    html body .article-card,
    .article-card {
        flex: 0 0 calc(100vw - 70px) !important;
        min-width: calc(100vw - 70px) !important;
        max-width: 360px !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        border-radius: 20px !important;
        background: #FFFFFF !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        overflow: hidden !important;
    }

    html body.page-home .article-thumb-wrap,
    html body .article-thumb-wrap {
        position: relative !important;
        width: 100% !important;
        height: 210px !important;
        overflow: hidden !important;
    }

    html body.page-home .article-thumb-wrap img,
    html body .article-thumb-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    html body.page-home .article-date-badge,
    html body .article-date-badge {
        position: absolute !important;
        top: 14px !important;
        left: 14px !important;
        background: #FFFFFF !important;
        color: #607D8B !important;
        border-radius: 6px !important;
        padding: 4px 10px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        z-index: 5 !important;
    }

    html body.page-home .article-body,
    html body .article-body {
        padding: 20px 20px 24px 20px !important;
        text-align: left !important;
    }

    html body.page-home .article-category,
    html body .article-category {
        color: #607D8B !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        margin-bottom: 6px !important;
    }

    html body.page-home .article-title,
    html body .article-title {
        color: #1C3D4E !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin-bottom: 4px !important;
    }

    html body.page-home .article-excerpt,
    html body .article-excerpt {
        color: #607D8B !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

    /* VIEW ALL BUTTON */
    html body.page-home .btn-view-all-articles,
    html body .btn-view-all-articles,
    .btn-view-all-articles {
        background-color: #87246A !important;
        color: #FFFFFF !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        padding: 12px 34px !important;
        border-radius: 30px !important;
        display: inline-block !important;
        text-decoration: none !important;
        letter-spacing: 1px !important;
        box-shadow: 0 4px 12px rgba(135, 36, 106, 0.3) !important;
    }
}

@media (max-width: 991px) {
    html body.page-home .testi-prev, html body.page-home .audience-prev, html body.page-home .articles-prev, html body.page-home .shop-prev,
    html body .testi-prev, html body .audience-prev, html body .articles-prev, html body .shop-prev,
    .testi-prev, .audience-prev, .articles-prev, .shop-prev {
        left: 2px !important;
    }

    html body.page-home .testi-next, html body.page-home .audience-next, html body.page-home .articles-next, html body.page-home .shop-next,
    html body .testi-next, html body .audience-next, html body .articles-next, html body .shop-next,
    .testi-next, .audience-next, .articles-next, .shop-next {
        right: 2px !important;
    }
}


/* =========================================================
   OUR ARTICLES SECTION: FIGMA MOBILE LAYOUT WITH NO EMPTY SPACE
========================================================= */
@media (max-width: 991px) {
    html body.page-home .section-articles,
    html body .section-articles,
    .section-articles {
        padding-top: 60px !important;
        padding-bottom: 70px !important;
        background-color: #E8E5D8 !important;
        overflow: hidden !important;
    }

    html body.page-home .articles-header-wrap,
    html body .articles-header-wrap {
        text-align: center !important;
        margin-bottom: 24px !important;
    }

    html body.page-home .articles-carousel-wrapper,
    html body .articles-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body.page-home .articles-grid,
    html body .articles-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 16px !important;
        padding: 10px 24px 20px 24px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body.page-home .articles-grid::-webkit-scrollbar,
    html body .articles-grid::-webkit-scrollbar {
        display: none !important;
    }

    html body.page-home .article-card,
    html body .article-card,
    .article-card {
        flex: 0 0 calc(100vw - 70px) !important;
        min-width: calc(100vw - 70px) !important;
        max-width: 360px !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        border-radius: 20px !important;
        background: #FFFFFF !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        overflow: hidden !important;
    }

    html body.page-home .article-thumb-wrap,
    html body .article-thumb-wrap {
        position: relative !important;
        width: 100% !important;
        height: 210px !important;
        overflow: hidden !important;
    }

    html body.page-home .article-thumb-wrap img,
    html body .article-thumb-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    html body.page-home .article-date-badge,
    html body .article-date-badge {
        position: absolute !important;
        top: 14px !important;
        left: 14px !important;
        background: #FFFFFF !important;
        color: #607D8B !important;
        border-radius: 6px !important;
        padding: 4px 10px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        z-index: 5 !important;
    }

    html body.page-home .article-body,
    html body .article-body {
        padding: 20px 20px 24px 20px !important;
        text-align: left !important;
    }

    html body.page-home .article-category,
    html body .article-category {
        color: #607D8B !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        margin-bottom: 6px !important;
    }

    html body.page-home .article-title,
    html body .article-title {
        color: #1C3D4E !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin-bottom: 4px !important;
    }

    html body.page-home .article-excerpt,
    html body .article-excerpt {
        color: #607D8B !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

    /* VIEW ALL BUTTON */
    html body.page-home .btn-view-all-articles,
    html body .btn-view-all-articles,
    .btn-view-all-articles {
        background-color: #87246A !important;
        color: #FFFFFF !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        padding: 12px 34px !important;
        border-radius: 30px !important;
        display: inline-block !important;
        text-decoration: none !important;
        letter-spacing: 1px !important;
        box-shadow: 0 4px 12px rgba(135, 36, 106, 0.3) !important;
    }
}
/* =========================================================
   ARTICLES ARROW BUTTONS: WHITE BACKGROUND + BLACK ARROW ICON
========================================================= */
html body.page-home .articles-nav-btn,
html body .articles-nav-btn,
.articles-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
    font-size: 16px !important;
    border: none !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99 !important;
    cursor: pointer !important;
}

html body.page-home .articles-nav-btn i,
html body .articles-nav-btn i,
.articles-nav-btn i {
    color: #000000 !important;
}


@media (max-width: 991px) {
    html body.page-home .testi-prev, html body.page-home .audience-prev, html body.page-home .articles-prev, html body.page-home .shop-prev,
    html body .testi-prev, html body .audience-prev, html body .articles-prev, html body .shop-prev,
    .testi-prev, .audience-prev, .articles-prev, .shop-prev {
        left: 2px !important;
    }

    html body.page-home .testi-next, html body.page-home .audience-next, html body.page-home .articles-next, html body.page-home .shop-next,
    html body .testi-next, html body .audience-next, html body .articles-next, html body .shop-next,
    .testi-next, .audience-next, .articles-next, .shop-next {
        right: 2px !important;
    }
}
/* =========================================================
   ARTICLES ARROW BUTTONS: WHITE BACKGROUND + BLACK ARROW ICON
========================================================= */
html body.page-home .articles-nav-btn,
html body .articles-nav-btn,
.articles-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
    font-size: 16px !important;
    border: none !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99 !important;
    cursor: pointer !important;
}

html body.page-home .articles-nav-btn i,
html body .articles-nav-btn i,
.articles-nav-btn i {
    color: #000000 !important;
}

@media (max-width: 991px) {
    /* SMALL TIGHT GAP BETWEEN TESTIMONIALS TITLE AND TOP WAVE ON MOBILE */
    html body.page-home .section-testimonials,
    html body .section-testimonials,
    .section-testimonials {
        padding-top: 10px !important;
        position: relative !important;
        overflow: visible !important;
    }

    html body.page-home .section-testimonials .container,
    html body .section-testimonials .container,
    .section-testimonials .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    html body.page-home .testimonials-header-wrap,
    html body .testimonials-header-wrap,
    .testimonials-header-wrap {
        margin-top: 8px !important;
        margin-bottom: 20px !important;
        position: relative !important;
        z-index: 25 !important;
        text-align: center !important;
    }
    html body.page-home .testi-prev, html body.page-home .audience-prev, html body.page-home .articles-prev, html body.page-home .shop-prev,
    html body .testi-prev, html body .audience-prev, html body .articles-prev, html body .shop-prev,
    .testi-prev, .audience-prev, .articles-prev, .shop-prev {
        left: 2px !important;
    }

    html body.page-home .testi-next, html body.page-home .audience-next, html body.page-home .articles-next, html body.page-home .shop-next,
    html body .testi-next, html body .audience-next, html body .articles-next, html body .shop-next,
    .testi-next, .audience-next, .articles-next, .shop-next {
        right: 2px !important;
    }

    html body.page-home .testimonial-row-block,
    html body .testimonial-row-block,
    .testimonial-row-block {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-bottom: 50px !important;
    }

    html body.page-home .testi-desc-col,
    html body .testi-desc-col,
    .testi-desc-col {
        order: 1 !important;
        margin-bottom: 24px !important;
        width: 100% !important;
        text-align: center !important;
    }

    html body.page-home .testi-slider-col,
    html body .testi-slider-col,
    .testi-slider-col {
        order: 2 !important;
        width: 100% !important;
    }

    html body.page-home .testi-carousel-wrapper,
    html body .testi-carousel-wrapper,
    .testi-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        height: auto !important;
    }

    html body.page-home .testi-carousel-track,
    html body .testi-carousel-track,
    .testi-carousel-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 20px !important;
        padding: 10px 24px 20px 24px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        transform: none !important;
        height: auto !important;
    }

    html body.page-home .testi-carousel-track::-webkit-scrollbar,
    html body .testi-carousel-track::-webkit-scrollbar {
        display: none !important;
    }

    
/* =========================================================
   ARTICLES ARROW BUTTONS: WHITE BACKGROUND + BLACK ARROW ICON
========================================================= */
html body.page-home .articles-nav-btn,
html body .articles-nav-btn,
.articles-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
    font-size: 16px !important;
    border: none !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99 !important;
    cursor: pointer !important;
}

html body.page-home .articles-nav-btn i,
html body .articles-nav-btn i,
.articles-nav-btn i {
    color: #000000 !important;
}

@media (max-width: 991px) {
    html body.page-home .articles-prev, html body .articles-prev, .articles-prev { left: 2px !important; }
    html body.page-home .articles-next, html body .articles-next, .articles-next { right: 2px !important; }
}

}


/* =========================================================
   MOBILE TESTIMONIALS SLIDER (FULL-WIDTH SCREEN FRAME & UNCLIPPED SHADOW)
   Desktop (>= 992px) is 100% untouched.
========================================================= */
@media (max-width: 991px) {
    html body.page-home .testimonial-row-block,
    html body .testimonial-row-block,
    .testimonial-row-block {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 50px !important;
    }

    html body.page-home .testi-desc-col,
    html body .testi-desc-col,
    .testi-desc-col {
        order: 1 !important;
        margin-bottom: 24px !important;
        width: 100% !important;
        text-align: center !important;
    }

    html body.page-home .testi-slider-col,
    html body .testi-slider-col,
    .testi-slider-col {
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 480px !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* Full-Width Mobile Screen Container Window (Clips Off-Canvas Side Cards at Screen Edges) */
    html body.page-home .testi-carousel-wrapper,
    html body .testi-carousel-wrapper,
    .testi-carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 535px !important;
        min-height: 535px !important;
        margin: 0 auto 12px auto !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html body.page-home .testi-carousel-track,
    html body .testi-carousel-track,
    .testi-carousel-track {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 535px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    /* Base Mobile Card Styles (Absolute 2D Centered inside Full-Width Viewport Window) */
    html body.page-home .testi-card-figma,
    html body .testi-card-figma,
    .testi-card-figma {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        position: absolute !important;
        top: 48% !important;
        left: 50% !important;
        width: 295px !important;
        max-width: 295px !important;
        height: 470px !important;
        min-height: 470px !important;
        border-radius: 20px !important;
        padding: 22px 20px !important;
        box-sizing: border-box !important;
        transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s ease !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate(-50%, -50%) scale(0.85) !important;
        z-index: 1 !important;
        margin: 0 !important;
    }

    html body.page-home .testi-card-figma .quote-badge-top,
    html body .testi-card-figma .quote-badge-top,
    .testi-card-figma .quote-badge-top {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        align-self: flex-start !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 10 !important;
    }

    html body.page-home .testi-card-figma .quote-badge-top img,
    html body.page-home .testi-card-figma .quote-badge-svg,
    html body .testi-card-figma .quote-badge-top img,
    html body .testi-card-figma .quote-badge-svg,
    .testi-card-figma .quote-badge-top img,
    .testi-card-figma .quote-badge-svg {
        display: block !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        object-fit: contain !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Active Center Card on Mobile (Dead-Centered with Soft Natural Bottom Shadow) */
    html body.page-home .testi-card-figma.state-center,
    html body .testi-card-figma.state-center,
    .testi-card-figma.state-center {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate(-50%, -50%) scale(1.0) !important;
        z-index: 10 !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30) !important;
    }

    /* Previous Card on Mobile (Animates Sliding Off-Canvas Left to Screen Edge) */
    html body.page-home .testi-card-figma.state-left,
    html body .testi-card-figma.state-left,
    .testi-card-figma.state-left {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate(-180%, -50%) scale(0.85) !important;
        z-index: 4 !important;
    }

    /* Next Card on Mobile (Animates Sliding Off-Canvas Right to Screen Edge) */
    html body.page-home .testi-card-figma.state-right,
    html body .testi-card-figma.state-right,
    .testi-card-figma.state-right {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate(80%, -50%) scale(0.85) !important;
        z-index: 4 !important;
    }

    /* Dots Pagination Below Slider on Mobile */
    html body.page-home .testi-dots-pagination,
    html body .testi-dots-pagination,
    .testi-dots-pagination {
        position: relative !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        z-index: 10 !important;
    }

    /* Arrow Nav Buttons Pinned to Screen Edges Outside the Card */
    html body.page-home .testi-nav-btn,
    html body .testi-nav-btn,
    .testi-nav-btn {
        position: absolute !important;
        top: 48% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background-color: #1C3D4E !important;
        color: #FFFFFF !important;
        font-size: 16px !important;
        border: none !important;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 99 !important;
        cursor: pointer !important;
    }

    html body.page-home .testi-nav-btn i,
    html body .testi-nav-btn i,
    .testi-nav-btn i {
        color: #FFFFFF !important;
    }

    html body.page-home .testi-prev, html body .testi-prev, .testi-prev {
        left: 2px !important;
    }

    html body.page-home .testi-next, html body .testi-next, .testi-next {
        right: 2px !important;
    }
}


/* =========================================================
   SITEWIDE NAVIGATION BUTTON STYLING (FORCE WHITE CIRCLE + BLACK ARROW)
   - Sitewide (Hero, Shop, Audience, Articles): White Circle (#FFFFFF) + Black Arrow (#000000)
   - Discover What's Inside (Shop): Dead-Centered over Book Cover Image Thumbnail (top: 220px / 200px)
   - Testimonials ONLY: Dark Blue Circle (#1C3D4E) + White Arrow (#FFFFFF)
   - Desktop (>= 992px): Hide Audience Section Nav Buttons
========================================================= */

/* ALL Sitewide Nav Buttons (Hero, Shop, Audience, Articles): White Circle + Black Arrow */
html body button.shop-nav-btn,
html body button.audience-nav-btn,
html body button.articles-nav-btn,
html body button.hero-nav-arrow,
html body button.nav-btn,
html body .shop-nav-btn,
html body .audience-nav-btn,
html body .articles-nav-btn,
html body .hero-nav-arrow,
html body .nav-btn,
button.shop-nav-btn,
button.audience-nav-btn,
button.articles-nav-btn,
button.hero-nav-arrow,
button.nav-btn,
.shop-nav-btn,
.audience-nav-btn,
.articles-nav-btn,
.hero-nav-arrow,
.nav-btn {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.28) !important;
    opacity: 1 !important;
}

/* Ensure Hover / Active / Focus States Remain White Background + Black Arrow */
html body button.shop-nav-btn:hover,
html body button.audience-nav-btn:hover,
html body button.articles-nav-btn:hover,
html body button.hero-nav-arrow:hover,
html body button.nav-btn:hover,
html body button.shop-nav-btn:focus,
html body button.audience-nav-btn:focus,
html body button.articles-nav-btn:focus,
html body button.hero-nav-arrow:focus,
html body button.nav-btn:focus,
html body button.shop-nav-btn:active,
html body button.audience-nav-btn:active,
html body button.articles-nav-btn:active,
html body button.hero-nav-arrow:active,
html body button.nav-btn:active,
html body .shop-nav-btn:hover,
html body .audience-nav-btn:hover,
html body .articles-nav-btn:hover,
html body .hero-nav-arrow:hover,
html body .nav-btn:hover {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

/* Black Arrow Icons Sitewide */
html body button.shop-nav-btn i,
html body button.audience-nav-btn i,
html body button.articles-nav-btn i,
html body button.hero-nav-arrow i,
html body button.nav-btn i,
html body .shop-nav-btn i,
html body .audience-nav-btn i,
html body .articles-nav-btn i,
html body .hero-nav-arrow i,
html body .nav-btn i,
button.shop-nav-btn i,
button.audience-nav-btn i,
button.articles-nav-btn i,
button.hero-nav-arrow i,
button.nav-btn i,
.shop-nav-btn i,
.audience-nav-btn i,
.articles-nav-btn i,
.hero-nav-arrow i,
.nav-btn i {
    color: #000000 !important;
    fill: #000000 !important;
}

/* Testimonials Section Nav Buttons ONLY: Dark Blue Circle (#1C3D4E) + White Arrow */
html body button.testi-nav-btn,
html body .section-testimonials button.testi-nav-btn,
html body .testi-nav-btn,
html body .section-testimonials .testi-nav-btn,
button.testi-nav-btn,
.section-testimonials button.testi-nav-btn,
.testi-nav-btn,
.section-testimonials .testi-nav-btn {
    background: #1C3D4E !important;
    background-color: #1C3D4E !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
}

html body button.testi-nav-btn:hover,
html body .section-testimonials button.testi-nav-btn:hover {
    background: #1C3D4E !important;
    background-color: #1C3D4E !important;
    color: #FFFFFF !important;
}

html body button.testi-nav-btn i,
html body .section-testimonials button.testi-nav-btn i,
html body .testi-nav-btn i,
html body .section-testimonials .testi-nav-btn i,
button.testi-nav-btn i,
.section-testimonials button.testi-nav-btn i,
.testi-nav-btn i,
.section-testimonials .testi-nav-btn i {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Discover What's Inside (Shop Section): Dead-Centered over Book Cover Image Thumbnail */
html body .shop-carousel-wrapper .shop-nav-btn,
html body .section-products .shop-nav-btn,
.shop-carousel-wrapper .shop-nav-btn,
.section-products .shop-nav-btn {
    top: 220px !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 768px) {
    html body .shop-carousel-wrapper .shop-nav-btn,
    html body .section-products .shop-nav-btn,
    .shop-carousel-wrapper .shop-nav-btn,
    .section-products .shop-nav-btn {
        top: 200px !important;
        transform: translateY(-50%) !important;
    }
}


/* Desktop View (>= 992px): Hide Audience & Articles Section Nav Buttons */
@media (min-width: 992px) {
    html body .section-audience .audience-nav-btn,
    html body .audience-carousel-wrapper .audience-nav-btn,
    html body .section-articles .articles-nav-btn,
    html body .articles-carousel-wrapper .articles-nav-btn,
    .section-audience .audience-nav-btn,
    .audience-carousel-wrapper .audience-nav-btn,
    .section-articles .articles-nav-btn,
    .articles-carousel-wrapper .articles-nav-btn {
        display: none !important;
    }
}


/* =========================================================
   MY ACCOUNT MOBILE & DESKTOP CARD LAYOUT (FIGMA SPEC)
========================================================= */

/* Outer Page Wrapper & Background */
.my-account-page-wrapper {
    background-color: #EAF1F5 !important;
    padding: 40px 0 60px 0 !important;
    min-height: 80vh !important;
}

.my-account-container {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

/* White Card Container */
.my-account-card-box {
    background-color: #FFFFFF !important;
    border-radius: 20px !important;
    padding: 40px 32px !important;
    width: 100% !important;
    max-width: 480px !important;
    box-shadow: 0px 8px 24px rgba(25, 56, 69, 0.08) !important;
    box-sizing: border-box !important;
}

/* Section Header Title */
.my-account-card-header {
    margin-bottom: 24px !important;
}

.my-account-title {
    font-family: var(--font-lexend) !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    color: #193845 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Navigation List */
.woocommerce-MyAccount-navigation {
    float: none !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

.my-account-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.my-account-menu-list li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Menu Item Box */
.account-menu-box {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 18px !important;
    background-color: #EEF4F7 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: background-color 0.25s ease, transform 0.15s ease !important;
}

.account-menu-box:hover {
    background-color: #E1ECF1 !important;
}

/* Active Link Box Highlight */
.my-account-menu-list li.is-active .account-menu-box {
    background-color: #E1ECF1 !important;
}

/* Menu Item Label Text */
.account-menu-label {
    font-family: var(--font-lexend) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #193845 !important;
}

/* Chevron Right Arrow */
.account-menu-arrow {
    font-size: 14px !important;
    color: #193845 !important;
    opacity: 0.8 !important;
    transition: transform 0.2s ease !important;
}

.account-menu-box:hover .account-menu-arrow {
    transform: translateX(3px) !important;
    opacity: 1 !important;
}

/* Sub-Endpoint Content Area */
.woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    margin-top: 24px !important;
}

.woocommerce-MyAccount-content:empty {
    margin-top: 0 !important;
}

/* Responsive Mobile Adjustments */
@media (max-width: 576px) {
    .my-account-page-wrapper {
        padding: 20px 12px 40px 12px !important;
    }

    .my-account-card-box {
        padding: 28px 20px !important;
        border-radius: 16px !important;
    }

    .my-account-title {
        font-size: 28px !important;
    }

    .account-menu-box {
        padding: 12px 14px !important;
    }

    .account-menu-label {
        font-size: 15px !important;
    }
}


/* =========================================================
   MY ACCOUNT CARD LAYOUT (DEAD-CENTERED MOBILE SPEC & DESKTOP INTACT)
========================================================= */

/* Desktop View (>= 992px): Standard Layout + White Text on Button Hover */
@media (min-width: 992px) {
    .my-account-page-wrapper {
        background-color: transparent !important;
        padding: 0 !important;
    }

    .my-account-card-box {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }

    .mobile-only-header {
        display: none !important;
    }

    .account-menu-arrow {
        display: none !important;
    }

    .account-menu-box {
        background: transparent !important;
        padding: 10px 14px !important;
        border-radius: 6px !important;
        color: #193845 !important;
        transition: background-color 0.25s ease, color 0.25s ease !important;
    }

    .my-account-menu-list {
        gap: 4px !important;
    }

    .woocommerce-MyAccount-navigation {
        float: left !important;
        width: 25% !important;
    }

    .woocommerce-MyAccount-content {
        float: right !important;
        width: 70% !important;
        margin-top: 0 !important;
    }

    /* Desktop Navigation Button Hover: White Text */
    html body .woocommerce-MyAccount-navigation ul li a:hover,
    html body .woocommerce-MyAccount-navigation .account-menu-box:hover,
    .woocommerce-MyAccount-navigation ul li a:hover,
    .woocommerce-MyAccount-navigation .account-menu-box:hover {
        background-color: #87246A !important;
        color: #FFFFFF !important;
    }

    html body .woocommerce-MyAccount-navigation ul li a:hover .account-menu-label,
    html body .woocommerce-MyAccount-navigation ul li a:hover span,
    html body .woocommerce-MyAccount-navigation .account-menu-box:hover .account-menu-label,
    .woocommerce-MyAccount-navigation ul li a:hover .account-menu-label,
    .woocommerce-MyAccount-navigation ul li a:hover span {
        color: #FFFFFF !important;
    }

    /* Desktop Content Action Buttons Hover: White Text */
    html body .woocommerce-MyAccount-content .button:hover,
    html body .woocommerce-MyAccount-content button:hover,
    html body .woocommerce-MyAccount-content a.button:hover,
    .woocommerce-MyAccount-content .button:hover,
    .woocommerce-MyAccount-content button:hover,
    .woocommerce-MyAccount-content a.button:hover {
        color: #FFFFFF !important;
    }
}

/* Mobile View (<= 991px): Figma Mobile Spec & Dead-Centered Card */
@media (max-width: 991px) {
    .account-page-main {
        padding: 20px 0 40px 0 !important;
        background-color: #EAF1F5 !important;
    }

    .account-container {
        padding: 0 12px !important;
        margin: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Reset desktop 260px 2-column grid on mobile */
    html body .woocommerce,
    html body .woocommerce-account .woocommerce,
    html body .page-my-account .woocommerce,
    .woocommerce,
    .woocommerce-account .woocommerce,
    .page-my-account .woocommerce,
    .logged-in.woocommerce-account .woocommerce,
    .logged-in.page-my-account .woocommerce {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        gap: 0 !important;
    }

    .my-account-page-wrapper {
        background-color: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .my-account-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .my-account-card-box {
        background-color: #FFFFFF !important;
        border-radius: 20px !important;
        padding: 32px 24px !important;
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 !important;
        box-shadow: 0px 8px 24px rgba(25, 56, 69, 0.08) !important;
        box-sizing: border-box !important;
        display: block !important;
        float: none !important;
    }

    .mobile-only-header {
        display: block !important;
        margin-bottom: 24px !important;
    }

    .my-account-title {
        font-family: var(--font-lexend) !important;
        font-weight: 700 !important;
        font-size: 32px !important;
        color: #193845 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* Full Width Non-Floating Mobile Navigation */
    html body .woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-navigation {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }

    .my-account-menu-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .account-menu-box {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 14px 18px !important;
        background-color: #EEF4F7 !important;
        border-radius: 10px !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .account-menu-box:hover {
        background-color: #E1ECF1 !important;
    }

    .my-account-menu-list li.is-active .account-menu-box {
        background-color: #E1ECF1 !important;
    }

    .account-menu-label {
        font-family: var(--font-lexend) !important;
        font-weight: 600 !important;
        font-size: 16px !important;
        color: #193845 !important;
    }

    .account-menu-arrow {
        display: inline-block !important;
        font-size: 14px !important;
        color: #193845 !important;
        opacity: 0.8 !important;
    }

    /* Full Width Non-Floating Mobile Content */
    html body .woocommerce-MyAccount-content,
    .woocommerce-MyAccount-content {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 0 0 !important;
        padding: 0 !important;
        clear: both !important;
        box-sizing: border-box !important;
    }

    .woocommerce-MyAccount-content:empty {
        margin: 0 !important;
    }

    /* Wrap tables and forms on mobile */
    .woocommerce-MyAccount-content table,
    .woocommerce-MyAccount-content form {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* =========================================================
   PURPLE BUTTON ACTIVE / HOVER / CLICKED STATE WHITE TEXT
========================================================= */

/* Account Menu Pill Boxes Active / Hover / Clicked State */
html body .my-account-menu-list li.is-active .account-menu-box,
html body .account-menu-box:active,
html body .account-menu-box:focus,
html body .account-menu-box:hover,
.my-account-menu-list li.is-active .account-menu-box,
.account-menu-box:active,
.account-menu-box:focus,
.account-menu-box:hover {
    background-color: #87246A !important;
    color: #FFFFFF !important;
}

html body .my-account-menu-list li.is-active .account-menu-box .account-menu-label,
html body .my-account-menu-list li.is-active .account-menu-box .account-menu-arrow,
html body .account-menu-box:active .account-menu-label,
html body .account-menu-box:active .account-menu-arrow,
html body .account-menu-box:focus .account-menu-label,
html body .account-menu-box:focus .account-menu-arrow,
html body .account-menu-box:hover .account-menu-label,
html body .account-menu-box:hover .account-menu-arrow,
.my-account-menu-list li.is-active .account-menu-box .account-menu-label,
.my-account-menu-list li.is-active .account-menu-box .account-menu-arrow,
.account-menu-box:active .account-menu-label,
.account-menu-box:active .account-menu-arrow,
.account-menu-box:focus .account-menu-label,
.account-menu-box:focus .account-menu-arrow,
.account-menu-box:hover .account-menu-label,
.account-menu-box:hover .account-menu-arrow {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* General Buttons Clicked / Hovered / Active White Text */
html body .woocommerce-MyAccount-content .button:active,
html body .woocommerce-MyAccount-content .button:focus,
html body .woocommerce-MyAccount-content .button:hover,
html body .woocommerce-MyAccount-content button:active,
html body .woocommerce-MyAccount-content button:focus,
html body .woocommerce-MyAccount-content button:hover,
html body .woocommerce-MyAccount-content a.button:active,
html body .woocommerce-MyAccount-content a.button:focus,
html body .woocommerce-MyAccount-content a.button:hover,
html body .btn-auth-submit:active,
html body .btn-auth-submit:focus,
html body .btn-auth-submit:hover {
    color: #FFFFFF !important;
}


/* Force Terms & Conditions Checkbox Visibility */
html body .terms-accept-row input[type="checkbox"],
html body input#terms[type="checkbox"],
#terms[type="checkbox"] {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 10px 0 0 !important;
    cursor: pointer !important;
    accent-color: #87246A !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    z-index: 10 !important;
}

html body .terms-accept-row .custom-checkbox {
    padding-left: 0 !important;
    display: flex !important;
    align-items: center !important;
}


/* Hide top express payment buttons so top of checkout page stays clean */
.woocommerce-before-checkout-form .wc-stripe-express-checkout-container,
.woocommerce-before-checkout-form #wc-stripe-payment-request-wrapper,
.checkout-page-main > .wc-stripe-express-checkout-container,
.checkout-page-main > #wc-stripe-payment-request-wrapper {
    display: none !important;
}

/* Style express buttons cleanly inside the Payment section at bottom */
#woocommerceNativePaymentContainer .wc-stripe-express-checkout-container,
#woocommerceNativePaymentContainer #wc-stripe-payment-request-wrapper {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 15px !important;
}


/* Hide top express payment buttons so top of checkout page stays clean */
.woocommerce-before-checkout-form .wc-stripe-express-checkout-container,
.woocommerce-before-checkout-form #wc-stripe-payment-request-wrapper,
.checkout-page-main > .wc-stripe-express-checkout-container,
.checkout-page-main > #wc-stripe-payment-request-wrapper {
    display: none !important;
}

/* Style express buttons cleanly inside the Payment section at bottom */
#woocommerceNativePaymentContainer .wc-stripe-express-checkout-container,
#woocommerceNativePaymentContainer #wc-stripe-payment-request-wrapper {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 15px !important;
}


/* Strict rule to hide top express payment buttons */
.checkout-page-main > .wc-stripe-express-checkout-container,
.checkout-page-main > #wc-stripe-payment-request-wrapper,
.woocommerce-before-checkout-form .wc-stripe-express-checkout-container,
.woocommerce-before-checkout-form #wc-stripe-payment-request-wrapper,
#checkoutFormView > .wc-stripe-express-checkout-container,
#checkoutFormView > #wc-stripe-payment-request-wrapper {
    display: none !important;
}

#woocommerceNativePaymentContainer .wc-stripe-express-checkout-container,
#woocommerceNativePaymentContainer #wc-stripe-payment-request-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin-top: 15px !important;
}


/* =========================================================
   MOBILE SHOP PAGES SPECIFIC OVERRIDES (@media (max-width: 991px))
========================================================= */
@media (max-width: 991px) {
    /* 1. Shop Banner Height 146px */
    .shop-hero-banner {
        height: 146px !important;
        min-height: 146px !important;
        max-height: 146px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .shop-hero-banner .shop-banner-decor {
        max-height: 130px !important;
        height: auto !important;
    }

    /* 2. Mobile Shop Pencil */
    .mobile-lpc-pencil-wrap {
        display: block !important;
        text-align: left !important;
        margin: 14px 0 20px 0;
    }
    .mobile-shop-pencil {
        max-width: 240px;
        width: 80%;
        height: auto;
    }

    /* 3. Post-it Note Move to Below Numbered Points */
    .headline-container .figma-postit-img {
        display: none !important;
    }
    .mobile-postit-wrap {
        display: block !important;
        text-align: center;
        margin: 24px auto 16px auto;
    }
    .mobile-postit-img {
        max-width: 350px;
        width: 100%;
        height: auto;
    }

    /* 4. Hide Desktop Sidebar & Desktop Filter Bar on Mobile */
    .shop-main-layout {
        display: block !important;
    }
    .shop-sidebar {
        display: none !important;
    }
    .strand-filter-section {
        display: none !important;
    }

    /* 5. Mobile Shop Controls Bar */
    .mobile-shop-controls-bar {
        display: block !important;
        margin-bottom: 28px;
        padding: 0 10px;
    }
    .mobile-switch-shop-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #1C3B47 !important;
        color: #ffffff !important;
        font-family: var(--font-lexend) !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        padding: 13px 20px !important;
        border-radius: 25px !important;
        text-decoration: none !important;
        margin: 0 auto 24px auto !important;
        max-width: 320px !important;
        width: 100% !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    .mobile-control-label {
        font-family: var(--font-lexend) !important;
        font-weight: 800 !important;
        font-size: 18px !important;
        color: #1C3B47 !important;
        margin-bottom: 8px !important;
    }
    .mobile-search-section {
        margin-bottom: 4px !important;
    }
    .mobile-search-input-wrap {
        position: relative !important;
        width: 100% !important;
    }
    .mobile-search-icon {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #94A3B8 !important;
        font-size: 16px !important;
    }
    .mobile-search-input {
        width: 100% !important;
        padding: 12px 14px 12px 42px !important;
        border: 1px solid #94A3B8 !important;
        border-radius: 8px !important;
        font-size: 14.5px !important;
        background: #ffffff !important;
        color: #1C3B47 !important;
        outline: none !important;
    }
    .mobile-filter-pills-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }
    .mobile-filter-pill-btn {
        background-color: #8AA4B0 !important;
        color: #ffffff !important;
        font-family: var(--font-lexend) !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        border: none !important;
        cursor: pointer !important;
        text-align: center !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    }

    /* 6. Mobile Modals */
    .mobile-filter-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 99999;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }
    .mobile-filter-modal-overlay.active {
        display: flex !important;
    }
    .mobile-filter-modal-card {
        background: #ffffff;
        border-radius: 16px;
        width: 100%;
        max-width: 360px;
        max-height: 85vh;
        overflow-y: auto;
        padding: 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        position: relative;
    }
    .modal-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .modal-card-header h2 {
        font-family: var(--font-lexend);
        font-weight: 800;
        font-size: 20px;
        color: #1C3B47;
        margin: 0;
    }
    .close-modal-btn {
        background: none;
        border: none;
        font-size: 26px;
        color: #94A3B8;
        cursor: pointer;
        line-height: 1;
    }
    .mobile-year-item {
        padding: 12px 16px;
        font-family: var(--font-lexend);
        font-weight: 600;
        font-size: 15px;
        color: #1C3B47;
        border-radius: 20px;
        margin-bottom: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .mobile-year-item.active {
        background-color: #C5B899 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }
    .mobile-strand-checkbox-item {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: var(--font-lexend);
        font-weight: 600;
        font-size: 15px;
        color: #1C3B47;
        padding: 10px 0;
        cursor: pointer;
        user-select: none;
    }
    .mobile-strand-checkbox-item input[type="checkbox"] {
        width: 20px;
        height: 20px;
        accent-color: #1C3B47;
        cursor: pointer;
    }
}

@media (min-width: 992px) {
    .mobile-lpc-pencil-wrap,
    .mobile-postit-wrap,
    .mobile-shop-controls-bar,
    .mobile-filter-modal-overlay {
        display: none !important;
    }
}








/* Force Left Decor Graphics 100% Flushed to Bottom-Left (Desktop & Mobile) */
html body .shop-hero-banner .shop-banner-decor.left-decor,
html body .shop-banner-decor.left-decor,
html body .maths-banner .left-decor,
html body .english-banner .left-decor,
html body picture.left-decor,
html body picture.left-decor img {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    object-position: left bottom !important;
    vertical-align: bottom !important;
}

@media (max-width: 991px) {
    html body .shop-hero-banner .shop-banner-decor.left-decor,
    html body picture.left-decor img {
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        max-height: 146px !important;
        height: auto !important;
    }
}

@media (min-width: 992px) {
    html body .shop-hero-banner .shop-banner-decor.left-decor,
    html body picture.left-decor img {
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
    }
}


/* Import Google Font Rock Salt for Testimonials Title */


/* =========================================================
   MOBILE SHOP PAGES V6 OVERRIDES (@media (max-width: 991px))
========================================================= */
@media (max-width: 991px) {
    /* 1. VISIBLE SEARCH INPUT & SEARCH RESULTS DROPDOWN OPTIONS */
    html body .mobile-search-section {
        display: block !important;
        margin-bottom: 4px !important;
        width: 100% !important;
        position: relative !important;
    }
    html body .mobile-search-input-wrap {
        position: relative !important;
        width: 100% !important;
        display: block !important;
    }
    html body .mobile-search-icon {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #8AA4B0 !important;
        font-size: 16px !important;
        z-index: 12 !important;
        pointer-events: none !important;
    }
    html body input.mobile-search-input,
    html body .mobile-search-input-wrap input[type="text"].mobile-search-input {
        display: block !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 10px 14px 10px 42px !important;
        border: 1.5px solid #8AA4B0 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #1C3B47 !important;
        font-size: 14.5px !important;
        font-family: var(--font-lexend) !important;
        opacity: 1 !important;
        visibility: visible !important;
        outline: none !important;
        box-sizing: border-box !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }

    html body .mobile-search-results-dropdown {
        display: none;
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 0 !important;
        right: 0 !important;
        background: #ffffff !important;
        border: 1px solid #8AA4B0 !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
        z-index: 999 !important;
        max-height: 240px !important;
        overflow-y: auto !important;
        padding: 6px 0 !important;
    }
    html body .mobile-search-results-dropdown.active {
        display: block !important;
    }
    html body .search-option-item {
        padding: 10px 16px !important;
        font-family: var(--font-lexend) !important;
        font-size: 13.5px !important;
        color: #1C3B47 !important;
        font-weight: 600 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    html body .search-option-item:hover,
    html body .search-option-item:active {
        background-color: #f0fdf4 !important;
        color: #00A3AD !important;
    }

    /* 2. 2-COLUMN RESPONSIVE GRID & CARDS */
    html body .figma-catalog-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .catalog-card-item,
    html body .figma-product-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body .catalog-card-item.mobile-hidden-card,
    html body .figma-product-card.mobile-hidden-card {
        display: none !important;
    }

    /* 3. CENTERED IN STOCK / OUT OF STOCK BADGES AND RATING STARS */
    html body .card-pills-row,
    html body .figma-badges-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 4px !important;
        margin: 4px auto 8px auto !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    html body .stock-badge {
        border-radius: 12px !important;
        font-size: 8.5px !important;
        font-weight: 800 !important;
        font-family: var(--font-lexend) !important;
        padding: 3px 10px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        display: inline-block !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    html body .stock-badge.in-stock {
        background-color: #e6f4ea !important;
        color: #137333 !important;
        border: 1px solid #137333 !important;
    }
    html body .stock-badge.out-of-stock {
        background-color: #fce8e6 !important;
        color: #c5221f !important;
        border: 1px solid #c5221f !important;
    }
    html body .rating-stars,
    html body .shop-item-stars {
        font-size: 8.5px !important;
        color: #64748b !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        margin: 0 !important;
    }
    html body .rating-stars i,
    html body .shop-item-stars i {
        font-size: 8.5px !important;
    }

    /* 4. VERTICALLY STACKED ACTION BUTTONS */
    html body .card-actions-row,
    html body .figma-action-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .btn-card-add-basket,
    html body .btn-figma-add-basket {
        background-color: #87246A !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 9px 4px !important;
        font-weight: 800 !important;
        font-size: 10.5px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        width: 100% !important;
        cursor: pointer !important;
        font-family: var(--font-lexend) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    html body .btn-card-learn-more,
    html body .btn-figma-learn-more {
        background-color: transparent !important;
        border: 1.5px solid #87246A !important;
        color: #87246A !important;
        border-radius: 8px !important;
        padding: 8px 4px !important;
        font-weight: 800 !important;
        font-size: 10.5px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        width: 100% !important;
        cursor: pointer !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: var(--font-lexend) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* =========================================================
   MOBILE SHOP PAGES V5 OVERRIDES (@media (max-width: 991px))
========================================================= */
@media (max-width: 991px) {
    /* 1. VISIBLE SEARCH INPUT & SEARCH RESULTS DROPDOWN OPTIONS */
    html body .mobile-search-section {
        display: block !important;
        margin-bottom: 4px !important;
        width: 100% !important;
        position: relative !important;
    }
    html body .mobile-search-input-wrap {
        position: relative !important;
        width: 100% !important;
        display: block !important;
    }
    html body .mobile-search-icon {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #8AA4B0 !important;
        font-size: 16px !important;
        z-index: 12 !important;
        pointer-events: none !important;
    }
    html body input.mobile-search-input,
    html body .mobile-search-input-wrap input[type="text"].mobile-search-input {
        display: block !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 10px 14px 10px 42px !important;
        border: 1.5px solid #8AA4B0 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #1C3B47 !important;
        font-size: 14.5px !important;
        font-family: var(--font-lexend) !important;
        opacity: 1 !important;
        visibility: visible !important;
        outline: none !important;
        box-sizing: border-box !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }

    /* SEARCH RESULTS LIVE DROPDOWN LIST */
    html body .mobile-search-results-dropdown {
        display: none;
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 0 !important;
        right: 0 !important;
        background: #ffffff !important;
        border: 1px solid #8AA4B0 !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
        z-index: 999 !important;
        max-height: 240px !important;
        overflow-y: auto !important;
        padding: 6px 0 !important;
    }
    html body .mobile-search-results-dropdown.active {
        display: block !important;
    }
    html body .search-option-item {
        padding: 10px 16px !important;
        font-family: var(--font-lexend) !important;
        font-size: 13.5px !important;
        color: #1C3B47 !important;
        font-weight: 600 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    html body .search-option-item:last-child {
        border-bottom: none !important;
    }
    html body .search-option-item:hover,
    html body .search-option-item:active {
        background-color: #f0fdf4 !important;
        color: #00A3AD !important;
    }
    html body .search-option-sku {
        font-size: 11px !important;
        color: #87246A !important;
        font-weight: 700 !important;
    }

    /* 2. 2-COLUMN RESPONSIVE GRID & CARDS */
    html body .figma-catalog-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .catalog-card-item,
    html body .figma-product-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body .catalog-card-item.mobile-hidden-card,
    html body .figma-product-card.mobile-hidden-card {
        display: none !important;
    }

    /* 3. STACK TAGS & STARS VERTICALLY TO PREVENT OVERFLOW */
    html body .card-pills-row,
    html body .figma-badges-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 3px !important;
        margin-bottom: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    html body .sku-pill,
    html body .sku-badge {
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        font-size: 8.5px !important;
        color: #64748b !important;
        padding: 2px 6px !important;
        font-weight: 700 !important;
        font-family: var(--font-lexend) !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        display: inline-block !important;
        line-height: 1.2 !important;
    }
    html body .rating-stars,
    html body .shop-item-stars {
        font-size: 8px !important;
        color: #64748b !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        gap: 1px !important;
    }
    html body .rating-stars i,
    html body .shop-item-stars i {
        font-size: 8px !important;
    }

    /* 4. FORCE VERTICALLY STACKED ACTION BUTTONS (ON TOP OF EACH OTHER) */
    html body .card-actions-row,
    html body .figma-action-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .btn-card-add-basket,
    html body .btn-figma-add-basket {
        background-color: #87246A !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 9px 4px !important;
        font-weight: 800 !important;
        font-size: 10.5px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        width: 100% !important;
        cursor: pointer !important;
        font-family: var(--font-lexend) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    html body .btn-card-learn-more,
    html body .btn-figma-learn-more {
        background-color: transparent !important;
        border: 1.5px solid #87246A !important;
        color: #87246A !important;
        border-radius: 8px !important;
        padding: 8px 4px !important;
        font-weight: 800 !important;
        font-size: 10.5px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        width: 100% !important;
        cursor: pointer !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: var(--font-lexend) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* =========================================================
   EXACT FIGMA LOAD MORE OUTLINE RECTANGLE (HIGH SPECIFICITY)
========================================================= */
html body .load-more-wrap,
html body .mobile-load-more-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 40px 0 32px 0 !important;
    text-align: center !important;
}

html body button#loadMoreBtn,
html body .btn-load-more-custom,
html body .mobile-load-more-btn,
button#loadMoreBtn {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #2B266D !important;
    border: 1.5px solid #2B266D !important;
    border-radius: 10px !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    padding: 13px 28px !important;
    width: 100% !important;
    max-width: 440px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: none !important;
    outline: none !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

html body button#loadMoreBtn:hover,
html body .btn-load-more-custom:hover,
html body .mobile-load-more-btn:hover {
    background-color: #2B266D !important;
    background: #2B266D !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(43, 38, 109, 0.2) !important;
}

.js-hidden-card {
    display: none !important;
}

.mobile-hidden-card {
    display: none !important;
}

/* =========================================================
   PRODUCT CARD THUMBNAIL & LAYOUT REFINEMENTS
   ========================================================= */

/* 1. Remove outer padding so thumbnail touches top & sides 100% flush */
html body .catalog-card-item,
html body .figma-product-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

/* 2. Thumbnail container: zero gap between image and title */
html body .figma-thumb-wrapper,
html body .card-image-wrap {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
    display: block !important;
}

html body .figma-thumb-wrapper img,
html body .card-image-wrap img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Card inner text container */
html body .card-content-wrap {
    padding: 12px 14px 14px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html body .card-title,
html body .figma-product-title {
    margin-top: 10px !important;
    margin-bottom: 6px !important;
}

/* 4. Stock Badge Base Styles */
.stock-badge {
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    display: inline-block !important;
}
.stock-badge.in-stock {
    background-color: #10B981 !important;
    color: #ffffff !important;
}
.stock-badge.out-of-stock {
    background-color: #EF4444 !important;
    color: #ffffff !important;
}

/* 5. Testimonials Pencil Line */
.testimonials-pencil-line,
.mobile-testimonials-header .testimonials-pencil-line {
    max-width: 180px !important;
    height: auto !important;
    display: block !important;
    margin: 6px auto 0 auto !important;
}

/* 6. DESKTOP VIEW ONLY (>= 992px): SIDE-BY-SIDE BADGES & BUTTONS */
@media (min-width: 992px) {
    /* Stock Badge & Review Stars side-by-side on Desktop */
    html body .card-pills-row,
    html body .figma-badges-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 8px 0 !important;
        padding: 0 !important;
        gap: 6px !important;
    }

    html body .card-pills-row .stock-badge,
    html body .figma-badges-row .stock-badge {
        margin: 0 !important;
        display: inline-block !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    html body .card-pills-row .rating-stars,
    html body .card-pills-row .shop-item-stars,
    html body .figma-badges-row .rating-stars,
    html body .figma-badges-row .shop-item-stars {
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        text-align: right !important;
        flex-shrink: 0 !important;
        font-size: 11px !important;
    }

    /* Add to Basket & Learn More buttons side-by-side on Desktop */
    html body .card-actions-row,
    html body .figma-action-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    html body .btn-card-add-basket,
    html body .btn-figma-add-basket,
    html body .btn-card-learn-more,
    html body .btn-figma-learn-more {
        flex: 1 !important;
        width: 50% !important;
        margin: 0 !important;
        padding: 10px 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
}

/* =========================================================
   DESKTOP VIEW ONLY (>= 992px): REVIEW STARS NEXT TO STOCK TAGS (CENTERED PACKAGE)
========================================================= */
@media (min-width: 992px) {
    /* Place stock badge and review stars together as a centered package */
    html body .card-pills-row,
    html body .figma-badges-row,
    html body .product-rating-stock-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 8px auto !important;
        padding: 0 !important;
        gap: 12px !important;
    }

    /* Stock badge inline flex */
    html body .card-pills-row .stock-badge,
    html body .figma-badges-row .stock-badge,
    html body .stock-badge,
    html body .stock-tag,
    html body .in-stock {
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        flex-shrink: 0 !important;
        line-height: 1.2 !important;
    }

    /* Rating stars inline flex directly next to stock badge */
    html body .card-pills-row .rating-stars,
    html body .card-pills-row .shop-item-stars,
    html body .figma-badges-row .rating-stars,
    html body .figma-badges-row .shop-item-stars,
    html body .product-rating,
    html body .star-rating {
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        flex-shrink: 0 !important;
        font-size: 16px !important;
        gap: 2px !important;
    }

    /* WooCommerce standard archive product card alignment */
    html body .product-card .product-rating,
    html body .product .star-rating {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }
}

/* MOBILE VIEW ONLY (< 992px): STACKED BADGES & STARS */
@media (max-width: 991px) {
    html body .card-pills-row,
    html body .figma-badges-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
}

/* =========================================================
   100% FULL-WIDTH PRODUCT CARD THUMBNAILS (TOUCHING LEFT & RIGHT EDGES)
========================================================= */
/* Outer product card container */
html body .catalog-card-item,
html body .figma-product-card,
html body .product-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Thumbnail wrapper touching left and right 100% flush */
html body .figma-thumb-wrapper,
html body .card-image-wrap,
html body .product-thumb-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Product image scaling 100% full width */
html body .figma-thumb-wrapper img,
html body .card-image-wrap img,
html body .product-thumb-container img,
html body .figma-product-card img,
html body .catalog-card-item .card-image-wrap img {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px 16px 0 0 !important;
}

/* Floating Zoom Search Icon on top right of the image */
html body .card-zoom-icon,
html body .thumb-zoom-icon,
html body .figma-thumb-wrapper .thumb-zoom-icon,
html body .card-image-wrap .card-zoom-icon {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 10 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background-color: #1C3B47 !important;
    color: #ffffff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

html body .card-zoom-icon:hover,
html body .thumb-zoom-icon:hover {
    background-color: #87246A !important;
    transform: scale(1.08) !important;
}

html body .card-zoom-icon i,
html body .thumb-zoom-icon i {
    font-size: 13px !important;
    color: #ffffff !important;
}

/* =========================================================
   MOBILE VIEW ONLY (< 992px): CENTERED REVIEW STARS
========================================================= */
@media (max-width: 991px) {
    /* Center the badges/stars container on mobile */
    html body .card-pills-row,
    html body .figma-badges-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
        margin: 6px auto !important;
        gap: 4px !important;
    }

    /* Center review stars explicitly on mobile */
    html body .rating-stars,
    html body .shop-item-stars,
    html body .product-rating,
    html body .star-rating,
    html body .card-pills-row .rating-stars,
    html body .figma-badges-row .shop-item-stars {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 2px auto !important;
        text-align: center !important;
    }

    /* Stock badge centered on mobile */
    html body .stock-badge,
    html body .stock-tag,
    html body .in-stock {
        margin: 0 !important;
        display: inline-block !important;
    }
}


/* =========================================================
   SHOP PAGES BASE BACKGROUND COLOR (#FFFFFF)
========================================================= */
body.page-shop,
body.page-english-shop,
body.page-maths-shop,
.page-shop,
.page-english-shop,
.page-maths-shop {
    background-color: #ffffff !important;
}


/* =========================================================
   SITEWIDE STICKY HEADER (YELLOW TOP BAR & PURPLE MAIN HEADER)
========================================================= */
html, body, #page, .site, #content, .site-content {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

@media (min-width: 992px) {
    html body .sitewide-sticky-header-wrap,
    body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap {
    width: 100% !important;
}
}

html body .top-bar {
    position: relative !important;
    top: 0 !important;
    z-index: 100000 !important;
}

html body .main-header {
    position: relative !important;
    top: 0 !important;
    z-index: 99999 !important;
}


/* =========================================================
   LOAD MORE BUTTON STYLING (MOBILE SHOW ALL UNHIDE)
   ========================================================= */
/* =========================================================
   LOAD MORE BUTTON STYLING (MOBILE SHOW ALL UNHIDE)
========================================================= */
.load-more-wrap,
.mobile-load-more-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 32px 0 24px 0 !important;
    text-align: center !important;
}

.btn-load-more-custom,
.mobile-load-more-btn {
    background-color: #ffffff !important;
    color: #2B266D !important;
    border: 1.5px solid #2B266D !important;
    border-radius: 10px !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    padding: 13px 28px !important;
    width: 100% !important;
    max-width: 440px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: none !important;
    outline: none !important;
    display: inline-block !important;
    text-transform: uppercase !important;
}

.btn-load-more-custom:hover,
.mobile-load-more-btn:hover {
    background-color: #2B266D !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(43, 38, 109, 0.2) !important;
}

@media (max-width: 991px) {
    .mobile-hidden-card {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .mobile-hidden-card {
        display: block !important;
    }
    .load-more-wrap,
    .mobile-load-more-wrap {
        display: none !important;
    }
}

/* =========================================================
   MOBILE SHOP TESTIMONIAL CARDS (< 991px ONLY - FIXED WIDTH & VIBRANT #1C3D4E)
========================================================= */
@media (max-width: 991px) {
    html body .desktop-shop-testimonials-section,
    html body section.desktop-shop-testimonials-section,
    body .desktop-shop-testimonials-section,
    .desktop-shop-testimonials-section {
        display: none !important;
    }

    html body .mobile-testimonials-section,
    html body section.mobile-testimonials-section,
    body .mobile-testimonials-section,
    .mobile-testimonials-section {
        display: block !important;
        background-color: #1C3D4E !important;
        background: #1C3D4E !important;
        position: relative !important;
        padding: 50px 0 60px 0 !important;
        overflow: hidden !important;
        z-index: 50 !important;
        clear: both !important;
    }

    html body .mobile-testimonials-section::before,
    html body section.mobile-testimonials-section::before,
    .mobile-testimonials-section::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; height: 100% !important;
        background-image: url('images/scrunched_paper.png') !important;
        background-size: 1728px auto !important;
        background-repeat: repeat !important;
        opacity: 0.2 !important;
        mix-blend-mode: overlay !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    html body .mobile-testimonials-section .container {
        position: relative !important;
        z-index: 10 !important;
    }

    html body .mobile-testimonials-section .mobile-testimonials-header {
        text-align: center !important;
        margin-bottom: 24px !important;
        position: relative !important;
        z-index: 100 !important;
        display: block !important;
    }

    html body .mobile-testimonials-section .mobile-testimonials-title {
        font-family: 'Rock Salt', cursive, sans-serif !important;
        font-size: 32px !important;
        color: #FFFFFF !important;
        text-align: center !important;
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 101 !important;
        line-height: 1.2 !important;
    }

    html body .mobile-testimonials-section .testimonials-pencil-line {
        width: 100% !important;
        max-width: 260px !important;
        height: 14px !important;
        max-height: 14px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 4px auto 0 auto !important;
        position: relative !important;
        z-index: 101 !important;
        border: none !important;
        background: transparent !important;
    }

    /* STACKED GRID AREA FOR CLEAN FADE & SLIDE */
    html body .mobile-testimonial-card-slider {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        position: relative !important;
        z-index: 60 !important;
    }

    /* ALL TESTIMONIAL CARDS BLUE ON MOBILE WITH FIXED MAX WIDTH (MATCHING OTHER CARDS) */
    html body .mobile-testimonials-section .testimonial-card-item {
        grid-area: 1 / 1 !important;
        display: block !important;
        background-color: #00A3AD !important;
        border-radius: 16px !important;
        padding: 28px 22px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.12) !important;
        color: #ffffff !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
        pointer-events: none !important;
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out !important;
        width: 100% !important;
        max-width: 360px !important; /* Fixed card width matching standard cards */
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    html body .mobile-testimonials-section .testimonial-card-item.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    html body .mobile-testimonials-section .testimonial-block {
        display: block !important;
        margin-bottom: 14px !important;
    }

    html body .mobile-testimonials-section .testimonial-block:last-child {
        margin-bottom: 0 !important;
    }

    html body .mobile-testimonials-section .quote-text {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 14.5px !important;
        line-height: 1.55 !important;
        color: #ffffff !important;
        font-weight: 300 !important;
        margin-bottom: 6px !important;
    }

    html body .mobile-testimonials-section .quote-author {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1B8998 !important;
        display: block !important;
    }

    html body .mobile-testimonials-dots {
        position: relative !important;
        z-index: 100 !important;
        margin-top: 20px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
    }

    html body .mobile-testimonials-dots .dot {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.35) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: inline-block !important;
    }

    html body .mobile-testimonials-dots .dot.active {
        width: 24px !important;
        border-radius: 6px !important;
        background-color: #ffffff !important;
    }
}


/* =========================================================
   DESKTOP SHOP TESTIMONIALS SECTION (>= 992px ONLY)
========================================================= */
@media (min-width: 992px) {
    html body .mobile-testimonials-section,
    html body section.mobile-testimonials-section,
    body .mobile-testimonials-section,
    .mobile-testimonials-section {
        display: none !important;
    }

    html body .desktop-shop-testimonials-section,
    html body section.desktop-shop-testimonials-section,
    body .desktop-shop-testimonials-section,
    .desktop-shop-testimonials-section {
        display: block !important;
        background-color: #1C3D4E !important;
        background: #1C3D4E !important;
        position: relative !important;
        padding: 70px 0 90px 0 !important;
        overflow: hidden !important;
        z-index: 30 !important;
    }

    html body .desktop-shop-testimonials-section::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; height: 100% !important;
        background-image: url('images/scrunched_paper.png') !important;
        background-size: 1728px auto !important;
        background-repeat: repeat !important;
        opacity: 0.2 !important;
        mix-blend-mode: overlay !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    html body .desktop-shop-testimonials-section .container {
        position: relative !important;
        z-index: 10 !important;
    }

    html body .desktop-shop-testimonials-section .testimonials-pencil-line {
        width: 100% !important;
        max-width: 380px !important;
        height: 16px !important;
        max-height: 16px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    /* Identical Homepage Navigation Buttons */
    html body .desktop-shop-testimonials-section .testi-nav-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        background-color: #1C3B47 !important; background: #1C3B47 !important; color: #ffffff !important; border: 2px solid #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
        z-index: 100 !important;
        transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease !important;
        outline: none !important;
    }

        html body .desktop-shop-testimonials-section .testi-nav-btn i,
    .desktop-shop-testimonials-section .testi-nav-btn i {
        color: #ffffff !important;
        font-size: 16px !important;
        transition: color 0.25s ease !important;
    }

    html body .desktop-shop-testimonials-section .testi-nav-btn:hover,
    .desktop-shop-testimonials-section .testi-nav-btn:hover {
        transform: scale(1.1) !important;
        background-color: #ffffff !important;
        background: #ffffff !important;
        color: #1C3B47 !important;
        border-color: #ffffff !important;
    }

    html body .desktop-shop-testimonials-section .testi-nav-btn:hover i,
    .desktop-shop-testimonials-section .testi-nav-btn:hover i {
        color: #1C3B47 !important;
    }

    html body .desktop-shop-testimonials-section .testi-nav-btn i {
        color: inherit !important;
        font-size: 16px !important;
    }

    /* Track Container */
    html body .desktop-shop-testimonials-section .testi-sets-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        position: relative !important;
    }

    html body .desktop-shop-testimonials-section .shop-testi-set-slide {
        grid-area: 1 / 1 !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        width: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
        pointer-events: none !important;
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out !important;
    }

    html body .desktop-shop-testimonials-section .shop-testi-set-slide.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-figma {
        border-radius: 16px !important;
        padding: 36px 28px !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        min-height: 440px !important;
        color: #ffffff !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
        box-sizing: border-box !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-figma.card-teal {
        background-color: #00A3AD !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-figma.card-purple {
        background-color: #A64B8B !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-figma.card-yellow {
        background-color: #F5B41A !important;
    }

    html body .desktop-shop-testimonials-section .quote-badge-top {
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        font-size: 22px !important;
        margin-bottom: 24px !important;
    }

    html body .desktop-shop-testimonials-section .quote-text {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 15.5px !important;
        line-height: 1.58 !important;
        color: #ffffff !important;
        margin-bottom: 24px !important;
        font-weight: 300 !important;
    }

    /* LEXEND BOLD AUTHOR TEXT COLORS PER CARD THEME */
    html body .desktop-shop-testimonials-section .quote-author,
    html body .desktop-shop-testimonials-section span.quote-author {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-weight: 700 !important;
    }

    html body .desktop-shop-testimonials-section .card-teal .quote-author {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #1B8998 !important;
        display: block !important;
        margin-top: 10px !important;
    }

    html body .desktop-shop-testimonials-section .card-purple .quote-author {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #491339 !important;
        display: block !important;
        margin-top: 10px !important;
    }

    html body .desktop-shop-testimonials-section .card-yellow .quote-author {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #bd9638 !important;
        display: block !important;
        margin-top: 10px !important;
    }

    html body .desktop-shop-testimonials-section .quote-divider-line {
        height: 1px !important;
        background: rgba(255, 255, 255, 0.25) !important;
        margin: 16px 0 !important;
        width: 100% !important;
    }

    /* Dots Pagination Styling */
    html body .desktop-shop-testimonials-section .testi-dots-pagination .testi-dot {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.35) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    html body .desktop-shop-testimonials-section .testi-dots-pagination .testi-dot:hover {
        background-color: rgba(255, 255, 255, 0.75) !important;
    }

    html body .desktop-shop-testimonials-section .testi-dots-pagination .testi-dot.active {
        width: 28px !important;
        border-radius: 6px !important;
        background-color: #ffffff !important;
    }
}


/* =========================================================
   ITEM 1: PRODUCT THUMBNAIL EXACT FIT (ZERO EXTRA SPACES)
========================================================= */
html body .catalog-card-item,
html body .figma-product-card,
html body .product-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
}

html body .figma-thumb-wrapper,
html body .card-image-wrap,
html body .product-thumb-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body .figma-thumb-wrapper img,
html body .card-image-wrap img,
html body .product-thumb-container img,
html body .figma-product-card img,
html body .catalog-card-item .card-image-wrap img {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px 16px 0 0 !important;
}

/* Floating Zoom Search Icon on top right of the image */
html body .card-zoom-icon,
html body .thumb-zoom-icon,
html body .figma-thumb-wrapper .thumb-zoom-icon,
html body .card-image-wrap .card-zoom-icon {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 10 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background-color: #1C3B47 !important;
    color: #ffffff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

html body .card-zoom-icon:hover,
html body .thumb-zoom-icon:hover {
    background-color: #87246A !important;
    transform: scale(1.08) !important;
}


/* =========================================================
   ITEM 4: DESKTOP STICKY HEADER (ALWAYS STUCK TO TOP OF SCREEN)
========================================================= */
html, body, #page, .site, #content, .site-content {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

@media (min-width: 992px) {
    html body .sitewide-sticky-header-wrap,
    body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap {
    width: 100% !important;
}

    body.logged-in .sitewide-sticky-header-wrap {
    /* positioning removed - governed solely by style.css */
}
}


/* =========================================================
   ITEM 2 & 3 & 5: DESKTOP ONLY LAYOUT REFINEMENTS (>= 992px)
========================================================= */
@media (min-width: 992px) {
    /* ITEM 3: Stock Tag & Review Stars Side-by-Side on Desktop */
    html body .card-pills-row,
    html body .figma-badges-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 8px 0 !important;
        padding: 0 !important;
        gap: 8px !important;
    }

    html body .stock-badge,
    html body .card-pills-row .stock-badge,
    html body .figma-badges-row .stock-badge {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 3px 10px !important;
        border-radius: 12px !important;
        background-color: #10B981 !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        flex-shrink: 0 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    html body .rating-stars,
    html body .shop-item-stars,
    html body .card-pills-row .rating-stars,
    html body .figma-badges-row .shop-item-stars {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
        font-size: 11.5px !important;
        gap: 2px !important;
        margin: 0 !important;
    }

    /* ITEM 2: Add to Basket & Learn More Side-by-Side on DESKTOP ONLY */
    html body .card-actions-row,
    html body .figma-action-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    html body .btn-card-add-basket,
    html body .btn-figma-add-basket,
    html body .btn-card-learn-more,
    html body .btn-figma-learn-more {
        flex: 1 !important;
        width: 50% !important;
        margin: 0 !important;
        padding: 10px 4px !important;
        font-size: 11.5px !important;
        white-space: nowrap !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* ITEM 5: Desktop Load More Button Pushed Down Slightly (60px Top Margin) */
    html body .load-more-wrap,
    html body .mobile-load-more-wrap,
    .load-more-wrap,
    .mobile-load-more-wrap {
        margin-top: 60px !important;
        margin-bottom: 40px !important;
    }
}


/* =========================================================
   MOBILE ONLY LAYOUT REFINEMENTS (< 991px)
========================================================= */
@media (max-width: 991px) {
    /* Stacked Badges & Stars on Mobile */
    html body .card-pills-row,
    html body .figma-badges-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
        margin: 6px auto !important;
        gap: 4px !important;
    }

    html body .stock-badge {
        margin: 0 !important;
        display: inline-block !important;
    }

    html body .rating-stars,
    html body .shop-item-stars {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 2px auto !important;
    }

    /* ITEM 2: Stacked Full-Width Buttons on Mobile */
    html body .card-actions-row,
    html body .figma-action-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }

    html body .btn-card-add-basket,
    html body .btn-figma-add-basket,
    html body .btn-card-learn-more,
    html body .btn-figma-learn-more {
        width: 100% !important;
        flex: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 8px !important;
    }
}


/* =========================================================
   ITEM 1: 100% FLUSH THUMBNAIL (ALL 4 EDGES TOUCH CARD EDGES)
========================================================= */
html body.page-shop .figma-thumb-wrapper,
html body .figma-thumb-wrapper,
html body .card-image-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

html body.page-shop .figma-thumb-wrapper a,
html body .figma-thumb-wrapper a,
html body .card-image-wrap a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.page-shop .figma-thumb-wrapper img,
html body .figma-thumb-wrapper img,
html body .card-image-wrap img,
html body .figma-product-card img,
html body .catalog-card-item .card-image-wrap img {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px 16px 0 0 !important;
}


/* =========================================================
   ITEM 3: STOCK BADGE & REVIEW STARS CENTERED SIDE-BY-SIDE
========================================================= */
html body .card-pills-row,
html body .figma-badges-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 8px auto !important;
    padding: 0 !important;
    gap: 10px !important;
    text-align: center !important;
}

html body .stock-badge,
html body .card-pills-row .stock-badge,
html body .figma-badges-row .stock-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    background-color: #10B981 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

html body .rating-stars,
html body .shop-item-stars,
html body .card-pills-row .rating-stars,
html body .figma-badges-row .shop-item-stars {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 11.5px !important;
    gap: 2px !important;
    margin: 0 !important;
}


/* =========================================================
   DESKTOP ONLY BUTTONS & LOAD MORE (>= 992px)
========================================================= */
@media (min-width: 992px) {
    html body .card-actions-row,
    html body .figma-action-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    html body .btn-card-add-basket,
    html body .btn-figma-add-basket,
    html body .btn-card-learn-more,
    html body .btn-figma-learn-more {
        flex: 1 !important;
        width: 50% !important;
        margin: 0 !important;
        padding: 10px 4px !important;
        font-size: 11.5px !important;
        white-space: nowrap !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    html body .load-more-wrap,
    html body .mobile-load-more-wrap,
    .load-more-wrap,
    .mobile-load-more-wrap {
        margin-top: 60px !important;
        margin-bottom: 40px !important;
    }
}


/* =========================================================
   MOBILE ONLY BUTTONS (< 991px)
========================================================= */
@media (max-width: 991px) {
    html body .card-actions-row,
    html body .figma-action-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }

    html body .btn-card-add-basket,
    html body .btn-figma-add-basket,
    html body .btn-card-learn-more,
    html body .btn-figma-learn-more {
        width: 100% !important;
        flex: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 8px !important;
    }
}

/* =========================================================
   EXACT DESKTOP SHOP STYLES FROM HARRISON-YORK-THEME_V3.ZIP
========================================================= */

.shop-hero-banner {
    position: relative;
    padding: 60px 0 50px 0;
    overflow: hidden;
    color: #ffffff;
}

.shop-hero-banner.english-banner {
    background-color: #87246A !important;
}

.shop-hero-banner.maths-banner {
    background-color: #199EB3 !important;
}

.shop-hero-banner .shop-banner-decor {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

.shop-hero-banner .shop-banner-decor.left-decor {
    left: 0;
    height: 100%;
}

.shop-hero-banner .shop-banner-decor.right-decor {
    right: 0;
    height: 100%;
}

.shop-hero-banner .container {
    position: relative;
    z-index: 2;
    text-align: center;
}

.shop-hero-banner h1 {
    font-family: var(--font-heading), 'Rock Salt', cursive, sans-serif !important;
    font-size: 48px !important;
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
    text-align: center !important;
}

.shop-hero-banner .shop-breadcrumb {
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.shop-hero-banner .shop-breadcrumb a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.shop-hero-banner .shop-breadcrumb a:hover {
    text-decoration: underline !important;
}

.shop-hero-banner .shop-breadcrumb span {
    margin: 0 6px !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* LPC METHOD SHOWCASE SECTION */
.shop-lpc-showcase {
    background-color: #ffffff;
    padding: 60px 0;
    position: relative;
}

.shop-lpc-showcase .headline-container {
    position: relative;
    margin-bottom: 40px;
    text-align: center;
}

.shop-lpc-showcase .lpc-main-headline {
    font-family: var(--font-heading), 'Rock Salt', cursive, sans-serif;
    font-size: 26px;
    line-height: 1.5;
    color: #1C3B47;
    max-width: 900px;
    margin: 0 auto;
}

.shop-lpc-showcase .lpc-main-headline .hl-learn {
    color: #F5B41A !important;
    font-weight: 800 !important;
}

.shop-lpc-showcase .lpc-main-headline .hl-practise {
    color: #199EB3 !important;
    font-weight: 800 !important;
}

.shop-lpc-showcase .lpc-main-headline .hl-consolidate {
    color: #87246A !important;
    font-weight: 800 !important;
}

.shop-lpc-showcase .figma-postit-img {
    position: absolute;
    right: -20px;
    top: -30px;
    width: 220px;
    height: auto;
    z-index: 5;
}

.lpc-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.lpc-graphic-card {
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lpc-graphic-img {
    width: 100%;
    height: auto;
    display: block;
}

.lpc-content-side .lpc-intro-paragraph {
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-size: 15.5px;
    line-height: 1.6;
    color: #4B5563;
    margin-bottom: 24px;
}

.lpc-points-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lpc-point-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.lpc-point-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

.lpc-point-number.num-1 { background-color: #F5B41A; }
.lpc-point-number.num-2 { background-color: #199EB3; }
.lpc-point-number.num-3 { background-color: #87246A; }

.lpc-point-text {
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: #374151;
}

.view-workbooks-anchor-wrap {
    text-align: center;
    margin-top: 40px;
}

.view-workbooks-anchor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1C3B47;
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.view-workbooks-anchor:hover {
    color: #87246A;
}

/* FIGMA SHOP SECTION & SIDEBAR */
.figma-shop-section {
    padding: 40px 0 80px 0;
    background: #ffffff;
}

.shop-main-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 36px;
}

.shop-sidebar {
    background-color: #F4F6F8;
    border-radius: 20px;
    padding: 28px 20px;
}

.shop-sidebar.english-sidebar .sidebar-switch-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background-color: #199EB3;
    color: #ffffff;
    border-radius: 12px;
    text-align: center;
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    margin-bottom: 24px;
    transition: background-color 0.2s ease;
}

.shop-sidebar.english-sidebar .sidebar-switch-btn:hover {
    background-color: #127888;
}

.shop-sidebar.maths-sidebar .sidebar-switch-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background-color: #87246A;
    color: #ffffff;
    border-radius: 12px;
    text-align: center;
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    margin-bottom: 24px;
    transition: background-color 0.2s ease;
}

.shop-sidebar.maths-sidebar .sidebar-switch-btn:hover {
    background-color: #6C1C54;
}

.sidebar-title {
    font-family: var(--font-heading), 'Rock Salt', cursive, sans-serif;
    font-size: 18px;
    color: #1C3B47;
    margin: 20px 0 12px 0;
}

.sidebar-search-box {
    position: relative;
    margin-bottom: 24px;
}

.sidebar-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    font-size: 14px;
}

.sidebar-search-box input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-size: 13.5px;
    outline: none;
}

.subcategories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.subcat-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #4B5563;
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.subcat-link:hover,
.subcat-link.active {
    background-color: #ffffff;
    color: #1C3B47;
    font-weight: 700;
}

/* STRAND FILTER PILLS */
.strand-filter-section {
    margin-bottom: 28px;
}

.strand-filter-title {
    font-family: var(--font-heading), 'Rock Salt', cursive, sans-serif;
    font-size: 20px;
    margin-bottom: 16px;
}

.strand-filter-title.english-title { color: #87246A; }
.strand-filter-title.maths-title { color: #199EB3; }

.strand-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.strand-pill-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #E5E7EB;
    background-color: #F9FAFB;
    color: #4B5563;
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.strand-pill-btn:hover {
    background-color: #F3F4F6;
}

.english-sidebar ~ .figma-catalog-main .strand-pill-btn.active {
    background-color: #87246A;
    color: #ffffff;
    border-color: #87246A;
}

.maths-sidebar ~ .figma-catalog-main .strand-pill-btn.active {
    background-color: #199EB3;
    color: #ffffff;
    border-color: #199EB3;
}

/* 3-COLUMN CATALOG GRID & CARDS */
.figma-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.figma-product-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.figma-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.figma-thumb-wrapper {
    position: relative;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.figma-thumb-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.figma-product-title {
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1C3B47;
    margin: 0 0 10px 0;
}

.figma-product-title a {
    color: inherit;
    text-decoration: none;
}

.figma-badges-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-size: 12px;
}

.sku-badge {
    color: #6B7280;
    font-weight: 600;
}

.stock-badge {
    color: #10B981;
    font-weight: 700;
}

.retail-price-label {
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-size: 14px;
    color: #4B5563;
    margin-bottom: 14px;
}

.figma-cart-row {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.figma-qty-input {
    width: 44px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    text-align: center;
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 14px;
}

.btn-figma-basket {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    background-color: #87246A;
    color: #ffffff;
    border: none;
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-figma-basket:hover {
    background-color: #6C1C54;
}

.maths-sidebar ~ .figma-catalog-main .btn-figma-basket {
    background-color: #199EB3;
}

.maths-sidebar ~ .figma-catalog-main .btn-figma-basket:hover {
    background-color: #127888;
}

@media (max-width: 991px) {
    .shop-main-layout {
        grid-template-columns: 1fr;
    }
    .figma-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .figma-catalog-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   DESKTOP SHOP TESTIMONIALS SECTION (STRICT OVERRIDES)
========================================================= */
@media (min-width: 992px) {
    html body .desktop-shop-testimonials-section,
    body .desktop-shop-testimonials-section,
    .desktop-shop-testimonials-section {
        display: block !important;
        background-color: #1C3D4E !important;
        background: #1C3D4E !important;
        position: relative !important;
        padding: 70px 0 90px 0 !important;
        overflow: hidden !important;
        z-index: 30 !important;
        margin-top: 0 !important;
    }

    html body .desktop-shop-testimonials-section::before,
    .desktop-shop-testimonials-section::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; height: 100% !important;
        background-image: url('images/scrunched_paper.png') !important;
        background-size: 1728px auto !important;
        background-repeat: repeat !important;
        opacity: 0.2 !important;
        mix-blend-mode: overlay !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    html body .desktop-shop-testimonials-section .container {
        position: relative !important;
        z-index: 10 !important;
    }

    html body .desktop-shop-testimonials-section .testimonials-main-title {
        font-family: 'Rock Salt', cursive, sans-serif !important;
        font-size: 42px !important;
        color: #ffffff !important;
        margin-bottom: 4px !important;
        text-align: center !important;
        letter-spacing: 2px !important;
    }

    html body .desktop-shop-testimonials-section .testi-nav-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        background-color: #1C3B47 !important; background: #1C3B47 !important; color: #ffffff !important; border: 2px solid #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
        z-index: 100 !important;
        transition: transform 0.25s ease, color 0.25s ease !important;
    }

    html body .desktop-shop-testimonials-section .testi-nav-btn:hover {
        transform: scale(1.1) !important; background-color: #ffffff !important; background: #ffffff !important; color: #1C3B47 !important; border-color: #ffffff !important;
    }

    html body .desktop-shop-testimonials-section .testi-sets-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        position: relative !important;
    }

    html body .desktop-shop-testimonials-section .shop-testi-set-slide {
        grid-area: 1 / 1 !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        width: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
        pointer-events: none !important;
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out !important;
    }

    html body .desktop-shop-testimonials-section .shop-testi-set-slide.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-figma { border-radius: 16px !important; padding: 36px 28px !important; position: relative !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        min-height: 280px !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-figma.card-teal {
        background-color: #00A3AD !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-figma.card-purple {
        background-color: #A64B8B !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-figma.card-yellow {
        background-color: #F5B41A !important;
    }

    html body .desktop-shop-testimonials-section .quote-badge-top {
        position: absolute !important;
        top: 20px !important;
        left: 24px !important;
        color: rgba(255, 255, 255, 0.35) !important;
        font-size: 24px !important;
    }

    html body .desktop-shop-testimonials-section .quote-text {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 15.5px !important;
        line-height: 1.55 !important;
        color: #ffffff !important;
        font-weight: 300 !important;
        margin-bottom: 4px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    html body .desktop-shop-testimonials-section .card-teal .quote-author {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #1B8998 !important;
        display: block !important;
        margin-top: 10px !important;
    }

    html body .desktop-shop-testimonials-section .card-purple .quote-author {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #491339 !important;
        display: block !important;
        margin-top: 10px !important;
    }

    html body .desktop-shop-testimonials-section .card-yellow .quote-author {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #bd9638 !important;
        display: block !important;
        margin-top: 10px !important;
    }

    html body .desktop-shop-testimonials-section .testi-dots-pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin-top: 32px !important;
    }

    html body .desktop-shop-testimonials-section .testi-dots-pagination .testi-dot {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.35) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: inline-block !important;
    }

    html body .desktop-shop-testimonials-section .testi-dots-pagination .testi-dot.active {
        width: 24px !important;
        border-radius: 6px !important;
        background-color: #ffffff !important;
    }
}

@media (max-width: 991px) {
    html body .desktop-shop-testimonials-section,
    .desktop-shop-testimonials-section {
        display: none !important;
    }
}


/* SITEWIDE TESTIMONIAL CARD SVG COMMA ICON */
.testi-card-comma-svg {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    display: block !important;
    margin-bottom: 4px !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

.testi-card-figma .quote-badge-top {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 10 !important;
}

.testi-card-figma .quote-badge-top img,
.testi-card-figma .quote-badge-svg {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
}
}

}



/* =========================================================
   DESKTOP SHOP TESTIMONIALS SECTION (HIGH SPECIFICITY OVERRIDES)
========================================================= */
@media (min-width: 992px) {
    html body .mobile-testimonials-section,
    body .mobile-testimonials-section,
    section.mobile-testimonials-section,
    .mobile-testimonials-section {
        display: none !important;
    }

    html body .desktop-shop-testimonials-section,
    body .desktop-shop-testimonials-section,
    section.desktop-shop-testimonials-section,
    .desktop-shop-testimonials-section {
        display: block !important;
        background-color: #1C3D4E !important;
        background: #1C3D4E !important;
        position: relative !important;
        padding: 70px 0 90px 0 !important;
        overflow: hidden !important;
        z-index: 30 !important;
        margin-top: 0 !important;
    }

    html body .desktop-shop-testimonials-section::before,
    .desktop-shop-testimonials-section::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; height: 100% !important;
        background-image: url('images/scrunched_paper.png') !important;
        background-size: 1728px auto !important;
        background-repeat: repeat !important;
        opacity: 0.2 !important;
        mix-blend-mode: overlay !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    html body .desktop-shop-testimonials-section .container {
        position: relative !important;
        z-index: 10 !important;
    }

    html body .desktop-shop-testimonials-section .testi-sets-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        position: relative !important;
    }

    html body .desktop-shop-testimonials-section .shop-testi-set-slide {
        grid-area: 1 / 1 !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        width: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
        pointer-events: none !important;
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out !important;
    }

    html body .desktop-shop-testimonials-section .shop-testi-set-slide.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-figma { border-radius: 16px !important; padding: 36px 28px !important; position: relative !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        min-height: 280px !important;
        transform: none !important;
        margin: 0 !important;
        width: 100% !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-figma.card-teal {
        background-color: #00A3AD !important;
        background: #00A3AD !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-figma.card-purple {
        background-color: #A64B8B !important;
        background: #A64B8B !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-figma.card-yellow {
        background-color: #F5B41A !important;
        background: #F5B41A !important;
    }

    html body .desktop-shop-testimonials-section .testi-card-comma-svg {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
        max-width: 70px !important;
        max-height: 70px !important;
        display: block !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 4px !important;
        object-fit: contain !important;
        pointer-events: none !important;
        align-self: flex-start !important;
    }

    html body .desktop-shop-testimonials-section .quote-badge-top {
        display: none !important;
    }

    html body .desktop-shop-testimonials-section .quote-text {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 15.5px !important;
        line-height: 1.55 !important;
        color: #ffffff !important;
        font-weight: 300 !important;
        margin-bottom: 4px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    html body .desktop-shop-testimonials-section .card-teal .quote-author {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #1B8998 !important;
        display: block !important;
        margin-top: 10px !important;
    }

    html body .desktop-shop-testimonials-section .card-purple .quote-author {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #491339 !important;
        display: block !important;
        margin-top: 10px !important;
    }

    html body .desktop-shop-testimonials-section .card-yellow .quote-author {
        font-family: var(--font-lexend), 'Lexend', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #bd9638 !important;
        display: block !important;
        margin-top: 10px !important;
    }

    html body .desktop-shop-testimonials-section .testi-nav-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        background-color: #1C3B47 !important;
        background: #1C3B47 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
        z-index: 100 !important;
        transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease !important;
        outline: none !important;
    }

    html body .desktop-shop-testimonials-section .testi-nav-btn i {
        color: #ffffff !important;
        font-size: 16px !important;
        transition: color 0.25s ease !important;
    }

    html body .desktop-shop-testimonials-section .testi-nav-btn:hover {
        transform: scale(1.1) !important;
        background-color: #ffffff !important;
        background: #ffffff !important;
        color: #1C3B47 !important;
        border-color: #ffffff !important;
    }

    html body .desktop-shop-testimonials-section .testi-nav-btn:hover i {
        color: #1C3B47 !important;
    }

    html body .desktop-shop-testimonials-section .testi-dots-pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin-top: 32px !important;
    }

    html body .desktop-shop-testimonials-section .testi-dots-pagination .testi-dot {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.35) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: inline-block !important;
    }

    html body .desktop-shop-testimonials-section .testi-dots-pagination .testi-dot.active {
        width: 24px !important;
        border-radius: 6px !important;
        background-color: #ffffff !important;
    }
}

@media (max-width: 991px) {
    html body .desktop-shop-testimonials-section,
    .desktop-shop-testimonials-section {
        display: none !important;
    }
    html body .mobile-testimonials-section,
    .mobile-testimonials-section {
        display: block !important;
    }
}


/* SITEWIDE TESTIMONIAL CARD SVG COMMA ICON (EXACT 70px x 70px WITH 4px BOTTOM MARGIN) */
html body .testi-card-comma-svg,
body .testi-card-comma-svg,
.testi-card-comma-svg {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    display: block !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 4px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    align-self: flex-start !important;
}

html body .testi-card-figma,
body .testi-card-figma,
.testi-card-figma {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}


/* SITEWIDE STICKY HEADER (APPLIES TO ALL PAGES SITEWIDE) */
@media (min-width: 992px) {
    html body .sitewide-sticky-header-wrap,
    body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap {
    width: 100% !important;
    background-color: #87246A !important;
}
}

/* TESTIMONIAL CARD SVG COMMA ICON (SLIGHTLY HIGHER UP IN CARD) */
html body .testi-card-comma-svg,
body .testi-card-comma-svg,
.testi-card-comma-svg {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    display: block !important;
    margin-top: -10px !important;
    margin-left: 0 !important;
    margin-bottom: 4px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    align-self: flex-start !important;
}


/* =========================================================
   SITEWIDE STICKY HEADER & PRODUCT CARD THUMBNAIL REFINEMENTS
========================================================= */

/* SITEWIDE STICKY HEADER FOR ALL BODY CLASSES */
html, body {
    overflow-x: clip !important;
}

@media (min-width: 992px) {
    html body .sitewide-sticky-header-wrap,
    body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap {
    width: 100% !important;
    background-color: #87246A !important;
}
}

/* PRODUCT CARD THUMBNAIL IMAGES TOUCH ALL 4 SIDES WITHOUT CUTOFF */
html body .figma-thumb-wrapper,
html body .card-image-wrap,
.figma-thumb-wrapper,
.card-image-wrap {
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .figma-thumb-wrapper img,
html body .card-image-wrap img,
.figma-thumb-wrapper img,
.card-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

/* SLIGHTLY LESS WIDE EQUAL BUTTONS IN PRODUCT CARDS */
html body .card-actions-row,
html body .figma-action-row,
html body .figma-cart-row,
.card-actions-row,
.figma-action-row,
.figma-cart-row {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 250px !important;
    margin: 12px auto 0 auto !important;
}

html body .card-actions-row button,
html body .card-actions-row a,
html body .figma-action-row button,
html body .figma-action-row a,
html body .figma-cart-row button,
html body .figma-cart-row a,
.btn-card-add-basket,
.btn-card-learn-more,
.btn-figma-add-basket,
.btn-figma-learn-more {
    flex: 1 1 0% !important;
    width: 50% !important;
    max-width: 120px !important;
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}


/* PRODUCT CARD THUMBNAIL CONTAINER TALLER ASPECT-RATIO (FITS FULL WORKBOOK COVER WITHOUT CROPPING TOP/BOTTOM) */
html body .figma-thumb-wrapper,
html body .card-image-wrap,
.figma-thumb-wrapper,
.card-image-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1.32 !important;
    min-height: 280px !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
}

html body .figma-thumb-wrapper img,
html body .card-image-wrap img,
.figma-thumb-wrapper img,
.card-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}


/* PRODUCT CARD THUMBNAIL CONTAINER EVEN TALLER (1 / 1.42 ASPECT RATIO & 330px MIN-HEIGHT) */
html body .figma-thumb-wrapper,
html body .card-image-wrap,
.figma-thumb-wrapper,
.card-image-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1.42 !important;
    min-height: 330px !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
}

html body .figma-thumb-wrapper img,
html body .card-image-wrap img,
.figma-thumb-wrapper img,
.card-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}


/* MOVED AUDIENCE SECTION DOWN VISUALLY BY 100px */
html body .section-audience,
body .section-audience,
.section-audience {
    margin-top: 100px !important;
}


/* VISUALLY MOVE AUDIENCE SECTION DOWN BY 100px */
html body .section-audience,
body .section-audience,
.section-audience {
    margin-top: 100px !important;
    padding-top: 100px !important;
    transform: translateY(100px) !important;
}

html body .section-audience + section,
body .section-audience + section {
    margin-top: 100px !important;
}


/* =========================================================
   FIGMA BOTTOM SHOP SECTION: FEATURE CARDS & BUNDLES
========================================================= */

.figma-shop-bottom-feature-section {
    padding: 60px 0 80px 0;
    background-color: #ffffff;
    font-family: 'Lexend', sans-serif;
}

.figma-feature-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 70px;
}

@media (min-width: 992px) {
    .figma-feature-card {
    border-radius: 20px;
    padding: 36px 36px 0 36px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 680px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}   }

@media (max-width: 991px) {
    .figma-feature-card {
    border-radius: 20px;
    padding: 36px 36px 0 36px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 530px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}   }

.card-teal-feature {
    background-color: #36B3A8;
    color: #ffffff;
}

.card-purple-diagnostic {
    background-color: #6E73B9;
    color: #ffffff;
}

.feature-card-content h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 16px 0;
    color: #ffffff;
}

.script-font-free {
    font-family: 'Rock Salt', cursive, sans-serif;
    font-size: 36px;
    color: #84E9F7;
    display: inline-block;
    margin-right: 6px;
}

.feature-card-content p {
    font-size: 22px;
    line-height: 1.3;
    margin: 0 0 20px 0;
    color: rgba(255, 255, 255, 0.92);
}

.badge-coming-soon {
    display: inline-block;
    background-color: #F5B41A;
    color: #183B47;
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 10px 20px;
    border-radius: 8px;
    text-transform: uppercase;
}

.feature-card-graphic-wrap {
    margin-top: 20px;
    text-align: center;
}

.feature-mockup-img {
    max-width: 85%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.feature-card-clock-wrap {
    position: absolute;
    bottom: -40px;
    right: -30px;
    width: 240px;
    height: 240px;
}

.analog-clock-svg {
    width: 150%;
    height: 150%;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

/* BUNDLES SECTION */
.figma-bundles-section {
    text-align: center;
    margin-top: 40px;
}

.bundles-header-wrap {
    margin-bottom: 40px;
}

.script-font-bundles {
    font-family: 'Rock Salt', cursive, sans-serif;
    font-size: 32px;
    color: #183B47;
    display: inline-block;
    text-transform: uppercase;
}

.bundles-pencil-line-wrap {
    margin-top: 4px;
}

.bundles-pencil-img {
    height: 10px;
    width: auto;
}

.figma-bundles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.figma-bundle-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 0;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bundle-thumb-box {
    border-radius: 16px;
    padding: 24px 16px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.bg-teal-thumb {
    background-color: #36B3A8;
}

.bg-purple-thumb {
    background-color: #6E73B9;
}

.bundle-cover-img {
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.18));
}

.bundle-card-body {
    padding: 16px 14px;
}

.bundle-title {
    font-size: 15px;
    font-weight: 700;
    color: #183B47;
    margin: 0 0 8px 0;
}

.bundle-badges-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bundle-sku-tag {
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.bundle-price-label {
    font-size: 13px;
    color: #183B47;
    margin-bottom: 14px;
}

.bundle-price-label strong {
    color: #87246A;
}

.bundle-actions-row {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.btn-bundle-add-basket {
    flex: 1;
    background-color: #87246A;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    height: 34px;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
}

.btn-bundle-learn-more {
    flex: 1;
    background-color: #ffffff;
    color: #87246A;
    border: 1px solid #87246A;
    border-radius: 6px;
    height: 34px;
    line-height: 32px;
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none;
    display: block;
}

@media (max-width: 991px) {
    .figma-feature-cards-grid {
        grid-template-columns: 1fr;
    }
    .figma-bundles-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .figma-bundles-grid {
        grid-template-columns: 1fr;
    }
}


/* FEATURE CLOCK IMAGE & #4B5194 TEAL CARD SPAN */
.feature-card-clock-wrap {
    position: absolute;
    bottom: -35px;
    right: -25px;
    width: 250px;
    height: 250px;
    pointer-events: none;
}

.feature-clock-img {
    width: 150%;
    height: 150%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.12));
}

.card-teal-feature h2 span.text-purple-highlight {
    color: #4B5194 !important;
    font-weight: 700 !important;
}


/* HIGH-SPECIFICITY #4B5194 TEAL CARD TEXT & MUCH LARGER CLOCK (340px) */
html body .card-teal-feature h2 span.text-purple-highlight,
html body .card-teal-feature h2 span,
.card-teal-feature h2 span.text-purple-highlight,
.card-teal-feature h2 span {
    color: #4B5194 !important;
    font-weight: 700 !important;
    display: inline !important;
}

html body .feature-card-clock-wrap,
body .feature-card-clock-wrap,
.feature-card-clock-wrap {
    position: absolute !important;
    bottom: -5px !important;
    right: 40px !important;
    width: 340px !important;
    height: 340px !important;
    max-width: none !important;
    max-height: none !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

html body .feature-clock-img,
body .feature-clock-img,
.feature-clock-img {
    width: 150% !important;
    height: 150% !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18)) !important;
}


/* BUNDLE PRODUCT CARDS: ALWAYS CENTERED ACROSS 1 SINGLE LINE (NEVER WRAPS ONTO 2 LINES) */
html body .figma-bundles-grid,
body .figma-bundles-grid,
.figma-bundles-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    padding-bottom: 12px !important;
}

html body .figma-bundle-card,
body .figma-bundle-card,
.figma-bundle-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 0 !important;
    text-align: center !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 430px !important;
    flex: 1 1 0px !important;
    max-width: 250px !important;
    min-width: 160px !important;
    margin: 0 !important;
}


/* SITEWIDE OUT OF STOCK TAG (#EF4444 RED WITH WHITE TEXT) */
html body .stock-badge.out-of-stock,
body .stock-badge.out-of-stock,
.stock-badge.out-of-stock,
html body .badge-out-of-stock,
body .badge-out-of-stock,
.badge-out-of-stock,
html body span.out-of-stock,
body span.out-of-stock {
    background-color: #EF4444 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    display: inline-block !important;
    line-height: 1.2 !important;
}


/* SITEWIDE LOAD MORE BUTTON (FIGMA OUTLINE NAVY BUTTON SPECIFICATION) */
html body .btn-load-more,
html body #loadMoreBtn,
html body .load-more-btn,
body .btn-load-more,
body #loadMoreBtn,
body .load-more-btn,
.btn-load-more,
#loadMoreBtn,
.load-more-btn {
    background-color: #ffffff !important;
    color: #2B3A70 !important;
    border: 1.5px solid #2B3A70 !important;
    border-radius: 12px !important;
    font-family: 'Lexend', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 12px 36px !important;
    height: 48px !important;
    line-height: 22px !important;
    width: 100% !important;
    max-width: 480px !important;
    display: block !important;
    margin: 36px auto 0 auto !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    text-align: center !important;
}

html body .btn-load-more:hover,
html body #loadMoreBtn:hover,
html body .load-more-btn:hover,
body .btn-load-more:hover,
body #loadMoreBtn:hover,
body .load-more-btn:hover,
.btn-load-more:hover,
#loadMoreBtn:hover,
.load-more-btn:hover {
    background-color: #2B3A70 !important;
    color: #ffffff !important;
    border-color: #2B3A70 !important;
}


/* =========================================================
   MOBILE SPECIFIC REFINEMENTS (YELLOW TOP BAR & PRODUCT CARDS)
========================================================= */

/* 1. NON-STICKY YELLOW BAR ON MOBILE */
@media (max-width: 991px) {
    html body .top-bar,
    body .top-bar,
    .top-bar {
        position: relative !important;
        top: 0 !important;
        box-shadow: none !important;
    }

    body.mobile-zoom-modal-open .top-bar,
    body.mobile-zoom-modal-open .sitewide-sticky-header-wrap,
    body.mobile-zoom-modal-open header {
        display: none !important;
    }
}

/* 2. ZOOM ICON FLEX CENTERING */
html body .card-zoom-icon,
html body .thumb-zoom-icon,
body .card-zoom-icon,
body .thumb-zoom-icon,
.card-zoom-icon,
.thumb-zoom-icon {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    background-color: #1C3B47 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    line-height: 1 !important;
    border: none !important;
    z-index: 99 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

html body .card-zoom-icon i,
html body .thumb-zoom-icon i {
    font-size: 16px !important;
    color: #ffffff !important;
    display: block !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* 3. CENTERED BADGES ON DESKTOP */
@media (min-width: 992px) {
    html body.page-shop .card-pills-row,
    html body.page-shop .figma-badges-row,
    html body .figma-catalog-grid .card-pills-row,
    html body .figma-catalog-grid .figma-badges-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 10px auto !important;
        padding: 0 !important;
        gap: 12px !important;
        text-align: center !important;
    }
}

/* 4. STACKED BADGES & BUTTONS ON MOBILE */
@media (max-width: 991px) {
    html body .figma-catalog-grid .card-pills-row,
    html body .figma-catalog-grid .figma-badges-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 6px !important;
        margin: 10px auto !important;
        text-align: center !important;
    }

    html body .figma-catalog-grid .card-actions-row,
    html body .figma-catalog-grid .figma-action-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 12px !important;
    }

    html body .figma-catalog-grid .btn-card-add-basket,
    html body .figma-catalog-grid .btn-figma-add-basket,
    html body .figma-catalog-grid .btn-card-learn-more,
    html body .figma-catalog-grid .btn-figma-learn-more {
        width: 100% !important;
        flex: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 10px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   STRICT MOBILE-ONLY LPC SHOWCASE SECTION OVERRIDES (<= 991px)
========================================================= */

@media (max-width: 991px) {
    /* 1. HIDE DESKTOP POST-IT NOTE ON MOBILE */
    html body .shop-lpc-showcase .desktop-postit-note,
    body .shop-lpc-showcase .desktop-postit-note,
    .shop-lpc-showcase .desktop-postit-note {
        display: none !important;
    }

    /* 2. HEADLINE INLINE SCRIPT WORDS ON MOBILE */
    html body .shop-lpc-showcase .headline-container,
    body .shop-lpc-showcase .headline-container,
    .shop-lpc-showcase .headline-container {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    html body .shop-lpc-showcase .lpc-main-headline,
    body .shop-lpc-showcase .lpc-main-headline,
    .shop-lpc-showcase .lpc-main-headline {
        width: 100% !important;
        display: block !important;
        font-family: 'Lexend', sans-serif !important;
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        text-align: left !important;
        color: #183B47 !important;
        margin: 0 0 14px 0 !important;
    }

    html body .shop-lpc-showcase .lpc-main-headline .hl-learn,
    html body .shop-lpc-showcase .lpc-main-headline .hl-practise,
    html body .shop-lpc-showcase .lpc-main-headline .hl-consolidate,
    body .shop-lpc-showcase .lpc-main-headline .hl-learn,
    body .shop-lpc-showcase .lpc-main-headline .hl-practise,
    body .shop-lpc-showcase .lpc-main-headline .hl-consolidate,
    .shop-lpc-showcase .lpc-main-headline .hl-learn,
    .shop-lpc-showcase .lpc-main-headline .hl-practise,
    .shop-lpc-showcase .lpc-main-headline .hl-consolidate {
        display: inline !important;
        font-family: 'Rock Salt', cursive, sans-serif !important;
        font-size: 18px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 3px !important;
    }

    html body .shop-lpc-showcase .lpc-main-headline .hl-learn,
    .shop-lpc-showcase .lpc-main-headline .hl-learn {
        color: #F59E0B !important;
    }

    html body .shop-lpc-showcase .lpc-main-headline .hl-practise,
    .shop-lpc-showcase .lpc-main-headline .hl-practise {
        color: #00A3AD !important;
    }

    html body .shop-lpc-showcase .lpc-main-headline .hl-consolidate,
    .shop-lpc-showcase .lpc-main-headline .hl-consolidate {
        color: #87246A !important;
    }

    /* 3. UNDERLINE PENCIL GRAPHIC ON MOBILE */
    html body .shop-lpc-showcase .lpc-headline-underline-wrap,
    body .shop-lpc-showcase .lpc-headline-underline-wrap,
    .shop-lpc-showcase .lpc-headline-underline-wrap {
        width: 100% !important;
        margin: 0 0 24px 0 !important;
        line-height: 0 !important;
    }

    html body .shop-lpc-showcase .lpc-headline-underline-img,
    body .shop-lpc-showcase .lpc-headline-underline-img,
    .shop-lpc-showcase .lpc-headline-underline-img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 4. VERTICAL STACKED COLUMN LAYOUT (GRAPHIC TOP, CONTENT BOTTOM) */
    html body .shop-lpc-showcase .lpc-showcase-grid,
    body .shop-lpc-showcase .lpc-showcase-grid,
    .shop-lpc-showcase .lpc-showcase-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
        align-items: center !important;
    }

    html body .shop-lpc-showcase .lpc-graphic-card,
    body .shop-lpc-showcase .lpc-graphic-card,
    .shop-lpc-showcase .lpc-graphic-card {
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto 10px auto !important;
        display: block !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    html body .shop-lpc-showcase .lpc-graphic-img,
    body .shop-lpc-showcase .lpc-graphic-img,
    .shop-lpc-showcase .lpc-graphic-img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 16px !important;
    }

    html body .shop-lpc-showcase .lpc-content-side,
    body .shop-lpc-showcase .lpc-content-side,
    .shop-lpc-showcase .lpc-content-side {
        width: 100% !important;
        display: block !important;
    }

    html body .shop-lpc-showcase .lpc-intro-paragraph,
    body .shop-lpc-showcase .lpc-intro-paragraph,
    .shop-lpc-showcase .lpc-intro-paragraph {
        width: 100% !important;
        font-family: 'Lexend', sans-serif !important;
        font-size: 14.5px !important;
        line-height: 1.6 !important;
        color: #183B47 !important;
        margin-bottom: 24px !important;
    }

    html body .shop-lpc-showcase .lpc-points-list,
    body .shop-lpc-showcase .lpc-points-list,
    .shop-lpc-showcase .lpc-points-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    html body .shop-lpc-showcase .lpc-point-item,
    body .shop-lpc-showcase .lpc-point-item,
    .shop-lpc-showcase .lpc-point-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 14px !important;
        width: 100% !important;
    }

    html body .shop-lpc-showcase .lpc-point-number,
    body .shop-lpc-showcase .lpc-point-number,
    .shop-lpc-showcase .lpc-point-number {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: 'Lexend', sans-serif !important;
        font-weight: 800 !important;
        font-size: 15px !important;
        color: #ffffff !important;
        flex-shrink: 0 !important;
    }

    html body .shop-lpc-showcase .lpc-point-number.num-1 { background-color: #F5B41A !important; }
    html body .shop-lpc-showcase .lpc-point-number.num-2 { background-color: #00A3AD !important; }
    html body .shop-lpc-showcase .lpc-point-number.num-3 { background-color: #87246A !important; }

    html body .shop-lpc-showcase .lpc-point-text,
    body .shop-lpc-showcase .lpc-point-text,
    .shop-lpc-showcase .lpc-point-text {
        font-family: 'Lexend', sans-serif !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #183B47 !important;
    }

    /* 5. CENTERED MOBILE POST-IT WARNING NOTE */
    html body .shop-lpc-showcase .mobile-postit-wrapper,
    body .shop-lpc-showcase .mobile-postit-wrapper,
    .shop-lpc-showcase .mobile-postit-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 32px auto 20px auto !important;
    }

    html body .shop-lpc-showcase .mobile-postit-note,
    body .shop-lpc-showcase .mobile-postit-note,
    .shop-lpc-showcase .mobile-postit-note {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* 6. VIEW WORKBOOKS ANCHOR LINK AT BOTTOM */
    html body .shop-lpc-showcase .view-workbooks-anchor-wrap,
    body .shop-lpc-showcase .view-workbooks-anchor-wrap,
    .shop-lpc-showcase .view-workbooks-anchor-wrap {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 16px !important;
    }

    html body .shop-lpc-showcase .view-workbooks-anchor,
    body .shop-lpc-showcase .view-workbooks-anchor,
    .shop-lpc-showcase .view-workbooks-anchor {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        font-family: 'Lexend', sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #183B47 !important;
        text-decoration: none !important;
    }
}

/* =========================================================
   MOBILE ENGLISH SHOP YELLOW HERO BANNER & MOBILE DECOR GRAPHICS (<= 991px)
========================================================= */

@media (max-width: 991px) {
    /* English shop hero banner yellow background on mobile */
    html body .shop-hero-banner.english-banner,
    body .shop-hero-banner.english-banner,
    .shop-hero-banner.english-banner {
        background-color: #F5B41A !important;
        background: #F5B41A !important;
    }

    /* Hide desktop banner decor graphics on mobile */
    html body .shop-hero-banner .desktop-banner-decor,
    body .shop-hero-banner .desktop-banner-decor,
    .shop-hero-banner .desktop-banner-decor {
        display: none !important;
    }

    /* Display mobile banner decor graphics on mobile */
    html body .shop-hero-banner .mobile-banner-decor,
    body .shop-hero-banner .mobile-banner-decor,
    .shop-hero-banner .mobile-banner-decor {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    html body .shop-hero-banner .mobile-banner-decor.left-decor,
    .shop-hero-banner .mobile-banner-decor.left-decor {
        left: 0 !important;
        height: 75% !important;
        width: auto !important;
    }

    html body .shop-hero-banner .mobile-banner-decor.right-decor,
    .shop-hero-banner .mobile-banner-decor.right-decor {
        right: 0 !important;
        height: 75% !important;
        width: auto !important;
    }
}

@media (min-width: 992px) {
    .shop-hero-banner .mobile-banner-decor {
        display: none !important;
    }
    .shop-hero-banner .desktop-banner-decor {
        display: block !important;
    }
}

/* =========================================================
   STRICT MOBILE SHOP HERO BANNER DIMENSIONS (HEIGHT: 146px, BRANDMARKS: 80px x 72px)
========================================================= */

@media (max-width: 991px) {
    html body .shop-hero-banner,
    html body .shop-hero-banner.english-banner,
    html body .shop-hero-banner.maths-banner,
    body .shop-hero-banner,
    .shop-hero-banner {
        height: 146px !important;
        min-height: 146px !important;
        max-height: 146px !important;
        position: relative !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body .shop-hero-banner .container,
    body .shop-hero-banner .container,
    .shop-hero-banner .container {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 15px !important;
    }

    html body .shop-hero-banner .mobile-banner-decor,
    body .shop-hero-banner .mobile-banner-decor,
    .shop-hero-banner .mobile-banner-decor {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 80px !important;
        width: 72px !important;
        min-height: 80px !important;
        min-width: 72px !important;
        max-height: 80px !important;
        max-width: 72px !important;
        z-index: 1 !important;
        pointer-events: none !important;
        object-fit: contain !important;
    }

    html body .shop-hero-banner .mobile-banner-decor.left-decor,
    .shop-hero-banner .mobile-banner-decor.left-decor {
        left: 0 !important;
    }

    html body .shop-hero-banner .mobile-banner-decor.right-decor,
    .shop-hero-banner .mobile-banner-decor.right-decor {
        right: 0 !important;
    }
}

/* =========================================================
   EXACT MOBILE SHOP BANNER DECOR SVG POSITIONING (MATCHING TARGET SCREENSHOT)
========================================================= */

@media (max-width: 991px) {
    html body .shop-hero-banner,
    html body .shop-hero-banner.english-banner,
    html body .shop-hero-banner.maths-banner,
    body .shop-hero-banner,
    .shop-hero-banner {
        height: 146px !important;
        min-height: 146px !important;
        max-height: 146px !important;
        position: relative !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body .shop-hero-banner .container,
    body .shop-hero-banner .container,
    .shop-hero-banner .container {
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 15px !important;
    }

    /* Left Decor SVG: Anchored to Bottom-Left */
    html body .shop-hero-banner .mobile-banner-decor.left-decor,
    body .shop-hero-banner .mobile-banner-decor.left-decor,
    .shop-hero-banner .mobile-banner-decor.left-decor {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
        height: 100% !important;
        max-height: 146px !important;
        width: auto !important;
        z-index: 2 !important;
        pointer-events: none !important;
        object-fit: contain !important;
        object-position: left bottom !important;
    }

    /* Right Decor SVG: Anchored to Top-Right */
    html body .shop-hero-banner .mobile-banner-decor.right-decor,
    body .shop-hero-banner .mobile-banner-decor.right-decor,
    .shop-hero-banner .mobile-banner-decor.right-decor {
        display: block !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        transform: none !important;
        height: 100% !important;
        max-height: 146px !important;
        width: auto !important;
        z-index: 2 !important;
        pointer-events: none !important;
        object-fit: contain !important;
        object-position: right top !important;
    }
}

/* =========================================================
   LARGER MOBILE SHOP BANNER DECOR SVG GRAPHICS (HEIGHT: 170px)
========================================================= */

@media (max-width: 991px) {
    html body .shop-hero-banner,
    html body .shop-hero-banner.english-banner,
    html body .shop-hero-banner.maths-banner,
    body .shop-hero-banner,
    .shop-hero-banner {
        height: 146px !important;
        min-height: 146px !important;
        max-height: 146px !important;
        position: relative !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Left Decor SVG: Larger 170px height, anchored bottom-left */
    html body .shop-hero-banner .mobile-banner-decor.left-decor,
    body .shop-hero-banner .mobile-banner-decor.left-decor,
    .shop-hero-banner .mobile-banner-decor.left-decor {
        display: block !important;
        position: absolute !important;
        left: -10px !important;
        bottom: -15px !important;
        top: auto !important;
        transform: none !important;
        height: 170px !important;
        max-height: 170px !important;
        width: auto !important;
        z-index: 2 !important;
        pointer-events: none !important;
        object-fit: contain !important;
    }

    /* Right Decor SVG: Larger 170px height, anchored top-right */
    html body .shop-hero-banner .mobile-banner-decor.right-decor,
    body .shop-hero-banner .mobile-banner-decor.right-decor,
    .shop-hero-banner .mobile-banner-decor.right-decor {
        display: block !important;
        position: absolute !important;
        right: -10px !important;
        top: -15px !important;
        bottom: auto !important;
        transform: none !important;
        height: 170px !important;
        max-height: 170px !important;
        width: auto !important;
        z-index: 2 !important;
        pointer-events: none !important;
        object-fit: contain !important;
    }
}

/* =========================================================
   ULTIMATE HIGH-SPECIFICITY ENLARGED MOBILE SHOP DECOR SVGS (HEIGHT: 190px)
========================================================= */

@media (max-width: 991px) {
    html body section.shop-hero-banner,
    html body .shop-hero-banner {
        height: 146px !important;
        min-height: 146px !important;
        max-height: 146px !important;
        position: relative !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body section.shop-hero-banner img.mobile-banner-decor,
    html body section.shop-hero-banner img.shop-banner-decor.mobile-banner-decor,
    html body .shop-hero-banner .mobile-banner-decor,
    body .shop-hero-banner .mobile-banner-decor,
    .mobile-banner-decor {
        display: block !important;
        position: absolute !important;
        z-index: 2 !important;
        pointer-events: none !important;
        object-fit: contain !important;
    }

    /* Left Decor SVG: 190px height, anchored bottom-left */
    html body section.shop-hero-banner img.mobile-banner-decor.left-decor,
    html body section.shop-hero-banner img.shop-banner-decor.left-decor.mobile-banner-decor,
    html body .shop-hero-banner .mobile-banner-decor.left-decor,
    body .shop-hero-banner .mobile-banner-decor.left-decor,
    .mobile-banner-decor.left-decor {
        left: -15px !important;
        bottom: -20px !important;
        top: auto !important;
        transform: none !important;
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
        width: auto !important;
    }

    /* Right Decor SVG: 190px height, anchored top-right */
    html body section.shop-hero-banner img.mobile-banner-decor.right-decor,
    html body section.shop-hero-banner img.shop-banner-decor.right-decor.mobile-banner-decor,
    html body .shop-hero-banner .mobile-banner-decor.right-decor,
    body .shop-hero-banner .mobile-banner-decor.right-decor,
    .mobile-banner-decor.right-decor {
        right: -15px !important;
        top: -20px !important;
        bottom: auto !important;
        transform: none !important;
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
        width: auto !important;
    }
}

/* =========================================================
   SCALED UP MOBILE SHOP DECOR SVG GRAPHICS (TRANSFORM SCALE 1.35)
========================================================= */

@media (max-width: 991px) {
    html body section.shop-hero-banner,
    html body .shop-hero-banner {
        height: 146px !important;
        min-height: 146px !important;
        max-height: 146px !important;
        position: relative !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Left Decor SVG: Scaled 1.35x anchored left bottom */
    html body section.shop-hero-banner img.mobile-banner-decor.left-decor,
    html body section.shop-hero-banner img.shop-banner-decor.left-decor.mobile-banner-decor,
    html body .shop-hero-banner .mobile-banner-decor.left-decor,
    body .shop-hero-banner .mobile-banner-decor.left-decor,
    .mobile-banner-decor.left-decor {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 180px !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        z-index: 2 !important;
        pointer-events: none !important;
        transform: scale(1.35) !important;
        transform-origin: left bottom !important;
    }

    /* Right Decor SVG: Scaled 1.35x anchored right top */
    html body section.shop-hero-banner img.mobile-banner-decor.right-decor,
    html body section.shop-hero-banner img.shop-banner-decor.right-decor.mobile-banner-decor,
    html body .shop-hero-banner .mobile-banner-decor.right-decor,
    body .shop-hero-banner .mobile-banner-decor.right-decor,
    .mobile-banner-decor.right-decor {
        display: block !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        width: 180px !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        z-index: 2 !important;
        pointer-events: none !important;
        transform: scale(1.35) !important;
        transform-origin: right top !important;
    }
}

/* =========================================================
   PERFECTLY BALANCED MOBILE SHOP DECOR SVG GRAPHICS (SCALE 1.15)
========================================================= */

@media (max-width: 991px) {
    html body section.shop-hero-banner,
    html body .shop-hero-banner {
        height: 146px !important;
        min-height: 146px !important;
        max-height: 146px !important;
        position: relative !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Left Decor SVG: Scaled 1.15x anchored left bottom */
    html body section.shop-hero-banner img.mobile-banner-decor.left-decor,
    html body section.shop-hero-banner img.shop-banner-decor.left-decor.mobile-banner-decor,
    html body .shop-hero-banner .mobile-banner-decor.left-decor,
    body .shop-hero-banner .mobile-banner-decor.left-decor,
    .mobile-banner-decor.left-decor {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 170px !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        z-index: 2 !important;
        pointer-events: none !important;
        transform: scale(1.15) !important;
        transform-origin: left bottom !important;
    }

    /* Right Decor SVG: Scaled 1.15x anchored right top */
    html body section.shop-hero-banner img.mobile-banner-decor.right-decor,
    html body section.shop-hero-banner img.shop-banner-decor.right-decor.mobile-banner-decor,
    html body .shop-hero-banner .mobile-banner-decor.right-decor,
    body .shop-hero-banner .mobile-banner-decor.right-decor,
    .mobile-banner-decor.right-decor {
        display: block !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        width: 170px !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        z-index: 2 !important;
        pointer-events: none !important;
        transform: scale(1.15) !important;
        transform-origin: right top !important;
    }
}

/* =========================================================
   STRICT MOBILE POST-IT NOTE PLACEMENT (BELOW BULLETS, ABOVE ANCHOR)
========================================================= */

@media (max-width: 991px) {
    html body .shop-lpc-showcase .headline-container .desktop-postit-note,
    html body .shop-lpc-showcase .headline-container .english-postit,
    html body .shop-lpc-showcase .headline-container .maths-postit,
    html body .shop-lpc-showcase .headline-container .figma-postit-img,
    body .shop-lpc-showcase .headline-container .figma-postit-img,
    .headline-container .figma-postit-img {
        display: none !important;
    }

    html body .shop-lpc-showcase .mobile-postit-wrapper,
    body .shop-lpc-showcase .mobile-postit-wrapper,
    .shop-lpc-showcase .mobile-postit-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 32px auto 24px auto !important;
        clear: both !important;
    }

    html body .shop-lpc-showcase .mobile-postit-note,
    body .shop-lpc-showcase .mobile-postit-note,
    .shop-lpc-showcase .mobile-postit-note {
        display: block !important;
        width: 100% !important;
        max-width: 260px !important;
        height: auto !important;
        margin: 0 !important;
    }

    html body .shop-lpc-showcase .view-workbooks-anchor-wrap,
    body .shop-lpc-showcase .view-workbooks-anchor-wrap,
    .shop-lpc-showcase .view-workbooks-anchor-wrap {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 20px auto 10px auto !important;
        clear: both !important;
    }
}

@media (min-width: 992px) {
    .shop-lpc-showcase .mobile-postit-wrapper {
        display: none !important;
    }
}

/* =========================================================
   STRICT MOBILE ZOOM BUTTON FIX (EXACT DESKTOP 34px CIRCLE STYLE)
========================================================= */

@media (max-width: 991px) {
    html body a.card-zoom-icon,
    html body a.thumb-zoom-icon,
    html body .card-zoom-icon,
    html body .thumb-zoom-icon,
    html body .figma-thumb-wrapper .thumb-zoom-icon,
    html body .card-image-wrap .card-zoom-icon,
    body .card-zoom-icon,
    body .thumb-zoom-icon,
    .card-zoom-icon,
    .thumb-zoom-icon {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        border-radius: 50% !important;
        background-color: #1C3B47 !important;
        color: #ffffff !important;
        border: none !important;
        outline: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        z-index: 15 !important;
        text-decoration: none !important;
        transform: none !important;
        flex: none !important;
    }

    html body a.card-zoom-icon:hover,
    html body a.thumb-zoom-icon:hover,
    html body .card-zoom-icon:hover,
    html body .thumb-zoom-icon:hover {
        background-color: #87246A !important;
        transform: scale(1.08) !important;
    }

    html body a.card-zoom-icon i,
    html body a.thumb-zoom-icon i,
    html body .card-zoom-icon i,
    html body .thumb-zoom-icon i,
    body .card-zoom-icon i,
    body .thumb-zoom-icon i,
    .card-zoom-icon i,
    .thumb-zoom-icon i {
        font-size: 13px !important;
        color: #ffffff !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
        width: auto !important;
        height: auto !important;
    }
}

/* =========================================================
   PURE FLEXBOX CENTERING FOR ZOOM BUTTON & MAGNIFYING ICON
========================================================= */

html body a.card-zoom-icon,
html body a.thumb-zoom-icon,
html body .card-zoom-icon,
html body .thumb-zoom-icon,
body .card-zoom-icon,
body .thumb-zoom-icon,
.card-zoom-icon,
.thumb-zoom-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

html body a.card-zoom-icon i,
html body a.thumb-zoom-icon i,
html body .card-zoom-icon i,
html body .thumb-zoom-icon i,
body .card-zoom-icon i,
body .thumb-zoom-icon i,
.card-zoom-icon i,
.thumb-zoom-icon i {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
    font-size: 13px !important;
    color: #ffffff !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* =========================================================
   SMALLER POPUP MODAL COVER IMAGE ON MOBILE (MAX-WIDTH: 165px)
========================================================= */

@media (max-width: 991px) {
    html body .quickview-modal-overlay .qv-cover-side,
    html body #quickViewModal .qv-cover-side,
    body .qv-cover-side,
    .qv-cover-side {
        width: 100% !important;
        max-width: 165px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    html body .quickview-modal-overlay .qv-cover-side img,
    html body #quickViewModal .qv-cover-side img,
    body .qv-cover-side img,
    .qv-cover-side img {
        width: 100% !important;
        height: auto !important;
        max-height: 180px !important;
        object-fit: contain !important;
        margin: 0 !important;
    }
}

/* =========================================================
   STRICT MOBILE PRODUCT CARD TITLE STYLE (#315567, 20px, 600 WEIGHT)
========================================================= */

@media (max-width: 991px) {
    html body .shop-item-title,
    html body .shop-item-title a,
    html body .card-title,
    html body .card-title a,
    html body .figma-product-title,
    html body .figma-product-title a,
    html body .figma-product-card h3,
    html body .figma-product-card h3 a,
    body .shop-item-title,
    body .shop-item-title a,
    body .card-title,
    body .card-title a,
    body .figma-product-title,
    body .figma-product-title a,
    .shop-item-title,
    .shop-item-title a,
    .card-title,
    .card-title a,
    .figma-product-title,
    .figma-product-title a {
        color: #315567 !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }
}

/* =========================================================
   MOBILE TESTIMONIALS COMMA_BG.SVG BADGE & AUTO-SCROLL SLIDER
========================================================= */

@media (max-width: 991px) {
    html body .mobile-testimonials-section,
    body .mobile-testimonials-section,
    .mobile-testimonials-section {
        display: block !important;
        padding: 40px 0 30px 0 !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    html body .mobile-testimonial-card-slider,
    body .mobile-testimonial-card-slider,
    .mobile-testimonial-card-slider {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding: 10px 4px 20px 4px !important;
        margin: 24px 0 16px 0 !important;
        scrollbar-width: none !important;
    }

    .mobile-testimonial-card-slider::-webkit-scrollbar {
        display: none !important;
    }

    html body .testimonial-single-card,
    body .testimonial-single-card,
    .testimonial-single-card {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: center !important;
        background-color: #199EB3 !important;
        border-radius: 16px !important;
        padding: 32px 24px 36px 24px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        min-height: 420px !important;
        position: relative !important;
    }

    html body .testi-quote-badge,
    body .testi-quote-badge,
    .testi-quote-badge {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        background-color: #157F8D !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 24px !important;
        flex-shrink: 0 !important;
    }

    html body .testi-quote-comma-img,
    body .testi-quote-comma-img,
    .testi-quote-comma-img {
        width: 28px !important;
        height: 28px !important;
        filter: brightness(0) invert(1) !important;
        object-fit: contain !important;
    }

    html body .testi-card-quote,
    body .testi-card-quote,
    .testi-card-quote {
        color: #ffffff !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        margin: 0 0 24px 0 !important;
        text-align: left !important;
        font-family: inherit !important;
    }

    html body .testi-card-author,
    body .testi-card-author,
    .testi-card-author {
        color: #0E5E69 !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-top: 10px !important;
        text-align: left !important;
    }

    html body .mobile-testimonials-dots,
    body .mobile-testimonials-dots,
    .mobile-testimonials-dots {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }

    html body .mobile-testimonials-dots .dot,
    body .mobile-testimonials-dots .dot,
    .mobile-testimonials-dots .dot {
        width: 12px !important;
        height: 12px !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.35) !important;
        display: inline-block !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    html body .mobile-testimonials-dots .dot.active,
    body .mobile-testimonials-dots .dot.active,
    .mobile-testimonials-dots .dot.active {
        background-color: #ffffff !important;
        transform: scale(1.15) !important;
    }
}

/* =========================================================
   LOCK MOBILE TESTIMONIAL CARD AT 300px FIXED MAX-WIDTH
========================================================= */

@media (max-width: 991px) {
    html body div.testimonial-single-card,
    html body .mobile-testimonial-card-slider .testimonial-single-card,
    html body .testimonial-single-card,
    body .testimonial-single-card,
    .testimonial-single-card {
        flex: 0 0 300px !important;
        width: 300px !important;
        max-width: 300px !important;
        min-width: 300px !important;
        margin: 0 !important;
        scroll-snap-align: center !important;
        background-color: #199EB3 !important;
        border-radius: 16px !important;
        padding: 28px 20px 32px 20px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        min-height: 380px !important;
        position: relative !important;
    }
}

/* =========================================================
   STRICT MOBILE FEATURE CARDS TYPOGRAPHY (HEADINGS: 25px, PASSAGE: 16px)
========================================================= */

@media (max-width: 991px) {
    html body .figma-feature-card h2,
    html body .figma-feature-card .feature-card-content h2,
    html body .card-teal-feature h2,
    html body .card-purple-diagnostic h2,
    body .figma-feature-card h2,
    .figma-feature-card h2 {
        font-size: 25px !important;
        line-height: 1.3 !important;
    }

    html body .figma-feature-card p,
    html body .figma-feature-card .feature-card-content p,
    html body .card-teal-feature p,
    html body .card-purple-diagnostic p,
    body .figma-feature-card p,
    .figma-feature-card p {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
}

/* =========================================================
   DEFINITIVE 580px DESKTOP CUTOFF CLOCK & MOBILE MOCKUP SHIFT DOWN
========================================================= */

/* DESKTOP VIEW (>= 992px): 580px Clock Cut Off inside Purple Card */
@media (min-width: 992px) {
    html body .card-purple-diagnostic,
    html body .figma-feature-card.card-purple-diagnostic,
    body .card-purple-diagnostic,
    .card-purple-diagnostic {
        position: relative !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    html body .card-purple-diagnostic .feature-card-clock-wrap,
    html body .feature-card-clock-wrap,
    body .card-purple-diagnostic .feature-card-clock-wrap,
    body .feature-card-clock-wrap,
    .card-purple-diagnostic .feature-card-clock-wrap,
    .feature-card-clock-wrap {
        position: absolute !important;
        bottom: -180px !important;
        right: -120px !important;
        width: 580px !important;
        height: 580px !important;
        min-width: 580px !important;
        min-height: 580px !important;
        max-width: none !important;
        max-height: none !important;
        pointer-events: none !important;
        z-index: 2 !important;
        margin: 0 !important;
        top: auto !important;
        left: auto !important;
    }

    html body .card-purple-diagnostic .feature-clock-img,
    html body .feature-card-clock-wrap .feature-clock-img,
    body .card-purple-diagnostic .feature-clock-img,
    body .feature-clock-img,
    .card-purple-diagnostic .feature-clock-img,
    .feature-clock-img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        display: block !important;
        filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18)) !important;
        transform: none !important;
    }

    html body .card-teal-feature .feature-card-graphic-wrap,
    body .card-teal-feature .feature-card-graphic-wrap,
    .card-teal-feature .feature-card-graphic-wrap {
        margin-top: 0 !important;
        top: auto !important;
        position: static !important;
        width: auto !important;
    }

    html body .card-teal-feature .feature-mockup-img,
    body .card-teal-feature .feature-mockup-img,
    .card-teal-feature .feature-mockup-img {
        transform: none !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* MOBILE VIEW (<= 991px): Mobile Scoped Overrides */
@media (max-width: 991px) {
    /* 1. Teal Feature Card: Push Paper Mockup Significantly Down */
    html body .card-teal-feature,
    body .card-teal-feature,
    .card-teal-feature {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        position: relative !important;
        padding-bottom: 40px !important;
    }

    html body .card-teal-feature .feature-card-content p,
    body .card-teal-feature .feature-card-content p,
    .card-teal-feature .feature-card-content p {
        margin-bottom: 30px !important;
    }

    html body .card-teal-feature .feature-card-graphic-wrap,
    body .card-teal-feature .feature-card-graphic-wrap,
    .card-teal-feature .feature-card-graphic-wrap {
        margin-top: 50px !important;
        position: relative !important;
        top: 30px !important;
        width: 100% !important;
        text-align: center !important;
        clear: both !important;
    }

    html body .card-teal-feature .feature-mockup-img,
    body .card-teal-feature .feature-mockup-img,
    .card-teal-feature .feature-mockup-img {
        transform: translateY(30px) !important;
        max-width: 95% !important;
        height: auto !important;
        margin: 0 !important;
        display: block !important;
    }

    /* 2. Purple Diagnostic Card: Clock Image on Mobile */
    html body .card-purple-diagnostic,
    body .card-purple-diagnostic,
    .card-purple-diagnostic {
        position: relative !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    html body .card-purple-diagnostic .feature-card-clock-wrap,
    body .card-purple-diagnostic .feature-card-clock-wrap,
    .card-purple-diagnostic .feature-card-clock-wrap {
        width: 155px !important;
        max-width: 155px !important;
        height: auto !important;
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        display: block !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    html body .card-purple-diagnostic .feature-clock-img,
    html body .feature-card-clock-wrap .feature-clock-img,
    body .card-purple-diagnostic .feature-clock-img,
    .card-purple-diagnostic .feature-clock-img {
        width: 155px !important;
        max-width: 155px !important;
        height: auto !important;
        max-height: 155px !important;
        object-fit: contain !important;
        display: block !important;
        transform: none !important;
    }
}

/* =========================================================
   CLEAN CRITICAL INLINE OVERRIDES FOR SHOP PAGES
========================================================= */

/* 1. DESKTOP VIEW (>= 992px): 580px Clock Cut Off & NO Duplicate Post-It */
@media (min-width: 992px) {
    html body .mobile-postit-wrapper,
    body .mobile-postit-wrapper,
    .mobile-postit-wrapper {
        display: none !important;
    }

    html body .card-purple-diagnostic,
    html body .figma-feature-card.card-purple-diagnostic,
    body .card-purple-diagnostic,
    .card-purple-diagnostic {
        position: relative !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    html body .card-purple-diagnostic .feature-card-clock-wrap,
    html body .feature-card-clock-wrap,
    body .card-purple-diagnostic .feature-card-clock-wrap,
    body .feature-card-clock-wrap,
    .card-purple-diagnostic .feature-card-clock-wrap,
    .feature-card-clock-wrap {
        position: absolute !important;
        bottom: -180px !important;
        right: -120px !important;
        width: 580px !important;
        height: 580px !important;
        min-width: 580px !important;
        min-height: 580px !important;
        max-width: none !important;
        max-height: none !important;
        pointer-events: none !important;
        z-index: 2 !important;
        margin: 0 !important;
        top: auto !important;
        left: auto !important;
    }

    html body .card-purple-diagnostic .feature-clock-img,
    html body .feature-card-clock-wrap .feature-clock-img,
    body .card-purple-diagnostic .feature-clock-img,
    body .feature-clock-img,
    .card-purple-diagnostic .feature-clock-img,
    .feature-clock-img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        display: block !important;
        filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18)) !important;
        transform: none !important;
    }

    html body .card-teal-feature .feature-card-graphic-wrap,
    body .card-teal-feature .feature-card-graphic-wrap,
    .card-teal-feature .feature-card-graphic-wrap {
        margin-top: 0 !important;
        top: auto !important;
        position: static !important;
        width: auto !important;
    }

    html body .card-teal-feature .feature-mockup-img,
    body .card-teal-feature .feature-mockup-img,
    .card-teal-feature .feature-mockup-img {
        transform: none !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* 2. MOBILE VIEW (<= 991px): Clean Mobile Layout, Post-It Display, & Stock Tag Side-by-Side */
@media (max-width: 991px) {
    html body .mobile-postit-wrapper,
    body .mobile-postit-wrapper,
    .mobile-postit-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 20px auto !important;
        width: 100% !important;
    }

    /* Mobile Testimonials Card 300px Fixed */
    html body div.testimonial-single-card,
    html body .mobile-testimonial-card-slider .testimonial-single-card,
    html body .testimonial-single-card,
    body .testimonial-single-card,
    .testimonial-single-card {
        flex: 0 0 300px !important;
        width: 300px !important;
        max-width: 300px !important;
        min-width: 300px !important;
        margin: 0 !important;
        scroll-snap-align: center !important;
        background-color: #199EB3 !important;
        border-radius: 16px !important;
        padding: 28px 20px 32px 20px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        min-height: 380px !important;
        position: relative !important;
    }

    /* Mobile Feature Cards Typography */
    html body .figma-feature-card h2,
    html body .figma-feature-card .feature-card-content h2,
    html body .card-teal-feature h2,
    html body .card-purple-diagnostic h2,
    body .figma-feature-card h2,
    .figma-feature-card h2 {
        font-size: 25px !important;
        line-height: 1.3 !important;
    }

    html body .figma-feature-card p,
    html body .figma-feature-card .feature-card-content p,
    html body .card-teal-feature p,
    html body .card-purple-diagnostic p,
    body .figma-feature-card p,
    .figma-feature-card p {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* Teal Feature Card: Paper Mockup Shifted Slightly Up */
    html body .figma-feature-card.card-teal-feature,
    html body .card-teal-feature,
    body .card-teal-feature,
    .card-teal-feature {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        position: relative !important;
        padding-bottom: 15px !important;
    }

    html body .card-teal-feature .feature-card-content p,
    body .card-teal-feature .feature-card-content p,
    .card-teal-feature .feature-card-content p {
        margin-bottom: 12px !important;
    }

    html body .card-teal-feature .feature-card-graphic-wrap,
    body .card-teal-feature .feature-card-graphic-wrap,
    .card-teal-feature .feature-card-graphic-wrap {
        margin-top: 5px !important;
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        text-align: center !important;
        clear: both !important;
        display: block !important;
    }

    html body .card-teal-feature .feature-mockup-img,
    body .card-teal-feature .feature-mockup-img,
    .card-teal-feature .feature-mockup-img {
        transform: translateY(-8px) !important;
        max-width: 90% !important;
        height: auto !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Purple Diagnostic Card: Clock Image Shifted Even Further Down & Right (-55px, -55px) */
    html body .card-purple-diagnostic,
    body .card-purple-diagnostic,
    .card-purple-diagnostic {
        position: relative !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    html body .card-purple-diagnostic .feature-card-clock-wrap,
    body .card-purple-diagnostic .feature-card-clock-wrap,
    .card-purple-diagnostic .feature-card-clock-wrap {
        width: 170px !important;
        max-width: 170px !important;
        height: 170px !important;
        position: absolute !important;
        right: -55px !important;
        bottom: -55px !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        display: block !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    html body .card-purple-diagnostic .feature-clock-img,
    html body .feature-card-clock-wrap .feature-clock-img,
    body .card-purple-diagnostic .feature-clock-img,
    .card-purple-diagnostic .feature-clock-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
        transform: none !important;
    }

    /* Pencil under Bundles Title: Narrower to fit mobile screen width */
    html body .bundles-pencil-line-wrap,
    body .bundles-pencil-line-wrap,
    .bundles-pencil-line-wrap {
        width: 100% !important;
        max-width: 280px !important;
        margin: 4px auto 0 auto !important;
        display: block !important;
        text-align: center !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
    }

    html body .bundles-pencil-img,
    body .bundles-pencil-img,
    .bundles-pencil-img {
        width: 100% !important;
        max-width: 260px !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    /* Bundle & Product Cards Mobile: Stock Tag RIGHT NEXT to Review Stars (Side-by-Side Center) */
    html body .figma-badges-row,
    html body .card-pills-row,
    html body .bundle-badges-row,
    html body .card-badges-row,
    body .figma-badges-row,
    body .card-pills-row,
    body .bundle-badges-row,
    body .card-badges-row,
    .figma-badges-row,
    .card-pills-row,
    .bundle-badges-row,
    .card-badges-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 4px 0 6px 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    html body .rating-stars,
    html body .shop-item-stars,
    html body .bundle-badges-row .rating-stars,
    html body .card-badges-row .rating-stars,
    body .rating-stars,
    .rating-stars {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    html body .stock-badge,
    html body .badge-stock,
    html body .stock-tag,
    html body .figma-badges-row .stock-badge,
    html body .card-pills-row .stock-badge,
    html body .bundle-badges-row .stock-badge,
    body .stock-badge,
    body .badge-stock,
    body .stock-tag,
    .stock-badge,
    .badge-stock,
    .stock-tag {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        float: none !important;
        position: static !important;
    }
}

/* =========================================================
   CENTERED & SIDE-BY-SIDE STOCK TAG & STARS (DESKTOP ONLY)
========================================================= */
@media (min-width: 768px) {
    html body .bundle-badges-row,
    html body .card-badges-row,
    html body .card-pills-row,
    html body .figma-badges-row,
    body .bundle-badges-row,
    body .card-badges-row,
    body .card-pills-row,
    body .figma-badges-row,
    .bundle-badges-row,
    .card-badges-row,
    .card-pills-row,
    .figma-badges-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 6px 0 10px 0 !important;
    }

    html body .rating-stars,
    html body .shop-item-stars,
    html body .bundle-badges-row .rating-stars,
    html body .card-badges-row .rating-stars,
    body .rating-stars,
    .rating-stars {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    html body .stock-badge,
    html body .badge-stock,
    html body .stock-tag,
    html body .bundle-badges-row .stock-badge,
    html body .card-badges-row .stock-badge,
    body .stock-badge,
    body .badge-stock,
    body .stock-tag,
    .stock-badge,
    .badge-stock,
    .stock-tag {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2px 10px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        position: static !important;
    }

    html body div.bundle-badges-row,
    html body div.card-badges-row,
    html body .bundle-badges-row,
    html body .card-badges-row,
    body .bundle-badges-row,
    body .card-badges-row,
    .bundle-badges-row,
    .card-badges-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 8px 0 !important;
    }

    html body div.bundle-badges-row span.rating-stars,
    html body div.bundle-badges-row span.shop-item-stars,
    html body .rating-stars,
    html body .shop-item-stars,
    body .rating-stars,
    .rating-stars {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        margin-right: 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    html body div.bundle-badges-row span.stock-badge,
    html body .stock-badge,
    html body .badge-stock,
    html body .stock-tag,
    body .stock-badge,
    body .badge-stock,
    body .stock-tag,
    .stock-badge,
    .badge-stock,
    .stock-tag {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        position: static !important;
        flex-shrink: 0 !important;
    }
}

/* =========================================================
   SIDEBAR SEARCH BOX MAGNIFYING GLASS INSIDE INPUT FIELD
========================================================= */

html body .sidebar-search-box,
body .sidebar-search-box,
.sidebar-search-box {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 24px !important;
}

html body .sidebar-search-box i.fa-search,
html body .sidebar-search-box i.fas,
body .sidebar-search-box i,
.sidebar-search-box i {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #64748B !important;
    font-size: 14px !important;
    pointer-events: none !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: 1 !important;
}

html body .sidebar-search-box input[type="text"],
body .sidebar-search-box input,
.sidebar-search-box input {
    width: 100% !important;
    padding: 10px 14px 10px 38px !important;
    border: 1px solid #94A3B8 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    color: #1E293B !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* =========================================================
   HOMEPAGE TESTIMONIAL CARDS SVG QUOTE BADGE STYLING
========================================================= */

html body .quote-badge-top,
body .quote-badge-top,
.quote-badge-top {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html body .quote-badge-top img,
html body .quote-badge-top .quote-badge-svg,
body .quote-badge-top img,
.quote-badge-top img,
.quote-badge-svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}

/* =========================================================
   HOMEPAGE TOP HERO CAROUSEL SLIDER STYLING
========================================================= */

html body .hero-section,
body .hero-section,
.hero-section {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
}

html body .hero-slider-container,
body .hero-slider-container,
.hero-slider-container {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
}

html body .hero-slides-wrapper,
body .hero-slides-wrapper,
.hero-slides-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

html body .hero-slide,
body .hero-slide,
.hero-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body .hero-slider-nav,
body .hero-slider-nav,
.hero-slider-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 20px !important;
    width: 100% !important;
}

html body .hero-dots-pagination,
body .hero-dots-pagination,
.hero-dots-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 10 !important;
}

html body .hero-dot,
body .hero-dot,
.hero-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.45) !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
    display: inline-block !important;
}

html body .hero-dot.active,
body .hero-dot.active,
.hero-dot.active {
    background-color: #ffffff !important;
    transform: scale(1.25) !important;
}

/* =========================================================
   RESPONSIVE DISCOVER WHAT'S INSIDE NAV BUTTONS (MOBILE ONLY)
========================================================= */

@media (min-width: 992px) {
    html body .shop-nav-btn,
    body .shop-nav-btn,
    .shop-nav-btn {
        display: none !important;
    }
}

@media (max-width: 991px) {
    html body .shop-nav-btn,
    body .shop-nav-btn,
    .shop-nav-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background-color: #ffffff !important;
        border: 1px solid #E2E8F0 !important;
        color: #1E293B !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10) !important;
        z-index: 10 !important;
        cursor: pointer !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    html body .shop-nav-btn.shop-prev,
    body .shop-nav-btn.shop-prev,
    .shop-nav-btn.shop-prev {
        left: -10px !important;
    }

    html body .shop-nav-btn.shop-next,
    body .shop-nav-btn.shop-next,
    .shop-nav-btn.shop-next {
        right: -10px !important;
    }
}

/* =========================================================
   REMOVE NAV BUTTONS FROM DESKTOP VIEW IN DISCOVER SECTION
========================================================= */

@media (min-width: 992px) {
    html body .shop-nav-btn,
    html body .shop-carousel-wrapper .shop-nav-btn,
    body .shop-nav-btn,
    .shop-nav-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* =========================================================
   ENLARGE HOVER ZONE FOR DISCOVER WHAT'S INSIDE POPUP WINDOW
========================================================= */

html body .hover-preview-popover.figma-mini-quickview,
body .hover-preview-popover.figma-mini-quickview,
.hover-preview-popover.figma-mini-quickview {
    bottom: calc(100% + 8px) !important;
    overflow: visible !important;
}

/* 35px Tall & 420px Wide Invisible Mouse Hover Bridge Below Popover */
html body .hover-preview-popover.figma-mini-quickview::before,
body .hover-preview-popover.figma-mini-quickview::before,
.hover-preview-popover.figma-mini-quickview::before {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: -20px !important;
    right: -20px !important;
    height: 35px !important;
    background: transparent !important;
    pointer-events: auto !important;
    display: block !important;
    z-index: 999 !important;
}

/* Larger Triangular Pointer Tip */
html body .hover-preview-popover.figma-mini-quickview::after,
body .hover-preview-popover.figma-mini-quickview::after,
.hover-preview-popover.figma-mini-quickview::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-width: 12px 12px 0 12px !important;
    border-style: solid !important;
    border-color: #ffffff transparent transparent transparent !important;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.1)) !important;
    pointer-events: auto !important;
}

/* Keep Popover 100% Open when Cursor is on Card or Popover or Hover Bridge */
html body .shop-item-card:hover .hover-preview-popover.figma-mini-quickview,
html body .hover-preview-popover.figma-mini-quickview:hover,
body .shop-item-card:hover .hover-preview-popover.figma-mini-quickview,
body .hover-preview-popover.figma-mini-quickview:hover,
.shop-item-card:hover .hover-preview-popover.figma-mini-quickview,
.hover-preview-popover.figma-mini-quickview:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* =========================================================
   CURSOR POINTER & CLICK NAVIGATION FOR DISCOVER PREVIEW POPUP
========================================================= */

html body .hover-preview-popover.figma-mini-quickview,
body .hover-preview-popover.figma-mini-quickview,
.hover-preview-popover.figma-mini-quickview {
    cursor: pointer !important;
}

html body .mini-qv-title,
body .mini-qv-title,
.mini-qv-title {
    cursor: pointer !important;
}

/* =========================================================
   RESPONSIVE STICKY HEADER BARS (DESKTOP: BOTH / MOBILE: PURPLE ONLY)
========================================================= */

/* DESKTOP VIEW (>= 992px): Yellow Bar (top:0) + Purple Header (top:36px) BOTH STICKY */
@media (min-width: 992px) {
    html body .top-bar,
    body .top-bar,
    .top-bar {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0 !important;
        z-index: 100000 !important;
        width: 100% !important;
    }

    html body .sitewide-sticky-header-wrap,
    html body .main-header,
    body .sitewide-sticky-header-wrap,
    body .main-header,
    .sitewide-sticky-header-wrap,
    .main-header {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 36px !important;
        z-index: 99999 !important;
        width: 100% !important;
        background-color: #87246A !important;
    }
}

/* MOBILE VIEW (<= 991px): Yellow Bar Non-Sticky, Purple Header STICKY AT TOP: 0 */
@media (max-width: 991px) {
    html body .top-bar,
    body .top-bar,
    .top-bar {
        position: relative !important;
        top: auto !important;
        z-index: 1 !important;
        width: 100% !important;
    }

    html body .sitewide-sticky-header-wrap,
    html body .main-header,
    body .sitewide-sticky-header-wrap,
    body .main-header,
    .sitewide-sticky-header-wrap,
    .main-header {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0 !important;
        z-index: 999999 !important;
        width: 100% !important;
        background-color: #87246A !important;
    }
}

/* =========================================================
   MASTER CRITICAL OVERRIDES: HERO CAROUSEL, NAV BUTTONS, STICKY HEADERS
========================================================= */

/* A. HERO CAROUSEL 60FPS SMOOTH SLIDER */
html body .hero-section,
body .hero-section,
.hero-section {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
}

html body .hero-slider-container,
body .hero-slider-container,
.hero-slider-container {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
}

html body .hero-slides-wrapper,
body .hero-slides-wrapper,
.hero-slides-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

html body .hero-slide,
body .hero-slide,
.hero-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body .hero-slider-nav,
body .hero-slider-nav,
.hero-slider-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 20px !important;
    width: 100% !important;
}

html body .hero-dots-pagination,
body .hero-dots-pagination,
.hero-dots-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 10 !important;
}

html body .hero-dot,
body .hero-dot,
.hero-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.45) !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
    display: inline-block !important;
}

html body .hero-dot.active,
body .hero-dot.active,
.hero-dot.active {
    background-color: #ffffff !important;
    transform: scale(1.25) !important;
}

/* B. DISCOVER SECTION NAV BUTTONS (DESKTOP: HIDDEN / MOBILE: VISIBLE) */
@media (min-width: 992px) {
    html body .discover-shops-wrapper .shop-nav-btn,
    html body .shop-carousel-wrapper .shop-nav-btn,
    html body .shop-column-card .shop-nav-btn,
    html body .shop-nav-btn,
    body .shop-nav-btn,
    .shop-nav-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 991px) {
    html body .discover-shops-wrapper .shop-nav-btn,
    html body .shop-carousel-wrapper .shop-nav-btn,
    html body .shop-column-card .shop-nav-btn,
    html body .shop-nav-btn,
    body .shop-nav-btn,
    .shop-nav-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background-color: #ffffff !important;
        border: 1px solid #E2E8F0 !important;
        color: #1E293B !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10) !important;
        z-index: 10 !important;
        cursor: pointer !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    html body .shop-nav-btn.shop-prev,
    body .shop-nav-btn.shop-prev,
    .shop-nav-btn.shop-prev {
        left: -10px !important;
    }

    html body .shop-nav-btn.shop-next,
    body .shop-nav-btn.shop-next,
    .shop-nav-btn.shop-next {
        right: -10px !important;
    }
}

/* C. STICKY HEADERS (DESKTOP: BOTH STICKY / MOBILE: PURPLE ONLY STICKY) */
@media (min-width: 992px) {
    html body .top-bar,
    body .top-bar,
    .top-bar {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100000 !important;
        width: 100% !important;
    }

    html body .sitewide-sticky-header-wrap,
    html body header.main-header,
    html body .main-header,
    body .sitewide-sticky-header-wrap,
    body header.main-header,
    body .main-header,
    .sitewide-sticky-header-wrap,
    header.main-header,
    .main-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 36px !important;
        z-index: 99999 !important;
        width: 100% !important;
        background-color: #87246A !important;
    }
}

@media (max-width: 991px) {
    html, body {
        overflow-x: hidden !important;
    }

    html body .top-bar,
    body .top-bar,
    .top-bar {
        position: relative !important;
        top: auto !important;
        z-index: 1 !important;
        width: 100% !important;
    }

    html body .sitewide-sticky-header-wrap,
    body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap {
    background-color: transparent !important;
}

    html body header.main-header,
    html body .main-header,
    body header.main-header,
    body .main-header,
    header.main-header,
    .main-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 999999 !important;
        background-color: #87246A !important;
    }
}


/* =========================================================
   SINGLE PRODUCT PAGE: PRICE, ADD TO BASKET & WISHLIST CONTROLS
========================================================= */

html body .page-single-product .price-action-box,
html body .single-product .price-action-box,
html body .price-action-box,
body .price-action-box,
.price-action-box {
    border-top: 1px solid #CBD5E1 !important;
    padding-top: 22px !important;
    margin-top: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
}

html body .price-action-box .price-label-tag,
body .price-action-box .price-label-tag,
.price-label-tag {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    margin-bottom: 2px !important;
}

html body .price-action-box .price-label-tag .from-text,
html body .price-action-box .price-label-tag span,
.price-label-tag span {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    margin: 0 !important;
}

html body .price-action-box .price-label-tag .price-amount,
html body .price-action-box .price-label-tag .woocommerce-Price-amount,
html body .price-action-box .price-label-tag p.price,
html body .price-action-box .price-label-tag ins,
html body .price-action-box .price-label-tag bdi,
.price-label-tag bdi {
    font-family: var(--font-heading), 'Lexend', 'Fredoka', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #145C6C !important;
    text-decoration: none !important;
    background: none !important;
}

html body .price-action-box .action-buttons-group,
html body .price-action-box form.cart,
html body form.cart.single-product-cart-form,
body form.cart,
form.cart {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

html body form.cart .quantity,
html body .price-action-box .quantity,
body .quantity,
.quantity {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body form.cart .quantity input.qty,
html body .price-action-box input.qty,
html body input.figma-single-qty,
input.qty {
    width: 64px !important;
    height: 46px !important;
    background-color: #F4F8FA !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-align: center !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
}

html body form.cart button.single_add_to_cart_button,
html body .price-action-box .single_add_to_cart_button,
html body .btn-figma-basket-main,
.single_add_to_cart_button,
.btn-figma-basket-main {
    background-color: #87246A !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    height: 46px !important;
    padding: 0 24px !important;
    font-family: var(--font-heading), 'Lexend', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}

html body form.cart button.single_add_to_cart_button:hover,
html body .btn-figma-basket-main:hover {
    background-color: #6F1C56 !important;
    color: #FFFFFF !important;
}

html body form.cart .btn-figma-wishlist,
html body .price-action-box .btn-figma-wishlist,
html body .btn-figma-wishlist,
.btn-figma-wishlist {
    background-color: #E58EC7 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    height: 46px !important;
    padding: 0 22px !important;
    font-family: var(--font-heading), 'Lexend', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}

html body form.cart .btn-figma-wishlist:hover,
html body .btn-figma-wishlist:hover {
    background-color: #D975B8 !important;
    color: #FFFFFF !important;
}

html body form.cart .btn-figma-wishlist i,
html body .btn-figma-wishlist i {
    color: #FFFFFF !important;
    font-size: 14px !important;
}


/* HIDE STOCK QUANTITY / STOCK TEXT ON PRODUCT PAGES */
html body .stock,
html body p.stock,
html body .product-meta-table td.meta-label:contains('Stock'),
body .stock,
.stock {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   SINGLE PRODUCT PAGE: TABS NAVIGATION & CONTENT PANELS
========================================================= */

html body .product-tabs-section,
body .product-tabs-section,
.product-tabs-section {
    background: #FFFFFF !important;
    padding: 40px 0 60px 0 !important;
    border-top: 1px solid #E2E8F0 !important;
}

html body .product-tabs-nav,
body .product-tabs-nav,
.product-tabs-nav {
    display: flex !important;
    gap: 10px !important;
    border-bottom: 2px solid #CBD5E1 !important;
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
    flex-wrap: wrap !important;
}

html body .product-tabs-nav .tab-btn,
body .product-tabs-nav .tab-btn,
.product-tabs-nav .tab-btn {
    background: #FFFFFF !important;
    color: #475569 !important;
    border: 1px solid #CBD5E1 !important;
    border-bottom: none !important;
    padding: 10px 20px !important;
    font-family: var(--font-heading), 'Lexend', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

html body .product-tabs-nav .tab-btn.active,
html body .product-tabs-nav .tab-btn:hover,
body .product-tabs-nav .tab-btn.active,
.product-tabs-nav .tab-btn.active {
    background: #1C3B47 !important;
    color: #FFFFFF !important;
    border-color: #1C3B47 !important;
}

html body .product-tabs-nav .tab-btn.tab-btn-reviews,
body .product-tabs-nav .tab-btn.tab-btn-reviews,
.tab-btn.tab-btn-reviews {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

@media (max-width: 991px) {
    html body .format-pillars-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

@media (max-width: 600px) {
    html body .format-pillars-grid,
    html body #tab-curriculum > div,
    html body #tab-resources > div {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   FIX: STRETCH PRODUCT TABS CONTENT 100% FULL WIDTH
========================================================= */

html body .page-single-product .tab-panel-content,
html body .tab-panel-content,
body .tab-panel-content,
.tab-panel-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body .page-single-product .tab-pane,
html body .tab-pane,
body .tab-pane,
.tab-pane {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body .format-pillars-grid,
.format-pillars-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html body .format-pillars-grid .pillar-col,
.pillar-col {
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    html body .format-pillars-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

@media (max-width: 600px) {
    html body .format-pillars-grid,
    html body #tab-curriculum > div,
    html body #tab-resources > div {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================================
   PURE IN-PLACE FADE TRANSITION FOR TESTIMONIAL SLIDERS
========================================================= */
html body .desktop-shop-testimonials-section .shop-testi-set-slide,
html body .mobile-testimonials-section .testimonial-card-item,
body .desktop-shop-testimonials-section .shop-testi-set-slide,
body .mobile-testimonials-section .testimonial-card-item,
.desktop-shop-testimonials-section .shop-testi-set-slide,
.mobile-testimonials-section .testimonial-card-item {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out !important;
}

html body .desktop-shop-testimonials-section .shop-testi-set-slide.active,
html body .mobile-testimonials-section .testimonial-card-item.active,
body .desktop-shop-testimonials-section .shop-testi-set-slide.active,
body .mobile-testimonials-section .testimonial-card-item.active,
.desktop-shop-testimonials-section .shop-testi-set-slide.active,
.mobile-testimonials-section .testimonial-card-item.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}
/* =========================================================
   TESTIMONIAL CARDS TOP ALIGNMENT (TEXT IMMEDIATELY BELOW COMMA)
========================================================= */
html body .desktop-shop-testimonials-section .testi-card-figma,
body .desktop-shop-testimonials-section .testi-card-figma,
.desktop-shop-testimonials-section .testi-card-figma {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

html body .desktop-shop-testimonials-section .testi-card-figma .quote-item,
body .desktop-shop-testimonials-section .testi-card-figma .quote-item,
.desktop-shop-testimonials-section .testi-card-figma .quote-item {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    margin-top: 8px !important;
}

html body .desktop-shop-testimonials-section .testi-card-figma .quote-text,
body .desktop-shop-testimonials-section .testi-card-figma .quote-text,
.desktop-shop-testimonials-section .testi-card-figma .quote-text {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

html body .desktop-shop-testimonials-section .testi-card-figma .quote-author,
body .desktop-shop-testimonials-section .testi-card-figma .quote-author,
.desktop-shop-testimonials-section .testi-card-figma .quote-author {
    margin-top: 10px !important;
}
/* =========================================================
   TESTIMONIAL CARDS AUTHOR POSITION (JUST UNDER QUOTE TEXT)
========================================================= */
html body .desktop-shop-testimonials-section .testi-card-figma .quote-text,
html body .mobile-testimonials-section .quote-text,
body .desktop-shop-testimonials-section .testi-card-figma .quote-text,
body .mobile-testimonials-section .quote-text,
.desktop-shop-testimonials-section .testi-card-figma .quote-text,
.mobile-testimonials-section .quote-text,
.quote-text {
    margin-bottom: 8px !important;
}

html body .desktop-shop-testimonials-section .testi-card-figma .quote-author,
html body .mobile-testimonials-section .quote-author,
html body .card-teal .quote-author,
html body .card-purple .quote-author,
html body .card-yellow .quote-author,
body .desktop-shop-testimonials-section .testi-card-figma .quote-author,
body .mobile-testimonials-section .quote-author,
body .card-teal .quote-author,
body .card-purple .quote-author,
body .card-yellow .quote-author,
.desktop-shop-testimonials-section .testi-card-figma .quote-author,
.mobile-testimonials-section .quote-author,
.card-teal .quote-author,
.card-purple .quote-author,
.card-yellow .quote-author,
.quote-author {
    margin-top: 10px !important;
    display: block !important;
}
/* =========================================================
   THUMBNAIL IMAGE TOUCHES BOTH SIDES OF CARD (0PX GAP)
========================================================= */
html body .shop-item-card,
body .shop-item-card,
.shop-item-card {
    padding: 0 0 16px 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

html body .shop-item-card .shop-item-cover-wrap,
body .shop-item-card .shop-item-cover-wrap,
.shop-item-card .shop-item-cover-wrap {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

html body .shop-item-card .shop-item-cover-wrap img,
body .shop-item-card .shop-item-cover-wrap img,
.shop-item-card .shop-item-cover-wrap img {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
}
/* =========================================================
   BUNDLES SECTION PERFECT PAGE CENTERING OVERRIDE
========================================================= */
html body .free-delivery-bundles-wrap,
html body .figma-bundles-section,
body .free-delivery-bundles-wrap,
body .figma-bundles-section,
.free-delivery-bundles-wrap,
.figma-bundles-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
}

html body .figma-bundles-grid,
body .figma-bundles-grid,
.figma-bundles-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 !important;
}

html body .figma-bundle-card,
body .figma-bundle-card,
.figma-bundle-card {
    flex: 0 0 240px !important;
    max-width: 240px !important;
    width: 240px !important;
    margin: 0 !important;
}
/* =========================================================
   DESKTOP PRODUCT CARDS: EXTRA SPACING BETWEEN THUMBNAIL & TITLE
========================================================= */
@media (min-width: 992px) {
    html body .figma-catalog-grid .card-image-wrap,
    html body .figma-catalog-grid .figma-thumb-wrapper,
    html body .catalog-card-item .card-image-wrap,
    html body .figma-product-card .card-image-wrap,
    html body .figma-product-card .figma-thumb-wrapper,
    body .figma-catalog-grid .card-image-wrap,
    body .figma-catalog-grid .figma-thumb-wrapper,
    .figma-catalog-grid .card-image-wrap,
    .figma-catalog-grid .figma-thumb-wrapper,
    .card-image-wrap,
    .figma-thumb-wrapper {
        margin-bottom: 20px !important;
    }

    html body .figma-catalog-grid .card-content-wrap,
    html body .figma-product-card .card-content-wrap,
    body .figma-catalog-grid .card-content-wrap,
    .figma-catalog-grid .card-content-wrap,
    .card-content-wrap {
        padding-top: 6px !important;
    }

    html body .figma-catalog-grid .card-title,
    html body .figma-catalog-grid .figma-product-title,
    html body .figma-product-card .card-title,
    html body .figma-product-card .figma-product-title,
    body .figma-catalog-grid .card-title,
    body .figma-catalog-grid .figma-product-title,
    .figma-catalog-grid .card-title,
    .figma-catalog-grid .figma-product-title,
    .card-title,
    .figma-product-title {
        margin-top: 6px !important;
        margin-bottom: 12px !important;
    }
}
/* =========================================================
   OUT OF STOCK BADGES FORCE RED BACKGROUND & TEXT
========================================================= */
html body .stock-badge.out-of-stock,
html body .badge-stock.out-of-stock,
html body .stock-tag.out-of-stock,
html body .badge-out-of-stock,
html body span.out-of-stock,
html body .out-of-stock,
body .stock-badge.out-of-stock,
body .badge-stock.out-of-stock,
body .stock-tag.out-of-stock,
body .badge-out-of-stock,
body span.out-of-stock,
body .out-of-stock,
.stock-badge.out-of-stock,
.badge-stock.out-of-stock,
.stock-tag.out-of-stock,
.badge-out-of-stock,
span.out-of-stock,
.out-of-stock {
    background-color: #FEE2E2 !important;
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    border: 1px solid #DC2626 !important;
}
/* =========================================================
   DYNAMICALLY & FLEXIBLY CENTERED BUNDLE CARDS (ANY NUMBER OF CARDS)
========================================================= */
html body .figma-bundles-grid,
body .figma-bundles-grid,
.figma-bundles-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
}

html body .figma-bundle-card,
body .figma-bundle-card,
.figma-bundle-card {
    flex: 1 1 0px !important;
    max-width: 250px !important;
    min-width: 160px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
/* =========================================================
   YOU MAY ALSO LIKE SECTION: PERFECT DYNAMIC CENTERING
========================================================= */
html body .you-may-also-like-wrap,
body .you-may-also-like-wrap,
.you-may-also-like-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body .you-may-also-like-grid,
html body .you-may-also-like-wrap .figma-shop-grid,
body .you-may-also-like-grid,
body .you-may-also-like-wrap .figma-shop-grid,
.you-may-also-like-grid,
.you-may-also-like-wrap .figma-shop-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 18px !important;
    width: auto !important;
    max-width: 1160px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* cleaned */
body .you-may-also-like-wrap .shop-item-card,
.you-may-also-like-wrap .shop-item-card {
    flex: 0 0 210px !important;
    max-width: 210px !important;
    width: 210px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
/* =========================================================
   SINGLE PRODUCT PAGE MOBILE LAYOUT (2-COLUMN CARDS MATCHING MAIN SHOP)
========================================================= */
@media (max-width: 767px) {
    html body .you-may-also-like-grid,
    html body .you-may-also-like-wrap .figma-shop-grid,
    html body .figma-bundles-grid,
    body .you-may-also-like-grid,
    body .you-may-also-like-wrap .figma-shop-grid,
    body .figma-bundles-grid,
    .you-may-also-like-grid,
    .you-may-also-like-wrap .figma-shop-grid,
    .figma-bundles-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }

    /* cleaned */
    html body .figma-bundles-grid .figma-bundle-card,
    body .you-may-also-like-wrap .shop-item-card,
    body .figma-bundles-grid .figma-bundle-card,
    .you-may-also-like-wrap .shop-item-card,
    .figma-bundles-grid .figma-bundle-card {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        min-width: 140px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }

    html body .you-may-also-like-wrap .shop-item-card .shop-item-cover-wrap,
    body .you-may-also-like-wrap .shop-item-card .shop-item-cover-wrap {
        border-radius: 10px !important;
        aspect-ratio: 1 / 1.3 !important;
        margin-bottom: 6px !important;
    }

    html body .figma-bundles-grid .bundle-thumb-box,
    body .figma-bundles-grid .bundle-thumb-box {
        border-radius: 10px !important;
        aspect-ratio: 1 / 0.95 !important;
        padding: 10px 6px !important;
        margin-bottom: 6px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    html body .you-may-also-like-wrap .shop-item-card h4,
    html body .figma-bundles-grid .figma-bundle-card h4,
    body .you-may-also-like-wrap .shop-item-card h4,
    body .figma-bundles-grid .figma-bundle-card h4 {
        font-size: 16px !important;
        line-height: 1.25 !important;
        margin: 2px 0 4px 0 !important;
    }

    html body .you-may-also-like-wrap .shop-item-card .card-price-row,
    html body .you-may-also-like-wrap .shop-item-card .retail-price-label,
    html body .figma-bundles-grid .figma-bundle-card .retail-price-label,
    body .you-may-also-like-wrap .shop-item-card .card-price-row,
    body .figma-bundles-grid .figma-bundle-card .retail-price-label {
        font-size: 11.5px !important;
        margin: 2px 0 6px 0 !important;
    }

    html body .you-may-also-like-wrap .shop-item-card .btn-shop-add-basket,
    html body .you-may-also-like-wrap .shop-item-card a,
    html body .figma-bundles-grid .figma-bundle-card button,
    html body .figma-bundles-grid .figma-bundle-card a,
    body .you-may-also-like-wrap .shop-item-card .btn-shop-add-basket,
    body .figma-bundles-grid .figma-bundle-card button {
        font-size: 9.5px !important;
        padding: 6px 2px !important;
        border-radius: 6px !important;
    }
}
/* =========================================================
   SINGLE PRODUCT PAGE MOBILE HERO SECTION (EXACT MOCKUP SCREENSHOT 1)
========================================================= */
@media (max-width: 767px) {
    html body .product-main-card,
    body .product-main-card,
    .product-main-card {
        background: #F4F9FC !important;
        border: 2px solid #00A3AD !important;
        border-radius: 16px !important;
        padding: 16px !important;
        margin-bottom: 30px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    }

    html body .product-grid-layout,
    body .product-grid-layout,
    .product-grid-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    html body .vertical-thumbs-col,
    body .vertical-thumbs-col,
    .vertical-thumbs-col {
        display: none !important;
    }

    html body .main-cover-box,
    body .main-cover-box,
    .main-cover-box {
        position: relative !important;
        width: 100% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid #CBD5E1 !important;
        aspect-ratio: 1 / 1.32 !important;
        margin-bottom: 12px !important;
    }

    html body .main-cover-box img,
    body .main-cover-box img,
    .main-cover-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    html body .main-cover-box .cover-nav-arrow,
    body .main-cover-box .cover-nav-arrow,
    .main-cover-box .cover-nav-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #183B47 !important;
        color: #ffffff !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        cursor: pointer !important;
        z-index: 10 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
    }

    html body .main-cover-box .cover-nav-arrow.nav-prev,
    body .main-cover-box .cover-nav-arrow.nav-prev {
        left: 10px !important;
    }

    html body .main-cover-box .cover-nav-arrow.nav-next,
    body .main-cover-box .cover-nav-arrow.nav-next {
        right: 10px !important;
    }

    html body #singleProductTitle,
    body #singleProductTitle,
    #singleProductTitle {
        font-family: var(--font-heading), 'Lexend', sans-serif !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #183B47 !important;
        text-align: left !important;
        line-height: 1.3 !important;
        margin: 8px 0 6px 0 !important;
    }

    html body .product-rating-row,
    body .product-rating-row,
    .product-rating-row {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 14px !important;
    }

    html body .product-rating-row .stars,
    body .product-rating-row .stars {
        color: #F59E0B !important;
        font-size: 15px !important;
    }

    html body .product-rating-row .review-count,
    body .product-rating-row .review-count {
        color: #145C6C !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
    }

    html body .figma-content-box,
    body .figma-content-box,
    .figma-content-box {
        background: #EEF6FA !important;
        border: 1.5px solid #CBD5E1 !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        margin: 14px 0 18px 0 !important;
    }

    html body .figma-content-box h5,
    body .figma-content-box h5 {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #183B47 !important;
        margin: 0 0 6px 0 !important;
    }

    html body .figma-content-box ul,
    body .figma-content-box ul {
        margin: 0 !important;
        padding-left: 18px !important;
    }

    html body .figma-content-box li,
    body .figma-content-box li {
        font-size: 13px !important;
        color: #334155 !important;
        line-height: 1.5 !important;
        margin-bottom: 4px !important;
    }

    html body .product-meta-table,
    body .product-meta-table,
    .product-meta-table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 16px !important;
    }

    html body .product-meta-table td,
    body .product-meta-table td {
        padding: 5px 0 !important;
        font-size: 13.5px !important;
    }

    html body .product-meta-table .meta-label,
    body .product-meta-table .meta-label {
        font-weight: 800 !important;
        color: #183B47 !important;
        width: 130px !important;
    }

    html body .product-meta-table .meta-value,
    body .product-meta-table .meta-value {
        font-weight: 500 !important;
        color: #334155 !important;
    }

    html body .price-action-box,
    body .price-action-box,
    .price-action-box {
        border-top: 1.5px solid #CBD5E1 !important;
        padding-top: 16px !important;
        margin-top: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    html body .price-label-tag,
    body .price-label-tag,
    .price-label-tag {
        font-family: var(--font-heading), 'Lexend', sans-serif !important;
        font-size: 26px !important;
        font-weight: 800 !important;
        color: #00A3AD !important;
        display: flex !important;
        align-items: baseline !important;
        gap: 8px !important;
    }

    html body .price-label-tag span,
    body .price-label-tag span {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #334155 !important;
    }

    html body .single-product-actions-mobile-row,
    body .single-product-actions-mobile-row,
    .single-product-actions-mobile-row {
        display: flex !important;
        gap: 10px !important;
        width: 100% !important;
    }

    html body .single-product-actions-mobile-row .btn-add-basket-mobile,
    body .single-product-actions-mobile-row .btn-add-basket-mobile {
        flex: 1 !important;
        background: #87246A !important;
        color: #ffffff !important;
        border: none !important;
        padding: 12px 6px !important;
        border-radius: 10px !important;
        font-family: var(--font-heading), 'Lexend', sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        text-align: center !important;
    }

    html body .single-product-actions-mobile-row .btn-wishlist-mobile,
    body .single-product-actions-mobile-row .btn-wishlist-mobile {
        flex: 1 !important;
        background: #F0A1D9 !important;
        color: #ffffff !important;
        border: none !important;
        padding: 12px 6px !important;
        border-radius: 10px !important;
        font-family: var(--font-heading), 'Lexend', sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        text-align: center !important;
    }
}
/* =========================================================
   SINGLE PRODUCT PAGE MOBILE COVER IMAGE FULL FIT (OBJECT-FIT COVER)
========================================================= */
@media (max-width: 767px) {
    html body .main-cover-box,
    body .main-cover-box,
    .main-cover-box {
        position: relative !important;
        width: 100% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid #CBD5E1 !important;
        aspect-ratio: 1 / 1.35 !important;
        margin-bottom: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html body .main-cover-box img,
    body .main-cover-box img,
    .main-cover-box img,
    html body #mainCoverImage,
    body #mainCoverImage,
    #mainCoverImage {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 12px !important;
    }
}
/* =========================================================
   SINGLE PRODUCT PAGE DESKTOP VS MOBILE ACTION BUTTONS VISIBILITY
========================================================= */
@media (min-width: 768px) {
    html body .desktop-only-actions,
    body .desktop-only-actions,
    .desktop-only-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 14px !important;
    }

    html body .mobile-only-actions-wrap,
    body .mobile-only-actions-wrap,
    .mobile-only-actions-wrap {
        display: none !important;
    }
}

@media (max-width: 767px) {
    html body .desktop-only-actions,
    body .desktop-only-actions,
    .desktop-only-actions {
        display: none !important;
    }

    html body .mobile-only-actions-wrap,
    body .mobile-only-actions-wrap,
    .mobile-only-actions-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }
}
/* =========================================================
   UNIFIED SINGLE PRODUCT ACTION BUTTONS (NO DUPLICATE SETS)
========================================================= */
html body .price-action-box .action-buttons-group,
html body .price-action-box .desktop-only-actions,
body .price-action-box .action-buttons-group,
body .price-action-box .desktop-only-actions,
.price-action-box .action-buttons-group,
.price-action-box .desktop-only-actions {
    display: none !important;
}

html body .single-product-actions-row,
body .single-product-actions-row,
.single-product-actions-row {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
}
/* =========================================================
   CART DRAWER PRODUCT IMAGE & PRICE STYLING REFINEMENTS
========================================================= */
html body .drawer-items-table td .drawer-item-img-wrap,
html body .drawer-items-table td div,
body .drawer-items-table td .drawer-item-img-wrap,
body .drawer-items-table td div,
.drawer-items-table td .drawer-item-img-wrap,
.drawer-items-table td div {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* PRESERVE ORIGINAL TRANSLUCENT BOX WHILE ENSURING QUANTITY TEXT IS CRISP WHITE */
html body input.drawer-qty-input,
body input.drawer-qty-input,
.drawer-qty-input,
#drawerItemsBody input.drawer-qty-input {
    width: 44px !important;
    height: 30px !important;
    line-height: 30px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    font-family: var(--font-heading), 'Lexend', sans-serif !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide webkit inner spin buttons to prevent number clipping inside translucent box */
html body input.drawer-qty-input::-webkit-outer-spin-button,
html body input.drawer-qty-input::-webkit-inner-spin-button,
.drawer-qty-input::-webkit-outer-spin-button,
.drawer-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

html body .drawer-items-table td:nth-child(3),
body .drawer-items-table td:nth-child(3),
.drawer-items-table td:nth-child(3),
html body .drawer-item-price,
body .drawer-item-price,
.drawer-item-price {
    color: #ffffff !important;
    font-weight: 800 !important;
}
/* =========================================================
   DESKTOP SHOP & SINGLE PRODUCT HERO LEFT GRAPHIC DOWNWARD SHIFT
========================================================= */
@media (min-width: 768px) {
    html body .shop-hero-banner,
    body .shop-hero-banner,
    .shop-hero-banner {
        overflow: visible !important;
    }

    html body .shop-hero-banner .shop-banner-decor.left-decor,
    html body .shop-banner-decor.left-decor,
    html body .maths-banner .left-decor,
    html body .english-banner .left-decor,
    html body picture.left-decor,
    html body picture.left-decor img,
    body .shop-hero-banner .shop-banner-decor.left-decor,
    .shop-hero-banner .shop-banner-decor.left-decor {
        position: absolute !important;
        bottom: 0px !important;
        top: auto !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        object-position: left bottom !important;
        vertical-align: bottom !important;
        z-index: 5 !important;
    }
}
/* =========================================================
   STRICT RESPONSIVE DESKTOP & MOBILE HERO BANNER GRAPHICS
========================================================= */

/* 1. DESKTOP VIEW (@media (min-width: 768px)) */
@media (min-width: 768px) {
    html body .shop-hero-banner,
    body .shop-hero-banner,
    .shop-hero-banner {
        position: relative !important;
        overflow: hidden !important;
    }

    /* SHOW ONLY DESKTOP GRAPHICS ON DESKTOP */
    html body .desktop-banner-decor,
    body .desktop-banner-decor,
    .desktop-banner-decor {
        display: block !important;
    }

    /* STRICTLY HIDE ALL MOBILE GRAPHICS ON DESKTOP */
    html body .mobile-banner-decor,
    body .mobile-banner-decor,
    .mobile-banner-decor,
    html body .mobile-decor-wrap,
    body .mobile-decor-wrap,
    .mobile-decor-wrap {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* DESKTOP LEFT GRAPHIC MOVED FURTHER UP */
    html body .shop-hero-banner .shop-banner-decor.left-decor.desktop-banner-decor,
    html body .shop-banner-decor.left-decor.desktop-banner-decor,
    html body .maths-banner .left-decor.desktop-banner-decor,
    html body .english-banner .left-decor.desktop-banner-decor,
    html body.single-product .shop-hero-banner .left-decor.desktop-banner-decor,
    html body .page-single-product .shop-hero-banner .left-decor.desktop-banner-decor,
    body .shop-hero-banner .shop-banner-decor.left-decor.desktop-banner-decor,
    .shop-hero-banner .shop-banner-decor.left-decor.desktop-banner-decor,
    html body .shop-hero-banner .shop-banner-decor.left-decor,
    body .shop-hero-banner .shop-banner-decor.left-decor {
        position: absolute !important;
        left: 0 !important;
        top: -45px !important;
        bottom: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-15px) !important;
        object-position: left top !important;
        vertical-align: top !important;
        z-index: 5 !important;
    }
}

/* 2. MOBILE VIEW (@media (max-width: 767px)) */
@media (max-width: 767px) {
    /* STRICTLY HIDE ALL DESKTOP GRAPHICS ON MOBILE */
    html body .desktop-banner-decor,
    body .desktop-banner-decor,
    .desktop-banner-decor {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* SHOW ONLY MOBILE SPECIFIC GRAPHICS ON MOBILE */
    html body .mobile-banner-decor,
    body .mobile-banner-decor,
    .mobile-banner-decor {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* MOBILE LEFT GRAPHIC SHIFTED FURTHER DOWN (-55px) */
    html body .mobile-banner-decor.left-decor,
    body .mobile-banner-decor.left-decor,
    .mobile-banner-decor.left-decor,
    html body .shop-banner-decor.left-decor.mobile-banner-decor,
    body .shop-banner-decor.left-decor.mobile-banner-decor {
        position: absolute !important;
        left: 0 !important;
        bottom: -55px !important;
        top: auto !important;
        width: 100px !important;
        height: auto !important;
        max-width: 100px !important;
        max-height: none !important;
        z-index: 5 !important;
        pointer-events: none !important;
        transform: translateY(55px) !important;
        transform-origin: left bottom !important;
    }

    /* MOBILE RIGHT GRAPHIC MUCH SMALLER (55px) & FITTED IN BANNER */
    html body .mobile-banner-decor.right-decor,
    body .mobile-banner-decor.right-decor,
    .mobile-banner-decor.right-decor,
    html body .shop-banner-decor.right-decor.mobile-banner-decor,
    body .shop-banner-decor.right-decor.mobile-banner-decor {
        position: absolute !important;
        right: 6px !important;
        top: 6px !important;
        bottom: auto !important;
        width: 55px !important;
        max-width: 55px !important;
        height: auto !important;
        max-height: 55px !important;
        object-fit: contain !important;
        z-index: 5 !important;
        pointer-events: none !important;
        transform: none !important;
    }
}
/* =========================================================
   YOU MAY ALSO LIKE SECTION: PERFECT 2X2 MOBILE GRID
========================================================= */

/* Desktop view (>= 768px) */
@media (min-width: 768px) {
    /* cleaned */
    body .you-may-also-like-wrap .shop-item-card,
    .you-may-also-like-wrap .shop-item-card {
        flex: 0 0 210px !important;
        max-width: 210px !important;
        width: 210px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Mobile view (< 767px) - Strict 2x2 Grid */
@media (max-width: 767px) {
    html body .you-may-also-like-grid,
    html body .you-may-also-like-wrap .figma-shop-grid,
    body .you-may-also-like-grid,
    body .you-may-also-like-wrap .figma-shop-grid,
    .you-may-also-like-grid,
    .you-may-also-like-wrap .figma-shop-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 12px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    html body .you-may-also-like-grid .shop-item-card,
    /* cleaned */
    body .you-may-also-like-grid .shop-item-card,
    body .you-may-also-like-wrap .shop-item-card,
    .you-may-also-like-grid .shop-item-card,
    .you-may-also-like-wrap .shop-item-card {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 6px 12px 6px !important;
        border-radius: 12px !important;
    }

    html body .you-may-also-like-grid .shop-item-card h4,
    body .you-may-also-like-grid .shop-item-card h4 {
        font-size: 12.5px !important;
        line-height: 1.25 !important;
        margin: 2px 0 4px 0 !important;
    }

    html body .you-may-also-like-grid .shop-item-card .shop-item-details,
    body .you-may-also-like-grid .shop-item-card .shop-item-details {
        padding: 0 2px !important;
    }

    html body .you-may-also-like-grid .shop-item-card button,
    html body .you-may-also-like-grid .shop-item-card a,
    body .you-may-also-like-grid .shop-item-card button,
    body .you-may-also-like-grid .shop-item-card a {
        font-size: 9.5px !important;
        padding: 7px 1px !important;
    }
}
/* =========================================================
   ULTRA-HIGH SPECIFICITY YOU MAY ALSO LIKE 2X2 MOBILE GRID
========================================================= */

@media (max-width: 767px) {
    html body.single-product .you-may-also-like-wrap .figma-shop-grid,
    html body.single-product .you-may-also-like-grid,
    html body .single-product-bottom-sections .you-may-also-like-grid,
    html body .you-may-also-like-wrap .figma-shop-grid,
    html body .you-may-also-like-grid,
    body .you-may-also-like-grid,
    .you-may-also-like-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 12px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    html body.single-product .you-may-also-like-wrap .shop-item-card,
    html body.single-product .you-may-also-like-grid .shop-item-card,
    html body.single-product .single-product-bottom-sections .shop-item-card,
    html body .single-product-bottom-sections .you-may-also-like-wrap .shop-item-card,
    /* cleaned */
    html body .you-may-also-like-grid .shop-item-card,
    body .you-may-also-like-grid .shop-item-card,
    .you-may-also-like-grid .shop-item-card {
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        min-width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 6px 12px 6px !important;
        border-radius: 12px !important;
    }

    html body.single-product .you-may-also-like-wrap .shop-item-card h4,
    html body .you-may-also-like-grid .shop-item-card h4,
    body .you-may-also-like-grid .shop-item-card h4 {
        font-size: 12.5px !important;
        line-height: 1.25 !important;
        margin: 2px 0 4px 0 !important;
    }

    html body.single-product .you-may-also-like-wrap .shop-item-card .shop-item-details,
    html body .you-may-also-like-grid .shop-item-card .shop-item-details,
    body .you-may-also-like-grid .shop-item-card .shop-item-details {
        padding: 0 2px !important;
    }

    html body.single-product .you-may-also-like-wrap .shop-item-card button,
    html body.single-product .you-may-also-like-wrap .shop-item-card a,
    html body .you-may-also-like-grid .shop-item-card button,
    html body .you-may-also-like-grid .shop-item-card a,
    body .you-may-also-like-grid .shop-item-card button,
    body .you-may-also-like-grid .shop-item-card a {
        font-size: 9.5px !important;
        padding: 7px 1px !important;
    }
}
/* =========================================================
   YOU MAY ALSO LIKE: DEFINITIVE 2X2 MOBILE GRID (CSS GRID)
========================================================= */

/* Desktop view (>= 768px) */
@media (min-width: 768px) {
    html body .you-may-also-like-grid-container,
    html body.single-product .you-may-also-like-grid-container,
    body .you-may-also-like-grid-container,
    .you-may-also-like-grid-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: 1160px !important;
        margin: 0 auto !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card,
    html body .you-may-also-like-grid-container .shop-item-card,
    body .you-may-also-like-grid-container .you-may-like-card,
    .you-may-also-like-grid-container .you-may-like-card {
        flex: 0 0 210px !important;
        width: 210px !important;
        max-width: 210px !important;
        min-width: 210px !important;
    }
}

/* Mobile view (< 767px): STRICT 2X2 GRID REPEAT(2, 1FR) */
@media (max-width: 767px) {
    html body .you-may-also-like-grid-container,
    html body.single-product .you-may-also-like-grid-container,
    html body .you-may-also-like-wrap .you-may-also-like-grid-container,
    body .you-may-also-like-grid-container,
    .you-may-also-like-grid-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card,
    html body .you-may-also-like-grid-container .shop-item-card,
    html body.single-product .you-may-also-like-grid-container .shop-item-card,
    html body .you-may-also-like-wrap .you-may-like-card,
    body .you-may-also-like-grid-container .you-may-like-card,
    .you-may-also-like-grid-container .you-may-like-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 6px 12px 6px !important;
        border-radius: 12px !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card h4,
    body .you-may-also-like-grid-container .you-may-like-card h4 {
        font-size: 16px !important;
        line-height: 1.25 !important;
        margin: 2px 0 4px 0 !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card .shop-item-details,
    body .you-may-also-like-grid-container .you-may-like-card .shop-item-details {
        padding: 0 2px !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card button,
    html body .you-may-also-like-grid-container .you-may-like-card a,
    body .you-may-also-like-grid-container .you-may-like-card button,
    body .you-may-also-like-grid-container .you-may-like-card a {
        font-size: 9px !important;
        padding: 6px 1px !important;
        letter-spacing: 0 !important;
    }
}
/* =========================================================
   YOU MAY ALSO LIKE: CLEAN RESPONSIVE DESKTOP & MOBILE GRID
========================================================= */

/* Desktop view (>= 768px) */
@media (min-width: 768px) {
    html body .you-may-also-like-grid-container,
    html body .you-may-also-like-grid,
    body .you-may-also-like-grid-container,
    .you-may-also-like-grid-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: 1160px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card,
    html body .you-may-also-like-grid-container .shop-item-card,
    body .you-may-also-like-grid-container .you-may-like-card,
    .you-may-also-like-grid-container .you-may-like-card {
        flex: 0 0 210px !important;
        width: 210px !important;
        max-width: 210px !important;
        min-width: 210px !important;
        margin: 0 !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        border: 1px solid #e2e8f0 !important;
        padding: 0 0 16px 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        position: relative !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
        overflow: hidden !important;
    }
}

/* Mobile view (< 767px): PERFECT 2X2 GRID (2 CARDS PER ROW) */
@media (max-width: 767px) {
    html body .you-may-also-like-grid-container,
    html body.single-product .you-may-also-like-grid-container,
    html body .you-may-also-like-wrap .you-may-also-like-grid-container,
    body .you-may-also-like-grid-container,
    .you-may-also-like-grid-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card,
    html body .you-may-also-like-grid-container .shop-item-card,
    html body.single-product .you-may-also-like-grid-container .shop-item-card,
    html body .you-may-also-like-wrap .you-may-like-card,
    body .you-may-also-like-grid-container .you-may-like-card,
    .you-may-also-like-grid-container .you-may-like-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 6px 12px 6px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
        overflow: hidden !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card h4,
    body .you-may-also-like-grid-container .you-may-like-card h4 {
        font-size: 16px !important;
        line-height: 1.25 !important;
        margin: 2px 0 4px 0 !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card .shop-item-details,
    body .you-may-also-like-grid-container .you-may-like-card .shop-item-details {
        padding: 0 2px !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card button,
    html body .you-may-also-like-grid-container .you-may-like-card a,
    body .you-may-also-like-grid-container .you-may-like-card button,
    body .you-may-also-like-grid-container .you-may-like-card a {
        font-size: 9px !important;
        padding: 6px 1px !important;
        letter-spacing: 0 !important;
    }
}
/* =========================================================
   FIGMA EXACT DESIGN: YOU MAY ALSO LIKE SECTION & 2X2 GRID
========================================================= */

html body .you-may-also-like-wrap,
body .you-may-also-like-wrap,
.you-may-also-like-wrap {
    margin-bottom: 70px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body .you-may-like-title,
body .you-may-like-title,
.you-may-like-title {
    font-family: 'Rock Salt', cursive, sans-serif !important;
    font-size: 34px !important;
    color: #183B47 !important;
    text-align: center !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: 1.2px !important;
}

html body .you-may-like-pencil-wrap,
body .you-may-like-pencil-wrap,
.you-may-like-pencil-wrap {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 28px !important;
    width: 100% !important;
}

html body .you-may-like-pencil,
body .you-may-like-pencil,
.you-may-like-pencil {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    display: block !important;
    margin: 8px auto 0 auto !important;
}

/* DESKTOP VIEW (>= 768px) */
@media (min-width: 768px) {
    html body .you-may-also-like-grid-container,
    body .you-may-also-like-grid-container,
    .you-may-also-like-grid-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 1140px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    html body .you-may-like-card,
    body .you-may-like-card,
    .you-may-like-card {
        flex: 0 0 calc(25% - 15px) !important;
        max-width: calc(25% - 15px) !important;
        width: calc(25% - 15px) !important;
        background: #ffffff !important;
        border-radius: 14px !important;
        border: 1px solid #E2E8F0 !important;
        padding: 0 0 16px 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

/* MOBILE VIEW (< 767px): STRICT 2X2 GRID REPEAT(2, 1FR) */
@media (max-width: 767px) {
    html body .you-may-like-title,
    body .you-may-like-title {
        font-size: 26px !important;
    }

    html body .you-may-also-like-grid-container,
    body .you-may-also-like-grid-container,
    .you-may-also-like-grid-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
    }

    html body .you-may-like-card,
    body .you-may-like-card,
    .you-may-like-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 0 0 12px 0 !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
        overflow: hidden !important;
    }
}

/* INNER CARD ELEMENTS (MATCHING FIGMA MOCKUP EXACTLY) */
html body .you-may-like-cover-wrap,
body .you-may-like-cover-wrap,
.you-may-like-cover-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1.32 !important;
    overflow: hidden !important;
    background: #F8FAFC !important;
    margin-bottom: 10px !important;
}

html body .you-may-like-cover-img,
body .you-may-like-cover-img,
.you-may-like-cover-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

html body .you-may-like-zoom-btn,
body .you-may-like-zoom-btn,
.you-may-like-zoom-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: rgba(25, 56, 69, 0.85) !important;
    color: #ffffff !important;
    border: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    z-index: 3 !important;
}

html body .you-may-like-details,
body .you-may-like-details,
.you-may-like-details {
    padding: 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
}

html body .you-may-like-card-title,
body .you-may-like-card-title,
.you-may-like-card-title {
    font-family: var(--font-heading), 'Lexend', 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #183B47 !important;
    margin: 2px 0 4px 0 !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

html body .you-may-like-card-title a,
body .you-may-like-card-title a {
    color: #183B47 !important;
    text-decoration: none !important;
}

html body .you-may-like-pills-row,
body .you-may-like-pills-row,
.you-may-like-pills-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 2px 0 6px 0 !important;
    flex-wrap: wrap !important;
}

html body .pill-tag,
body .pill-tag,
.pill-tag {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 9px !important;
    border-radius: 20px !important;
    text-transform: none !important;
    line-height: 1.4 !important;
}

html body .pill-sku,
body .pill-sku,
.pill-sku {
    background: #ffffff !important;
    color: #64748B !important;
    border: 1px solid #CBD5E1 !important;
}

html body .pill-in-stock,
body .pill-in-stock,
.pill-in-stock {
    background: #ffffff !important;
    color: #10B981 !important;
    border: 1px solid #94A3B8 !important;
}

html body .pill-out-stock,
body .pill-out-stock,
.pill-out-stock {
    background: #ffffff !important;
    color: #EF4444 !important;
    border: 1px solid #EF4444 !important;
}

html body .you-may-like-price-row,
body .you-may-like-price-row,
.you-may-like-price-row {
    font-family: var(--font-heading), 'Lexend', 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    text-align: center !important;
    margin: 4px 0 8px 0 !important;
}

html body .retail-price-text,
body .retail-price-text {
    color: #183B47 !important;
    font-weight: 700 !important;
}

html body .retail-price-val,
body .retail-price-val {
    color: #87246A !important;
    font-weight: 800 !important;
}

/* YOU MAY ALSO LIKE SECTION: SIDE-BY-SIDE BUTTONS MATCHING BUNDLE CARDS ON DESKTOP & TABLET */
html body .you-may-like-actions,
body .you-may-like-actions,
.you-may-like-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
}

html body .btn-add-to-cart-stacked,
body .btn-add-to-cart-stacked,
.btn-add-to-cart-stacked {
    flex: 1 1 0px !important;
    width: 50% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    background: #820063 !important;
    color: #ffffff !important;
    border: 1.5px solid #820063 !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
    font-family: var(--font-heading), 'Lexend', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
    box-sizing: border-box !important;
}

html body .btn-add-to-cart-stacked:hover,
body .btn-add-to-cart-stacked:hover,
.btn-add-to-cart-stacked:hover {
    background: #ffffff !important;
    color: #820063 !important;
    border: 1.5px solid #820063 !important;
    transform: translateY(-2px) !important;
}

html body .btn-learn-more-stacked,
body .btn-learn-more-stacked,
.btn-learn-more-stacked {
    flex: 1 1 0px !important;
    width: 50% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    background: #ffffff !important;
    color: #820063 !important;
    border: 1.5px solid #820063 !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
    font-family: var(--font-heading), 'Lexend', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
    box-sizing: border-box !important;
}

html body .btn-learn-more-stacked:hover,
body .btn-learn-more-stacked:hover,
.btn-learn-more-stacked:hover {
    background: #820063 !important;
    color: #ffffff !important;
    border: 1.5px solid #820063 !important;
    transform: translateY(-2px) !important;
}
/* =========================================================
   FLUSH TOP AND SIDES FOR COVER IMAGE (LIKE MAIN SHOP PAGES)
========================================================= */

html body .you-may-like-card,
body .you-may-like-card,
.you-may-like-card {
    padding: 0 0 12px 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
}

html body .you-may-like-cover-wrap,
body .you-may-like-cover-wrap,
.you-may-like-cover-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    aspect-ratio: 1 / 1.32 !important;
    overflow: hidden !important;
    background: #F8FAFC !important;
    border-top-left-radius: 13px !important;
    border-top-right-radius: 13px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-sizing: border-box !important;
}

html body .you-may-like-cover-wrap a,
body .you-may-like-cover-wrap a,
.you-may-like-cover-wrap a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top-left-radius: 13px !important;
    border-top-right-radius: 13px !important;
}

html body .you-may-like-cover-img,
body .you-may-like-cover-img,
.you-may-like-cover-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top-left-radius: 13px !important;
    border-top-right-radius: 13px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* =========================================================
   DEFINITIVE 100% FLUSH COVER IMAGES FOR YOU MAY ALSO LIKE
========================================================= */

/* ZERO PADDING ON ALL CARD VARIATIONS (COVER TOUCHES TOP & SIDES) */
html body .you-may-also-like-wrap .shop-item-card,
html body .you-may-also-like-wrap .you-may-like-card,
html body .you-may-also-like-grid .shop-item-card,
html body .you-may-also-like-grid .you-may-like-card,
html body.single-product .you-may-also-like-wrap .shop-item-card,
html body.single-product .you-may-also-like-wrap .you-may-like-card,
html body .you-may-like-card,
body .you-may-also-like-wrap .shop-item-card,
body .you-may-like-card,
.you-may-also-like-wrap .shop-item-card,
.you-may-like-card {
    padding: 0 0 12px 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    box-sizing: border-box !important;
}

/* COVER CONTAINER STRETCHES 100% FLUSH TO TOP, LEFT, RIGHT */
html body .you-may-also-like-wrap .shop-item-cover-wrap,
html body .you-may-also-like-wrap .you-may-like-cover-wrap,
html body .you-may-also-like-grid .you-may-like-cover-wrap,
html body .you-may-like-cover-wrap,
body .you-may-like-cover-wrap,
.you-may-like-cover-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    aspect-ratio: 1 / 1.32 !important;
    overflow: hidden !important;
    background: #F8FAFC !important;
    border-radius: 13px 13px 0 0 !important;
    box-sizing: border-box !important;
}

html body .you-may-like-cover-wrap a,
body .you-may-like-cover-wrap a,
.you-may-like-cover-wrap a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 13px 13px 0 0 !important;
}

html body .you-may-like-cover-img,
body .you-may-like-cover-img,
.you-may-like-cover-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 13px 13px 0 0 !important;
}

/* DETAILS PADDING ONLY BELOW COVER IMAGE */
html body .you-may-like-details,
body .you-may-like-details,
.you-may-like-details {
    padding: 0 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
/* =========================================================
   DEFINITIVE ZERO-GAP COVER IMAGES FOR YOU MAY ALSO LIKE
========================================================= */

html body .you-may-like-card,
body .you-may-like-card,
.you-may-like-card {
    padding: 0 0 12px 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    box-sizing: border-box !important;
}

html body .you-may-like-cover-wrap,
body .you-may-like-cover-wrap,
.you-may-like-cover-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    aspect-ratio: 1 / 1.32 !important;
    overflow: hidden !important;
    background: #F8FAFC !important;
    border-radius: 13px 13px 0 0 !important;
    box-sizing: border-box !important;
}

html body .you-may-like-cover-wrap a,
body .you-may-like-cover-wrap a,
.you-may-like-cover-wrap a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 13px 13px 0 0 !important;
}

html body .you-may-like-cover-img,
body .you-may-like-cover-img,
.you-may-like-cover-img {
    width: 108% !important;
    height: 108% !important;
    max-width: none !important;
    max-height: none !important;
    margin: -4% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    transform: scale(1.06) !important;
    transform-origin: center center !important;
    border-radius: 13px 13px 0 0 !important;
}

html body .you-may-like-details,
body .you-may-like-details,
.you-may-like-details {
    padding: 0 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* =========================================================
   HARRISON & YORK — MASTER WOOCOMMERCE CHECKOUT DESIGN OVERRIDES
========================================================= */

/* 1. Page Background & Main Container */
body.woocommerce-checkout,
body.page-template-page-checkout,
.checkout-page-main,
.woocommerce-checkout {
    background-color: #ffffff !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    color: #1C3B47 !important;
}

/* 2. Headings & Titles */
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.woocommerce-checkout .checkout-section-title,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading {
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    color: #183B47 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    margin-top: 0 !important;
}

/* 3. Input Fields, Selects & Textareas */
.woocommerce-checkout input[type="text"]:not(#figmaPromoInput):not(.discount-code-input),
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout textarea,
.woocommerce-checkout .input-text:not(#figmaPromoInput):not(.discount-code-input),
.woocommerce-checkout .form-row input:not(#figmaPromoInput):not(.discount-code-input),
.woocommerce-checkout .form-row textarea {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 14.5px !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    background: #f8fafc !important;
    color: #1c3b47 !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 46px !important;
    outline: none !important;
}

/* Fix Country & State Dropdown Height (Select2 / SelectWoo & Native Select) */
.woocommerce-checkout select,
.woocommerce-checkout .form-row select,
.checkout-select {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px !important;
    line-height: 44px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 14.5px !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    background: #f8fafc !important;
    color: #1c3b47 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.select2-container--default .select2-selection--single,
.woocommerce-checkout .select2-container--default .select2-selection--single {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #1c3b47 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
    color: #1c3b47 !important;
    font-size: 14.5px !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
    top: 0 !important;
    right: 10px !important;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: #87246A !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(135,36,106,0.1) !important;
}

/* 4. Form Row Labels & Spacing */
.woocommerce-checkout .form-row {
    margin-bottom: 16px !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

.woocommerce-checkout label {
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    color: #1C3B47 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* 5. 2-Column Grid for Billing/Shipping & Order Summary */
form.checkout, form.woocommerce-checkout {
    display: block !important;
    width: 100% !important;
}

.checkout-left-col, .checkout-right-col {
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
}

.form-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    width: 100% !important;
}

@media (min-width: 992px) {
    .checkout-page-main .checkout-grid,
    .checkout-grid {
        display: grid !important;
        grid-template-columns: 1fr 440px !important;
        gap: 36px !important;
        align-items: start !important;
        width: 100% !important;
    }
}

/* 6. Order Review Table & Sidebar Styling (Figma Spec Pill Cards) */
.checkout-cart-card {
    background-color: #92a4b0 !important;
    border-radius: 20px !important;
    padding: 28px !important;
    color: #ffffff !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
}

#figmaPromoInput::placeholder,
.discount-code-input::placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
}

.cart-item-pill-card {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.summary-pill-box {
    border-radius: 10px !important;
    padding: 14px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #ffffff !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
}

.subtotal-box, .shipping-box, .coupon-box {
    background-color: #637F92 !important;
}

.grand-total-box {
    background-color: #315567 !important;
    padding: 16px 20px !important;
}

#order_review table.shop_table,
.checkout-items-table {
    width: 100% !important;
    border-collapse: collapse !important;
    color: #ffffff !important;
    background: transparent !important;
}

#order_review table.shop_table th,
#order_review table.shop_table td {
    padding: 10px 8px !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
}

#order_review table.shop_table tr.cart_item td.product-name {
    font-weight: 700 !important;
    color: #ffffff !important;
}

#order_review table.shop_table tr.cart_item td.product-total {
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* 7. Buttons (Place Order / Submit) */
.woocommerce-checkout #place_order,
.woocommerce-checkout button[type="submit"].button,
.btn-drawer-checkout {
    background: #87246A !important;
    color: #ffffff !important;
    border: none !important;
    padding: 16px 24px !important;
    border-radius: 10px !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    width: 100% !important;
    text-transform: uppercase !important;
    margin-top: 15px !important;
    box-shadow: 0 4px 12px rgba(135,36,106,0.25) !important;
    transition: all 0.2s ease !important;
}

.woocommerce-checkout #place_order:hover {
    background: #6e1c56 !important;
    transform: translateY(-1px) !important;
}

/* 8. Express Checkout Buttons (Stripe / Apple Pay / GPay) */
.wc-stripe-express-checkout-container,
.wc-stripe-banner-checkout {
    margin-bottom: 24px !important;
    border-radius: 10px !important;
}

/* 9. Payment Methods Box & Live Gateway Alignment */
#payment,
.woocommerce-checkout-payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

#payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    border: none !important;
}

#payment ul.payment_methods li.wc_payment_method {
    list-style: none !important;
    margin-bottom: 12px !important;
    padding: 14px 18px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

#payment ul.payment_methods li.wc_payment_method input[type="radio"] {
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
    accent-color: #87246A !important;
    cursor: pointer !important;
}

#payment ul.payment_methods li.wc_payment_method label {
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #1c3b47 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#payment div.payment_box {
    width: 100% !important;
    margin-top: 12px !important;
    background-color: #f8fafc !important;
    color: #334155 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    font-size: 13.5px !important;
    border: 1px solid #cbd5e1 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
}

/* Stripe & PayPal Live Gateway Input Fields */
.wc-stripe-elements-field,
#stripe-card-element,
#stripe-exp-element,
#stripe-cvc-element,
.wc-stripe-iban-element {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 10. Desktop Sticky Right Sidebar with Top Gap Offset */
@media (min-width: 992px) {
    .checkout-right-col {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 142px !important;
        z-index: 90 !important;
    }
    body.logged-in .checkout-right-col {
        top: 174px !important;
    }
}

/* 11. Form Fields Reset & Grid Enforcement */
.checkout-page-main .form-group {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.checkout-page-main .form-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

@media (max-width: 768px) {
    .checkout-page-main .form-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* 12. Hide Duplicate Top Express Buttons Injected Outside Container */
.checkout-page-main > .wc-stripe-express-checkout-container,
.checkout-page-main > #wc-stripe-payment-request-wrapper,
.woocommerce-before-checkout-form .wc-stripe-express-checkout-container,
.woocommerce-before-checkout-form #wc-stripe-payment-request-wrapper {
    display: none !important;
}

/* 13. High-Specificity Discount Code Box & Placeholder Styling */
html body .checkout-cart-card input#figmaPromoInput,
html body input#figmaPromoInput.discount-code-input,
html body input.discount-code-input {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 14px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    box-sizing: border-box !important;
    height: 52px !important;
    min-height: 52px !important;
}

html body .checkout-cart-card input#figmaPromoInput::placeholder,
html body input#figmaPromoInput.discount-code-input::placeholder,
html body input.discount-code-input::placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    opacity: 1 !important;
}

/* 14. Stripe & WooCommerce Payment Window Checkbox Sizing & Positioning */
#payment input[type="checkbox"],
#woocommerceNativePaymentContainer input[type="checkbox"],
.wc-stripe-payment-element input[type="checkbox"],
.woocommerce-checkout #payment input[type="checkbox"],
.woocommerce-checkout #woocommerceNativePaymentContainer input[type="checkbox"],
.wc-stripe-save-source-key input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: #87246A !important;
    display: inline-block !important;
    vertical-align: middle !important;
    opacity: 1 !important;
    visibility: visible !important;
    float: none !important;
}

/* Position checkbox to the RIGHT of the text */
#payment .form-row-checkbox label,
#payment .wc-stripe-save-source-key,
#payment label.checkbox,
#payment .woocommerce-form__label-for-checkbox,
#woocommerceNativePaymentContainer .form-row-checkbox label,
#woocommerceNativePaymentContainer .wc-stripe-save-source-key,
#woocommerceNativePaymentContainer label.checkbox,
#woocommerceNativePaymentContainer .woocommerce-form__label-for-checkbox,
.wc-terms-and-conditions label {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    font-family: var(--font-lexend), 'Lexend', sans-serif !important;
    font-size: 13.5px !important;
    color: #1c3b47 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: left !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

#payment .form-row-checkbox label span,
#payment .wc-stripe-save-source-key span,
#woocommerceNativePaymentContainer .form-row-checkbox label span,
#woocommerceNativePaymentContainer .wc-stripe-save-source-key span {
    display: inline-block !important;
}

/* =========================================================
   SINGLE PRODUCT PAGE DESKTOP COVER IMAGE & NAV ARROWS ADJUSTMENT
========================================================= */
@media (min-width: 992px) {
    /* 1. HIDE NAV ARROWS ON DESKTOP */
    html body.single-product .main-cover-box .cover-nav-arrow,
    html body .page-single-product .main-cover-box .cover-nav-arrow,
    html body .main-cover-box .cover-nav-arrow,
    body .main-cover-box .cover-nav-arrow,
    .main-cover-box .cover-nav-arrow {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 2. ALIGN PRODUCT GRID ITEMS FLUSH AT TOP */
    html body.single-product .product-grid-layout,
    html body .page-single-product .product-grid-layout,
    html body .product-grid-layout,
    body .product-grid-layout,
    .product-grid-layout {
        align-items: flex-start !important;
    }

    /* 3. ALIGN VERTICAL THUMBNAILS & COVER BOX FLUSH TO TOP */
    html body.single-product .vertical-thumbs-col,
    html body .page-single-product .vertical-thumbs-col,
    html body .vertical-thumbs-col,
    body .vertical-thumbs-col,
    .vertical-thumbs-col {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    html body.single-product .main-cover-box,
    html body .page-single-product .main-cover-box,
    html body .main-cover-box,
    body .main-cover-box,
    .main-cover-box {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        position: relative !important;
    }

    /* 4. MAKE COVER IMAGE BIGGER AND FLUSH WITH THUMBNAIL TOP */
    html body.single-product .main-cover-box img,
    html body .page-single-product .main-cover-box img,
    html body #mainCoverImage,
    html body .main-cover-box img,
    body .main-cover-box img,
    .main-cover-box img {
        margin-top: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 16px !important;
        object-fit: contain !important;
    }
}

/* =========================================================
   SINGLE PRODUCT QUANTITY INPUT & ACTION BUTTONS (MOBILE + DESKTOP)
========================================================= */
html body .qty-buttons-flex-row,
body .qty-buttons-flex-row,
.qty-buttons-flex-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 8px !important;
}

html body .quantity-stepper-box,
body .quantity-stepper-box,
.quantity-stepper-box {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

html body input.qty-single-input,
html body #singleQuantityInput,
body #singleQuantityInput,
.qty-single-input,
#singleQuantityInput {
    width: 60px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 1.5px solid #00A3AD !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #183B47 !important;
    background: #F8FAFC !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body .single-product-actions-row,
body .single-product-actions-row,
.single-product-actions-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    height: 44px !important;
    margin: 0 !important;
}

html body .btn-add-basket-single,
html body .btn-wishlist-single,
body .btn-add-basket-single,
body .btn-wishlist-single,
.btn-add-basket-single,
.btn-wishlist-single {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    border-radius: 10px !important;
    font-family: var(--font-heading), 'Lexend', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html body .btn-add-basket-single,
body .btn-add-basket-single,
.btn-add-basket-single {
    background: #87246A !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    transition: all 0.25s ease !important;
}

html body .btn-add-basket-single:hover,
body .btn-add-basket-single:hover,
.btn-add-basket-single:hover {
    background: #6e1c55 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

html body .btn-wishlist-single,
body .btn-wishlist-single,
.btn-wishlist-single {
    background: #E893CD !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    transition: all 0.25s ease !important;
}

html body .btn-wishlist-single:hover,
body .btn-wishlist-single:hover,
.btn-wishlist-single:hover {
    background: #d67dbb !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* =========================================================
   DESKTOP DUAL STICKY HEADERS (YELLOW BAR + PURPLE BAR ALWAYS STICKY)
   AND ZERO GAP AT VERY TOP SITEWIDE ON ALL PAGES
========================================================= */
@media (min-width: 992px) {
    html,
    html body,
    body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* REMOVED: #wpadminbar { display: none }
       This hid the WordPress admin bar for logged-in administrators on
       desktop, presumably to close the gap at the top of the page. Making
       room for it is handled in style.css instead (body.admin-bar), which
       offsets the sticky header rather than hiding the bar. */

    html body .sitewide-sticky-header-wrap,
    body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap,
    body.logged-in .sitewide-sticky-header-wrap,
    html body.logged-in .sitewide-sticky-header-wrap {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        z-index: 99999 !important;
        width: 100% !important;
        background-color: transparent !important;
    }

    html body .top-bar,
    body .top-bar,
    .top-bar,
    body.logged-in .top-bar {
        position: relative !important;
        top: 0 !important;
        margin-top: 0 !important;
        z-index: 100000 !important;
        width: 100% !important;
    }

    html body .main-header,
    body .main-header,
    .main-header,
    body.logged-in .main-header {
        position: relative !important;
        top: 0 !important;
        margin-top: 0 !important;
        z-index: 99999 !important;
        width: 100% !important;
        background-color: #87246A !important;
    }

    /* Prevent body.cart-open overflow:hidden from un-sticking sticky header on desktop */
    html body.cart-open,
    body.cart-open {
        overflow: auto !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 991px) {
    html body .top-bar,
    body .top-bar,
    .top-bar {
        position: relative !important;
        top: auto !important;
        z-index: 1 !important;
        width: 100% !important;
    }

    html body .sitewide-sticky-header-wrap,
    body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap {
    background-color: transparent !important;
}

    html body header.main-header,
    html body .main-header,
    body header.main-header,
    body .main-header,
    header.main-header,
    .main-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999999 !important;
        width: 100% !important;
        background-color: #87246A !important;
    }
}

/* =========================================================
   SINGLE PRODUCT FULLSCREEN COVER IMAGE ZOOM LIGHTBOX STYLING
========================================================= */
html body .cover-zoom-lightbox-overlay,
body .cover-zoom-lightbox-overlay,
.cover-zoom-lightbox-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 99999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body .cover-zoom-lightbox-overlay.active,
body .cover-zoom-lightbox-overlay.active,
.cover-zoom-lightbox-overlay.active {
    display: flex !important;
    opacity: 1 !important;
}

html body .cover-zoom-lightbox-content,
body .cover-zoom-lightbox-content,
.cover-zoom-lightbox-content {
    position: relative !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .zoomed-cover-img,
body .zoomed-cover-img,
.zoomed-cover-img {
    max-width: 85vw !important;
    max-height: 85vh !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7) !important;
    cursor: zoom-out !important;
    transition: transform 0.25s ease !important;
}

html body .close-zoom-lightbox,
body .close-zoom-lightbox,
.close-zoom-lightbox {
    position: absolute !important;
    top: -20px !important;
    right: -20px !important;
    width: 44px !important;
    height: 44px !important;
    background: #87246A !important;
    color: #ffffff !important;
    border: 2.5px solid #ffffff !important;
    border-radius: 50% !important;
    font-size: 26px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    z-index: 100000000 !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

html body .close-zoom-lightbox:hover,
body .close-zoom-lightbox:hover,
.close-zoom-lightbox:hover {
    transform: scale(1.12) !important;
    background: #00A3AD !important;
}

/* =========================================================
   FREE DELIVERY WITH BUNDLES TITLE: EXACT ROCK SALT WEIGHT AS YOU MAY ALSO LIKE
========================================================= */
html body .bundles-section-title,
html body .free-delivery-bundles-wrap .bundles-section-title,
body .bundles-section-title,
.bundles-section-title {
    font-family: 'Rock Salt', cursive, sans-serif !important;
    font-size: 34px !important;
    color: #183B47 !important;
    text-align: center !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: 1.2px !important;
}

@media (max-width: 767px) {
    html body .bundles-section-title,
    html body .free-delivery-bundles-wrap .bundles-section-title,
    body .bundles-section-title,
    .bundles-section-title {
        font-size: 26px !important;
    }
}

/* =========================================================
   GOLD STARS OVERRIDE FOR YOU MAY ALSO LIKE & BUNDLES CARDS
========================================================= */
html body .you-may-also-like-wrap .rating-stars-inline i,
html body .you-may-like-pills-row .rating-stars-inline i,
html body .you-may-like-card .fa-star,
html body .you-may-like-card i.fa-star,
html body .free-delivery-bundles-wrap .rating-stars-inline i,
html body .bundle-pills-row .rating-stars-inline i,
html body .figma-bundle-card .fa-star,
html body .figma-bundle-card i.fa-star,
html body .rating-stars-inline i,
html body .rating-stars-inline .fa-star,
body .rating-stars-inline i,
.rating-stars-inline i {
    color: #F5B41A !important;
}

/* =========================================================
   BOOK FORMAT TAB: UNIFIED HEIGHT FOR ALL 4 PILLAR PILLS
   (LEARN, PRACTICE, CONSOLIDATE, PROGRESS CHECK)
========================================================= */
html body .format-pillars-grid .pillar-pill,
html body .pillar-pill,
body .pillar-pill,
.pillar-pill,
.pillar-pill.pill-yellow,
.pillar-pill.pill-teal,
.pillar-pill.pill-purple,
.pillar-pill.pill-magenta {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 18px !important;
    font-family: var(--font-heading), 'Lexend', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border-radius: 30px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    width: 100% !important;
}

html body .format-pillars-grid .pillar-pill span,
html body .pillar-pill span,
body .pillar-pill span,
.pillar-pill span {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* =========================================================
   MOBILE BUNDLE CARD REFINEMENTS: NO-GAP THUMBNAIL, CENTERED STOCK PILL,
   AND SINGLE-LINE "LEARN MORE" BUTTON
========================================================= */
@media (max-width: 767px) {
    html body .figma-bundles-grid .figma-bundle-card,
    body .figma-bundles-grid .figma-bundle-card,
    .figma-bundles-grid .figma-bundle-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 10px !important;
    }

    html body .figma-bundles-grid .bundle-thumb-box,
    body .figma-bundles-grid .bundle-thumb-box,
    .bundle-thumb-box {
        margin-bottom: 6px !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 0.88 !important;
        width: 100% !important;
    }

    html body .figma-bundles-grid .bundle-card-body,
    body .figma-bundles-grid .bundle-card-body,
    .bundle-card-body {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    html body .figma-bundles-grid .bundle-title,
    html body .figma-bundles-grid .figma-bundle-card h4,
    body .figma-bundles-grid .bundle-title,
    body .figma-bundles-grid .figma-bundle-card h4,
    .bundle-title {
        margin: 4px 0 2px 0 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: #183B47 !important;
        text-align: center !important;
    }

    html body .figma-bundles-grid .bundle-title a,
    html body .figma-bundles-grid .figma-bundle-card h4 a,
    body .figma-bundles-grid .bundle-title a,
    .bundle-title a {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #183B47 !important;
        text-decoration: none !important;
    }

    html body div.figma-bundles-grid div.figma-bundle-card div.bundle-badges-row,
    html body div.bundle-badges-row,
    html body .bundle-badges-row,
    body .bundle-badges-row,
    .bundle-badges-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 4px 0 6px 0 !important;
        text-align: center !important;
    }

    html body .bundle-badges-row .rating-stars,
    html body .bundle-badges-row .shop-item-stars,
    body .bundle-badges-row .rating-stars,
    .bundle-badges-row .rating-stars {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    html body .bundle-badges-row .pill-tag,
    html body .bundle-badges-row .pill-in-stock,
    html body .bundle-badges-row .pill-out-stock,
    body .bundle-badges-row .pill-tag,
    .bundle-badges-row .pill-tag {
        margin: 0 !important;
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        padding: 3px 11px !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        line-height: 1.3 !important;
        text-transform: none !important;
        background: #ffffff !important;
        color: #10B981 !important;
        border: 1px solid #94A3B8 !important;
    }

    html body .figma-bundles-grid .bundle-price-label,
    body .figma-bundles-grid .bundle-price-label,
    .bundle-price-label {
        font-size: 13px !important;
        color: #183B47 !important;
        font-weight: 700 !important;
        margin: 6px 0 8px 0 !important;
        text-align: center !important;
    }

    html body .figma-bundles-grid .bundle-price-label strong,
    body .figma-bundles-grid .bundle-price-label strong,
    .bundle-price-label strong {
        color: #87246A !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    html body .bundle-actions-row,
    body .bundle-actions-row,
    .bundle-actions-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        margin-top: 6px !important;
    }

    html body .btn-bundle-add-basket,
    body .btn-bundle-add-basket,
    .btn-bundle-add-basket {
        width: 100% !important;
        background: #820063 !important;
        color: #ffffff !important;
        border: 1.5px solid #820063 !important;
        border-radius: 6px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        box-sizing: border-box !important;
        transition: all 0.25s ease !important;
    }
    html body .btn-bundle-add-basket:hover,
    body .btn-bundle-add-basket:hover,
    .btn-bundle-add-basket:hover {
        background: #ffffff !important;
        color: #820063 !important;
        border: 1.5px solid #820063 !important;
    }

    html body .btn-bundle-learn-more,
    body .btn-bundle-learn-more,
    .btn-bundle-learn-more {
        width: 100% !important;
        background: #ffffff !important;
        color: #820063 !important;
        border: 1.5px solid #820063 !important;
        border-radius: 6px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        letter-spacing: 0.5px !important;
        box-sizing: border-box !important;
        transition: all 0.25s ease !important;
    }
    html body .btn-bundle-learn-more:hover,
    body .btn-bundle-learn-more:hover,
    .btn-bundle-learn-more:hover {
        background: #820063 !important;
        color: #ffffff !important;
        border: 1.5px solid #820063 !important;
    }

    /* YOU MAY ALSO LIKE SECTION: 16PX PRODUCT TITLES ON MOBILE */
    html body .you-may-also-like-wrap .you-may-like-card-title,
    html body .you-may-also-like-wrap .you-may-like-card h4,
    html body .you-may-also-like-grid .you-may-like-card h4,
    html body .you-may-also-like-grid-container .you-may-like-card h4,
    html body .you-may-like-card .you-may-like-card-title,
    html body .you-may-like-card h4,
    body .you-may-like-card-title,
    body .you-may-like-card h4,
    .you-may-like-card-title,
    .you-may-like-card h4 {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: #183B47 !important;
        margin: 4px 0 4px 0 !important;
        text-align: center !important;
    }

    html body .you-may-also-like-wrap .you-may-like-card-title a,
    html body .you-may-also-like-wrap .you-may-like-card h4 a,
    html body .you-may-also-like-grid .you-may-like-card h4 a,
    html body .you-may-also-like-grid-container .you-may-like-card h4 a,
    html body .you-may-like-card .you-may-like-card-title a,
    html body .you-may-like-card h4 a,
    body .you-may-like-card-title a,
    body .you-may-like-card h4 a,
    .you-may-like-card-title a,
    .you-may-like-card h4 a {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: #183B47 !important;
        text-decoration: none !important;
    }

    /* YOU MAY ALSO LIKE SECTION: LARGER STOCK TAGS ON MOBILE */
    html body .you-may-also-like-wrap .pill-tag,
    html body .you-may-also-like-wrap .pill-in-stock,
    html body .you-may-also-like-wrap .pill-out-stock,
    html body .you-may-like-card .pill-tag,
    html body .you-may-like-card .pill-in-stock,
    html body .you-may-like-card .pill-out-stock,
    body .you-may-like-card .pill-in-stock,
    .you-may-like-card .pill-in-stock,
    .you-may-like-pills-row .pill-tag,
    .you-may-like-pills-row .pill-in-stock {
        font-size: 12px !important;
        font-weight: 700 !important;
        padding: 4px 12px !important;
        border-radius: 20px !important;
        line-height: 1.3 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* =========================================================
   SLEEK TITLE BANNER & SUBTITLE TYPOGRAPHY ADJUSTMENTS
   (SHOP PAGES & SINGLE PRODUCT PAGES - DESKTOP & MOBILE)
========================================================= */

/* DESKTOP (>= 768px) */
@media (min-width: 768px) {
    html body .shop-hero-banner,
    body .shop-hero-banner,
    .shop-hero-banner {
        height: 333px !important;
        min-height: 333px !important;
        padding: 0 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html body .shop-hero-banner h1,
    body .shop-hero-banner h1,
    .shop-hero-banner h1,
    html body.single-product .shop-hero-banner h1,
    body.single-product .shop-hero-banner h1 {
        font-size: 54px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
    }

    html body .shop-hero-banner .shop-breadcrumb,
    html body .shop-hero-banner .product-breadcrumb,
    html body .shop-hero-banner .woocommerce-breadcrumb,
    body .shop-hero-banner .shop-breadcrumb,
    body .shop-hero-banner .product-breadcrumb,
    body .shop-hero-banner .woocommerce-breadcrumb,
    .shop-hero-banner .shop-breadcrumb,
    .shop-hero-banner .product-breadcrumb,
    .shop-hero-banner .woocommerce-breadcrumb,
    .shop-hero-banner .shop-breadcrumb *,
    .shop-hero-banner .product-breadcrumb *,
    .shop-hero-banner .woocommerce-breadcrumb * {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    /* Single Product Card Header Title & Subtitle */
    html body #singleProductTitle,
    body #singleProductTitle,
    #singleProductTitle {
        font-size: 20px !important;
        margin: 4px 0 4px 0 !important;
    }

    html body .product-subtitle,
    body .product-subtitle,
    .product-subtitle {
        font-size: 14px !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }
}

/* MOBILE (< 767px) */
@media (max-width: 767px) {
    html body .shop-hero-banner,
    body .shop-hero-banner,
    .shop-hero-banner {
        height: 150px !important;
        min-height: 150px !important;
        padding: 15px 0 !important;
    }

    html body .shop-hero-banner h1,
    body .shop-hero-banner h1,
    .shop-hero-banner h1,
    html body.single-product .shop-hero-banner h1,
    body.single-product .shop-hero-banner h1 {
        font-size: 35px !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
    }

    html body .shop-hero-banner .shop-breadcrumb,
    html body .shop-hero-banner .product-breadcrumb,
    html body .shop-hero-banner .woocommerce-breadcrumb,
    body .shop-hero-banner .shop-breadcrumb,
    body .shop-hero-banner .product-breadcrumb,
    body .shop-hero-banner .woocommerce-breadcrumb,
    .shop-hero-banner .shop-breadcrumb,
    .shop-hero-banner .product-breadcrumb,
    .shop-hero-banner .woocommerce-breadcrumb,
    .shop-hero-banner .shop-breadcrumb *,
    .shop-hero-banner .product-breadcrumb *,
    .shop-hero-banner .woocommerce-breadcrumb * {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    /* Single Product Card Header Title & Subtitle Mobile */
    html body #singleProductTitle,
    body #singleProductTitle,
    #singleProductTitle {
        font-size: 35px !important;
        margin: 4px 0 4px 0 !important;
    }

    html body .product-subtitle,
    body .product-subtitle,
    .product-subtitle {
        font-size: 11.5px !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
}

/* =========================================================
   MOBILE SITEWIDE COMPLETELY NON-STICKY HEADER OVERRIDE
========================================================= */
@media (max-width: 991px) {
    html body .sitewide-sticky-header-wrap,
    body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap {
    background-color: transparent !important;
}

    html body .top-bar,
    body .top-bar,
    .top-bar {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1 !important;
        width: 100% !important;
    }

    html body header.main-header,
    html body .main-header,
    body header.main-header,
    body .main-header,
    header.main-header,
    .main-header {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        z-index: 99999 !important;
        background-color: #87246A !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   FIGMA ACCOUNT PAGE DESIGN (PIXEL-PERFECT MATCH)
========================================================= */

.figma-account-section,
.account-page-main,
.woocommerce-account,
.woocommerce-lost-password,
.woocommerce-reset-password {
    position: relative !important;
    background-color: #bdced7 !important;
    min-height: auto !important;
    padding: 30px 0 160px 0 !important;
    overflow: hidden !important;
}

.figma-account-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-repeat: repeat !important;
    background-size: 205px 205px !important;
    opacity: 0.03 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.figma-account-section .container,
.account-page-main .container {
    position: relative !important;
    z-index: 2 !important;
}

.figma-account-grid {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 32px !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    align-items: start !important;
}

@media (max-width: 991px) {
    .figma-account-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* LEFT SIDEBAR CARD - FIGMA EXACT MATCH */
.figma-account-sidebar-card {
    background: #E8F0F4 !important;
    border-radius: 16px !important;
    padding: 28px 20px !important;
    box-shadow: 0 4px 25px rgba(22, 40, 56, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.account-sidebar-title {
    font-family: 'Lexend', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #254B5E !important;
    margin: 0 0 18px 0 !important;
    padding: 0 4px !important;
}

.account-nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.account-nav-list .nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

.account-nav-list .account-nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    color: #254B5E !important;
    font-family: 'Lexend', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background-color: transparent !important;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
    min-height: 34px !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: transform, background-color !important;
}

.account-nav-list .account-nav-link:hover {
    background-color: rgba(214, 228, 237, 0.5) !important;
    color: #254B5E !important;
    transform: translate3d(2px, 0, 0) !important;
}

.account-nav-list .nav-item.active .account-nav-link {
    background-color: #D5E3EC !important;
    font-weight: 700 !important;
    color: #254B5E !important;
    transform: translate3d(4px, 0, 0) !important;
    box-shadow: 0 2px 8px rgba(37, 75, 94, 0.08) !important;
}

.account-nav-list .chevron-icon {
    display: none !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    color: #254B5E !important;
    margin-right: 8px !important;
    margin-left: 2px !important;
    transition: transform 0.2s ease !important;
}

.account-nav-list .nav-item.active .chevron-icon {
    display: inline-block !important;
    animation: chevronSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes chevronSlideIn {
    0% {
        opacity: 0;
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* DELETE ACCOUNT RED TEXT STYLING */
.account-nav-list .account-nav-link.text-danger,
.account-nav-list .text-danger {
    color: #DC2626 !important;
}

.account-nav-list .nav-item.active .account-nav-link.text-danger,
.account-nav-list .nav-item[data-tab="delete-account"].active .account-nav-link {
    color: #DC2626 !important;
    background-color: #FEE2E2 !important;
}

.account-nav-list .nav-item[data-tab="delete-account"] .chevron-icon {
    color: #DC2626 !important;
}

/* TAB CONTENT SMOOTH FADE ANIMATION */
.account-tab-content.active {
    animation: tabContentSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes tabContentSlideUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* RIGHT MAIN CONTENT CARD */
.figma-account-content-card {
    background: #E8F0F4 !important;
    border-radius: 16px !important;
    padding: 36px 40px 44px 40px !important;
    box-shadow: 0 4px 25px rgba(22, 40, 56, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

@media (max-width: 600px) {
    .figma-account-content-card {
        padding: 24px 20px !important;
    }
}

.account-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 28px !important;
}

.account-card-heading {
    font-family: 'Lexend', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #162838 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

.account-edit-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background-color: #162838 !important;
    color: #ffffff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.account-edit-toggle-btn:hover,
.account-edit-toggle-btn.editing-active {
    background-color: #0E1A26 !important;
    transform: scale(1.06) !important;
}

/* FORM LAYOUT - ISOLATED FLEXGRID */
.figma-account-form,
.figma-account-form *,
.figma-account-form *::before,
.figma-account-form *::after {
    box-sizing: border-box !important;
    float: none !important;
    clear: none !important;
}

.figma-account-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.figma-account-form .figma-form-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
    float: none !important;
}

@media (max-width: 680px) {
    .figma-account-form .figma-form-row {
        flex-direction: column !important;
        gap: 16px !important;
    }
}

.figma-account-form .figma-form-group {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* ROW 1: TITLE (100px) + FIRST NAME (FLEX 1) + LAST NAME (FLEX 1) */
.figma-form-row.row-title-names .group-title {
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    min-width: 100px !important;
}

.figma-form-row.row-title-names .group-first-name,
.figma-form-row.row-title-names .group-last-name {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
}

/* ROW 2, 3, 4: EQUAL 2 COLS */
.figma-form-row.row-two-equal .figma-form-group {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
}

.figma-input {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    line-height: 48px !important;
    border-radius: 8px !important;
    background-color: #DDE7EC !important;
    border: 1px solid #CAD8E0 !important;
    padding: 0 16px !important;
    font-family: 'Lexend', sans-serif !important;
    font-size: 14px !important;
    color: #162838 !important;
    box-sizing: border-box !important;
    outline: none !important;
    margin: 0 !important;
    float: none !important;
    transition: all 0.2s ease !important;
}

.figma-input::placeholder {
    color: #7E93A0 !important;
    opacity: 1 !important;
}

.figma-input:enabled:focus {
    background-color: #ffffff !important;
    border-color: #162838 !important;
    box-shadow: 0 0 0 3px rgba(22, 40, 56, 0.1) !important;
}

.figma-input:disabled {
    cursor: default !important;
    opacity: 0.9 !important;
}

/* SELECT DROPDOWN WRAPPER */
.select-wrapper {
    position: relative !important;
    width: 100% !important;
}

.figma-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 32px !important;
    cursor: pointer !important;
}

.select-arrow {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    color: #7E93A0 !important;
    font-size: 12px !important;
}

/* SAVE BUTTON */
.form-submit-row {
    margin-top: 10px !important;
}

.btn-save-account-details {
    background-color: #162838 !important;
    color: #ffffff !important;
    font-family: 'Lexend', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.btn-save-account-details:hover {
    background-color: #0E1A26 !important;
    transform: translateY(-1px) !important;
}

.form-status-alert {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: 'Lexend', sans-serif !important;
    margin-bottom: 16px !important;
}

.alert-success {
    background-color: #D1FAE5 !important;
    color: #065F46 !important;
    border: 1px solid #A7F3D0 !important;
}

.empty-state-text {
    font-family: 'Lexend', sans-serif !important;
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
}

.figma-account-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 10px !important;
}

.figma-account-table th {
    text-align: left !important;
    font-family: 'Lexend', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #162838 !important;
    padding: 10px 14px !important;
    border-bottom: 2px solid #CAD8E0 !important;
}

.figma-account-table td {
    padding: 14px !important;
    font-family: 'Lexend', sans-serif !important;
    font-size: 14px !important;
    color: #162838 !important;
    border-bottom: 1px solid #DDE7EC !important;
}

/* =========================================================
   FIGMA PAYMENT SUCCESSFUL PAGE DESIGN (PIXEL-PERFECT MATCH)
========================================================= */

.payment-success-section {
    position: relative !important;
    background-color: #DDE7EC !important;
    min-height: calc(100vh - 120px) !important;
    padding: 60px 20px 80px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.payment-success-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('images/HAY_Brandmark_White.png') !important;
    background-size: 220px auto !important;
    background-position: center center !important;
    background-repeat: repeat !important;
    opacity: 0.28 !important;
    mix-blend-mode: overlay !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.payment-success-section .container {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
}

/* CENTERED PURE WHITE PAYMENT SUCCESS CARD */
.payment-success-card {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 48px 44px 52px 44px !important;
    box-shadow: 0 10px 40px rgba(22, 40, 56, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    text-align: center !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    .payment-success-card {
        padding: 36px 24px 40px 24px !important;
    }
}

/* CYAN SUCCESS CHECKMARK BADGE */
.success-icon-badge {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background-color: #D6F2F5 !important;
    margin: 0 auto 20px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.success-icon-badge svg {
    width: 24px !important;
    height: 24px !important;
}

/* HEADLINE */
.payment-success-heading {
    font-family: 'Lexend', sans-serif !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #254B5E !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}

@media (max-width: 600px) {
    .payment-success-heading {
        font-size: 26px !important;
    }
}

/* MESSAGE SUBTEXT */
.payment-success-subtext {
    font-family: 'Lexend', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #647B88 !important;
    line-height: 1.65 !important;
    max-width: 510px !important;
    margin: 0 auto 36px auto !important;
}

@media (max-width: 600px) {
    .payment-success-subtext {
        font-size: 14px !important;
        margin-bottom: 28px !important;
    }
}

/* ACTION BUTTONS GRID */
.success-action-btns {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
}

@media (max-width: 540px) {
    .success-action-btns {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

.btn-success-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    padding: 0 28px !important;
    border-radius: 10px !important;
    font-family: 'Lexend', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

@media (max-width: 540px) {
    .btn-success-action {
        width: 100% !important;
    }
}

/* BUTTON 1: BACK TO HOME (OUTLINE PURPLE) */
.btn-back-home {
    background-color: #E8F0F4 !important;
    border: 1.5px solid #87246A !important;
    color: #87246A !important;
}

.btn-back-home:hover {
    background-color: #87246A !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(135, 36, 106, 0.2) !important;
}

/* BUTTON 2: CONTINUE SHOPPING (SOLID PURPLE) */
.btn-continue-shopping {
    background-color: #87246A !important;
    border: 1.5px solid #87246A !important;
    color: #ffffff !important;
}

.btn-continue-shopping:hover {
    background-color: #721D59 !important;
    border-color: #721D59 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(135, 36, 106, 0.25) !important;
}

/* =========================================================
   DESKTOP SHOP TITLE BANNERS: NATIVE SIZE & TOP-LEFT PINNING
========================================================= */
@media (min-width: 768px) {
    /* CONTAIN BANNER OVERFLOW SO GRAPHIC NEVER BLEEDS INTO SECTION BELOW */
    html body .shop-hero-banner,
    body .shop-hero-banner,
    .shop-hero-banner {
        position: relative !important;
        overflow: hidden !important;
    }

    /* LEFT GRAPHIC: MOVED FURTHER UP (-60px) */
    html body .shop-hero-banner .shop-banner-decor.left-decor.desktop-banner-decor,
    html body .shop-banner-decor.left-decor.desktop-banner-decor,
    html body .maths-banner .left-decor.desktop-banner-decor,
    html body .english-banner .left-decor.desktop-banner-decor,
    html body.single-product .shop-hero-banner .left-decor.desktop-banner-decor,
    html body .page-single-product .shop-hero-banner .left-decor.desktop-banner-decor,
    html body .shop-hero-banner .left-decor,
    html body .shop-banner-decor.left-decor,
    html body .hero-banner-graphic-left,
    html body img.shop-banner-decor.left-decor,
    body .shop-hero-banner .shop-banner-decor.left-decor.desktop-banner-decor,
    .shop-hero-banner .shop-banner-decor.left-decor.desktop-banner-decor {
        position: absolute !important;
        left: 0 !important;
        top: -45px !important;
        bottom: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-15px) !important;
        object-position: left top !important;
        vertical-align: top !important;
        z-index: 5 !important;
    }

    /* RIGHT GRAPHIC: FIXED NATIVE SIZE & POSITION (NO RESIZING ON SCREEN RESIZATION) */
    html body .shop-hero-banner .shop-banner-decor.right-decor.desktop-banner-decor,
    html body .shop-banner-decor.right-decor.desktop-banner-decor,
    html body .maths-banner .right-decor.desktop-banner-decor,
    html body .english-banner .right-decor.desktop-banner-decor,
    html body.single-product .shop-hero-banner .right-decor.desktop-banner-decor,
    html body .page-single-product .shop-hero-banner .right-decor.desktop-banner-decor,
    html body .shop-hero-banner .right-decor,
    html body .shop-banner-decor.right-decor,
    html body .hero-banner-graphic-right,
    html body img.shop-banner-decor.right-decor,
    body .shop-hero-banner .shop-banner-decor.right-decor.desktop-banner-decor,
    .shop-hero-banner .shop-banner-decor.right-decor.desktop-banner-decor {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        translate: none !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        object-fit: none !important;
        object-position: right top !important;
        z-index: 5 !important;
    }
}

/* =========================================================
   SINGLE PRODUCT BREADCRUMBS: CAPITALIZATION & CHEVRON ICON
========================================================= */
.product-breadcrumb a,
.product-breadcrumb span,
.product-breadcrumb li,
.woocommerce-breadcrumb a,
.woocommerce-breadcrumb span,
.shop-breadcrumb a,
.shop-breadcrumb span {
    text-transform: capitalize !important;
}

.breadcrumb-chevron {
    display: inline-block !important;
    margin: 0 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    opacity: 0.9 !important;
}

/* =========================================================
   TITLE BANNERS: RESTORED FULL-SIZE LEFT & RIGHT GRAPHICS
========================================================= */

/* 1. RESTORE RIGHT GRAPHIC ON TITLE BANNERS (421PX HEIGHT ON DESKTOP) */
picture.hero-banner-side-graphic.hero-banner-graphic-right,
picture.hero-banner-graphic-right,
.hero-banner-side-graphic.hero-banner-graphic-right,
.hero-banner-graphic-right,
.right-decor {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    height: 421px !important;
    min-height: 421px !important;
    max-height: 421px !important;
    width: auto !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    z-index: 5 !important;
}

picture.hero-banner-graphic-right img,
.hero-banner-graphic-right img,
.right-decor img {
    height: 421px !important;
    min-height: 421px !important;
    max-height: 421px !important;
    width: auto !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    display: block !important;
}

/* 2. LEFT GRAPHIC: FULL HEIGHT AT BOTTOM LEFT */
picture.hero-banner-side-graphic.hero-banner-graphic-left,
picture.hero-banner-graphic-left,
.hero-banner-side-graphic.hero-banner-graphic-left,
.hero-banner-graphic-left,
.left-decor {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    object-position: left bottom !important;
    transform: none !important;
    translate: none !important;
    z-index: 5 !important;
}

picture.hero-banner-graphic-left img,
.hero-banner-graphic-left img,
.left-decor img {
    height: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    object-position: left bottom !important;
    display: block !important;
}

/* =========================================================
   ABOUT US TITLE BANNER: COLOR #C7BDA2 & REMOVE SCRUNCH TEXTURE
========================================================= */
html body .about-hero-banner,
html body .page-about .about-hero-banner,
html body .page-about-us .about-hero-banner,
body .about-hero-banner,
.about-hero-banner {
    background-color: #C7BDA2 !important;
    background: #C7BDA2 !important;
}

html body .about-hero-banner::before,
html body .page-about .about-hero-banner::before,
html body .page-about-us .about-hero-banner::before,
body .about-hero-banner::before,
.about-hero-banner::before {
    display: none !important;
    background-image: none !important;
    content: none !important;
}

/* =========================================================
   METHODOLOGY PAGE SECTION 1: CONFINED TO MAX 1200PX CENTERED
========================================================= */
.page-methodology .section-methodology-evidence .container,
.section-methodology-evidence .container {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

.page-methodology .evidence-grid,
.section-methodology-evidence .evidence-grid {
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* =========================================================
   METHODOLOGY PAGE: PILLAR TITLES (LEARN, PRACTISE, CONSOLIDATE) ROCK SALT FONT
========================================================= */
html body .page-methodology .pillar-title,
html body .page-methodology .title-learn,
html body .page-methodology .title-practise,
html body .page-methodology .title-consolidate,
body .pillar-title,
.pillar-title,
.title-learn,
.title-practise,
.title-consolidate {
    font-family: 'Rock Salt', cursive !important;
}

/* =========================================================
   TITLE BANNER LEFT GRAPHIC: MAX-HEIGHT 200PX & BOTTOM LEFT ALIGNMENT
========================================================= */
html body .hero-banner-side-graphic.hero-banner-graphic-left,
html body .hero-banner-graphic-left,
body .hero-banner-graphic-left,
.hero-banner-side-graphic.hero-banner-graphic-left,
.hero-banner-graphic-left,
.left-decor {
    bottom: 0 !important;
    top: auto !important;
    max-height: 200px !important;
    object-position: left bottom !important;
}

/* =========================================================
   MOBILE TITLE BANNERS: 141PX HEIGHT & MOBILE GRAPHIC STYLING
========================================================= */
@media (max-width: 991px) {
    html body .about-hero-banner,
    html body .methodology-hero-banner,
    html body .resources-hero-banner,
    html body .policy-hero-banner,
    html body .page-about .about-hero-banner,
    html body .page-about-us .about-hero-banner,
    html body .page-methodology .methodology-hero-banner,
    html body .page-resources .resources-hero-banner,
    html body .page-articles .policy-hero-banner,
    body .about-hero-banner,
    body .methodology-hero-banner,
    body .resources-hero-banner,
    body .policy-hero-banner,
    .about-hero-banner,
    .methodology-hero-banner,
    .resources-hero-banner,
    .policy-hero-banner {
        height: 141px !important;
        min-height: 141px !important;
        max-height: 141px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    picture.hero-banner-side-graphic,
    picture.hero-banner-graphic-left,
    picture.hero-banner-graphic-right,
    .hero-banner-side-graphic,
    .hero-banner-side-graphic img {
        height: 100% !important;
        max-height: 141px !important;
        width: auto !important;
        display: block !important;
    }

    picture.hero-banner-graphic-left,
    picture.hero-banner-graphic-left img,
    .hero-banner-graphic-left,
    .hero-banner-graphic-left img,
    .mobile-banner-graphic.hero-banner-graphic-left,
    .left-decor,
    .left-decor img {
        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        right: auto !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        width: auto !important;
        object-fit: contain !important;
        object-position: left bottom !important;
        transform: none !important;
        translate: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    picture.hero-banner-graphic-right,
    picture.hero-banner-graphic-right img,
    .hero-banner-graphic-right,
    .hero-banner-graphic-right img,
    .mobile-banner-graphic.hero-banner-graphic-right,
    .right-decor,
    .right-decor img {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        height: 141px !important;
        min-height: 141px !important;
        max-height: 141px !important;
        width: auto !important;
        object-fit: contain !important;
        object-position: right bottom !important;
        transform: none !important;
        translate: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .about-hero-banner h1,
    html body .about-hero-title,
    html body .methodology-hero-banner h1,
    html body .resources-hero-banner h1,
    html body .policy-hero-banner h1,
    html body .policy-hero-title,
    .about-hero-banner h1,
    .about-hero-title,
    .methodology-hero-banner h1,
    .resources-hero-banner h1,
    .policy-hero-banner h1,
    .policy-hero-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
        margin: 0 0 4px 0 !important;
    }
}

/* =========================================================
   ALL 4 TITLE BANNERS DESKTOP RIGHT GRAPHIC: EXACTLY 421PX HEIGHT
========================================================= */
@media (min-width: 992px) {
    html body .page-about .hero-banner-graphic-right,
    html body .page-about picture.hero-banner-graphic-right,
    html body .page-about-us .hero-banner-graphic-right,
    html body .page-about-us picture.hero-banner-graphic-right,
    html body .page-methodology .hero-banner-graphic-right,
    html body .page-methodology picture.hero-banner-graphic-right,
    html body .page-resources .hero-banner-graphic-right,
    html body .page-resources picture.hero-banner-graphic-right,
    html body .page-articles .hero-banner-graphic-right,
    html body .page-articles picture.hero-banner-graphic-right,
    html body .about-hero-banner .hero-banner-graphic-right,
    html body .methodology-hero-banner .hero-banner-graphic-right,
    html body .resources-hero-banner .hero-banner-graphic-right,
    html body .policy-hero-banner .hero-banner-graphic-right,
    html body picture.hero-banner-graphic-right,
    html body .hero-banner-graphic-right,
    .hero-banner-graphic-right {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        top: 0 !important;
        height: 421px !important;
        min-height: 421px !important;
        max-height: 421px !important;
        width: auto !important;
        object-fit: contain !important;
        object-position: right bottom !important;
    }

    html body .page-about .hero-banner-graphic-right img,
    html body .page-about-us .hero-banner-graphic-right img,
    html body .page-methodology .hero-banner-graphic-right img,
    html body .page-resources .hero-banner-graphic-right img,
    html body .page-articles .hero-banner-graphic-right img,
    html body .policy-hero-banner .hero-banner-graphic-right img,
    html body picture.hero-banner-graphic-right img,
    html body .hero-banner-graphic-right img {
        height: 421px !important;
        min-height: 421px !important;
        max-height: 421px !important;
        width: auto !important;
        object-fit: contain !important;
        object-position: right bottom !important;
        display: block !important;
    }
}

/* =========================================================
   ARTICLES PAGE DESKTOP RIGHT TITLE GRAPHIC: VERTICALLY CENTERED
========================================================= */
@media (min-width: 992px) {
    html body .page-articles .hero-banner-graphic-right,
    html body .page-articles picture.hero-banner-graphic-right,
    html body .policy-hero-banner .hero-banner-graphic-right,
    html body .policy-hero-banner picture.hero-banner-graphic-right,
    .page-articles .hero-banner-graphic-right,
    .policy-hero-banner .hero-banner-graphic-right {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        object-position: right center !important;
    }

    html body .page-articles .hero-banner-graphic-right img,
    html body .policy-hero-banner .hero-banner-graphic-right img {
        object-position: right center !important;
    }
}

/* =========================================================
   STRICT HIDING OF DESKTOP GRAPHICS ON MOBILE & VICE-VERSA
========================================================= */
@media (max-width: 991px) {
    html body img.desktop-banner-graphic,
    html body .desktop-banner-graphic,
    html body img[src*="title_banner_graphic_left.svg"]:not([src*="mobile"]),
    html body img[src*="title_banner_graphic_right.svg"]:not([src*="mobile"]),
    body img.desktop-banner-graphic,
    body .desktop-banner-graphic,
    img.desktop-banner-graphic,
    .desktop-banner-graphic {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }

    html body img.mobile-banner-graphic,
    html body .mobile-banner-graphic,
    body img.mobile-banner-graphic,
    body .mobile-banner-graphic,
    img.mobile-banner-graphic,
    .mobile-banner-graphic {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (min-width: 992px) {
    html body img.mobile-banner-graphic,
    html body .mobile-banner-graphic,
    html body img[src*="mobile"],
    body img.mobile-banner-graphic,
    body .mobile-banner-graphic,
    img.mobile-banner-graphic,
    .mobile-banner-graphic {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }

    html body img.desktop-banner-graphic,
    html body .desktop-banner-graphic,
    body img.desktop-banner-graphic,
    body .desktop-banner-graphic,
    img.desktop-banner-graphic,
    .desktop-banner-graphic {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* =========================================================
   FAQS MAIN SECTION: BOTTOM LEFT CORNER GRAPHIC (675PX DESKTOP, HIDDEN ON MOBILE)
========================================================= */
html body .faq-main-section,
body .faq-main-section,
.faq-main-section {
    position: relative !important;
    overflow: hidden !important;
}

html body .faq-main-section::after,
html body .faq-main-section::before,
.faq-main-section::after,
.faq-main-section::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

@media (min-width: 992px) {
    html body .faq-bottom-left-graphic,
    html body img.faq-bottom-left-graphic,
    body .faq-bottom-left-graphic,
    body img.faq-bottom-left-graphic,
    .faq-bottom-left-graphic,
    img.faq-bottom-left-graphic {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 675px !important;
        min-height: 675px !important;
        max-height: 675px !important;
        width: auto !important;
        object-fit: contain !important;
        object-position: left bottom !important;
        pointer-events: none !important;
        z-index: 1 !important;
        transform: none !important;
        translate: none !important;
    }
}

@media (max-width: 991px) {
    html body .faq-bottom-left-graphic,
    html body img.faq-bottom-left-graphic,
    body .faq-bottom-left-graphic,
    body img.faq-bottom-left-graphic,
    .faq-bottom-left-graphic,
    img.faq-bottom-left-graphic {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }
}

/* =========================================================
   ABOUT US PAGE MOBILE STACKING LAYOUT OVERRIDES (MATCHING FIGMA MOBILE SPEC)
========================================================= */
@media (max-width: 991px) {
    /* Section 1: Our Story */
    html body .page-about .section-about-story,
    body .page-about .section-about-story,
    .page-about .section-about-story {
        padding-top: 30px !important;
        padding-bottom: 40px !important;
    }

    html body .page-about .story-grid-row-1,
    body .page-about .story-grid-row-1,
    .page-about .story-grid-row-1 {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 0 !important;
    }

    html body .page-about .story-grid-row-1 .story-img-card,
    body .page-about .story-grid-row-1 .story-img-card,
    .page-about .story-grid-row-1 .story-img-card {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 24px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    html body .page-about .story-grid-row-1 .story-img-card img,
    body .page-about .story-grid-row-1 .story-img-card img,
    .page-about .story-grid-row-1 .story-img-card img {
        width: 100% !important;
        height: auto !important;
        max-height: 240px !important;
        object-fit: cover !important;
        display: block !important;
    }

    html body .page-about .story-subtitle,
    body .page-about .story-subtitle,
    .page-about .story-subtitle {
        order: 2 !important;
        font-size: 14px !important;
        color: #23A9BC !important;
        text-align: left !important;
        margin-bottom: 6px !important;
        font-weight: 700 !important;
    }

    html body .page-about .story-main-title,
    body .page-about .story-main-title,
    .page-about .story-main-title {
        order: 3 !important;
        font-size: 30px !important;
        line-height: 1.25 !important;
        text-align: left !important;
        margin-bottom: 20px !important;
        color: #1C3D4E !important;
    }

    html body .page-about .story-grid-row-1 .story-text-block,
    body .page-about .story-grid-row-1 .story-text-block,
    .page-about .story-grid-row-1 .story-text-block {
        order: 4 !important;
    }

    html body .page-about .story-grid-row-2,
    body .page-about .story-grid-row-2,
    .page-about .story-grid-row-2 {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 20px !important;
    }

    html body .page-about .story-grid-row-2 .story-img-card,
    body .page-about .story-grid-row-2 .story-img-card,
    .page-about .story-grid-row-2 .story-img-card {
        display: none !important;
    }

    html body .page-about .story-grid-row-2 .story-text-block,
    body .page-about .story-grid-row-2 .story-text-block,
    .page-about .story-grid-row-2 .story-text-block {
        order: 1 !important;
    }

    html body .page-about .story-text-block p,
    body .page-about .story-text-block p,
    .page-about .story-text-block p {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
        color: #1C3D4E !important;
        text-align: left !important;
        margin-bottom: 16px !important;
    }

    html body .page-about .about-mv-row,
    body .page-about .about-mv-row,
    .page-about .about-mv-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-top: 24px !important;
    }

    html body .page-about .mv-card,
    body .page-about .mv-card,
    .page-about .mv-card {
        width: 100% !important;
        border-radius: 12px !important;
        padding: 24px 20px !important;
        text-align: left !important;
    }

    html body .page-about .mv-card h3,
    body .page-about .mv-card h3,
    .page-about .mv-card h3 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
        text-align: left !important;
    }

    html body .page-about .mv-card p,
    body .page-about .mv-card p,
    .page-about .mv-card p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    /* Section 2: From Vision to Impact */
    html body .page-about .section-about-impact,
    body .page-about .section-about-impact,
    .page-about .section-about-impact {
        padding-top: 120px !important;
        padding-bottom: 40px !important;
    }

    html body .page-about .impact-header-center,
    body .page-about .impact-header-center,
    .page-about .impact-header-center {
        margin-bottom: 28px !important;
        text-align: center !important;
    }

    html body .page-about .impact-subtitle,
    body .page-about .impact-subtitle,
    .page-about .impact-subtitle {
        font-size: 13px !important;
        text-align: center !important;
        color: #23A9BC !important;
    }

    html body .page-about .impact-title,
    body .page-about .impact-title,
    .page-about .impact-title {
        font-size: 26px !important;
        text-align: center !important;
    }

    html body .page-about .impact-cards-grid,
    body .page-about .impact-cards-grid,
    .page-about .impact-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
    }

    html body .page-about .impact-card,
    body .page-about .impact-card,
    .page-about .impact-card {
        width: 100% !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        text-align: left !important;
    }

    html body .page-about .impact-card-content,
    body .page-about .impact-card-content,
    .page-about .impact-card-content {
        padding: 24px 18px !important;
        text-align: left !important;
    }

    html body .page-about .impact-card h3,
    body .page-about .impact-card h3,
    .page-about .impact-card h3 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
        text-align: left !important;
    }

    html body .page-about .impact-card p,
    body .page-about .impact-card p,
    .page-about .impact-card p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
        text-align: left !important;
    }

    html body .page-about .impact-card strong,
    body .page-about .impact-card strong,
    .page-about .impact-card strong {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    html body .page-about .impact-btn-wrap,
    body .page-about .impact-btn-wrap,
    .page-about .impact-btn-wrap {
        margin-top: 16px !important;
        margin-bottom: 8px !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    html body .page-about .impact-card-img,
    body .page-about .impact-card-img,
    .page-about .impact-card-img {
        width: 100% !important;
        height: auto !important;
        max-height: 200px !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Section 3: Our Values */
    html body .page-about .section-about-values,
    body .page-about .section-about-values,
    .page-about .section-about-values {
        padding-top: 120px !important;
        padding-bottom: 50px !important;
    }

    html body .page-about .values-header-center,
    body .page-about .values-header-center,
    .page-about .values-header-center {
        margin-bottom: 24px !important;
        text-align: center !important;
    }

    html body .page-about .values-title,
    body .page-about .values-title,
    .page-about .values-title {
        font-size: 30px !important;
        text-align: center !important;
        color: #ffffff !important;
    }

    html body .page-about .values-notes-grid,
    body .page-about .values-notes-grid,
    .page-about .values-notes-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 24px auto 0 auto !important;
    }

    html body .page-about .sticky-note-img-wrap,
    body .page-about .sticky-note-img-wrap,
    .page-about .sticky-note-img-wrap {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    html body .page-about .values-note-svg,
    body .page-about .values-note-svg,
    .page-about .values-note-svg {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

/* =========================================================
   ABOUT US PAGE: FROM VISION TO IMPACT CARDS ROUNDED CORNERS (24PX)
========================================================= */
html body .page-about .impact-card,
body .page-about .impact-card,
.page-about .impact-card,
.impact-card {
    border-radius: 24px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 24px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important;
}

html body .page-about .impact-card-img,
html body .page-about .impact-card img,
body .page-about .impact-card-img,
body .page-about .impact-card img,
.impact-card-img,
.impact-card img {
    overflow: hidden !important;
    display: block !important;
}

/* Card 1 (Our Challenge) & Card 3 (Our Impact): Image at Bottom */
html body .page-about .impact-card.card-gold .impact-card-img,
html body .page-about .impact-card.card-gold .impact-card-img img,
html body .page-about .impact-card.card-teal .impact-card-img,
html body .page-about .impact-card.card-teal .impact-card-img img,
.impact-card.card-gold .impact-card-img,
.impact-card.card-teal .impact-card-img {
    border-radius: 0 0 24px 24px !important;
}

/* Card 2 (Our Motivation & Solution): Image at Top */
html body .page-about .impact-card.card-orange .impact-card-img,
html body .page-about .impact-card.card-orange .impact-card-img img,
.impact-card.card-orange .impact-card-img {
    border-radius: 24px 24px 0 0 !important;
}

/* =========================================================
   ABOUT US PAGE: HIDE WAVE DIVIDER ABOVE FOOTER
========================================================= */
html body .page-about .section-about-values .wave-divider-box,
body .page-about .section-about-values .wave-divider-box,
.page-about .section-about-values .wave-divider-box,
.page-about .wave-divider-box {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
}

/* =========================================================
   METHODOLOGY PAGE MOBILE STACKING LAYOUT OVERRIDES (MATCHING FIGMA MOBILE SPEC)
   - REMOVE ALL GRAPHICS IN THE MAIN SECTION ONLY FOR MOBILE VIEW
   - STACK CONTENT CLEANLY IN 1 COLUMN
========================================================= */
@media (max-width: 991px) {
    /* Hide all decorative floating/side graphics & circuit track lines in Methodology main section */
    html body .page-methodology .pillar-shape-col,
    html body .page-methodology .straight-white-line,
    html body .page-methodology .graphic-arc-frame,
    html body .page-methodology .white-semicircle-arc,
    html body .page-methodology .svg-graphic-donut,
    html body .page-methodology .svg-graphic-semicircle,
    html body .page-methodology .shape-split-circle,
    body .page-methodology .pillar-shape-col,
    .page-methodology .pillar-shape-col,
    .page-methodology .straight-white-line,
    .page-methodology .graphic-arc-frame,
    .page-methodology .white-semicircle-arc,
    .page-methodology .svg-graphic-donut,
    .page-methodology .svg-graphic-semicircle,
    .page-methodology .shape-split-circle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Section 1: Evidence */
    html body .page-methodology .section-methodology-evidence,
    body .page-methodology .section-methodology-evidence,
    .page-methodology .section-methodology-evidence {
        padding-top: 30px !important;
        padding-bottom: 40px !important;
    }

    html body .page-methodology .evidence-grid,
    body .page-methodology .evidence-grid,
    .page-methodology .evidence-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    html body .page-methodology .evidence-img-card,
    body .page-methodology .evidence-img-card,
    .page-methodology .evidence-img-card {
        order: 1 !important;
        width: 100% !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    }

    html body .page-methodology .evidence-img-card img,
    body .page-methodology .evidence-img-card img,
    .page-methodology .evidence-img-card img {
        width: 100% !important;
        height: auto !important;
        max-height: 240px !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 16px !important;
    }

    html body .page-methodology .evidence-text-block,
    body .page-methodology .evidence-text-block,
    .page-methodology .evidence-text-block {
        order: 2 !important;
        width: 100% !important;
        text-align: left !important;
    }

    html body .page-methodology .evidence-text-block h2,
    body .page-methodology .evidence-text-block h2,
    .page-methodology .evidence-text-block h2 {
        font-size: 22px !important;
        line-height: 1.65 !important;
        text-align: left !important;
        margin-bottom: 16px !important;
        color: #1C3D4E !important;
    }

    html body .page-methodology .evidence-text-block h2 .script-highlight,
    html body .page-methodology .evidence-text-block h2 .script-highlight-block,
    body .page-methodology .evidence-text-block h2 .script-highlight,
    .page-methodology .evidence-text-block h2 .script-highlight {
        font-size: 20px !important;
        line-height: 1.65 !important;
    }

    html body .page-methodology .evidence-text-block p,
    body .page-methodology .evidence-text-block p,
    .page-methodology .evidence-text-block p {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
        color: #1C3D4E !important;
        text-align: left !important;
    }

    /* Section 2: The 3 Methodology Pillars */
    html body .page-methodology .section-methodology-pillars,
    body .page-methodology .section-methodology-pillars,
    .page-methodology .section-methodology-pillars {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }

    html body .page-methodology .pillars-circuit-wrapper,
    body .page-methodology .pillars-circuit-wrapper,
    .page-methodology .pillars-circuit-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    html body .page-methodology .pillar-row,
    html body .page-methodology .pillar-row-learn,
    html body .page-methodology .pillar-row-practise,
    html body .page-methodology .pillar-row-consolidate,
    body .page-methodology .pillar-row,
    .page-methodology .pillar-row,
    .page-methodology .pillar-row-practise {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        translate: none !important;
        border: none !important;
    }

    html body .page-methodology .pillar-content-col-learn,
    html body .page-methodology .pillar-content-col-practise,
    html body .page-methodology .pillar-content-col-consolidate,
    body .page-methodology .pillar-content-col-learn,
    body .page-methodology .pillar-content-col-practise,
    body .page-methodology .pillar-content-col-consolidate,
    .page-methodology .pillar-content-col-learn,
    .page-methodology .pillar-content-col-practise,
    .page-methodology .pillar-content-col-consolidate {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        translate: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    html body .page-methodology .pillar-title,
    html body .page-methodology .title-learn,
    html body .page-methodology .title-practise,
    html body .page-methodology .title-consolidate,
    body .page-methodology .pillar-title,
    .page-methodology .pillar-title {
        font-size: 32px !important;
        font-family: 'Rock Salt', cursive !important;
        color: #23A9BC !important;
        margin-bottom: 12px !important;
        text-align: left !important;
    }

    html body .page-methodology .pillar-desc,
    body .page-methodology .pillar-desc,
    .page-methodology .pillar-desc {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
        color: #1C3D4E !important;
        margin-bottom: 16px !important;
        text-align: left !important;
    }

    html body .page-methodology .pillar-methodology-card,
    body .page-methodology .pillar-methodology-card,
    .page-methodology .pillar-methodology-card {
        background-color: #E6EFF2 !important;
        border-radius: 14px !important;
        padding: 20px 18px !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 16px !important;
        box-shadow: none !important;
    }

    html body .page-methodology .pillar-methodology-card p,
    body .page-methodology .pillar-methodology-card p,
    .page-methodology .pillar-methodology-card p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        color: #1C3D4E !important;
        text-align: center !important;
        margin-bottom: 16px !important;
    }

    html body .page-methodology .pillar-btn-group,
    body .page-methodology .pillar-btn-group,
    .page-methodology .pillar-btn-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    html body .page-methodology .btn-pillar-teal,
    html body .page-methodology .btn-pillar-yellow,
    body .page-methodology .btn-pillar-teal,
    body .page-methodology .btn-pillar-yellow,
    .page-methodology .btn-pillar-teal,
    .page-methodology .btn-pillar-yellow {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        padding: 12px 16px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }

    /* Methodology Bottom Difference Banner */
    html body .page-methodology .methodology-difference-banner,
    body .page-methodology .methodology-difference-banner,
    .page-methodology .methodology-difference-banner {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        translate: none !important;
        background-color: #23A9BC !important;
        border-radius: 12px !important;
        padding: 24px 20px !important;
        text-align: center !important;
        margin-top: 40px !important;
        margin-bottom: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        clear: both !important;
    }

    html body .page-methodology .methodology-difference-banner .banner-img-col,
    body .page-methodology .methodology-difference-banner .banner-img-col,
    .page-methodology .methodology-difference-banner .banner-img-col {
        display: none !important;
    }

    html body .page-methodology .methodology-difference-banner .banner-text-col,
    body .page-methodology .methodology-difference-banner .banner-text-col,
    .page-methodology .methodology-difference-banner .banner-text-col {
        width: 100% !important;
        text-align: center !important;
    }

    html body .page-methodology .methodology-difference-banner .banner-text-col h2,
    body .page-methodology .methodology-difference-banner .banner-text-col h2,
    .page-methodology .methodology-difference-banner .banner-text-col h2 {
        font-size: 18px !important;
        color: #ffffff !important;
        text-align: center !important;
        margin-bottom: 16px !important;
        line-height: 1.6 !important;
    }

    html body .page-methodology .btn-read-reviews,
    body .page-methodology .btn-read-reviews,
    .page-methodology .btn-read-reviews {
        background-color: #7B76CD !important;
        color: #ffffff !important;
        padding: 10px 24px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        display: inline-block !important;
    }
}

/* =========================================================
   DESKTOP METHODOLOGY EVIDENCE HEADLINE: SMALLER SCRIPT HIGHLIGHT & INCREASED LINE HEIGHT
========================================================= */
@media (min-width: 992px) {
    html body .page-methodology .evidence-text-block h2,
    body .page-methodology .evidence-text-block h2,
    .page-methodology .evidence-text-block h2 {
        line-height: 1.65 !important;
    }

    html body .page-methodology .evidence-text-block h2 .script-highlight,
    html body .page-methodology .evidence-text-block h2 .script-highlight-block,
    body .page-methodology .evidence-text-block h2 .script-highlight,
    .page-methodology .evidence-text-block h2 .script-highlight {
        font-size: 30px !important;
        line-height: 1.65 !important;
    }
}

/* =========================================================
   FREE RESOURCES PAGE MOBILE LAYOUT OVERRIDES (MATCHING FIGMA MOBILE SPEC)
   - FLOATING PURPLE SEARCH TRIGGER BUTTON ON TOP RIGHT ABOVE CARDS
   - OFF-CANVAS SLIDE-IN DRAWER FROM THE RIGHT FOR SIDEBAR (FILTER & SEARCH)
   - 4 FEATURE CARDS VERTICALLY STACKED (1 COLUMN)
   - GOT AN IDEA PURPLE BANNER FORMATTED CLEANLY
========================================================= */
.mobile-resources-search-wrap,
.mobile-resources-search-btn,
.drawer-close-btn,
.resources-drawer-overlay {
    display: none;
}

@media (max-width: 991px) {
    /* Mobile Search Trigger Button */
    .mobile-resources-search-wrap {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
        margin-bottom: 16px !important;
        padding-right: 4px !important;
    }

    .mobile-resources-search-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        background-color: #87246A !important;
        color: #ffffff !important;
        font-size: 18px !important;
        border: none !important;
        cursor: pointer !important;
        box-shadow: 0 6px 16px rgba(135, 36, 106, 0.35) !important;
        transition: transform 0.2s ease, background-color 0.2s ease !important;
    }

    .mobile-resources-search-btn:active {
        transform: scale(0.95) !important;
    }

    /* Off-Canvas Backdrop Overlay */
    .resources-drawer-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(3px) !important;
        z-index: 99998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    .resources-drawer-overlay.active-overlay {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Off-Canvas Slide-In Drawer Sidebar */
    html body .page-resources .resources-sidebar-card,
    body .page-resources .resources-sidebar-card,
    .page-resources .resources-sidebar-card,
    .resources-sidebar-card {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        left: auto !important;
        width: 85% !important;
        max-width: 360px !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        padding: 30px 24px 40px 24px !important;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25) !important;
        transition: right 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
        border-radius: 20px 0 0 20px !important;
        border: 2px solid #23A9BC !important;
        margin: 0 !important;
    }

    html body .page-resources .resources-sidebar-card.active-drawer,
    body .page-resources .resources-sidebar-card.active-drawer,
    .page-resources .resources-sidebar-card.active-drawer,
    .resources-sidebar-card.active-drawer {
        right: 0 !important;
    }

    /* Drawer Header & Close Button (X) */
    .drawer-close-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background-color: #87246A !important;
        color: #ffffff !important;
        font-size: 16px !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 10 !important;
        box-shadow: 0 4px 10px rgba(135, 36, 106, 0.3) !important;
    }

    /* Layout Grid: Single Column */
    html body .page-resources .resources-layout-grid,
    body .page-resources .resources-layout-grid,
    .page-resources .resources-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    html body .page-resources .resources-content-area,
    body .page-resources .resources-content-area,
    .page-resources .resources-content-area {
        width: 100% !important;
    }

    /* 4 Feature Cards Grid: Vertical Stack */
    html body .page-resources .feature-cards-grid,
    body .page-resources .feature-cards-grid,
    .page-resources .feature-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    html body .page-resources .res-card,
    body .page-resources .res-card,
    .page-resources .res-card {
        width: 100% !important;
        height: 120px !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        padding: 16px !important;
    }

    /* "Got an IDEA?" Callout Banner on Mobile */
    html body .page-resources .resources-idea-banner,
    body .page-resources .resources-idea-banner,
    .page-resources .resources-idea-banner {
        background-color: #87246A !important;
        border-radius: 16px !important;
        padding: 30px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-top: 30px !important;
        grid-template-columns: 1fr !important;
    }

    html body .page-resources .resources-idea-banner .idea-img-col,
    body .page-resources .resources-idea-banner .idea-img-col,
    .page-resources .resources-idea-banner .idea-img-col {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        display: flex !important;
        justify-content: center !important;
    }

    html body .page-resources .resources-idea-banner .idea-img-col img,
    body .page-resources .resources-idea-banner .idea-img-col img,
    .page-resources .resources-idea-banner .idea-img-col img {
        max-height: 200px !important;
        width: auto !important;
        display: block !important;
    }

    html body .page-resources .resources-idea-banner .idea-text-col,
    body .page-resources .resources-idea-banner .idea-text-col,
    .page-resources .resources-idea-banner .idea-text-col {
        order: 2 !important;
        width: 100% !important;
        text-align: center !important;
    }

    html body .page-resources .resources-idea-banner .idea-text-col h2,
    body .page-resources .resources-idea-banner .idea-text-col h2,
    .page-resources .resources-idea-banner .idea-text-col h2 {
        font-size: 24px !important;
        color: #ffffff !important;
        text-align: center !important;
        margin-bottom: 12px !important;
    }

    html body .page-resources .resources-idea-banner .idea-text-col p,
    body .page-resources .resources-idea-banner .idea-text-col p,
    .page-resources .resources-idea-banner .idea-text-col p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        color: #ffffff !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    html body .page-resources .btn-get-in-touch,
    body .page-resources .btn-get-in-touch,
    .page-resources .btn-get-in-touch {
        background-color: #F7BA2A !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        padding: 12px 28px !important;
        text-decoration: none !important;
        display: inline-block !important;
    }
}

/* =========================================================
   FREE RESOURCES IDEA BANNER: IMAGE STYLING FOR RESOURCES_IDEA.PNG (DESKTOP & MOBILE)
========================================================= */
html body .page-resources .idea-img-col img,
body .page-resources .idea-img-col img,
.page-resources .idea-img-col img,
.idea-img-col img {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    max-height: 250px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15)) !important;
    display: block !important;
    margin: 0 auto !important;
}

/* =========================================================
   SINGLE RESOURCE PAGE MOBILE STACKING LAYOUT OVERRIDES (MATCHING FIGMA MOBILE SPEC)
   - FLOATING PURPLE SEARCH TRIGGER BUTTON ON TOP RIGHT ABOVE ARTICLE
   - OFF-CANVAS SLIDE-IN DRAWER FROM THE RIGHT FOR SIDEBAR (FILTER & SEARCH)
   - ARTICLE CONTENT FORMATTED CLEANLY IN 1 COLUMN
========================================================= */
@media (max-width: 991px) {
    /* Off-Canvas Slide-In Drawer Sidebar for Single Resource Page */
    html body .page-resource-single .single-res-sidebar-card,
    body .page-resource-single .single-res-sidebar-card,
    .page-resource-single .single-res-sidebar-card,
    .single-res-sidebar-card {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        left: auto !important;
        width: 85% !important;
        max-width: 360px !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        padding: 30px 24px 40px 24px !important;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25) !important;
        transition: right 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
        border-radius: 20px 0 0 20px !important;
        border: 2px solid #23A9BC !important;
        margin: 0 !important;
    }

    html body .page-resource-single .single-res-sidebar-card.active-drawer,
    body .page-resource-single .single-res-sidebar-card.active-drawer,
    .page-resource-single .single-res-sidebar-card.active-drawer,
    .single-res-sidebar-card.active-drawer {
        right: 0 !important;
    }

    /* Layout Grid: Single Column */
    html body .page-resource-single .single-res-layout-grid,
    body .page-resource-single .single-res-layout-grid,
    .page-resource-single .single-res-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    html body .page-resource-single .single-res-article-card,
    body .page-resource-single .single-res-article-card,
    .page-resource-single .single-res-article-card {
        width: 100% !important;
        padding: 24px 18px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    html body .page-resource-single .article-main-title,
    body .page-resource-single .article-main-title,
    .page-resource-single .article-main-title {
        font-size: 26px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    html body .page-resource-single .article-author-byline,
    body .page-resource-single .article-author-byline,
    .page-resource-single .article-author-byline {
        font-size: 13.5px !important;
        margin-bottom: 20px !important;
    }

    html body .page-resource-single .article-highlight-box,
    body .page-resource-single .article-highlight-box,
    .page-resource-single .article-highlight-box {
        background-color: #87246A !important;
        border-radius: 12px !important;
        padding: 20px 18px !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin-bottom: 24px !important;
    }

    html body .page-resource-single .article-highlight-box p,
    body .page-resource-single .article-highlight-box p,
    .page-resource-single .article-highlight-box p {
        color: #ffffff !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin: 0 !important;
    }

    html body .page-resource-single .article-media-box,
    body .page-resource-single .article-media-box,
    .page-resource-single .article-media-box {
        width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin: 24px 0 !important;
    }

    html body .page-resource-single .article-media-box img,
    body .page-resource-single .article-media-box img,
    .page-resource-single .article-media-box img {
        width: 100% !important;
        height: auto !important;
        max-height: 220px !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 12px !important;
    }
}

/* =========================================================
   CONTACT US PAGE MOBILE LAYOUT OVERRIDES (MATCHING FIGMA MOBILE SPEC)
   - STACK CONTACT INFO CARD & GET IN TOUCH FORM VERTICALLY
   - FORMAT APOLOGY BANNER WITH CIRCULAR ! ICON
   - STACK REPORT HERE FORM BEFORE GENERAL FAQ LIST
   - FORMAT GENERAL FAQ LIST INTO A CLEAN VERTICAL LINK LIST
========================================================= */
@media (max-width: 991px) {
    /* Section 1: Contact Top Grid */
    html body .page-contact .contact-top-grid,
    html body .page-contact-us .contact-top-grid,
    html body .section-contact-top .contact-top-grid,
    body .page-contact .contact-top-grid,
    body .page-contact-us .contact-top-grid,
    body .section-contact-top .contact-top-grid,
    .page-contact .contact-top-grid,
    .page-contact-us .contact-top-grid,
    .section-contact-top .contact-top-grid,
    .contact-top-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 24px !important;
    }

    html body .page-contact .contact-info-card,
    html body .page-contact-us .contact-info-card,
    body .page-contact .contact-info-card,
    body .page-contact-us .contact-info-card,
    .page-contact .contact-info-card,
    .page-contact-us .contact-info-card,
    .contact-info-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 36px 24px !important;
        box-sizing: border-box !important;
    }

    html body .page-contact .get-in-touch-card,
    html body .page-contact-us .get-in-touch-card,
    body .page-contact .get-in-touch-card,
    body .page-contact-us .get-in-touch-card,
    .page-contact .get-in-touch-card,
    .page-contact-us .get-in-touch-card,
    .get-in-touch-card {
        width: 100% !important;
        background-color: #ffffff !important;
        border-radius: 16px !important;
        padding: 28px 20px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
        box-sizing: border-box !important;
    }

    html body .page-contact .get-in-touch-card h3,
    html body .page-contact-us .get-in-touch-card h3,
    body .page-contact .get-in-touch-card h3,
    body .page-contact-us .get-in-touch-card h3,
    .page-contact-us .get-in-touch-card h3 {
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #1C3D4E !important;
        margin-bottom: 6px !important;
    }

    html body .page-contact .get-in-touch-card .form-subheading,
    html body .page-contact-us .get-in-touch-card .form-subheading,
    body .page-contact .get-in-touch-card .form-subheading,
    body .page-contact-us .get-in-touch-card .form-subheading,
    .page-contact-us .get-in-touch-card .form-subheading {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #87246A !important;
        margin-bottom: 20px !important;
        line-height: 1.35 !important;
    }

    /* Form Fields & Submit Button */
    html body .page-contact .contact-form input,
    html body .page-contact .contact-form textarea,
    html body .page-contact .report-form input,
    html body .page-contact .report-form textarea,
    html body .page-contact-us .contact-form input,
    html body .page-contact-us .contact-form textarea,
    html body .page-contact-us .report-form input,
    html body .page-contact-us .report-form textarea,
    body .page-contact .contact-form input,
    body .page-contact .contact-form textarea,
    body .page-contact .report-form input,
    body .page-contact .report-form textarea,
    body .page-contact-us .contact-form input,
    body .page-contact-us .contact-form textarea,
    body .page-contact-us .report-form input,
    body .page-contact-us .report-form textarea,
    .contact-form input,
    .contact-form textarea,
    .report-form input,
    .report-form textarea {
        border: 1.5px solid #C4D7DD !important;
        border-radius: 8px !important;
        padding: 12px 14px !important;
        font-size: 13.5px !important;
        color: #1C3D4E !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
        margin-bottom: 12px !important;
        font-family: inherit !important;
    }

    html body .page-contact .btn-contact-submit,
    html body .page-contact .btn-report-submit,
    html body .page-contact-us .btn-contact-submit,
    html body .page-contact-us .btn-report-submit,
    body .page-contact .btn-contact-submit,
    body .page-contact .btn-report-submit,
    body .page-contact-us .btn-contact-submit,
    body .page-contact-us .btn-report-submit,
    .btn-contact-submit,
    .btn-report-submit {
        background-color: #87246A !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        padding: 12px 24px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: none !important;
        margin-top: 8px !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    /* Section 2: Apology Banner */
    html body .page-contact .section-apology-banner,
    html body .page-contact-us .section-apology-banner,
    body .page-contact .section-apology-banner,
    body .page-contact-us .section-apology-banner,
    .page-contact .section-apology-banner,
    .page-contact-us .section-apology-banner,
    .section-apology-banner {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    html body .page-contact .apology-banner-box,
    html body .page-contact-us .apology-banner-box,
    body .page-contact .apology-banner-box,
    body .page-contact-us .apology-banner-box,
    .page-contact .apology-banner-box,
    .page-contact-us .apology-banner-box,
    .apology-banner-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        text-align: left !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    html body .page-contact .apology-banner-box .exclamation-icon,
    html body .page-contact-us .apology-banner-box .exclamation-icon,
    body .page-contact .apology-banner-box .exclamation-icon,
    body .page-contact-us .apology-banner-box .exclamation-icon,
    .apology-banner-box .exclamation-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 50% !important;
        background-color: #FF6B4A !important;
        color: #ffffff !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        flex-shrink: 0 !important;
    }

    html body .page-contact .apology-banner-box p,
    html body .page-contact-us .apology-banner-box p,
    body .page-contact .apology-banner-box p,
    body .page-contact-us .apology-banner-box p,
    .apology-banner-box p {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #1C3D4E !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* Section 3: FAQ & Report Grid */
    html body .page-contact .faq-report-grid,
    html body .page-contact-us .faq-report-grid,
    html body .section-faq-report .faq-report-grid,
    body .page-contact .faq-report-grid,
    body .page-contact-us .faq-report-grid,
    body .section-faq-report .faq-report-grid,
    .page-contact .faq-report-grid,
    .page-contact-us .faq-report-grid,
    .section-faq-report .faq-report-grid,
    .faq-report-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 24px !important;
    }

    html body .page-contact .report-form-card,
    html body .page-contact-us .report-form-card,
    html body .faq-report-grid .report-form-card,
    body .page-contact .report-form-card,
    body .page-contact-us .report-form-card,
    body .faq-report-grid .report-form-card,
    .page-contact .report-form-card,
    .page-contact-us .report-form-card,
    .report-form-card {
        order: 1 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        border-radius: 16px !important;
        padding: 28px 20px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
        box-sizing: border-box !important;
    }

    html body .page-contact .report-form-card h3,
    html body .page-contact-us .report-form-card h3,
    body .page-contact .report-form-card h3,
    body .page-contact-us .report-form-card h3,
    .report-form-card h3 {
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #1C3D4E !important;
        margin-bottom: 6px !important;
    }

    html body .page-contact .report-form-card .form-subheading,
    html body .page-contact-us .report-form-card .form-subheading,
    body .page-contact .report-form-card .form-subheading,
    body .page-contact-us .report-form-card .form-subheading,
    .report-form-card .form-subheading {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #87246A !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
    }

    html body .page-contact .faq-list-card,
    html body .page-contact-us .faq-list-card,
    html body .faq-report-grid .faq-list-card,
    body .page-contact .faq-list-card,
    body .page-contact-us .faq-list-card,
    body .faq-report-grid .faq-list-card,
    .page-contact .faq-list-card,
    .page-contact-us .faq-list-card,
    .faq-list-card {
        order: 2 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        border-radius: 16px !important;
        padding: 28px 20px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
        box-sizing: border-box !important;
    }

    html body .page-contact .faq-list-card h3,
    html body .page-contact-us .faq-list-card h3,
    body .page-contact .faq-list-card h3,
    body .page-contact-us .faq-list-card h3,
    .faq-list-card h3 {
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #1C3D4E !important;
        margin-bottom: 10px !important;
    }

    html body .page-contact .faq-list-card .faq-intro,
    html body .page-contact-us .faq-list-card .faq-intro,
    body .page-contact .faq-list-card .faq-intro,
    body .page-contact-us .faq-list-card .faq-intro,
    .faq-list-card .faq-intro {
        font-size: 13.5px !important;
        color: #5C7E8E !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }

    html body .page-contact .faq-categories-list,
    html body .page-contact-us .faq-categories-list,
    body .page-contact .faq-categories-list,
    body .page-contact-us .faq-categories-list,
    .faq-categories-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        text-align: left !important;
    }

    html body .page-contact .faq-cat-pill,
    html body .page-contact-us .faq-cat-pill,
    body .page-contact .faq-cat-pill,
    body .page-contact-us .faq-cat-pill,
    .faq-cat-pill {
        background: transparent !important;
        color: #1C3D4E !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        border: none !important;
        display: block !important;
        text-align: left !important;
        box-shadow: none !important;
        transition: color 0.2s ease !important;
    }

    html body .page-contact .faq-cat-pill:hover,
    html body .page-contact-us .faq-cat-pill:hover,
    body .page-contact .faq-cat-pill:hover,
    body .page-contact-us .faq-cat-pill:hover,
    .faq-cat-pill:hover {
        color: #87246A !important;
    }
}

/* =========================================================
   CONTACT US PAGE FORMS: COMPACT INPUT SPACING & STYLING (GET IN TOUCH & REPORT HERE)
========================================================= */
html body .page-contact .contact-form,
html body .page-contact .report-form,
html body .page-contact-us .contact-form,
html body .page-contact-us .report-form,
body .page-contact .contact-form,
body .page-contact .report-form,
.contact-form,
.report-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

html body .page-contact .form-group,
html body .page-contact-us .form-group,
body .page-contact .form-group,
body .page-contact-us .form-group,
.form-group {
    margin-bottom: 0 !important;
}

html body .page-contact .contact-form input,
html body .page-contact .contact-form textarea,
html body .page-contact .report-form input,
html body .page-contact .report-form textarea,
html body .page-contact-us .contact-form input,
html body .page-contact-us .contact-form textarea,
html body .page-contact-us .report-form input,
html body .page-contact-us .report-form textarea,
body .page-contact .contact-form input,
body .page-contact .contact-form textarea,
body .page-contact .report-form input,
body .page-contact .report-form textarea,
body .page-contact-us .contact-form input,
body .page-contact-us .contact-form textarea,
body .page-contact-us .report-form input,
body .page-contact-us .report-form textarea,
.contact-form input,
.contact-form textarea,
.report-form input,
.report-form textarea {
    border: 1.5px solid #8FAAB5 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    color: #1C3D4E !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #FAFCFD !important;
    margin-bottom: 0 !important;
    font-family: inherit !important;
}

html body .page-contact .btn-contact-submit,
html body .page-contact .btn-report-submit,
html body .page-contact-us .btn-contact-submit,
html body .page-contact-us .btn-report-submit,
body .page-contact .btn-contact-submit,
body .page-contact .btn-report-submit,
body .page-contact-us .btn-contact-submit,
body .page-contact-us .btn-report-submit,
.btn-contact-submit,
.btn-report-submit {
    background-color: #87246A !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    margin-top: 10px !important;
    margin-left: auto !important;
    width: auto !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

@media (max-width: 991px) {
    html body .page-contact .btn-contact-submit,
    html body .page-contact .btn-report-submit,
    html body .page-contact-us .btn-contact-submit,
    html body .page-contact-us .btn-report-submit,
    body .page-contact .btn-contact-submit,
    body .page-contact .btn-report-submit,
    body .page-contact-us .btn-contact-submit,
    body .page-contact-us .btn-report-submit,
    .btn-contact-submit,
    .btn-report-submit {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* =========================================================
   CONTACT US PAGE: GRAPHICS OVERRIDES (CONTACT_US_POSTIT.SVG & CONTACT_US_GRAPHIC.SVG)
========================================================= */
html body .page-contact .contact-side-graphic,
html body .page-contact-us .contact-side-graphic,
body .page-contact .contact-side-graphic,
.contact-side-graphic {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

html body .page-contact .contact-info-card,
html body .page-contact-us .contact-info-card,
body .page-contact .contact-info-card,
.contact-info-card {
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 480px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .page-contact .contact-postit-bg-img,
html body .page-contact-us .contact-postit-bg-img,
body .page-contact .contact-postit-bg-img,
.contact-postit-bg-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateX(-24px) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 15px 30px rgba(35, 169, 188, 0.2)) !important;
}

html body .page-contact .contact-info-content,
html body .page-contact-us .contact-info-content,
body .page-contact .contact-info-content,
.contact-info-content {
    position: relative !important;
    z-index: 2 !important;
    padding: 60px 45px 50px 75px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    html body .page-contact .contact-side-graphic,
    body .page-contact .contact-side-graphic,
    .contact-side-graphic {
        display: none !important;
    }

    html body .page-contact .contact-info-card,
    html body .page-contact-us .contact-info-card,
    body .page-contact .contact-info-card,
    .contact-info-card {
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto 10px auto !important;
        padding: 0 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 420px !important;
    }

    html body .page-contact .contact-postit-bg-img,
    html body .page-contact-us .contact-postit-bg-img,
    body .page-contact .contact-postit-bg-img,
    .contact-postit-bg-img {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    html body .page-contact .contact-info-content,
    html body .page-contact-us .contact-info-content,
    body .page-contact .contact-info-content,
    .contact-info-content {
        padding: 45px 25px 35px 45px !important;
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    html body .page-contact .contact-info-content h2,
    body .page-contact .contact-info-content h2,
    .contact-info-content h2 {
        font-size: 26px !important;
        line-height: 1.15 !important;
        margin-bottom: 20px !important;
    }

    html body .page-contact .info-email-link,
    body .page-contact .info-email-link,
    .info-email-link {
        font-size: 15px !important;
        word-break: break-word !important;
    }

    html body .page-contact .contact-social-circles,
    body .page-contact .contact-social-circles,
    .contact-social-circles {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        margin-top: 8px !important;
    }

    html body .page-contact .contact-social-circles a,
    body .page-contact .contact-social-circles a,
    .contact-social-circles a {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
}

/* =========================================================
   DESKTOP CONTACT US: PERFECTLY CENTERED GRID & POST-IT TEXT ALIGNMENT
========================================================= */
@media (min-width: 992px) {
    html body .page-contact .contact-top-grid,
    html body .page-contact-us .contact-top-grid,
    body .page-contact .contact-top-grid,
    .contact-top-grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 36px !important;
        width: 100% !important;
        max-width: 1050px !important;
        margin: 0 auto !important;
    }

    html body .page-contact .contact-info-card,
    html body .page-contact-us .contact-info-card,
    body .page-contact .contact-info-card,
    .contact-info-card {
        width: 490px !important;
        max-width: 490px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    html body .page-contact .get-in-touch-card,
    html body .page-contact-us .get-in-touch-card,
    body .page-contact .get-in-touch-card,
    .get-in-touch-card {
        width: 440px !important;
        max-width: 440px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* =========================================================
   CONTACT US PAGE: SCRUNCHED PAPER TEXTURE BACKGROUND OVERLAY
========================================================= */
html body .page-contact .contact-scrunch-bg,
html body .page-contact-us .contact-scrunch-bg,
body .page-contact .contact-scrunch-bg,
.contact-scrunch-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('images/scrunched_paper.png') !important;
    background-repeat: repeat !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0.3 !important;
    mix-blend-mode: multiply !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* =========================================================
   CONTACT US PAGE: PULL FAQ & REPORT HERE BOXES RIGHT UNDER APOLOGY BANNER
========================================================= */
html body .page-contact .section-apology-banner,
html body .page-contact-us .section-apology-banner,
body .page-contact .section-apology-banner,
.section-apology-banner {
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
}

html body .page-contact .section-faq-report,
html body .page-contact-us .section-faq-report,
body .page-contact .section-faq-report,
.section-faq-report {
    padding-top: 8px !important;
    margin-top: 0 !important;
}

html body .page-contact .faq-report-grid,
html body .page-contact-us .faq-report-grid,
body .page-contact .faq-report-grid,
.faq-report-grid {
    margin-top: 0 !important;
}

/* =========================================================
   ARTICLES PAGE: "WELCOME" TITLE IN ROCK SALT FONT
========================================================= */
html body .articles-welcome-card h1 .welcome-text,
body .articles-welcome-card h1 .welcome-text,
.articles-welcome-card h1 .welcome-text {
    font-family: 'Rock Salt', cursive !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    color: #5C7E8E !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    margin-right: 8px !important;
    letter-spacing: 0.5px !important;
}

/* =========================================================
   ARTICLES PAGE: ALL ARTICLE CARDS ROUNDED CORNERS
========================================================= */
html body .page-articles .article-card-figma,
body .page-articles .article-card-figma,
.articles-main-section .article-card-figma,
.article-card-figma {
    border-radius: 20px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 20px) !important;
}

html body .page-articles .article-thumb-wrapper,
body .page-articles .article-thumb-wrapper,
.article-thumb-wrapper {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    overflow: hidden !important;
}

html body .page-articles .article-thumb-wrapper img,
body .page-articles .article-thumb-wrapper img,
.article-thumb-wrapper img {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

html body .page-articles .articles-welcome-card,
body .page-articles .articles-welcome-card,
.articles-welcome-card {
    border-radius: 20px !important;
    overflow: hidden !important;
}

html body .page-articles .sidebar-widget,
body .page-articles .sidebar-widget,
.articles-sidebar .sidebar-widget {
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* =========================================================
   ARTICLES PAGE MOBILE VIEW: VERTICAL STACKING & SLIDE-IN DRAWER
========================================================= */
.articles-drawer-header,
.mobile-articles-search-toggle,
.articles-drawer-overlay {
    display: none !important;
}

@media (max-width: 991px) {
    /* Vertical Layout Stacking */
    html body .articles-layout-grid,
    body .articles-layout-grid,
    .articles-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    html body .articles-2x2-grid,
    body .articles-2x2-grid,
    .articles-2x2-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    html body .articles-welcome-card,
    body .articles-welcome-card,
    .articles-welcome-card {
        margin-bottom: 24px !important;
        padding: 24px 20px !important;
    }

    /* Floating Search / Filter Trigger Button */
    html body .mobile-articles-search-toggle,
    body .mobile-articles-search-toggle,
    .mobile-articles-search-toggle {
        display: flex !important;
        position: absolute !important;
        top: 15px !important;
        right: 20px !important;
        width: 44px !important;
        height: 44px !important;
        background-color: #87246A !important;
        color: #ffffff !important;
        border-radius: 50% !important;
        border: none !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        box-shadow: 0 8px 20px rgba(135, 36, 106, 0.35) !important;
        z-index: 15 !important;
        cursor: pointer !important;
    }

    /* Backdrop Overlay */
    html body .articles-drawer-overlay.active-overlay,
    body .articles-drawer-overlay.active-overlay,
    .articles-drawer-overlay.active-overlay {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(4px) !important;
        z-index: 99998 !important;
    }

    /* Slide-in Sidebar Drawer Panel */
    html body .articles-sidebar,
    body .articles-sidebar,
    .articles-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 86% !important;
        max-width: 360px !important;
        height: 100vh !important;
        background: #ffffff !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        padding: 24px 20px 40px 20px !important;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15) !important;
        transition: right 0.35s ease !important;
        box-sizing: border-box !important;
        border-radius: 20px 0 0 20px !important;
        margin: 0 !important;
    }

    html body .articles-sidebar.active-drawer,
    body .articles-sidebar.active-drawer,
    .articles-sidebar.active-drawer {
        right: 0 !important;
    }

    /* Drawer Header */
    html body .articles-drawer-header,
    body .articles-drawer-header,
    .articles-drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 20px !important;
        padding-bottom: 14px !important;
        border-bottom: 1px solid #EAEAEA !important;
    }

    html body .articles-drawer-header h3,
    body .articles-drawer-header h3,
    .articles-drawer-header h3 {
        font-family: var(--font-heading) !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #193845 !important;
        margin: 0 !important;
    }

    html body .articles-drawer-close-btn,
    body .articles-drawer-close-btn,
    .articles-drawer-close-btn {
        width: 36px !important;
        height: 36px !important;
        background-color: #87246A !important;
        color: #ffffff !important;
        border-radius: 50% !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        cursor: pointer !important;
    }

    /* Single Article Mobile Vertical Stacking & Full-Width Responsiveness */
    html body .single-article-main,
    html body .section-single-res-main,
    body .single-article-main,
    body .section-single-res-main,
    .single-article-main,
    .section-single-res-main {
        padding: 30px 0 60px 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    html body .articles-content-main,
    body .articles-content-main,
    .articles-content-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html body .single-article-card,
    html body .single-res-article-card,
    body .single-article-card,
    body .single-res-article-card,
    .single-article-card,
    .single-res-article-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 16px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    html body .article-body-text,
    body .article-body-text,
    .article-body-text {
        width: 100% !important;
        max-width: 100% !important;
        word-break: break-word !important;
    }

    html body .article-body-text p,
    body .article-body-text p,
    .article-body-text p {
        font-size: 14.5px !important;
        line-height: 1.65 !important;
    }

    html body .article-media-box,
    body .article-media-box,
    .article-media-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    html body .article-media-box img,
    body .article-media-box img,
    .article-media-box img {
        width: 100% !important;
        height: auto !important;
        max-height: 220px !important;
        object-fit: cover !important;
        display: block !important;
    }

    html body .article-footer-bar,
    body .article-footer-bar,
    .article-footer-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    html body .article-nav-cards,
    body .article-nav-cards,
    .article-nav-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
    }

    html body .article-nav-cards .nav-card,
    body .article-nav-cards .nav-card,
    .article-nav-cards .nav-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Single Article Mobile Hero Title 24px & Fluid Width Text Container */
    html body .policy-hero-banner .policy-hero-title,
    html body .single-res-hero-banner h1,
    html body .single-article-main .article-main-title,
    body .policy-hero-banner .policy-hero-title,
    body .single-res-hero-banner h1,
    body .single-article-main .article-main-title,
    .policy-hero-title,
    .article-main-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    html body .policy-hero-banner .policy-hero-title span,
    body .policy-hero-banner .policy-hero-title span,
    .policy-hero-title span {
        font-size: 20px !important;
    }

    /* Ensure container & text fluidly fit 100% of mobile screen width without clipping */
    html body .single-article-main .container,
    html body .section-single-res-main .container,
    body .single-article-main .container,
    body .section-single-res-main .container,
    .single-article-main .container,
    .section-single-res-main .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }

    html body .single-article-card,
    html body .single-res-article-card,
    html body .single-article-body,
    body .single-article-card,
    body .single-res-article-card,
    body .single-article-body,
    .single-article-card,
    .single-res-article-card,
    .single-article-body {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 14px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    html body .single-article-body h1,
    body .single-article-body h1,
    .single-article-body h1 {
        font-size: 24px !important;
        line-height: 1.25 !important;
        margin: 8px 0 16px 0 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    html body .article-body-text,
    body .article-body-text,
    .article-body-text {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
    }

    html body .article-body-text *,
    html body .single-article-body *,
    body .article-body-text *,
    body .single-article-body * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* Single Article Mobile: Center all inline images & stack text full-width */
    html body .single-article-body div,
    html body .single-article-main div,
    body .single-article-body div,
    body .single-article-main div,
    .article-image-grid-2col,
    .article-text-image-grid,
    .single-article-body div[style*="grid"],
    .single-article-body div[style*="flex"] {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 16px !important;
        box-sizing: border-box !important;
    }

    html body .single-article-body img,
    html body .single-article-main img,
    body .single-article-body img,
    body .single-article-main img,
    .single-article-body img,
    .article-body-text img,
    .article-text-image-grid img,
    .article-image-grid-2col img {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 280px !important;
        object-fit: cover !important;
        margin: 20px auto !important;
        border-radius: 12px !important;
    }

    html body .single-article-body p,
    html body .single-article-body ul,
    html body .single-article-body li,
    body .single-article-body p,
    body .single-article-body ul,
    body .single-article-body li,
    .single-article-body p,
    .single-article-body ul,
    .single-article-body li {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        box-sizing: border-box !important;
    }

    html body .article-footer-meta-block,
    body .article-footer-meta-block,
    .article-footer-meta-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 24px 0 !important;
        text-align: center !important;
    }

    html body .article-tags-wrapper,
    body .article-tags-wrapper,
    .article-tags-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    html body .article-share-wrapper,
    body .article-share-wrapper,
    .article-share-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    html body .share-social-circles,
    html body .social-share-icons,
    body .share-social-circles,
    body .social-share-icons,
    .share-social-circles,
    .social-share-icons {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
        width: 100% !important;
    }

    html body .share-social-circles a,
    html body .social-share-circle,
    body .share-social-circles a,
    body .social-share-circle,
    .share-social-circles a,
    .social-share-circle {
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background-color: #87246A !important;
        color: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        font-size: 18px !important;
        float: none !important;
        margin: 0 !important;
    }

    html body .article-prev-next-grid,
    html body .article-nav-prev-next,
    body .article-prev-next-grid,
    body .article-nav-prev-next,
    .article-prev-next-grid,
    .article-nav-prev-next {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 20px 0 30px 0 !important;
        box-sizing: border-box !important;
    }

    html body .nav-card-item,
    body .nav-card-item,
    .nav-card-item {
        padding: 18px 12px !important;
        min-height: 130px !important;
        background: #ffffff !important;
        border: 1.5px solid #E2E8F0 !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    html body .nav-card-title,
    body .nav-card-title,
    .nav-card-title {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
    }
}

/* =========================================================
   SINGLE ARTICLE FOOTER: DESKTOP & GLOBAL STYLES (FIGMA SPEC)
========================================================= */
.article-footer-meta-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #EAEAEA;
    border-bottom: 1px solid #EAEAEA;
    padding: 20px 0;
    margin: 30px 0;
    gap: 20px;
}

.article-tags-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.article-tags-wrapper .tags-label,
.article-share-wrapper .share-label {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: #193845;
}

.tags-list-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag-pill-item {
    background: #F4F9FB;
    color: #64748B;
    padding: 6px 16px;
    border-radius: 6px;
    font-family: var(--font-lexend);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #A6C8D5;
}

.article-share-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.share-social-circles,
.social-share-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.share-social-circles a,
.social-share-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #87246A;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    transition: transform 0.2s ease;
}

.share-social-circles a:hover,
.social-share-circle:hover {
    transform: translateY(-3px);
}

.article-prev-next-grid,
.article-nav-prev-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0 40px 0;
}

.nav-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 16px;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    background: #ffffff;
    text-decoration: none;
    color: #193845;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    min-height: 150px;
}

.nav-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.nav-card-badge {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    color: #87246A;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
    text-align: center;
    width: 100%;
}

.nav-card-content-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    flex-grow: 1;
}

.nav-card-content-wrap i {
    font-size: 16px;
    color: #193845;
    flex-shrink: 0;
}

.nav-card-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #193845;
    text-align: center;
    flex-grow: 1;
}

/* =========================================================
   REPORT AN ERROR: SUCCESS MODAL POPUP (FIGMA SPEC MATCH)
========================================================= */
html body .report-success-overlay,
body .report-success-overlay,
.report-success-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

html body .report-success-overlay.active,
body .report-success-overlay.active,
.report-success-overlay.active {
    display: flex !important;
}

html body .report-success-card,
body .report-success-card,
.report-success-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    max-width: 520px !important;
    width: 100% !important;
    padding: 44px 36px 36px 36px !important;
    text-align: center !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
    margin: auto !important;
    box-sizing: border-box !important;
    animation: popupScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

html body .success-check-circle,
body .success-check-circle,
.success-check-circle {
    width: 54px !important;
    height: 54px !important;
    background-color: #E2F8FC !important;
    border: 2px solid #B8EEF7 !important;
    color: #23A9BC !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin: 0 auto 20px auto !important;
}

html body .report-success-card h3,
body .report-success-card h3,
.report-success-card h3 {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    color: #193845 !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.25 !important;
}

html body .report-success-card p,
body .report-success-card p,
.report-success-card p {
    font-family: var(--font-lexend) !important;
    font-size: 15px !important;
    color: #3A5B69 !important;
    line-height: 1.55 !important;
    margin: 0 0 28px 0 !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body .btn-report-back-home,
body .btn-report-back-home,
.btn-report-back-home {
    display: inline-block !important;
    background-color: #87246A !important;
    color: #ffffff !important;
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 13px 34px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    border: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(135, 36, 106, 0.25) !important;
}

html body .btn-report-back-home:hover,
body .btn-report-back-home:hover,
.btn-report-back-home:hover {
    background-color: #6d1b55 !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   ACCOUNT PAGE MOBILE NAVIGATION & SUBPAGE BACK BUTTON (FIGMA SPEC)
   ============================================================ */

/* Mobile Back Button */
html body .account-mobile-back-btn,
body .account-mobile-back-btn,
.account-mobile-back-btn {
    display: none;
    align-items: center;
    gap: 8px;
    font-family: var(--font-lexend, 'Lexend', sans-serif) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #3A5B69 !important;
    cursor: pointer !important;
    margin-bottom: 24px !important;
    padding: 4px 0 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

html body .account-mobile-back-btn:hover,
body .account-mobile-back-btn:hover,
.account-mobile-back-btn:hover {
    color: #23A9BC !important;
    transform: translateX(-2px) !important;
}

@media (max-width: 991px) {
    /* Page background */
    html body .account-page-main,
    body .account-page-main,
    .account-page-main {
        background-color: #BACCD4 !important;
        padding: 24px 0 60px 0 !important;
    }

    html body .figma-account-grid,
    body .figma-account-grid,
    .figma-account-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    /* 1. Default Mobile View: Show ONLY Sidebar Card (Menu) */
    html body .figma-account-grid:not(.mobile-subpage-active) .figma-account-sidebar-card,
    body .figma-account-grid:not(.mobile-subpage-active) .figma-account-sidebar-card,
    .figma-account-grid:not(.mobile-subpage-active) .figma-account-sidebar-card {
        display: block !important;
        background: #FFFFFF !important;
        border-radius: 20px !important;
        padding: 32px 24px !important;
        box-shadow: 0 4px 25px rgba(25, 56, 69, 0.05) !important;
        border: none !important;
        margin-bottom: 0 !important;
    }

    html body .figma-account-grid:not(.mobile-subpage-active) .figma-account-content-card,
    body .figma-account-grid:not(.mobile-subpage-active) .figma-account-content-card,
    .figma-account-grid:not(.mobile-subpage-active) .figma-account-content-card {
        display: none !important;
    }

    /* 2. Menu Styling matching Figma Mobile Temp */
    html body .account-sidebar-title,
    body .account-sidebar-title,
    .account-sidebar-title {
        font-family: var(--font-heading, 'Lexend', sans-serif) !important;
        font-size: 32px !important;
        font-weight: 800 !important;
        color: #193845 !important;
        margin: 0 0 24px 0 !important;
        padding: 0 !important;
    }

    html body .account-nav-list,
    body .account-nav-list,
    .account-nav-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html body .account-nav-list .account-nav-link,
    body .account-nav-list .account-nav-link,
    .account-nav-list .account-nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 18px !important;
        border-radius: 10px !important;
        background-color: transparent !important;
        color: #193845 !important;
        font-family: var(--font-lexend, 'Lexend', sans-serif) !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease !important;
        min-height: auto !important;
        transform: none !important;
    }

    html body .account-nav-list .account-nav-link:hover,
    html body .account-nav-list .nav-item.active .account-nav-link,
    body .account-nav-list .nav-item.active .account-nav-link,
    .account-nav-list .nav-item.active .account-nav-link {
        background-color: #E8F3F7 !important;
        color: #193845 !important;
        transform: none !important;
        box-shadow: none !important;
    }

    html body .account-nav-list .chevron-icon,
    body .account-nav-list .chevron-icon,
    .account-nav-list .chevron-icon {
        display: inline-block !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #23A9BC !important;
    }

    /* 3. Sub-page Active State: Hide Menu, Show Content Card */
    html body .figma-account-grid.mobile-subpage-active .figma-account-sidebar-card,
    body .figma-account-grid.mobile-subpage-active .figma-account-sidebar-card,
    .figma-account-grid.mobile-subpage-active .figma-account-sidebar-card {
        display: none !important;
    }

    html body .figma-account-grid.mobile-subpage-active .figma-account-content-card,
    body .figma-account-grid.mobile-subpage-active .figma-account-content-card,
    .figma-account-grid.mobile-subpage-active .figma-account-content-card {
        display: block !important;
        background: #FFFFFF !important;
        border-radius: 20px !important;
        padding: 20px 14px !important;
        box-shadow: 0 4px 25px rgba(25, 56, 69, 0.05) !important;
        border: none !important;
    }

    html body .figma-account-grid.mobile-subpage-active .account-mobile-back-btn,
    body .figma-account-grid.mobile-subpage-active .account-mobile-back-btn,
    .figma-account-grid.mobile-subpage-active .account-mobile-back-btn {
        display: flex !important;
    }
}

/* ADD NEW CARD BUTTON MATCHING FIGMA EXACTLY */
html body .btn-add-card-toggle,
body .btn-add-card-toggle,
.btn-add-card-toggle {
    display: block !important;
    width: 100% !important;
    background-color: #23A9BC !important;
    color: #ffffff !important;
    font-family: var(--font-heading, 'Lexend', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 20px !important;
    border-radius: 8px !important;
    border: none !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    box-shadow: 0 4px 12px rgba(35, 169, 188, 0.2) !important;
}

html body .btn-add-card-toggle:hover,
body .btn-add-card-toggle:hover,
.btn-add-card-toggle:hover {
    background-color: #1e96a7 !important;
    transform: translateY(-1px) !important;
}

/* MOBILE ACCOUNT DETAILS LAYOUT (FIGMA MOBILE TEMP MATCH) */
@media (max-width: 991px) {
    html body .figma-account-grid.mobile-subpage-active .figma-account-content-card,
    body .figma-account-grid.mobile-subpage-active .figma-account-content-card,
    .figma-account-grid.mobile-subpage-active .figma-account-content-card {
        display: block !important;
        background: #FFFFFF !important;
        border-radius: 20px !important;
        padding: 24px 20px !important;
        box-shadow: 0 4px 25px rgba(25, 56, 69, 0.05) !important;
        border: none !important;
    }

    html body .figma-account-form,
    body .figma-account-form,
    .figma-account-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .figma-form-row,
    body .figma-form-row,
    .figma-form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    html body .figma-form-group,
    body .figma-form-group,
    .figma-form-group,
    html body .figma-form-row.row-two-equal .figma-form-group,
    body .figma-form-row.row-two-equal .figma-form-group,
    .figma-form-row.row-two-equal .figma-form-group {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .figma-input,
    body .figma-input,
    .figma-input {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        background-color: #FFFFFF !important;
        border: 1px solid #7B9DA8 !important;
        border-radius: 8px !important;
        padding: 8px 14px !important;
        height: 42px !important;
        font-family: var(--font-lexend, 'Lexend', sans-serif) !important;
        font-size: 14px !important;
        color: #193845 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    html body .figma-input::placeholder,
    body .figma-input::placeholder,
    .figma-input::placeholder {
        color: #7B9DA8 !important;
        opacity: 0.8 !important;
    }

    html body .account-edit-toggle-btn,
    body .account-edit-toggle-btn,
    .account-edit-toggle-btn {
        display: none !important;
    }

    html body .form-submit-row,
    body .form-submit-row,
    .form-submit-row {
        display: block !important;
        margin-top: 24px !important;
    }

    html body .btn-save-account-details,
    body .btn-save-account-details,
    .btn-save-account-details {
        display: block !important;
        width: 100% !important;
        background-color: #87246A !important;
        color: #ffffff !important;
        font-family: var(--font-heading, 'Lexend', sans-serif) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        padding: 14px 20px !important;
        border-radius: 8px !important;
        border: none !important;
        text-align: center !important;
        cursor: pointer !important;
        box-shadow: 0 4px 14px rgba(135, 36, 106, 0.25) !important;
    }
}

/* ============================================================
   WOOCOMMERCE STANDALONE CART PAGE — CART SIDEBAR THEME SYNC
   ============================================================ */

html body.woocommerce-cart,
body.woocommerce-cart {
    background-color: #EBF7FA !important;
}

@media (max-width: 991px) {
    html body .cart-page-grid,
    body .cart-page-grid,
    .cart-page-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Native WooCommerce Cart Table Container */
html body.woocommerce-cart table.cart,
body.woocommerce-cart table.cart,
.woocommerce-cart table.cart {
    background-color: #8CA5B1 !important;
    border-radius: 20px !important;
    padding: 24px !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 8px 30px rgba(25, 56, 69, 0.08) !important;
}

html body.woocommerce-cart table.cart th,
body.woocommerce-cart table.cart th,
.woocommerce-cart table.cart th {
    background-color: transparent !important;
    color: #ffffff !important;
    font-family: var(--font-heading, 'Lexend', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
    padding: 14px 16px !important;
}

html body.woocommerce-cart table.cart td,
body.woocommerce-cart table.cart td,
.woocommerce-cart table.cart td {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 16px !important;
    font-family: var(--font-lexend, 'Lexend', sans-serif) !important;
}

html body.woocommerce-cart table.cart td.product-name a,
body.woocommerce-cart table.cart td.product-name a,
.woocommerce-cart table.cart td.product-name a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

html body.woocommerce-cart table.cart td.product-price,
html body.woocommerce-cart table.cart td.product-subtotal,
body.woocommerce-cart table.cart td.product-price,
body.woocommerce-cart table.cart td.product-subtotal {
    color: #ffffff !important;
    font-weight: 700 !important;
}

html body.woocommerce-cart table.cart td.product-remove a.remove,
body.woocommerce-cart table.cart td.product-remove a.remove {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 26px !important;
    text-align: center !important;
}

/* Cart Collaterals / Totals Box */
html body.woocommerce-cart .cart-collaterals .cart_totals,
body.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
    background-color: #FFFFFF !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    box-shadow: 0 8px 30px rgba(25, 56, 69, 0.08) !important;
    border: none !important;
    float: none !important;
    width: 100% !important;
}

html body.woocommerce-cart .cart-collaterals h2,
body.woocommerce-cart .cart-collaterals h2 {
    font-family: var(--font-heading, 'Lexend', sans-serif) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    color: #193845 !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid #EBF5F8 !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
}

html body.woocommerce-cart .checkout-button,
body.woocommerce-cart .checkout-button,
.woocommerce-cart .checkout-button {
    display: block !important;
    width: 100% !important;
    background-color: #87246A !important;
    color: #ffffff !important;
    font-family: var(--font-heading, 'Lexend', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    text-align: center !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(135, 36, 106, 0.25) !important;
}

/* =========================================================
   CHECKOUT & CART SIDEBAR BUNDLE CARDS (FIGMA & USER SPEC 1:1)
========================================================= */

html body .checkout-bundle-cards-wrapper,
body .checkout-bundle-cards-wrapper,
.checkout-bundle-cards-wrapper {
    margin-top: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html body .checkout-bundle-cards-grid,
body .checkout-bundle-cards-grid,
.checkout-bundle-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

html body .checkout-bundle-card,
body .checkout-bundle-card,
.checkout-bundle-card {
    background-color: #567C8C !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

html body .checkout-bundle-card:hover,
body .checkout-bundle-card:hover,
.checkout-bundle-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
}

html body .bundle-card-banner,
body .bundle-card-banner,
.bundle-card-banner {
    height: 170px !important;
    min-height: 170px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
}

html body .bundle-banner-img,
body .bundle-banner-img,
.bundle-banner-img {
    max-height: 155px !important;
    max-width: 95% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.28)) !important;
}

html body .bundle-card-content,
body .bundle-card-content,
.bundle-card-content {
    padding: 10px 10px 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 !important;
    justify-content: flex-start !important;
    gap: 2px !important;
}

html body .bundle-card-title,
body .bundle-card-title,
.bundle-card-title {
    font-family: var(--font-heading, 'Lexend', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #FFFFFF !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.15 !important;
}

html body .bundle-card-badge-row,
body .bundle-card-badge-row,
.bundle-card-badge-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-bottom: 3px !important;
    width: 100% !important;
}

html body .bundle-stock-pill,
body .bundle-stock-pill,
.bundle-stock-pill {
    font-size: 9px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 2px 6px !important;
    display: inline-block !important;
    line-height: 1 !important;
}

html body .bundle-stars-wrap,
body .bundle-stars-wrap,
.bundle-stars-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 9px !important;
    color: #FFFFFF !important;
}

html body .bundle-stars-wrap .text-gold,
body .bundle-stars-wrap .text-gold,
.bundle-stars-wrap .text-gold {
    color: #F5B41A !important;
}

html body .bundle-stars-wrap .text-muted,
body .bundle-stars-wrap .text-muted,
.bundle-stars-wrap .text-muted {
    color: rgba(255, 255, 255, 0.4) !important;
}

html body .bundle-stars-wrap .stars-count,
body .bundle-stars-wrap .stars-count,
.bundle-stars-wrap .stars-count {
    font-size: 9px !important;
    margin-left: 2px !important;
    opacity: 0.9 !important;
}

html body .bundle-price-info,
body .bundle-price-info,
.bundle-price-info {
    font-family: var(--font-lexend, 'Lexend', sans-serif) !important;
    margin-bottom: 4px !important;
    line-height: 1.15 !important;
}

html body .bundle-price-info .price-retail,
body .bundle-price-info .price-retail,
.bundle-price-info .price-retail {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 400 !important;
}

html body .bundle-price-info .price-school,
body .bundle-price-info .price-school,
.bundle-price-info .price-school {
    font-size: 11px !important;
    color: #FFFFFF !important;
    font-weight: 400 !important;
}

html body .btn-bundle-checkout-add,
body .btn-bundle-checkout-add,
.btn-bundle-checkout-add {
    width: 100% !important;
    background-color: #F5B41A !important;
    color: #193845 !important;
    font-family: var(--font-heading, 'Lexend', sans-serif) !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    padding: 8px 4px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    margin-top: 4px !important;
    outline: none !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
}

html body .btn-bundle-checkout-add:hover,
body .btn-bundle-checkout-add:hover,
.btn-bundle-checkout-add:hover {
    background-color: #E2A312 !important;
    transform: scale(1.02) !important;
}

/* FOOTER PAYMENT & SECURITY BADGES */
html body .checkout-drawer-pay-footer,
body .checkout-drawer-pay-footer,
.checkout-drawer-pay-footer {
    text-align: center !important;
    padding-top: 10px !important;
    color: #FFFFFF !important;
}

html body .pay-using-heading,
body .pay-using-heading,
.pay-using-heading {
    font-family: var(--font-heading, 'Lexend', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #FFFFFF !important;
    margin-bottom: 10px !important;
}

html body .pay-logos-row,
body .pay-logos-row,
.pay-logos-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}

html body .pay-logo-badge,
body .pay-logo-badge,
.pay-logo-badge {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: auto !important;
    height: auto !important;
    box-shadow: none !important;
}

html body .pay-logo-badge i,
body .pay-logo-badge i,
.pay-logo-badge i {
    font-size: 34px !important;
    color: #8CA5B1 !important;
    -webkit-text-stroke: 1px #FFFFFF !important;
    paint-order: stroke fill !important;
    line-height: 1 !important;
}

html body .payment-security-box,
body .payment-security-box,
.payment-security-box {
    text-align: center !important;
}

html body .security-title,
body .security-title,
.security-title {
    font-family: var(--font-heading, 'Lexend', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #FFFFFF !important;
    margin-bottom: 4px !important;
}

html body .security-desc,
body .security-desc,
.security-desc {
    font-family: var(--font-lexend, 'Lexend', sans-serif) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 auto !important;
    max-width: 320px !important;
}

@media (max-width: 576px) {
    html body .checkout-bundle-cards-grid,
    body .checkout-bundle-cards-grid,
    .checkout-bundle-cards-grid {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 14px !important;
    }
}

html body.woocommerce-cart .checkout-button:hover,
body.woocommerce-cart .checkout-button:hover {
    background-color: #6d1b55 !important;
}

/* REVIEW STARS CLICK POINTER & HOVER FEEDBACK */
.product-rating-row,
.stars,
.card-rating,
.ratings,
.rating-stars,
.star-rating,
.review-count,
.bundle-card-rating {
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
}
.product-rating-row:hover,
.stars:hover,
.card-rating:hover,
.ratings:hover,
.rating-stars:hover,
.star-rating:hover,
.review-count:hover {
    opacity: 0.85 !important;
}

/* CART DRAWER CONTINUE SHOPPING BUTTON */
html body .btn-drawer-continue-shopping,
body .btn-drawer-continue-shopping,
.btn-drawer-continue-shopping {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1.5px solid #FFFFFF !important;
    padding: 13px 20px !important;
    border-radius: 10px !important;
    font-family: var(--font-heading, 'Lexend', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-align: center !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    margin-top: 10px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

html body .btn-drawer-continue-shopping:hover,
body .btn-drawer-continue-shopping:hover,
.btn-drawer-continue-shopping:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

/* =========================================================
   WHY CHOOSE US REARRANGED LAYOUT (FIGMA SPEC 1:1)
========================================================= */
.why-rearranged-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin-top: 30px !important;
}

/* TOP GRID: STATS CARD (LEFT) + STACKED CARDS (RIGHT) */
.why-grid-top {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

@media (max-width: 991px) {
    .why-grid-top {
        grid-template-columns: 1fr !important;
    }
}

/* 4-PIE-CHARTS BEIGE CARD */
.why-card-stats-beige {
    background: #C6BDA2 !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

/* RIGHT COLUMN STACKED CARDS */
.why-stacked-cards-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* MIDDLE GRID: 2 SIDE-BY-SIDE CARDS */
.why-grid-middle {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

@media (max-width: 991px) {
    .why-grid-middle {
        grid-template-columns: 1fr !important;
    }
}

/* BOTTOM CPL BANNER */
.why-cpl-banner-box {
    background: #FED9A1 !important;
    border-radius: 16px !important;
    padding: 28px 32px !important;
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    gap: 32px !important;
    align-items: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

@media (max-width: 991px) {
    .why-cpl-banner-box {
        grid-template-columns: 1fr !important;
        padding: 24px 20px !important;
    }
}

.cpl-graphic-col {
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cpl-banner-img {
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* PURPLE BOX TITLE HYPERLINK HOVER FEEDBACK */
.card-purple-dark h4 a {
    color: inherit !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    transform-origin: left center !important;
}
.card-purple-dark h4 a:hover {
    text-decoration: none !important;
    transform: scale(1.04) !important;
    opacity: 0.95 !important;
}

.cpl-steps-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 18px !important;
    margin: auto 0 !important;
}

.cpl-step-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

.cpl-step-badge {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-heading, 'Lexend', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.step-badge-1 {
    background: #F5B41A !important;
}
.step-badge-2 {
    background: #23A9BC !important;
}
.step-badge-3 {
    background: #6C6EAC !important;
}

.cpl-step-text {
    font-family: var(--font-lexend, 'Lexend', sans-serif) !important;
    font-size: 18.5px !important;
    line-height: 1.5 !important;
    color: #315567 !important;
}
.cpl-step-text strong {
    font-weight: 700 !important;
}

/* =========================================================
   FOOTER BRAND LOGO EXACT SPECIFIED WIDTH (351.8PX)
========================================================= */
html body .footer-brand-logo,
body .footer-brand-logo,
.footer-brand-logo {
    width: 351.8px !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    display: block !important;
    margin-bottom: 12px !important;
    object-fit: contain !important;
}

/* =========================================================
   ADJUST SPACING ABOVE AND BELOW POST-IT NOTES ROW
========================================================= */
html body .page-about .section-about-values,
body .page-about .section-about-values,
.page-about .section-about-values {
    padding-top: 280px !important;
    padding-bottom: 30px !important;
}

html body .page-about .values-notes-grid,
body .page-about .values-notes-grid,
.page-about .values-notes-grid {
    margin-top: 28px !important;
    margin-bottom: 10px !important;
}

html body .page-about .values-header-center,
body .page-about .values-header-center,
.page-about .values-header-center {
    margin-bottom: 20px !important;
}

/* =========================================================
   VALUES SECTION YELLOW PENCIL UNDERLINE STYLING
========================================================= */
html body .page-about .values-pencil-wrap,
body .page-about .values-pencil-wrap,
.page-about .values-pencil-wrap {
    text-align: center !important;
    margin: 6px auto 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

html body .page-about .values-pencil-img,
body .page-about .values-pencil-img,
.page-about .values-pencil-img {
    width: 220px !important;
    max-width: 90% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* =========================================================
   GLOBAL SITEWIDE 8-COLOR BUTTON HOVER SYSTEM (FIGMA SPEC)
========================================================= */

/* Common smooth hover transition for all buttons */
button,
a.btn,
a.button,
.btn,
.button,
[class*="btn-"] {
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* 1. CYAN / LIGHT TEAL (#4DD1E2 / #43D1E2 / #23A9BC ➔ #1B8998 / #188595) */
html body .btn-cyan,
html body .btn-teal,
html body .btn-impact-teal,
html body .btn-pillar-teal,
html body .btn-read-reviews,
body .btn-cyan,
body .btn-teal,
body .btn-impact-teal,
body .btn-pillar-teal,
body .btn-read-reviews,
.btn-cyan,
.btn-teal,
.btn-impact-teal,
.btn-pillar-teal,
.btn-read-reviews {
    background-color: #4DD1E2 !important;
    color: #ffffff !important;
}
html body .btn-cyan:hover,
html body .btn-teal:hover,
html body .btn-impact-teal:hover,
html body .btn-pillar-teal:hover,
html body .btn-read-reviews:hover,
body .btn-cyan:hover,
body .btn-teal:hover,
body .btn-impact-teal:hover,
body .btn-pillar-teal:hover,
body .btn-read-reviews:hover,
.btn-cyan:hover,
.btn-teal:hover,
.btn-impact-teal:hover,
.btn-pillar-teal:hover,
.btn-read-reviews:hover {
    background-color: #1B8998 !important;
    transform: translateY(-2px) !important;
}

/* 2. PURPLE / MAGENTA (#C67DB1 / #A14389 ➔ #87246A) */
html body .btn-purple,
html body .btn-impact-purple,
html body .btn-pillar-purple,
html body .btn-contact-submit,
html body .btn-report-submit,
html body .btn-save-account-details,
html body .btn-add-card-toggle,
html body .btn-success-action,
body .btn-purple,
body .btn-impact-purple,
body .btn-pillar-purple,
body .btn-contact-submit,
body .btn-report-submit,
body .btn-save-account-details,
body .btn-add-card-toggle,
body .btn-success-action,
.btn-purple,
.btn-impact-purple,
.btn-pillar-purple,
.btn-contact-submit,
.btn-report-submit,
.btn-save-account-details,
.btn-add-card-toggle,
.btn-success-action {
    background-color: #C67DB1 !important;
    color: #ffffff !important;
}
html body .btn-purple:hover,
html body .btn-impact-purple:hover,
html body .btn-pillar-purple:hover,
html body .btn-contact-submit:hover,
html body .btn-report-submit:hover,
html body .btn-save-account-details:hover,
html body .btn-add-card-toggle:hover,
html body .btn-success-action:hover,
body .btn-purple:hover,
body .btn-impact-purple:hover,
body .btn-pillar-purple:hover,
body .btn-contact-submit:hover,
body .btn-report-submit:hover,
body .btn-save-account-details:hover,
body .btn-add-card-toggle:hover,
body .btn-success-action:hover,
.btn-purple:hover,
.btn-impact-purple:hover,
.btn-pillar-purple:hover,
.btn-contact-submit:hover,
.btn-report-submit:hover,
.btn-save-account-details:hover,
.btn-add-card-toggle:hover,
.btn-success-action:hover {
    background-color: #87246A !important;
    transform: translateY(-2px) !important;
}

/* 3. YELLOW / GOLD (#F7C44A / #F7BA2A ➔ #E0A10C / #D69509) */
html body .btn-yellow,
html body .btn-impact-yellow,
html body .btn-pillar-yellow,
html body .btn-bundle-checkout-add,
body .btn-yellow,
body .btn-impact-yellow,
body .btn-pillar-yellow,
body .btn-bundle-checkout-add,
.btn-yellow,
.btn-impact-yellow,
.btn-pillar-yellow,
.btn-bundle-checkout-add {
    background-color: #F7C44A !important;
    color: #ffffff !important;
}
html body .btn-yellow:hover,
html body .btn-impact-yellow:hover,
html body .btn-pillar-yellow:hover,
html body .btn-bundle-checkout-add:hover,
body .btn-yellow:hover,
body .btn-impact-yellow:hover,
body .btn-pillar-yellow:hover,
body .btn-bundle-checkout-add:hover,
.btn-yellow:hover,
.btn-impact-yellow:hover,
.btn-pillar-yellow:hover,
.btn-bundle-checkout-add:hover {
    background-color: #E0A10C !important;
    transform: translateY(-2px) !important;
}

/* 4. CORAL / CORAL ORANGE (#F27756 ➔ #C96146) */
html body .btn-coral,
html body .btn-orange,
html body .btn-impact-orange,
html body .btn-pillar-orange,
body .btn-coral,
body .btn-orange,
body .btn-impact-orange,
body .btn-pillar-orange,
.btn-coral,
.btn-orange,
.btn-impact-orange,
.btn-pillar-orange {
    background-color: #F27756 !important;
    color: #ffffff !important;
}
html body .btn-coral:hover,
html body .btn-orange:hover,
html body .btn-impact-orange:hover,
html body .btn-pillar-orange:hover,
body .btn-coral:hover,
body .btn-orange:hover,
body .btn-impact-orange:hover,
body .btn-pillar-orange:hover,
.btn-coral:hover,
.btn-orange:hover,
.btn-impact-orange:hover,
.btn-pillar-orange:hover {
    background-color: #C96146 !important;
    transform: translateY(-2px) !important;
}

/* 5. SLATE BLUE / INDIGO (#6E74B3 ➔ #4A5194) */
html body .btn-indigo,
html body .btn-blue-slate,
html body .btn-pillar-indigo,
body .btn-indigo,
body .btn-blue-slate,
body .btn-pillar-indigo,
.btn-indigo,
.btn-blue-slate,
.btn-pillar-indigo {
    background-color: #6E74B3 !important;
    color: #ffffff !important;
}
html body .btn-indigo:hover,
html body .btn-blue-slate:hover,
html body .btn-pillar-indigo:hover,
body .btn-indigo:hover,
body .btn-blue-slate:hover,
body .btn-pillar-indigo:hover,
.btn-indigo:hover,
.btn-blue-slate:hover,
.btn-pillar-indigo:hover {
    background-color: #4A5194 !important;
    transform: translateY(-2px) !important;
}

/* 6. ROSE PINK / HOT PINK (#E893CD ➔ #EC5BBE) */
html body .btn-pink,
html body .btn-rose,
html body .btn-impact-pink,
html body .btn-pillar-pink,
html body .btn-wishlist-single,
body .btn-pink,
body .btn-rose,
body .btn-impact-pink,
body .btn-pillar-pink,
body .btn-wishlist-single,
.btn-pink,
.btn-rose,
.btn-impact-pink,
.btn-pillar-pink,
.btn-wishlist-single {
    background-color: #E893CD !important;
    color: #ffffff !important;
}
html body .btn-pink:hover,
html body .btn-rose:hover,
html body .btn-impact-pink:hover,
html body .btn-pillar-pink:hover,
html body .btn-wishlist-single:hover,
body .btn-pink:hover,
body .btn-rose:hover,
body .btn-impact-pink:hover,
body .btn-pillar-pink:hover,
body .btn-wishlist-single:hover,
.btn-pink:hover,
.btn-rose:hover,
.btn-impact-pink:hover,
.btn-pillar-pink:hover,
.btn-wishlist-single:hover {
    background-color: #EC5BBE !important;
    transform: translateY(-2px) !important;
}

/* 7. STEEL / DARK NAVY SLATE (#5C7E8E / #537586 ➔ #315567) */
html body .btn-steel,
html body .btn-navy-slate,
html body .btn-pillar-steel,
html body .btn-back-home,
html body .btn-continue-shopping,
html body .btn-report-back-home,
html body .btn-drawer-continue-shopping,
body .btn-steel,
body .btn-navy-slate,
body .btn-pillar-steel,
body .btn-back-home,
body .btn-continue-shopping,
body .btn-report-back-home,
body .btn-drawer-continue-shopping,
.btn-steel,
.btn-navy-slate,
.btn-pillar-steel,
.btn-back-home,
.btn-continue-shopping,
.btn-report-back-home,
.btn-drawer-continue-shopping {
    background-color: #5C7E8E !important;
    color: #ffffff !important;
}
html body .btn-steel:hover,
html body .btn-navy-slate:hover,
html body .btn-pillar-steel:hover,
html body .btn-back-home:hover,
html body .btn-continue-shopping:hover,
html body .btn-report-back-home:hover,
html body .btn-drawer-continue-shopping:hover,
body .btn-steel:hover,
body .btn-navy-slate:hover,
body .btn-pillar-steel:hover,
body .btn-back-home:hover,
body .btn-continue-shopping:hover,
body .btn-report-back-home:hover,
body .btn-drawer-continue-shopping:hover,
.btn-steel:hover,
.btn-navy-slate:hover,
.btn-pillar-steel:hover,
.btn-back-home:hover,
.btn-continue-shopping:hover,
.btn-report-back-home:hover,
.btn-drawer-continue-shopping:hover {
    background-color: #315567 !important;
    transform: translateY(-2px) !important;
}

/* 8. TAUPE / WARM BEIGE (#B7AC8D / #C6BDA2 ➔ #8A826C) */
html body .btn-taupe,
html body .btn-beige,
html body .btn-pillar-taupe,
body .btn-taupe,
body .btn-beige,
body .btn-pillar-taupe,
.btn-taupe,
.btn-beige,
.btn-pillar-taupe {
    background-color: #B7AC8D !important;
    color: #ffffff !important;
}
html body .btn-taupe:hover,
html body .btn-beige:hover,
html body .btn-pillar-taupe:hover,
body .btn-taupe:hover,
body .btn-beige:hover,
body .btn-pillar-taupe:hover,
.btn-taupe:hover,
.btn-beige:hover,
.btn-pillar-taupe:hover {
    background-color: #8A826C !important;
    transform: translateY(-2px) !important;
}

/* =========================================================
   METHODOLOGY PAGE: HIDE CONNECTING WHITE LINES & WHITE SEMICIRCLES UNDER 1350PX
   (USES VISIBILITY:HIDDEN FOR WHITE ARCS SO PURPLE SHAPES DO NOT MOVE)
========================================================= */
@media (max-width: 1430px) {
    html body .page-methodology .straight-white-line,
    body .page-methodology .straight-white-line,
    .page-methodology .straight-white-line {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    html body .page-methodology .white-semicircle-arc,
    body .page-methodology .white-semicircle-arc,
    .page-methodology .white-semicircle-arc {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* =========================================================
   BUNDLES SECTION BUTTON SYSTEM (DESIGN SPEC #820063)
   - ADD TO BASKET: SOLID MAROON -> SWAP TO WHITE BACKGROUND
   - LEARN MORE: OUTLINE WHITE -> SWAP TO SOLID MAROON BACKGROUND
========================================================= */
html body .btn-bundle-add-basket,
body .btn-bundle-add-basket,
.btn-bundle-add-basket {
    background-color: #820063 !important;
    color: #ffffff !important;
    border: 1.5px solid #820063 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

html body .btn-bundle-add-basket:hover,
body .btn-bundle-add-basket:hover,
.btn-bundle-add-basket:hover {
    background-color: #ffffff !important;
    color: #820063 !important;
    border: 1.5px solid #820063 !important;
    transform: translateY(-2px) !important;
}

html body .btn-bundle-learn-more,
body .btn-bundle-learn-more,
.btn-bundle-learn-more {
    background-color: #ffffff !important;
    color: #820063 !important;
    border: 1.5px solid #820063 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

html body .btn-bundle-learn-more:hover,
body .btn-bundle-learn-more:hover,
.btn-bundle-learn-more:hover {
    background-color: #820063 !important;
    color: #ffffff !important;
    border: 1.5px solid #820063 !important;
    transform: translateY(-2px) !important;
}

/* =========================================================
   BUNDLES SECTION GRID: ALWAYS CENTERED & ALWAYS ACROSS 1 SINGLE LINE
========================================================= */
html body .figma-bundles-grid,
body .figma-bundles-grid,
.figma-bundles-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    padding-bottom: 12px !important;
}

html body .figma-bundles-grid .figma-bundle-card,
body .figma-bundles-grid .figma-bundle-card,
.figma-bundles-grid .figma-bundle-card {
    flex: 1 1 0px !important;
    max-width: 240px !important;
    min-width: 150px !important;
    width: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* =========================================================
   SINGLE PRODUCT PAGE: MAIN BUY & WISHLIST BUTTONS (DESIGN MATCH)
   - ADD TO BASKET: SOLID MAROON (#87246A / #820063)
   - WISHLIST: SOFT PINK (#E893CD)
========================================================= */
html body .btn-add-basket-single,
body .btn-add-basket-single,
.btn-add-basket-single {
    background-color: #87246A !important;
    background: #87246A !important;
    color: #ffffff !important;
    border: 1.5px solid #87246A !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    height: 44px !important;
    min-height: 44px !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

html body .btn-add-basket-single:hover,
body .btn-add-basket-single:hover,
.btn-add-basket-single:hover {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #87246A !important;
    border: 1.5px solid #87246A !important;
    transform: translateY(-2px) !important;
}

html body .btn-wishlist-single,
body .btn-wishlist-single,
.btn-wishlist-single {
    background-color: #E893CD !important;
    background: #E893CD !important;
    color: #ffffff !important;
    border: 1.5px solid #E893CD !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    height: 44px !important;
    min-height: 44px !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

html body .btn-wishlist-single:hover,
body .btn-wishlist-single:hover,
.btn-wishlist-single:hover {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #E893CD !important;
    border: 1.5px solid #E893CD !important;
    transform: translateY(-2px) !important;
}

/* =========================================================
   WISHLIST SIDEBAR DRAWER (BACKGROUND: #C67DB1)
========================================================= */
html body #wishlistDrawerOverlay,
html body .wishlist-drawer-overlay,
body #wishlistDrawerOverlay,
body .wishlist-drawer-overlay,
#wishlistDrawerOverlay,
.wishlist-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 99999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

html body #wishlistDrawerOverlay.active,
html body .wishlist-drawer-overlay.active,
body #wishlistDrawerOverlay.active,
body .wishlist-drawer-overlay.active,
#wishlistDrawerOverlay.active,
.wishlist-drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

html body #wishlistDrawerOverlay .wishlist-drawer-panel,
html body .wishlist-drawer-panel,
body #wishlistDrawerOverlay .wishlist-drawer-panel,
body .wishlist-drawer-panel,
#wishlistDrawerOverlay .wishlist-drawer-panel,
.wishlist-drawer-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 600px !important;
    max-width: 95vw !important;
    height: 100vh !important;
    background-color: #C67DB1 !important;
    background: #C67DB1 !important;
    color: #ffffff !important;
    z-index: 100000000 !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translate3d(100%, 0, 0) !important;
    will-change: transform !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body #wishlistDrawerOverlay.active .wishlist-drawer-panel,
html body .wishlist-drawer-overlay.active .wishlist-drawer-panel,
body #wishlistDrawerOverlay.active .wishlist-drawer-panel,
body .wishlist-drawer-overlay.active .wishlist-drawer-panel,
#wishlistDrawerOverlay.active .wishlist-drawer-panel,
.wishlist-drawer-overlay.active .wishlist-drawer-panel,
.wishlist-drawer-panel.active {
    transform: translate3d(0, 0, 0) !important;
}

@media (max-width: 620px) {
    html body #wishlistDrawerOverlay .wishlist-drawer-panel,
    html body .wishlist-drawer-panel,
    body .wishlist-drawer-panel,
    .wishlist-drawer-panel {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* =========================================================
   FAQ SIDEBAR HOVER STYLES MATCHING SELECTED CATEGORY COLORS
========================================================= */
html body .faq-cat-list .faq-cat-item:nth-child(1) .faq-cat-link:hover,
html body .faq-cat-list a[href*="faqs"]:hover:not([href*="-"]):not([href*="page"]) {
    background-color: #FDE8AB !important;
    color: #1C3B47 !important;
    font-weight: 700 !important;
}
html body .faq-cat-list .faq-cat-item:nth-child(1) .faq-cat-link:hover::before,
html body .faq-cat-list a[href*="faqs"]:hover:not([href*="-"]):not([href*="page"])::before {
    content: '›' !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-right: 6px !important;
    color: #F5B41A !important;
}

html body .faq-cat-list .faq-cat-item:nth-child(2) .faq-cat-link:hover,
html body .faq-cat-list a[href*="support-resources"]:hover {
    background-color: #FCDCD4 !important;
    color: #80230A !important;
    font-weight: 700 !important;
}
html body .faq-cat-list .faq-cat-item:nth-child(2) .faq-cat-link:hover::before,
html body .faq-cat-list a[href*="support-resources"]:hover::before {
    content: '›' !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-right: 6px !important;
    color: #F27756 !important;
}

html body .faq-cat-list .faq-cat-item:nth-child(3) .faq-cat-link:hover,
html body .faq-cat-list a[href*="teachers-tutors"]:hover {
    background-color: #E5E0F2 !important;
    color: #3B2C5F !important;
    font-weight: 700 !important;
}
html body .faq-cat-list .faq-cat-item:nth-child(3) .faq-cat-link:hover::before,
html body .faq-cat-list a[href*="teachers-tutors"]:hover::before {
    content: '›' !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-right: 6px !important;
    color: #7C6DA0 !important;
}

html body .faq-cat-list .faq-cat-item:nth-child(4) .faq-cat-link:hover,
html body .faq-cat-list a[href*="parents-educators"]:hover {
    background-color: #F0EBD8 !important;
    color: #4A4328 !important;
    font-weight: 700 !important;
}
html body .faq-cat-list .faq-cat-item:nth-child(4) .faq-cat-link:hover::before,
html body .faq-cat-list a[href*="parents-educators"]:hover::before {
    content: '›' !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-right: 6px !important;
    color: #B7A977 !important;
}

html body .faq-cat-list .faq-cat-item:nth-child(5) .faq-cat-link:hover,
html body .faq-cat-list a[href*="educational-support"]:hover {
    background-color: #D2F2F7 !important;
    color: #0C4B56 !important;
    font-weight: 700 !important;
}
html body .faq-cat-list .faq-cat-item:nth-child(5) .faq-cat-link:hover::before,
html body .faq-cat-list a[href*="educational-support"]:hover::before {
    content: '›' !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-right: 6px !important;
    color: #199EB3 !important;
}

html body .faq-cat-list .faq-cat-item:nth-child(6) .faq-cat-link:hover,
html body .faq-cat-list a[href*="purchasing-orders"]:hover {
    background-color: #FAD6EC !important;
    color: #6E1F52 !important;
    font-weight: 700 !important;
}
html body .faq-cat-list .faq-cat-item:nth-child(6) .faq-cat-link:hover::before,
html body .faq-cat-list a[href*="purchasing-orders"]:hover::before {
    content: '›' !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-right: 6px !important;
    color: #E371B5 !important;
}

html body .faq-cat-list .faq-cat-item:nth-child(7) .faq-cat-link:hover,
html body .faq-cat-list a[href*="pricing-offers"]:hover {
    background-color: #D8E4EC !important;
    color: #1E313D !important;
    font-weight: 700 !important;
}
html body .faq-cat-list .faq-cat-item:nth-child(7) .faq-cat-link:hover::before,
html body .faq-cat-list a[href*="pricing-offers"]:hover::before {
    content: '›' !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-right: 6px !important;
    color: #5B7B8D !important;
}

html body .faq-cat-list .faq-cat-item:nth-child(8) .faq-cat-link:hover,
html body .faq-cat-list a[href*="shipping-delivery"]:hover {
    background-color: #FDEAE4 !important;
    color: #A6442E !important;
    font-weight: 700 !important;
}
html body .faq-cat-list .faq-cat-item:nth-child(8) .faq-cat-link:hover::before,
html body .faq-cat-list a[href*="shipping-delivery"]:hover::before {
    content: '›' !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-right: 6px !important;
    color: #F28F79 !important;
}

html body .faq-cat-list .faq-cat-item:nth-child(9) .faq-cat-link:hover,
html body .faq-cat-list a[href*="returns-refunds"]:hover {
    background-color: #E8E8F8 !important;
    color: #50508D !important;
    font-weight: 700 !important;
}
html body .faq-cat-list .faq-cat-item:nth-child(9) .faq-cat-link:hover::before,
html body .faq-cat-list a[href*="returns-refunds"]:hover::before {
    content: '›' !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-right: 6px !important;
    color: #9696C7 !important;
}

/* =========================================================
   HERO CAROUSEL GRAPHIC OVERFLOW CUTOFF (HEADER TO WAVE)
========================================================= */
html body .hero-section {
    position: relative !important;
    overflow: hidden !important;
}

html body .hero-slider-container,
html body .hero-slides-wrapper,
html body .hero-slide,
html body .hero-slide .container,
html body .hero-grid,
html body .hero-grid-wide {
    overflow: visible !important;
}