/* 
  =============================================================
  HARRISON & YORK (HAY) - MODULARIZED & PAGE-SCOPED STYLESHEET
  =============================================================
  Isolates Homepage (.page-home), Shop Pages (.page-shop), Single Product
  Pages (.page-single-product), Cart Page (.page-cart), About Us (.page-about),
  Methodology (.page-methodology), Free Resources (.page-resources), Single Resource (.page-resource-single),
  and Contact Us (.page-contact).
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lexend:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=Rock+Salt&family=Spartan:wght@500;600;700;800&display=swap');

:root {
    /* Brandbook Approved Palette */
    --color-blue: #23A9BC;
    --color-purple: #87246A;
    --color-orange: #F27756;
    --color-yellow: #F5B41A;
    --color-light-purple: #C67DB1;
    
    /* Figma Specific Shop & Product Palette */
    --figma-sidebar-bg: #E8F3F6;
    --figma-tab-dark: #1D3D4C;
    --figma-maroon: #87246A;
    --figma-price-color: #87246A;
    --figma-wishlist-pink: #E371B5;
    --figma-dark-teal: #193845;
    --figma-drawer-bg: #6E909E;
    
    /* Global Backgrounds & Text */
    --color-topbar-yellow: #F5B41A;
    --color-hero-brown: #C7BDA2;
    --color-header-maroon: #87246A;
    --color-bg-light: #F3EFE4;
    --color-bg-audience: #B0A075;
    --color-bg-white: #ffffff;
    --color-overlay: rgba(240, 240, 240, 0.94);
    --color-text-dark: #181818;
    --color-text-muted: #666666;
    
    /* Maths Year Group Colors */
    --maths-color-rec: #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 Colors */
    --english-color-rec: #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;
    
    /* Fonts */
    --font-primary: 'Poppins', sans-serif;
    --font-script: 'Rock Salt', sans-serif;
    --font-heading: 'Spartan', sans-serif;

    --font-lexend: 'Lexend', sans-serif;    
    --font-lexend-weight-light: 300;
    --font-lexend-weight-regular: 400;
    --font-lexend-weight-medium: 500;
    --font-lexend-weight-semibold: 600;
    --font-lexend-weight-bold: 800;
    
    /* Layout Caps */
    --max-content-width: 1360px;
    --transition-fast: 0.3s ease;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth !important;
}

html, body {
    background-color: #F3EFE4 !important;
    color: var(--color-text-dark);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

.container {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* -------------------------------------------------------------
   GLOBAL SHARED HEADER & NAVIGATION (#87246A MAROON & LANDSCAPE LOGO)
------------------------------------------------------------- */
.logo-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

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

.top-bar {
    background-color: #F5B41A !important;
    color: var(--color-text-dark);
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-social { display: flex; gap: 16px; align-items: center; }
.top-bar-social a {
    color: var(--color-text-dark);
    font-size: 18px;
    text-decoration: none;
    transition: transform var(--transition-fast), color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.top-bar-social a:hover { color: var(--color-purple); transform: translateY(-2px); }

.top-bar-offer {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
    flex-grow: 1;
}
.top-bar-offer .promo-code {
    background: var(--color-purple);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 700;
}

.top-bar-utilities { display: flex; align-items: center; gap: 20px; }
.top-bar-utilities button, .top-bar-utilities a {
    background: none;
    border: none;
    color: var(--color-text-dark);
    font-size: 20px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    transition: color var(--transition-fast);
}
.top-bar-utilities button:hover, .top-bar-utilities a:hover { color: var(--color-purple); }

.cart-icon-wrapper { position: relative; cursor: pointer; }
.cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--color-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-header {
    background-color: #87246A !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 85px;
    position: relative;
}

/* HEADER SEARCH BUTTON & INLINE FIGMA SEARCH BAR (FRAME 1000004954) */
.header-search-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

.header-search-btn:hover {
    color: var(--color-cyan);
    transform: scale(1.1);
}

/* FIGMA FRAME 1000004954 ACTIVE SEARCH BAR */
.header-active-search-bar {
    display: none;
    align-items: center;
    gap: 18px;
    margin-left: auto;
    position: relative;
    z-index: 10;
}

.header-nav-wrap {
    margin-left: auto;
}

/* HEADER RIGHT ICONS ON PURPLE MAIN HEADER BAR */
.header-right-icons {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 18px;
}

.header-icon-btn,
.header-icon-link {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 22px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.header-icon-btn:hover,
.header-icon-link:hover {
    opacity: 0.85;
    transform: scale(1.1);
}

.main-header.search-active .header-nav-wrap,
.main-header.search-active .header-right-icons {
    display: none !important;
}

.main-header.search-active .header-active-search-bar {
    display: flex !important;
}

.search-pill-input-wrap {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    padding: 4px 5px 4px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 380px;
    max-width: 48vw;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.search-pill-input-wrap:focus-within {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.45);
}

.header-search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-family: var(--font-lexend);
    font-size: 14.5px;
    width: 100%;
}

.header-search-input::placeholder {
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-lexend);
    font-size: 14px;
}

.cyan-search-btn {
    background-color: #23A9BC !important;
    color: #ffffff !important;
    border: none !important;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, background 0.2s ease;
}

.cyan-search-btn:hover {
    background-color: #1f94a4 !important;
    transform: scale(1.05);
}

.cyan-close-x-btn {
    background: none !important;
    border: none !important;
    color: #23A9BC !important;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.cyan-close-x-btn:hover {
    color: #ffffff !important;
    transform: scale(1.15);
}

.header-user-icon,
.header-bag-icon {
    color: #ffffff;
    font-size: 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

.header-user-icon:hover,
.header-bag-icon:hover {
    color: #23A9BC;
    transform: translateY(-2px);
}

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 24px;
    margin: 0;
    padding: 0;
}

.nav-item { position: relative; padding: 15px 0; }

.nav-link {
    text-decoration: none;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition-fast);
}
.nav-link:hover, .nav-link.active { color: var(--color-yellow) !important; }

.nav-link.btn-tab-english {
    background-color: var(--color-yellow);
    color: #ffffff !important;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 700;
}
.nav-link.btn-tab-english:hover { background-color: #ffffff; color: var(--color-purple) !important; }

.nav-link.btn-tab-maths {
    background-color: var(--color-blue);
    color: #ffffff !important;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 700;
}
.nav-link.btn-tab-maths:hover { background-color: #ffffff; color: var(--color-blue) !important; }

/* PURPLE TOOLTIP SPEECH-BUBBLE DROPDOWN MENUS (#751E5B FIGMA SPEC) */
.dropdown-menu {
    position: absolute;
    top: calc(100% - 2px);
    right: -10px;
    left: auto;
    background-color: #751E5B !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
    border-radius: 16px !important;
    min-width: 220px;
    padding: 14px 10px !important;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 2000;
    border: none !important;
}

/* SPEECH BUBBLE TOOLTIP TRIANGLE POINTER ON TOP-RIGHT (#751E5B) */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -9px;
    right: 22px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 10px solid #751E5B;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin-bottom: 4px;
}

.dropdown-menu li:last-child {
    margin-bottom: 0;
}

.dropdown-menu li a {
    display: block;
    padding: 9px 16px !important;
    color: #ffffff !important;
    text-decoration: none;
    font-family: var(--font-lexend) !important;
    font-weight: var(--font-lexend-weight-medium) !important;
    font-size: 15px !important;
    line-height: 1.35;
    border-radius: 8px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    opacity: 0.95;
}

/* SEARCH & QUICK VIEW MODALS (FIXED OVERLAYS - HIDDEN BY DEFAULT) */
.search-modal-overlay,
.quickview-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(4px);
    z-index: 99999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.search-modal-overlay.active,
.quickview-modal-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* FIGMA QUICK VIEW CARD STYLING */
.figma-quickview-card {
    max-width: 820px;
    width: 92%;
    background: #ffffff;
    border-radius: 20px;
    padding: 36px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
    position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}

.close-quickview-btn {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: #888;
}
.close-quickview-btn:hover { color: #181818; }

.qv-cover-side img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.15));
}

.qv-product-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: #193845;
    margin-bottom: 8px;
    line-height: 1.3;
}

.qv-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #F5B41A;
}

.qv-rating-row .reviews-count {
    font-size: 12px;
    color: #888888;
    font-weight: 500;
}

.qv-price-row {
    font-size: 18px;
    font-weight: 800;
    color: #23A9BC;
    margin-bottom: 16px;
}

.qv-content-box {
    background: #EBF3F6;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.qv-content-label {
    font-size: 12px;
    font-weight: 800;
    color: #4A6B78;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.qv-content-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #333333;
    line-height: 1.55;
}

.qv-content-list li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 4px;
}

.qv-content-list li::before {
    content: '•';
    color: #23A9BC;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: -2px;
}

.qv-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    font-size: 12px;
    color: #555555;
    margin-bottom: 24px;
    line-height: 1.5;
}

.qv-meta-grid strong {
    color: #193845;
}

.qv-action-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.qv-qty-input {
    width: 60px;
    height: 44px;
    border: 2px solid #D5E4EA;
    border-radius: 6px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
}

.btn-qv-add-basket {
    flex: 1;
    background-color: #87246A;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    height: 44px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-qv-add-basket:hover {
    background-color: #23A9BC;
}

.search-box-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    position: relative;
}
.search-box-card h3 { color: var(--color-purple); margin-bottom: 20px; font-family: var(--font-heading); }
.search-input-group { display: flex; gap: 12px; }
.search-input-group input {
    flex-grow: 1;
    padding: 14px 20px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    outline: none;
}
.btn-search-submit {
    background-color: var(--color-blue);
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
.close-search-btn { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 24px; cursor: pointer; color: #888; }

/* FIGMA SLIDE-OUT CART SIDE DRAWER (COVERS TOP STICKY PURPLE HEADER BAR) */
.cart-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 999999 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

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

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

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

.drawer-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.drawer-header-title {
    font-family: var(--font-heading);
    font-size: 32.7px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-close-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 42px;
    cursor: pointer;
    opacity: 0.8;
}
.drawer-close-btn:hover { opacity: 1; }

.drawer-free-shipping-banner {
    background: #23A9BC;
    color: #ffffff;
    text-align: center;
    padding: 10px 16px;
    font-size: 17.71px;
    font-weight: 500;
}

.drawer-body { flex: 1; overflow-y: auto; padding: 20px; font-size: 15px; }

.drawer-items-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.drawer-items-table th { font-size: 15px; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); padding: 8px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.drawer-items-table td { padding: 12px 6px; font-size: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); vertical-align: middle; }
.drawer-item-title { font-weight: 400; color: #fff; }
.drawer-qty-input { width: 40px; height: 30px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: #fff; text-align: center; border-radius: 4px; font-weight: 400; }
.drawer-remove-btn { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 14px; }
.drawer-remove-btn:hover { color: #F27756; }

.drawer-totals-box { margin-bottom: 20px; }
.drawer-total-row { background: #5C7E8E; padding: 12px 16px; display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; border-radius: 10px; margin-bottom: 6px; }
.drawer-total-row.grand-total { background: #315567; font-size: 16px; font-weight: 800; }

.btn-drawer-checkout { display: block; width: 100%; background-color: var(--figma-maroon); color: #ffffff; text-align: center; padding: 14px 20px; border-radius: 6px; font-family: var(--font-heading); font-size: 15px; font-weight: 800; border: none; cursor: pointer; margin-bottom: 24px; }
.btn-drawer-checkout:hover { background-color: var(--color-blue); }

.drawer-bundles-carousel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.drawer-bundle-card { background: rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 10px; text-align: center; }
.drawer-bundle-card img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 6px; }
.drawer-bundle-title { font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.drawer-bundle-price { font-size: 11px; color: var(--color-yellow); font-weight: 800; }

.drawer-security-footer { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 16px; text-align: center; font-size: 11px; color: rgba(255, 255, 255, 0.85); }
.drawer-pay-icons { display: flex; justify-content: center; gap: 10px; font-size: 20px; margin: 6px 0 10px 0; }
.drawer-empty-view { text-align: center; padding: 50px 20px; }
.drawer-empty-view h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 800; margin-bottom: 24px; }
.btn-drawer-continue { display: block; width: 100%; background-color: var(--figma-maroon); color: #ffffff; text-align: center; padding: 14px 20px; border-radius: 6px; font-family: var(--font-heading); font-size: 14px; font-weight: 800; text-decoration: none; margin-bottom: 40px; }

/* -------------------------------------------------------------
   PAGE-HOME SCOPED HOMEPAGE STYLES (.page-home)
------------------------------------------------------------- */
.page-home section {
    border: none !important;
    outline: none !important;
}

.page-home .hero-section,
.page-home .section-audience,
.page-home .section-why-choose-us,
.page-home .section-video,
.page-home .section-methodology,
.page-home .section-testimonials,
.page-home .section-articles {
    position: relative;
    padding-bottom: 110px !important;
}

.page-home .section-products {
    position: relative;
    padding-bottom: 220px !important;
}

/* FIGMA TOP WAVE SVG DIVIDERS (.section-wave-top) - ZOOM-PROOF & CONTENT OVERLAY */
.page-home .section-wave-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: visible;
    line-height: 0;
    z-index: 2 !important;
    pointer-events: none;
}

.page-home .section-wave-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: none !important;
    object-fit: fill;
    transform-origin: top center;
    position: relative;
    z-index: 2 !important;
    pointer-events: none;
}

/* FLUID PROPORTIONAL WAVE OFFSETS (ZOOM-PROOF ACROSS 50%-200% ZOOM) */
.page-home .section-wave-svg--audience {
    position: relative;
    top: 0;
    transform: translateY(-65%) scale(1.005);
    z-index: 2 !important;
}

.page-home .section-wave-svg--video {
    position: relative;
    top: 0 !important;
    transform: scale(1.005);
    z-index: 2 !important;
}

.page-home .section-wave-svg--whychooseus {
    position: relative;
    top: -100px;
    transform: translateY(-75%) scale(1.005);
    z-index: 2 !important;
}

.page-home .section-wave-svg--testimonials {
    position: relative;
    top: 0;
    transform: translateY(-70%) scale(1.005);
    z-index: 2 !important;
}

.page-home .section-wave-svg--articles {
    position: static !important;
    top: 0 !important;
    transform: none !important;
}

/* GUARANTEE ALL SECTION CONTENTS RENDER ON TOP OF WAVES (Z-INDEX: 10) */
.page-home .section-audience .container,
.page-home .section-video-banner .container,
.page-home .section-why-choose-us .container,
.page-home .section-testimonials .container,
.page-home .section-articles .container {
    position: relative;
    z-index: 10 !important;
}

/* REUSABLE PENCIL UNDERLINE ACCENT GRAPHICS */
.page-home .pencil-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px auto 18px auto;
}

.page-home .pencil-line {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
}

.page-home .pencil-line--products {
    max-width: 440px;
}

.page-home .pencil-line--why {
    max-width: 380px;
}

/* ELIMINATE ALL BORDER LINES & SUBPIXEL GAPS BETWEEN SECTIONS */
.page-home .wave-divider-box {
    position: absolute;
    bottom: -9px !important;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 5;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
}

.page-home .wave-divider-box svg {
    position: relative;
    display: block;
    width: 100%;
    height: 84px;
    margin: 0;
    padding: 0;
    transform: scale(1.02) translateY(2px);
    transform-origin: bottom center;
    shape-rendering: geometricPrecision;
}

/* DIRECT WAVE.PNG ELEMENT FROM PROJECT FOLDER */
.page-home .wave-png-direct {
    position: relative;
    display: block;
    width: 100%;
    height: 85px;
    margin: 0;
    padding: 0;
    object-fit: fill;
    /* mix-blend-mode removed for 60fps GPU performance */
    filter: sepia(15%) saturate(70%) brightness(0.96);
    pointer-events: none;
}

.page-home .fill-bg-audience { fill: #B0A075 !important; }
.page-home .fill-bg-light { fill: #F3EFE4 !important; }
.page-methodology .fill-bg-light { fill: #E1DBCA !important; }
.page-methodology .wave-divider-box path { fill: #E1DBCA !important; }
.page-home .fill-bg-white { fill: #ffffff !important; }
.page-home .fill-footer-dark { fill: #87246A !important; }

/* HERO SECTION WITH TILED BRANDMARK WATERMARK PATTERN */
.page-home .hero-section {
    background-color: #C7BDA2 !important;
    padding: 70px 0 120px 0;
    position: relative;
    overflow: visible;
    color: #ffffff;
}

.page-home .hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('images/HAY_Brandmark_White.png');
    background-repeat: repeat;
    background-size: 205px 205px;
    opacity: 0.12;
    pointer-events: none;
    z-index: 1;
}

.page-home .hero-section .container {
    position: relative;
    z-index: 2;
}

.page-home .hero-slider-container { position: relative; z-index: 5; overflow: visible; width: 100%; }
.page-home .hero-slides-wrapper { display: flex; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; width: 100%; }
.page-home .hero-slide { min-width: 100%; box-sizing: border-box; }
.page-home .hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; }
.page-home .hero-grid-wide { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; }

.page-home .hero-content h1 span.nowrap-single-line {
    white-space: nowrap;
    display: block;
}
.page-home .hero-section:has(.hero-grid-wide) .container {
    max-width: 1440px;
}

.page-home .hero-content h1 {
    font-family: var(--font-heading);
    font-size: 44px;
    line-height: 1.25;
    margin-bottom: 24px;
    color: #ffffff !important;
}
.page-home .hero-content h1 .script-word {
    font-family: var(--font-script);
    font-size: 40px;
    color: #ffffff !important;
    display: block;
    margin-bottom: 8px;
}
.page-home .hero-content h1 .highlight-phrase {
    color: var(--color-purple) !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline !important;
}
.page-home .hero-content h1 .script-highlight {
    font-family: var(--font-script);
    font-size: 55px;
    color: var(--color-purple) !important;
    display: block;
    margin-bottom: 8px;
}
.page-home .hero-content h1 .script-highlight-small {
    font-family: var(--font-script);
    font-size: 40px;
    font-weight: 800;
    color: var(--color-purple) !important;
    display: block;
    margin-bottom: 8px;
}
.page-home .hero-content p {
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 36px;
    color: #ffffff !important;
    opacity: 1;
}

.page-home .hero-cta-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.page-home .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.page-home .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }
.page-home .btn-primary-blue { background-color: var(--color-blue); color: #ffffff; }
.page-home .btn-secondary-purple { background-color: var(--color-purple); color: #ffffff; }
.page-home .btn-orange { background-color: var(--color-orange); color: #ffffff; }
.page-home .btn-light-purple {
    background-color: #5563AD !important;
    color: #ffffff !important;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 14px rgba(85, 99, 173, 0.35);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.page-home .btn-light-purple:hover {
    background-color: #424E91 !important;
    transform: translateY(-2px);
}

.page-home .hero-floating-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.page-home .floating-brochure-img {
    width: 100%;
    max-height: 530px;
    height: auto;
    object-fit: contain;
    transform: rotate(-5deg);
    transition: transform 0.35s ease, filter 0.35s ease;
    filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.35));
    display: block;
    margin: 0 auto;
}

/* HERO SLIDE 2 SPECIFIC STYLES (TESTIMONIAL & 2x2 STATS GRID) */
.page-home .hero-grid-slide2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.page-home .slide2-testi-card {
    position: relative;
    background: transparent;
    border-radius: 0;
    padding: 38px 45px 55px 40px;
    border: none;
    box-shadow: none;
    color: #ffffff;
    max-width: 520px;
    width: 100%;
    z-index: 2;
}

.page-home .slide2-testi-card::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    width: calc(100% + 30px);
    height: calc(100% + 20px);
    background-image: url('images/comma_bg.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.22));
}

.page-home .slide2-headline {
    font-family: var(--font-script);
    color: #ffffff;
    font-size: 46px;
    font-weight: normal;
    margin-bottom: 6px;
}

.page-home .slide2-pencil-wrap {
    margin-top: 10px;
    margin-bottom: 24px;
}

.page-home .slide2-pencil-line {
    max-width: 320px;
    width: 100%;
    height: auto;
    display: block;
}

.page-home .slide2-quote {
    font-family: var(--font-lexend);
    font-size: 26px;
    line-height: 1.55;
    color: #ffffff;
    font-weight: var(--font-lexend-weight-regular);
    margin-bottom: 16px;
}

.page-home .slide2-author {
    font-family: var(--font-lexend);
    font-size: 17px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
    font-weight: var(--font-lexend-weight-regular);
    margin-bottom: 24px;
}

.page-home .slide2-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
    align-items: start;
    justify-items: center;
}

.page-home .stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 220px;
}

.page-home .stat-pie {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    position: relative;
}

.page-home .pie-number-98 {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-semibold);
    font-size: 45px;
    color: #C7CAE9;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    position: relative;
    top: 30px;
}

.page-home .pie-number-85 {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-semibold);
    font-size: 45px;
    color: #4DD1E3;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    position: relative;
    top: 30px;

}

.page-home .pie-number-97 {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-semibold);
    font-size: 45px;
    color: #F49C85;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    position: relative;
    top: 30px;
}

.page-home .pie-number-99 {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-semibold);
    font-size: 45px;
    color: #C67DB1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    position: relative;
    top: 30px;
}

.page-home .pie-98 {
    background: conic-gradient(#6B6EB2 0% 98%, #C7CAE9 98% 100%);
}

.page-home .pie-85 {
    background: conic-gradient(#1FABB9 0% 85%, #4BD5E5 85% 100%);
}

.page-home .pie-97 {
    background: conic-gradient(#D75C46 0% 97%, #FFA291 97% 100%);
}

.page-home .pie-99 {
    background: conic-gradient(#87246A 0% 99%, #D67BB9 99% 100%);
}

.page-home .stat-pill {
    padding: 8px 14px;
    border-radius: 12px;
    font-family: var(--font-lexend);
    font-size: 15px;
    font-weight: var(--font-lexend-weight-regular);
    color: #ffffff;
    line-height: 1.35;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.page-home .pill-purple {
    background-color: #7D80C6;
}

.page-home .pill-teal {
    background-color: #179DAA;
}

.page-home .pill-coral {
    background-color: #E26953;
}

.page-home .pill-magenta {
    background-color: #C67DB1;
}

/* HERO SLIDE 3 STYLES */
.page-home .slide3-pencil-wrap {
    margin: 8px 0 16px 0;
}

.page-home .slide3-pencil-line {
    max-width: 380px;
    width: 100%;
    height: auto;
    display: block;
}

.page-home .slide3-first-sentence {
    color: #A64B8B !important;
    font-weight: var(--font-lexend-weight-bold);
}

.page-home .floating-people-logo {
    transform: none !important;
    max-height: 480px;
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.2));
}

.page-home .floating-people-logo:hover {
    transform: scale(1.03) !important;
}

/* HERO SLIDE 4 SPECIFIC STYLES (UNLOCKING EXCELLENCE FIGMA SPECIFICATION) */
.page-home .hero-pill-tag {
    background-color: #87246A;
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: 16px;
}

.page-home .hero-headline-slide4 {
    font-size: 46px;
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 12px;
}

.page-home .hero-headline-slide4 .text-cyan {
    color: #1BB9CC;
    font-family: var(--font-lexend);
    font-weight: 800;
}

.page-home .hero-headline-slide4 .script-excellence {
    font-family: var(--font-script);
    color: #ffffff;
    font-size: 48px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.page-home .hero-headline-slide4 .text-purple-dark {
    color: #72245C;
    font-family: var(--font-lexend);
    font-weight: 800;
    font-size: 40px;
}

.page-home .slide4-pencil-wrap {
    margin-bottom: 16px;
}

.page-home .slide4-pencil-line {
    max-width: 380px;
    width: 100%;
    height: auto;
    display: block;
}

.page-home .slide4-desc {
    font-family: var(--font-lexend);
    font-size: 24px;
    line-height: 1.55;
    color: #ffffff;
    max-width: 500px;
    opacity: 0.95;
    margin-bottom: 24px;
}

.page-home .slide4-desc .brand-bold {
    font-weight: var(--font-lexend-weight-semibold);
}

.page-home .slide4-cta {
    display: flex;
    gap: 16px;
}

.page-home .btn-cyan-fill {
    background-color: #1BB9CC;
    color: #ffffff !important;
    padding: 12px 28px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(27, 185, 204, 0.35);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.page-home .btn-cyan-fill:hover {
    background-color: #169DB0;
    transform: translateY(-2px);
}

.page-home .btn-gold-fill {
    background-color: #E5A100;
    color: #ffffff !important;
    padding: 12px 28px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(229, 161, 0, 0.35);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.page-home .btn-gold-fill:hover {
    background-color: #C88D00;
    transform: translateY(-2px);
}

.page-home .hero-covers-dual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    right: 70px;
}

.page-home .dual-cover-item img {
    max-height: 530px;
    width: auto;
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease;
}

.page-home .dual-cover-item img:hover {
    transform: scale(1.03) translateY(-4px);
}

/* HERO SLIDE 5 SPECIFIC STYLES (LEARN PRACTISE CONSOLIDATE METHOD) */
.page-home .hero-content-slide5 {
    padding-top: 14px;
}

.page-home .hero-headline-slide5 {
    font-size: 42px;
    line-height: 1.28;
    font-weight: 800;
    margin-bottom: 16px;
    padding-top: 12px;
}

.page-home .hero-headline-slide5 .script-discover {
    font-family: var(--font-script);
    color: #ffffff;
    font-size: 48px;
    position: relative;
    text-decoration: none;
    display: inline-block;
    padding-top: 4px;
    line-height: 1.25;
}

.page-home .hero-headline-slide5 .text-white-unique {
    font-family: var(--font-lexend);
    color: #ffffff;
    font-weight: 800;
    font-size: 42px;
}

.page-home .hero-headline-slide5 .text-cpl-purple {
    font-family: var(--font-lexend);
    color: #4B5194;
    font-weight: var(--font-lexend-weight-semibold);
    font-size: 45px;
    line-height: 1.15;
}

.page-home .hero-headline-slide5 .text-white-method {
    font-family: var(--font-lexend);
    color: #ffffff;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.15;
}

.page-home .slide5-desc {
    font-family: var(--font-lexend);
    font-size: 14.5px;
    line-height: 1.55;
    color: #ffffff;
    max-width: 480px;
    opacity: 0.95;
    margin-bottom: 28px;
}

.page-home .slide5-cta {
    display: flex;
    gap: 16px;
}

.page-home .btn-purple-blue {
    background-color: #5563AD;
    color: #ffffff !important;
    padding: 12px 26px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(85, 99, 173, 0.35);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.page-home .btn-purple-blue:hover {
    background-color: #424E91;
    transform: translateY(-2px);
}

.page-home .btn-magenta-purple {
    background-color: #8C296B;
    color: #ffffff !important;
    padding: 12px 26px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(140, 41, 107, 0.35);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.page-home .btn-magenta-purple:hover {
    background-color: #721C55;
    transform: translateY(-2px);
}

.page-home .hero-cpl-graphic-wrap {
    display: flex;
    align-items: center;
    gap: 32px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 18px 30px;
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
    max-width: 1040px;
    width: 150%;
    position: relative;
    left: -325px;
    top: 40px;
}

.page-home .cpl-road-col {
    flex: 1.2;
}

.page-home .cpl-road-col img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
    position: relative;
    top: -20px;
}

.page-home .cpl-list-col {
    flex: 3.4;
}

.page-home .cpl-list-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.page-home .cpl-list-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.page-home .cpl-num-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #ffffff;
    font-family: var(--font-lexend);
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.page-home .cpl-num-badge.badge-gold {
    background-color: #E5A100;
}

.page-home .cpl-num-badge.badge-teal {
    background-color: #1BB9CC;
}

.page-home .cpl-num-badge.badge-purple {
    background-color: #87246A;
}

.page-home .cpl-list-text {
    font-family: var(--font-lexend);
    font-size: 20px;
    color: #ffffff;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.page-home .cpl-list-text strong {
    color: #ffffff;
    font-weight: 800;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.page-home .hero-slider-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.page-home .hero-book-preview { display: flex; gap: 20px; }
.page-home .hero-book-card {
    flex: 1;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    text-align: center;
}
.page-home .hero-book-card img { width: 100%; height: auto; border-radius: 8px; }

.page-home .hero-slider-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 30px; }
.page-home .hero-nav-arrow {
    background: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-home .hero-nav-arrow:hover { background: var(--color-purple); color: #ffffff; }
.page-home .hero-dots-pagination { display: flex; gap: 10px; }
.page-home .hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
}
.page-home .hero-dot.active { background: #ffffff; transform: scale(1.3); }

/* DISCOVER WHAT'S INSIDE SECTION (FIGMA SPEC) */
.page-home .section-products {
    padding: 110px 0 140px 0;
    background-color: #F3EFE4 !important;
}

.page-home .products-header-bar-center {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 54px auto;
}

.page-home .products-subtitle-bar-center {
    text-align: center;
    max-width: 450px;
    margin: 0 auto 54px auto;
}

.page-home .products-header-bar-center .section-title {
    font-family: var(--font-lexend);
    font-size: 40px;
    font-weight: 600;
    color: #315567;
}

.page-home .products-header-bar-center .script-word {
    font-family: var(--font-script);
    font-size: 44px;
    font-weight: normal;
    color: #5C7E8E;
    margin-right: 8px;
}

.page-home .section-header-sub {
    font-size: 24px;
    font-family: var(--font-lexend);
    color: #1C3D4E;
    font-weight: var(--font-lexend-weight-regular);
    margin-top: 8px;
    line-height: 1.2;
}

.page-home .discover-shops-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    margin-bottom: 70px;
}

.page-home .shop-column-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 34px 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.page-home .shop-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.page-home .shop-column-header h3 {
    font-family: var(--font-lexend);
    font-size: 24px;
    font-weight: 600;
}

.page-home .english-column-card .shop-column-header h3 {
    color: #F5B41A;
}

.page-home .maths-column-card .shop-column-header h3 {
    color: #23A9BC;
}

.page-home .btn-shop-all {
    display: inline-block;
    padding: 0px 8px;
    border-radius: 12px;
    font-family: var(--font-lexend);
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff;
    transition: opacity 0.2s ease;
}

.page-home .btn-shop-all:hover {
    opacity: 0.85;
}

.page-home .btn-all-english {
    background-color: #F5B41A;
    position: relative;
    left: 10;
}

.page-home .btn-all-maths {
    background-color: #23A9BC;
    position: relative;
    left: 0;
}

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

.page-home .shop-item-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #EAEAEA;
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page-home .shop-item-thumb {
    position: relative;
    background: transparent;
    border-radius: 16px;
    padding: 0;
    margin-bottom: 14px;
    overflow: hidden;
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.page-home .shop-item-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.page-home .shop-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

.page-home .zoom-icon-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: #1D3D4C;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 5;
}

.page-home .zoom-icon-btn:hover {
    background-color: #87246A;
    color: #ffffff;
    transform: scale(1.1);
}

.page-home .shop-item-title {
    font-family: var(--font-lexend);
    font-size: 13.5px;
    font-weight: 400;
    color: #193845;
    margin-bottom: 6px;
    line-height: 1.35;
}

.page-home .shop-item-title a {
    color: #193845;
    text-decoration: none;
}

.page-home .shop-item-badges {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 6px;
}

.page-home .badge-flow {
    border: 1px solid #A6C8D5;
    color: #6A8A96;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.page-home .badge-stock {
    border: 1px solid #A6C8D5;
    color: #6A8A96;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
}

.page-home .shop-item-stars {
    color: #F5B41A;
    font-size: 11px;
    margin-bottom: 6px;
}

.page-home .shop-item-stars span {
    color: #888888;
    font-size: 11px;
    font-weight: 500;
}

.page-home .shop-item-price {
    font-family: var(--font-lexend);
    font-size: 13.5px;
    font-weight: 400;
    color: #87246A;
    margin-bottom: 10px;
}

.page-home .shop-item-price .price-label {
    font-family: var(--font-lexend);
    font-weight: 400;
}

.page-home .shop-item-price .price-amount {
    font-family: var(--font-lexend);
    font-weight: 700;
}

.page-home .shop-item-action-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.page-home .item-qty-input {
    width: 38px;
    height: 32px;
    border: 1.5px solid #D5E4EA;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.page-home .btn-add-basket-sm {
    flex: 1;
    background-color: #87246A;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    height: 32px;
    font-family: var(--font-lexend);
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.page-home .btn-add-basket-sm:hover {
    background-color: #23A9BC;
}

/* FREE SAMPLE PAGES BANNER */
.page-home .free-sample-banner-box {
    position: relative;
    top: -30px;
    background-color: #87246A;
    border-radius: 20px;
    padding: 10px 54px;
    margin-top: 0;
    color: #ffffff;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 36px;
    align-items: center;
    box-shadow: 0 15px 35px rgba(135, 36, 106, 0.2);
    max-height: 270px;
}

.page-home .free-sample-text-col h2 {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 10px;
}

.page-home .free-sample-text-col .script-free {
    font-family: var(--font-script);
    font-size: 25px;
    font-weight: 400;
    color: #ffffff;
    margin-right: 8px;
}

.page-home .free-sample-text-col p {
    font-size: 14.5px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 24px;
}

.page-home .btn-download-here {
    display: inline-block;
    background-color: #F5B41A;
    color: #ffffff;
    padding: 12px 32px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease;
}

.page-home .btn-download-here:hover {
    background-color: #ffffff;
    color: #87246A;
}

.page-home .sample-pages-fan-img {
    width: 75%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.3));
    display: flex;
    margin: 0 auto;
}

/* AUDIENCE SECTION (#B0A075 WITH TOP WAVE DIVIDER & SCRUNCHED PAPER OVERLAY) */
.page-home .section-audience {
    padding: 0 0 110px 0;
    margin-top: 140px !important;
    background-color: #B0A075 !important;
    position: relative;
    overflow: visible;
    z-index: 10;
}

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

.page-home .section-audience .container {
    position: relative;
    z-index: 10;
}

.page-home .audience-header-wrap {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 50px auto;
}

.page-home .audience-main-title {
    font-family: var(--font-lexend);
    font-size: 48px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
}

.page-home .audience-main-title .script-the {
    font-family: var(--font-lexend);
    font-size: 70.29px;
    font-weight: var(--font-weight-extrabold);
    color: #ffffff;
    margin-right: 8px;
}

.page-home .audience-main-title .script-audience {
    font-family: var(--font-script);
    font-size: 40px;
    font-weight: 600;
    color: #ffffff;
}

.page-home .audience-sub-title {
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.6;
    opacity: 0.95;
}

.page-home .audience-grid-figma {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}

.page-home .audience-card-figma {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    color: #ffffff;
}

.page-home .audience-card-figma.card-parents {
    background-color: #F5B41A;
}

.page-home .audience-card-figma.card-home-educators {
    background-color: #F27756;
}

.page-home .audience-card-figma.card-teachers-tutors {
    background-color: #23A9BC;
}

.page-home .audience-card-thumb {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.page-home .audience-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-home .card-wave-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 2;
}

.page-home .card-wave-divider svg {
    display: block;
    width: 100%;
    height: 48px;
}

.page-home .fill-card-yellow { fill: #F5B41A; }
.page-home .fill-card-orange { fill: #F27756; }
.page-home .fill-card-teal { fill: #23A9BC; }

.page-home .card-badge-circle {
    position: absolute;
    right: 24px;
    top: -20px;
    width: 52px;
    height: 52px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 5;
}

.page-home .card-badge-circle.badge-yellow { color: #F5B41A; }
.page-home .card-badge-circle.badge-orange { color: #F27756; }
.page-home .card-badge-circle.badge-teal { color: #23A9BC; }

.page-home .audience-card-body {
    padding: 28px 28px 32px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
}

.page-home .audience-card-body h3 {
    font-family: var(--font-lexend);
    font-size: 32px;
    font-weight: var(--font-lexend-weight-semibold);
    color: #ffffff;
    margin-bottom: 14px;
}

.page-home .audience-card-body p {
    font-size: 20.54px;
    line-height: 1.1;
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-light);
    color: #ffffff;
    opacity: 0.95;
    margin-bottom: 16px;
}

.page-home .btn-pdf-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #87246A;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: var(--font-lexend);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    align-self: center;
    margin-top: 6px;
}

.page-home .btn-pdf-download:hover {
    background-color: #ffffff;
    color: #87246A;
    transform: translateY(-2px);
}

/* VIDEO SECTION (FULL-BLEED BANNER WITH TOP & BOTTOM WAVES MATCHING FIGMA) */
.page-home .section-video {
    position: relative;
    padding: 120px 0 120px 0 !important;
    margin-top: 0 !important;
    min-height: 500px;
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('images/about_teacher_students.jpg') center/cover no-repeat !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: visible !important;
    z-index: 20;
}

.page-home .video-top-wave-box {
    position: relative;
    top: -70px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 3;
    pointer-events: none;
}

.page-home .video-top-wave-box svg {
    display: block;
    width: 100%;
    height: 84px;
    transform: scale(1.01);
    transform-origin: top center;
    shape-rendering: geometricPrecision;
}

.page-home .video-banner-container {
    position: relative;
    z-index: 5;
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-home .video-play-trigger {
    cursor: pointer;
    margin-bottom: 24px;
    transition: transform 0.25s ease;
}

.page-home .video-play-trigger:hover {
    transform: scale(1.08);
}

.page-home .video-play-btn-circle {
    width: 76px;
    height: 76px;
    background-color: #F27756;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 4px;
    transition: background-color 0.2s ease;
}

.page-home .video-play-btn-circle i {
    font-size: 24px;
    color: #ffffff;
    margin-left: 4px;
}

.page-home .video-banner-title {
    font-family: var(--font-lexend);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.page-home .video-banner-title-thin {
    font-family: var(--font-lexend);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
}

/* WHY CHOOSE US SECTION (FIGMA SPECIFICATION REDESIGN) */
.page-home .section-why-choose-us {
    padding: 100px 0 240px 0 !important;
    background-color: #F3EFE4 !important;
    position: relative;
    overflow: visible;
    z-index: 20;
    top: 0 !important;
}

.page-home .why-header-wrap {
    text-align: center;
    margin-bottom: 50px;
}

.page-home .why-shop-tag {
    font-family: var(--font-lexend);
    font-size: 15px;
    font-weight: var(--font-lexend-weight-semibold);
    color: #C67DB1;
    text-transform: uppercase;
    letter-spacing: 3px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.page-home .why-main-title {
    font-family: var(--font-lexend);
    font-size: 38px;
    font-weight: 700;
    color: #87246A;
}

.page-home .why-main-title .script-why {
    font-family: var(--font-lexend);
    font-size: 46px;
    font-weight: var(--font-lexend-weight-semibold);
    color: #A64B8B;
    margin-right: 6px;
}

.page-home .why-main-title .title-choose {
    font-weight: 1000;
    letter-spacing: 1px;
    font-family: var(--font-script);
    font-size: 30px;
    color: #87246A;
}

.page-home .why-main-title .script-us {
    font-family: var(--font-lexend);
    font-size: 46px;
    font-weight: var(--font-lexend-weight-semibold);
    color: #A64B8B;
    margin-right: 6px;
}

.page-home .why-rows-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.page-home .why-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

.page-home .why-col-left,
.page-home .why-col-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-home .why-card-box {
    border-radius: 18px;
    padding: 32px 36px;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.page-home .why-card-box.card-teal-dark {
    background-color: #127888;
}

.page-home .why-card-box.card-purple-dark {
    background-color: #72245C;
}

.page-home .why-card-box.card-yellow-dark {
    background-color: #D69414;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page-home .why-card-box h3 {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: #B8F6FF;
    margin-bottom: 12px;
    line-height: 1.3;
}

.page-home .why-card-box h4 {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: #FADBF1;
    margin-bottom: 12px;
    line-height: 1.3;
}

.page-home .why-card-box h5 {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: #FFF6E1;
    margin-bottom: 12px;
    line-height: 1.3;
}

.page-home .why-card-box .p1 {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-regular);
    font-size: 20px;
    margin-bottom: 12px;
    opacity: 0.95;
    line-height: 1.1;
    color: #84E9F7;
}

.page-home .why-card-box .p2 {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-regular);
    font-size: 20px;
    color: #EAC1DE;
    line-height: 1.1;
    opacity: 0.95;
    margin: 0;
}

.page-home .why-card-box .p3 {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-bold);
    font-size: 20px;
    margin-bottom: 12px;
    opacity: 0.95;
    line-height: 1.2;
    color: #84E9F7;
}

.page-home .why-card-box .p4 {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-regular);
    font-size: 20px;
    color: #FFEBBC;
    line-height: 1.1;
    opacity: 0.95;
    margin: 0;
}

.page-home .why-card-box .p5 {
    font-family: var(--font-heading);
    font-weight: var(--font-lexend-weight-bold);
    font-size: 20px;
    color: #FFEBBC;
    line-height: 1.2;
    opacity: 0.95;
    margin: 0;
}

.page-home .why-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.page-home .why-bullet-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 20px;
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-medium);
    color: #D5FAFF;
    line-height: 1.1;
}

.page-home .why-bullet-list-purple li {
    position: relative;
    padding-top: 0;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 20px;
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-medium);
    color: #FADBF1;
    line-height: 1.1;
}

.page-home .why-bullet-list-yellow li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 20px;
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-medium);
    color: #FFF3D8;
    line-height: 1.1;
}

.page-home .why-bullet-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: -1px;
    font-size: 18px;
    color: #ffffff;
}

/* BUTTONS MATCHING FIGMA SPECS & HOVER STATES */
.page-home .btn-why-action {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    margin-top: 14px;
    align-self: flex-start;
    transition: all 0.2s ease;
}

.page-home .btn-teal-action {
    background-color: #38BDCF;
    color: #ffffff;
}

.page-home .btn-teal-action:hover {
    background-color: #127888;
    color: #ffffff;
}

.page-home .btn-purple-action {
    background-color: #BA5D99;
    color: #ffffff;
}

.page-home .btn-purple-action:hover {
    background-color: #87246A;
    color: #ffffff;
}

.page-home .btn-yellow-action {
    background-color: #F8E2A1;
    color: #ffffff;
}

.page-home .btn-yellow-action:hover {
    background-color: #ffffff;
    color: #D69414;
}

/* GRAPHICS CARDS */
.page-home .why-graphic-card {
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.page-home .card-scurve {
    background-color: #71CBD8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-home .cpl-road-img {
    position: relative;
    z-index: 99 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 18px;
}

.page-home .card-workbook-spread {
    background-color: #87246A;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-home .open-book-spread-wrap {
    width: 100%;
}

.page-home .open-book-mockup {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 12px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
    border: 3px solid #6A1A52;
}

.page-home .book-page {
    font-size: 11px;
    color: #333333;
}

.page-home .book-spine-line {
    background-color: #E0E0E0;
    height: 100%;
}

.page-home .page-header-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    border-bottom: 1.5px solid #87246A;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.page-home .hdr-tag {
    background-color: #87246A;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
}

.page-home .hdr-title {
    font-weight: 700;
    color: #193845;
    font-size: 11px;
}

.page-home .line-title {
    font-weight: 700;
    color: #193845;
    margin-bottom: 6px;
    font-size: 10.5px;
}

.page-home .text-block-line {
    height: 5px;
    background-color: #E2ECF0;
    border-radius: 3px;
    margin-bottom: 5px;
}

.page-home .text-block-line.width-80 { width: 80%; }
.page-home .text-block-line.width-90 { width: 90%; }

.page-home .highlight-box-pink {
    background-color: #FCE8F3;
    border-left: 3px solid #87246A;
    padding: 8px 10px;
    border-radius: 4px;
    margin: 8px 0;
    font-size: 10px;
    color: #6A1A52;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.page-home .question-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}

.page-home .q-num {
    font-weight: 800;
    color: #87246A;
}

.page-home .q-lines {
    flex: 1;
    height: 5px;
    background-color: #D3E4EA;
    border-radius: 3px;
}

.page-home .answer-lines-box {
    height: 36px;
    border: 1px dashed #A6C8D5;
    border-radius: 4px;
    margin-bottom: 8px;
    background-color: #F8FCFD;
}

.page-home .footer-icons-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    color: #F5B41A;
    font-size: 12px;
    margin-top: 8px;
}

.page-home .card-triple-paper {
    background-color: #B2A478;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-home .triple-paper-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* TESTIMONIALS SECTION (FIGMA 3-ROW CAROUSEL REDESIGN) */
.page-home .section-testimonials {
    padding: 40px 0 40px 0 !important;
    min-height: auto !important;
    background-color: #1C3D4E !important;
    position: relative;
    overflow: visible;
    top: 0 !important;
    z-index: 30;
}

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

.page-home .section-testimonials .container {
    position: relative;
    z-index: 2;
}

.page-home .testimonials-header-wrap {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 60px auto;
}

.page-home .testimonials-main-title {
    font-family: var(--font-script);
    font-size: 40px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.page-home .testimonials-pencil-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.page-home .testimonials-pencil-line {
    width: 100%;
    max-width: 580px;
    height: auto;
    display: block;
}

.page-home .testimonials-sub-desc {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-regular);
    font-size: 15px;
    line-height: 1.1;
    color: #ffffff;
    opacity: 0.95;
    margin: 0;
}

.page-home .testimonials-rows-container {
    display: flex;
    flex-direction: column;
    gap: 65px;
}

.page-home .testimonial-row-block {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: center;
}

.page-home .testi-desc-col {
    color: #ffffff;
}

.page-home .testi-category-title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.35;
    margin-bottom: 16px;
}

.page-home .testi-category-title .script-highlight {
    font-family: var(--font-script);
    font-size: 36px;
    font-weight: normal;
}

.page-home .testi-category-title .text-cyan { color: #38BDCF; }
.page-home .testi-category-title .text-pink { color: #E27DBB; }
.page-home .testi-category-title .text-yellow { color: #F5B41A; }

.page-home .testi-category-desc {
    font-size: 18px;
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-regular);
    line-height: 1.3;
    color: #ffffff;
    opacity: 0.92;
    margin: 0;
}

/* CAROUSEL SLIDER COLUMN (3 VISIBLE OVERLAPPING CARDS) */
.page-home .testi-slider-col {
    position: relative;
    overflow: hidden;
}

.page-home .testi-carousel-wrapper {
    position: relative;
    height: 480px;
    width: 100%;
    overflow: hidden;
}

.page-home .testi-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FIGMA TESTIMONIAL CARDS (3D STACKED STATES & COLOR SHIFTING) */
.page-home .testi-card-figma {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    min-height: 410px;
    border-radius: 20px;
    padding: 32px 28px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.45s ease, 
                background-color 0.45s ease, 
                box-shadow 0.45s ease;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.7);
    z-index: 1;
}

/* COLOR SHADE STATES: LIGHTER ON SIDES, DARKER IN FRONT CENTER */
/* TEAL ROW */
.page-home .card-teal {
    background-color: #4DD1E3; /* Lighter side shade */
}
.page-home .card-teal.state-center {
    background-color: #23A9BC; /* Darker front shade */
}

/* PURPLE ROW */
.page-home .card-purple {
    background-color: #C67DB1; /* Lighter side shade */
}
.page-home .card-purple.state-center {
    background-color: #A64B8B; /* Darker front shade */
}

/* YELLOW ROW */
.page-home .card-yellow {
    background-color: #F9D889; /* Lighter side shade */
    color: #ffffff !important;
}
.page-home .card-yellow.state-center {
    background-color: #F5B41A; /* Darker front shade */
    color: #ffffff !important;
}
.page-home .card-yellow .quote-text {
    color: #ffffff !important;
}

/* AUTHOR TEXT COLORS PER ROW THEME */
.page-home .card-teal .quote-author {
    color: #1B8998 !important;
}

.page-home .card-purple .quote-author {
    color: #491339 !important;
}

.page-home .card-yellow .quote-author {
    color: #bd9638 !important;
}

/* CONDENSED SPACING FOR MULTI-QUOTE CARDS (ESPECIALLY YELLOW CARD 2) */
.page-home .testi-card-figma.card-yellow,
.page-home .testi-card-figma.condensed-card {
    padding: 24px 22px;
}

.page-home .testi-card-figma.card-yellow .quote-item,
.page-home .testi-card-figma.condensed-card .quote-item {
    margin-top: 14px;
}

.page-home .testi-card-figma.card-yellow .quote-item:first-of-type,
.page-home .testi-card-figma.condensed-card .quote-item:first-of-type {
    margin-top: 22px;
}

.page-home .testi-card-figma.card-yellow .quote-divider-line,
.page-home .testi-card-figma.condensed-card .quote-divider-line {
    margin: 8px 0;
}

.page-home .testi-card-figma.card-yellow .quote-text,
.page-home .testi-card-figma.condensed-card .quote-text {
    font-size: 13.5px;
    line-height: 1.45;
    margin-bottom: 4px;
}

/* 3 VISIBLE CARDS POSITION STATES */
.page-home .testi-card-figma.state-center {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1.08);
    z-index: 10;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.38);
}

.page-home .testi-card-figma.state-left {
    opacity: 0.95;
    pointer-events: auto;
    cursor: pointer;
    transform: translate(-128%, -50%) scale(0.9);
    z-index: 4;
}

.page-home .testi-card-figma.state-right {
    opacity: 0.95;
    pointer-events: auto;
    cursor: pointer;
    transform: translate(28%, -50%) scale(0.9);
    z-index: 4;
}

.page-home .quote-badge-top {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
}

.page-home .quote-item {
    margin-top: 32px;
}

.page-home .quote-text {
    font-size: 14.5px;
    line-height: 1.6;
    margin-bottom: 10px;
    font-family: var(--font-lexend);
    font-weight: 300;
}

.page-home .quote-author {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    display: block;
    opacity: 0.95;
}

.page-home .quote-divider-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
    margin: 16px 0;
}

/* PAGINATION DOTS */
.page-home .testi-dots-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}

.page-home .testi-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-home .testi-dot:hover {
    background: rgba(255, 255, 255, 0.75);
}

.page-home .testi-dot.active {
    width: 28px;
    border-radius: 6px;
    background: #ffffff;
}

/* OUR ARTICLES SECTION (#F3EFE4 GRID GRAPH PAPER PATTERN MATCHING SCREENSHOT) */
.page-home .section-articles {
    padding: 80px 0 110px 0;
    background-color: #F3EFE4 !important;
    background-image: 
        linear-gradient(rgba(180, 170, 150, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180, 170, 150, 0.15) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    position: relative;
    overflow: visible;
    z-index: 40;
}

.page-home .articles-header-wrap {
    text-align: center;
    margin-bottom: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-home .articles-main-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0;
    text-align: center;
}

.page-home .articles-title-script-our {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-bold);
    font-size: 50px;
    color: #8A826C
}

.page-home .articles-title-script-articles {
    font-family: var(--font-script);
    font-size: 40px;
    color: #8A826C;
}

.page-home .articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
}

.page-home .article-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    max-width: 310px;
    width: 100%;
    margin: 0 auto;
}

.page-home .article-thumb-wrap {
    position: relative;
    height: 170px;
    overflow: hidden;
}

.page-home .article-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-home .article-date-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #ffffff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #333333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.page-home .article-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-home .article-category {
    font-size: 13px;
    color: #888888;
    font-weight: 600;
    margin-bottom: 8px;
}

.page-home .article-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: #193845;
    line-height: 1.35;
    margin-bottom: 12px;
}

.page-home .article-excerpt {
    font-size: 14px;
    color: #666666;
    line-height: 1.55;
}

.page-home .btn-view-all-articles {
    display: inline-block;
    background-color: var(--figma-maroon);
    color: #ffffff;
    padding: 12px 42px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background 0.3s ease;
}
.page-home .btn-view-all-articles:hover {
    background-color: var(--color-blue);
}

/* -------------------------------------------------------------
   PAGE-SHOP SCOPED SHOP PAGES STYLES (.page-shop)
------------------------------------------------------------- */
.page-shop .figma-shop-section { padding: 40px 0 80px 0; background: #ffffff; }
.page-shop .shop-toggle-header { display: flex; width: 100%; margin-bottom: 40px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.page-shop .shop-toggle-tab { flex: 1; text-align: center; padding: 16px 20px; font-family: var(--font-heading); font-size: 20px; font-weight: 800; text-decoration: none; transition: all 0.3s ease; border: 2px solid var(--figma-tab-dark); background-color: #ffffff !important; color: var(--figma-tab-dark) !important; }
.page-shop .shop-toggle-tab.maths-tab { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.page-shop .shop-toggle-tab.english-tab { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.page-shop .shop-toggle-tab.active { background-color: var(--figma-tab-dark) !important; color: #ffffff !important; }
.page-shop .shop-toggle-tab:not(.active):hover { background-color: rgba(29, 61, 76, 0.08) !important; }

.page-shop .shop-main-layout { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.page-shop .shop-sidebar { background-color: var(--figma-sidebar-bg); border-radius: 20px; padding: 28px 24px 0px; }
.page-shop .sidebar-switch-btn { display: block !important; width: 100% !important; background-color: var(--figma-tab-dark) !important; color: #ffffff !important; text-align: center !important; padding: 0 20px !important; border-radius: 30px !important; font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important; margin-bottom: 24px !important; transition: background-color 0.3s ease; box-shadow: 0 4px 12px rgba(29, 61, 76, 0.2); height: 44px !important; line-height: 44px !important; }
.page-shop .sidebar-switch-btn:hover { background-color: var(--color-purple); }

.page-shop .sidebar-title { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: var(--figma-tab-dark); margin-bottom: 12px; }
.page-shop .sidebar-search-box { position: relative; margin-bottom: 28px; }
.page-shop .sidebar-search-box input { width: 100%; padding: 14px 16px 14px 44px; border-radius: 8px; border: 1.5px solid #A6C8D5; background: #E8F3F6; font-size: 15px; outline: none; color: var(--figma-tab-dark); transition: border-color 0.2s ease; }
.page-shop .sidebar-search-box input::placeholder { color: #6A8A96; opacity: 0.9; }
.page-shop .sidebar-search-box input:focus { border-color: var(--color-blue); }
.page-shop .sidebar-search-box i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #6A8A96; font-size: 16px; pointer-events: none; }

.page-shop .subcategories-list { list-style: none; margin-bottom: 10px; }
.page-shop .subcat-item { margin-bottom: 10px; position: relative; }
.page-shop .subcat-link { display: block; font-weight: 700 !important; font-size: 15px; color: var(--figma-tab-dark); text-decoration: none; padding: 3px 14px; border-radius: 13px; }

/* MATHS YEAR HOVER COLORS */
.page-shop .maths-sidebar .subcat-link[data-year="all"]:hover, .page-shop .maths-sidebar .subcat-link[data-year="all"].active { background-color: var(--figma-tab-dark) !important; color: #fff !important; }
.page-shop .maths-sidebar .subcat-link[data-year="rec"]:hover, .page-shop .maths-sidebar .subcat-link[data-year="rec"].active { background-color: var(--maths-color-rec) !important; color: #fff !important; }
.page-shop .maths-sidebar .subcat-link[data-year="y1"]:hover, .page-shop .maths-sidebar .subcat-link[data-year="y1"].active { background-color: var(--maths-color-y1) !important; color: #181818 !important; }
.page-shop .maths-sidebar .subcat-link[data-year="y2"]:hover, .page-shop .maths-sidebar .subcat-link[data-year="y2"].active { background-color: var(--maths-color-y2) !important; color: #fff !important; }
.page-shop .maths-sidebar .subcat-link[data-year="y3"]:hover, .page-shop .maths-sidebar .subcat-link[data-year="y3"].active { background-color: var(--maths-color-y3) !important; color: #181818 !important; }
.page-shop .maths-sidebar .subcat-link[data-year="y4"]:hover, .page-shop .maths-sidebar .subcat-link[data-year="y4"].active { background-color: var(--maths-color-y4) !important; color: #fff !important; }
.page-shop .maths-sidebar .subcat-link[data-year="y5"]:hover, .page-shop .maths-sidebar .subcat-link[data-year="y5"].active { background-color: var(--maths-color-y5) !important; color: #181818 !important; }
.page-shop .maths-sidebar .subcat-link[data-year="y6"]:hover, .page-shop .maths-sidebar .subcat-link[data-year="y6"].active { background-color: var(--maths-color-y6) !important; color: #fff !important; }
.page-shop .maths-sidebar .subcat-link[data-year="y7"]:hover, .page-shop .maths-sidebar .subcat-link[data-year="y7"].active { background-color: var(--maths-color-y7) !important; color: #fff !important; }
.page-shop .maths-sidebar .subcat-link[data-year="y8"]:hover, .page-shop .maths-sidebar .subcat-link[data-year="y8"].active { background-color: var(--maths-color-y8) !important; color: #fff !important; }
.page-shop .maths-sidebar .subcat-link[data-year="y9"]:hover, .page-shop .maths-sidebar .subcat-link[data-year="y9"].active { background-color: var(--maths-color-y9) !important; color: #fff !important; }

/* ENGLISH YEAR HOVER COLORS */
.page-shop .english-sidebar .subcat-link[data-year="all"]:hover, .page-shop .english-sidebar .subcat-link[data-year="all"].active { background-color: var(--figma-tab-dark) !important; color: #fff !important; }
.page-shop .english-sidebar .subcat-link[data-year="rec"]:hover, .page-shop .english-sidebar .subcat-link[data-year="rec"].active { background-color: var(--english-color-rec) !important; color: #fff !important; }
.page-shop .english-sidebar .subcat-link[data-year="y1"]:hover, .page-shop .english-sidebar .subcat-link[data-year="y1"].active { background-color: var(--english-color-y1) !important; color: #fff !important; }
.page-shop .english-sidebar .subcat-link[data-year="y2"]:hover, .page-shop .english-sidebar .subcat-link[data-year="y2"].active { background-color: var(--english-color-y2) !important; color: #fff !important; }
.page-shop .english-sidebar .subcat-link[data-year="y3"]:hover, .page-shop .english-sidebar .subcat-link[data-year="y3"].active { background-color: var(--english-color-y3) !important; color: #181818 !important; }
.page-shop .english-sidebar .subcat-link[data-year="y4"]:hover, .page-shop .english-sidebar .subcat-link[data-year="y4"].active { background-color: var(--english-color-y4) !important; color: #fff !important; }
.page-shop .english-sidebar .subcat-link[data-year="y5"]:hover, .page-shop .english-sidebar .subcat-link[data-year="y5"].active { background-color: var(--english-color-y5) !important; color: #181818 !important; }
.page-shop .english-sidebar .subcat-link[data-year="y6"]:hover, .page-shop .english-sidebar .subcat-link[data-year="y6"].active { background-color: var(--english-color-y6) !important; color: #fff !important; }
.page-shop .english-sidebar .subcat-link[data-year="y7"]:hover, .page-shop .english-sidebar .subcat-link[data-year="y7"].active { background-color: var(--english-color-y7) !important; color: #181818 !important; }
.page-shop .english-sidebar .subcat-link[data-year="y8"]:hover, .page-shop .english-sidebar .subcat-link[data-year="y8"].active { background-color: var(--english-color-y8) !important; color: #fff !important; }
.page-shop .english-sidebar .subcat-link[data-year="y9"]:hover, .page-shop .english-sidebar .subcat-link[data-year="y9"].active { background-color: var(--english-color-y9) !important; color: #fff !important; }

.page-shop .figma-catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.page-shop .figma-product-card { background: #ffffff; border-radius: 16px; padding: 0 0 24px 0; text-align: center; display: flex; flex-direction: column; justify-content: space-between; }
.page-shop .figma-thumb-wrapper { position: relative; border-radius: 16px; padding: 24px; margin-bottom: 20px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.page-shop .figma-thumb-wrapper img { max-width: 85%; max-height: 85%; object-fit: contain; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.18)); }
.page-shop .figma-product-title { font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: #000000 !important; margin-bottom: 12px; }
.page-shop .figma-product-title a { color: #000000 !important; text-decoration: none !important; }
.page-shop .figma-product-title a:hover { color: #000000 !important; text-decoration: none !important; }
.page-shop .sku-badge { border: 1.5px solid #D9E4E8; border-radius: 20px; padding: 4px 12px; font-size: 11px; font-weight: 700; color: #90A9B5; }
.page-shop .stock-badge { border: 1.5px solid #D9E4E8; border-radius: 20px; padding: 4px 12px; font-size: 11px; font-weight: 800; color: #90A9B5; text-transform: uppercase; }
.page-shop .retail-price-label { font-size: 16px; font-weight: 700; color: var(--figma-price-color); margin-bottom: 20px; }
.page-shop .figma-cart-row { display: flex; gap: 10px; padding: 0 10px; }
.page-shop .figma-qty-input { width: 60px; height: 46px; border: 2px solid #E1E9EC; border-radius: 4px; text-align: center; font-size: 16px; font-weight: 700; }
.page-shop .btn-figma-basket { flex: 1; background-color: var(--figma-maroon); color: #ffffff; border: none; border-radius: 4px; font-family: var(--font-heading); font-size: 13px; font-weight: 800; height: 46px; display: flex; align-items: center; justify-content: center; }

/* -------------------------------------------------------------
   PAGE-SINGLE-PRODUCT SCOPED SINGLE PRODUCT STYLES (.page-single-product)
------------------------------------------------------------- */
.page-single-product .product-single-hero {
    background: linear-gradient(135deg, #23A9BC, #1D3D4C);
    padding: 50px 0 60px 0;
    text-align: center;
    color: #ffffff;
}
.page-single-product .product-single-hero h1 { font-family: var(--font-heading); font-size: 42px; font-weight: 800; margin-bottom: 8px; }
.page-single-product .product-breadcrumb { font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.page-single-product .product-breadcrumb a { color: #ffffff; text-decoration: none; font-weight: 500; }

.page-single-product .product-showcase-section { background-color: #F8FAFB; padding: 60px 0 80px 0; z-index: 2; }
.page-single-product .product-main-card { background: #ffffff; border-radius: 20px; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); }
.page-single-product .product-grid-layout { display: grid; grid-template-columns: 100px 420px 1fr; gap: 40px; align-items: start; }

.page-single-product .vertical-thumbs-col { display: flex; flex-direction: column; gap: 16px; }
.page-single-product .thumb-box { width: 90px; height: 110px; background: #E4EEF2; border-radius: 8px; border: 2px solid transparent; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.page-single-product .thumb-box.active, .page-single-product .thumb-box:hover { border-color: var(--color-blue); transform: translateX(4px); }
.page-single-product .thumb-box img { width: 100%; height: 100%; object-fit: cover; }

.page-single-product .main-cover-box { background: #ffffff; border-radius: 16px; padding: 20px; text-align: center; }
.page-single-product .main-cover-box img { width: 100%; height: auto; border-radius: 12px; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.12)); }

.page-single-product .product-info-col h2 { font-family: var(--font-heading); font-size: 32px; font-weight: 800; color: var(--color-text-dark); margin-bottom: 10px; }
.page-single-product .product-rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.page-single-product .product-rating-row .stars { color: #F5B41A; font-size: 15px; }
.page-single-product .product-rating-row .review-count { font-size: 13px; color: #888888; font-weight: 500; }

.page-single-product .figma-content-box { border: 1.5px solid #D5E4EA; background: #F8FCFD; border-radius: 10px; padding: 20px 24px; margin-bottom: 24px; }
.page-single-product .figma-content-box h5 { font-family: var(--font-heading); font-size: 13px; font-weight: 800; color: #4A6B78; text-transform: uppercase; margin-bottom: 10px; }
.page-single-product .figma-content-box ul { list-style: none; padding: 0; }
.page-single-product .figma-content-box ul li { font-size: 14px; color: #333333; margin-bottom: 6px; position: relative; padding-left: 18px; }
.page-single-product .figma-content-box ul li::before { content: '•'; color: var(--color-blue); font-size: 18px; position: absolute; left: 0; top: -2px; }

.page-single-product .product-meta-table { width: 100%; border-collapse: collapse; margin-bottom: 28px; }
.page-single-product .product-meta-table td { padding: 6px 0; font-size: 14px; line-height: 1.5; }
.page-single-product .product-meta-table td.meta-label { font-weight: 700; color: #1D3D4C; width: 140px; }
.page-single-product .product-meta-table td.meta-value { color: #555555; }

.page-single-product .price-action-box { border-top: 1px solid #EAEAEA; padding-top: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.page-single-product .price-label-tag { font-size: 26px; font-weight: 800; color: var(--figma-maroon); }
.page-single-product .price-label-tag span { font-size: 15px; font-weight: 600; color: #888; margin-right: 6px; }

.page-single-product .action-buttons-group { display: flex; align-items: center; gap: 12px; }
.page-single-product .figma-single-qty { width: 65px; height: 48px; border: 2px solid #D5E4EA; border-radius: 6px; text-align: center; font-size: 16px; font-weight: 700; }
.page-single-product .btn-figma-basket-main { background-color: var(--figma-maroon); color: #ffffff; border: none; border-radius: 6px; padding: 0 28px; height: 48px; font-family: var(--font-heading); font-size: 14px; font-weight: 800; cursor: pointer; }
.page-single-product .btn-figma-wishlist { background-color: var(--figma-wishlist-pink); color: #ffffff; border: none; border-radius: 6px; padding: 0 24px; height: 48px; font-family: var(--font-heading); font-size: 14px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }

.page-single-product .product-tabs-section { background: #ffffff; padding: 50px 0; border-top: 1px solid #EAEAEA; }
.page-single-product .product-tabs-nav { display: flex; gap: 8px; border-bottom: 2px solid #E4EEF2; margin-bottom: 30px; }
.page-single-product .tab-btn { background: #E8F3F6; color: #4A6B78; border: none; padding: 12px 24px; font-family: var(--font-heading); font-size: 14px; font-weight: 700; border-top-left-radius: 8px; border-top-right-radius: 8px; cursor: pointer; }
.page-single-product .tab-btn.active, .page-single-product .tab-btn:hover { background: var(--figma-tab-dark); color: #ffffff; }

.page-single-product .tab-panel-content { display: grid; grid-template-columns: 280px 1fr; gap: 40px; }
.page-single-product .topics-sidebar-box { background: #F4F8FA; padding: 20px; border-radius: 12px; }
.page-single-product .topics-sidebar-box h4 { font-family: var(--font-heading); font-size: 15px; font-weight: 800; color: var(--figma-tab-dark); margin-bottom: 12px; }
.page-single-product .topic-desc-body p { font-size: 15px; color: #444444; line-height: 1.7; margin-bottom: 16px; }

.page-single-product .figma-testimonials-dark { background-color: var(--figma-dark-teal); padding: 80px 0 100px 0; color: #ffffff; text-align: center; }
.page-single-product .figma-testimonials-dark h2 { font-family: var(--font-script); font-size: 38px; color: #ffffff; margin-bottom: 40px; }
.page-single-product .figma-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.page-single-product .figma-testi-card { border-radius: 16px; padding: 36px 28px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; }
.page-single-product .figma-testi-card.card-teal { background-color: #23A9BC; }
.page-single-product .figma-testi-card.card-magenta { background-color: #87246A; }
.page-single-product .figma-testi-card.card-gold { background-color: #F5B41A; color: #181818; }
.page-single-product .quote-icon-badge { width: 42px; height: 42px; background: #ffffff; color: #193845; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 20px; }

.page-single-product .figma-related-section { padding: 80px 0; background-color: #ffffff; text-align: center; }
.page-single-product .figma-related-section h2 { font-family: var(--font-script); font-size: 34px; color: var(--figma-tab-dark); margin-bottom: 40px; }
.page-single-product .figma-5col-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.page-single-product .figma-4col-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.page-single-product .figma-mini-card { background: #ffffff; border: 1px dashed #A6C8D5; border-radius: 12px; padding: 16px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; }
.page-single-product .figma-mini-card img { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px; }
.page-single-product .figma-mini-title { font-family: var(--font-heading); font-size: 14px; font-weight: 800; color: var(--figma-tab-dark); margin-bottom: 8px; }
.page-single-product .figma-mini-price { font-size: 13px; font-weight: 800; color: var(--figma-maroon); margin-bottom: 12px; }
.page-single-product .mini-btn-group { display: flex; gap: 6px; }
.page-single-product .btn-mini-add { background: var(--figma-maroon); color: #fff; border: none; padding: 6px 10px; border-radius: 4px; font-size: 10px; font-weight: 800; cursor: pointer; flex: 1; }
.page-single-product .btn-mini-learn { background: #ffffff; color: var(--figma-maroon); border: 1px solid var(--figma-maroon); padding: 6px 10px; border-radius: 4px; font-size: 10px; font-weight: 800; text-decoration: none; flex: 1; text-align: center; }

/* -------------------------------------------------------------
   PAGE-ABOUT SCOPED ABOUT US STYLES (.page-about)
------------------------------------------------------------- */
.page-about section {
    border: none !important;
    outline: none !important;
}

.page-about .section-about-story,
.page-about .section-about-impact,
.page-about .section-about-values {
    position: relative;
    padding-bottom: 110px !important;
}

/* ELIMINATE ALL BORDER LINES & SUBPIXEL GAPS BETWEEN SECTIONS IN ABOUT US */
.page-about .wave-divider-box {
    position: absolute;
    bottom: -2px !important;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 5;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
}

.page-about .wave-divider-box svg {
    position: relative;
    display: block;
    width: 100%;
    height: 82px;
    margin: 0;
    padding: 0;
    transform: scale(1.01);
    transform-origin: bottom center;
}

.page-about .fill-bg-white { fill: #ffffff !important; }
.page-about .fill-values-dark { fill: #193845 !important; }
.page-about .fill-footer-dark { fill: #87246A !important; }

.page-about .about-hero-banner {
    background-color: #C7BDA2;
    padding: 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-about .about-hero-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('images/HAY_Brandmark_White.png');
    background-repeat: repeat;
    background-size: 205px 205px;
    opacity: 0.15;
    pointer-events: none;
}

.page-about .about-hero-banner h1 {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.page-about .about-breadcrumb {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 2;
}

.page-about .about-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

/* OUR STORY SECTION WITH FULL-HEIGHT EXTENDED SCRUNCHED PAPER OVERLAY */
.page-about .section-about-story {
    background-color: #C4D3D9 !important;
    padding: 80px 0 110px 0;
    position: relative;
    overflow: hidden;
}

.page-about .section-about-story::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/aboutus_scrunch.png');
    background-size: 600px auto;
    background-repeat: repeat;
    opacity: 1 !important;
    mix-blend-mode: multiply !important;
    pointer-events: none;
    z-index: 1;
}

.page-about .section-about-story .container {
    position: relative;
    z-index: 2;
}

.page-about .story-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: #23A9BC;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.page-about .story-main-title {
    font-family: var(--font-lexend);
    font-size: 52px;
    font-weight: var(--font-weight-lexend-bold);
    color: #1C3D4E;
    margin-bottom: 36px;
}

.page-about .story-main-title .script-title {
    font-family: var(--font-script);
    font-size: 42px;
    color: #87246A;
    font-weight: normal;
    margin-right: 8px;
}

.page-about .story-grid-row-1 {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

.page-about .story-grid-row-2 {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.page-about .story-img-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.page-about .story-img-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.page-about .story-text-block p {
    font-size: 20px;
    line-height: 1.3;
    color: #1C3D4E;
    margin-bottom: 16px;
}

.page-about .about-mv-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.page-about .mv-card {
    border-radius: 16px;
    padding: 32px 36px;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.page-about .mv-card.mission-card {
    background-color: #23A9BC;
}

.page-about .mv-card.vision-card {
    background-color: #706EAC;
}

.page-about .mv-card h3 {
    font-family: var(--font-lexend);
    font-size: 24px;
    font-weight: var(--font-weight-lexend-bold);
    margin-bottom: 12px;
}

.page-about .mv-card p {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
}

/* FROM VISION TO IMPACT SECTION */
.page-about .section-about-impact {
    background-color: #FAFDFF;
    padding: 80px 0 110px 0;
    position: relative;
}

.page-about .impact-header-center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.page-about .impact-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: #23A9BC;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.page-about .impact-title {
    font-family: var(--font-lexend);
    font-size: 40px;
    font-weight: var(--font-weight-lexend-bold);
    color: #1C3D4E;
    position: relative;
    display: inline-block;
}

.page-about .impact-title::after {
    content: '';
    display: block;
    width: 140px;
    height: 4px;
    background: #23A9BC;
    border-radius: 2px;
    margin: 12px auto 0 auto;
}

.page-about .impact-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.page-about .impact-card {
    border-radius: 20px;
    overflow: hidden;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.page-about .impact-card.card-gold {
    background-color: #F5B41A;
    color: #181818;
}

.page-about .impact-card.card-orange {
    background-color: #F27756;
}

.page-about .impact-card.card-teal {
    background-color: #23A9BC;
}

.page-about .impact-card-content {
    padding: 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.page-about .impact-card h3 {
    font-family: var(--font-lexend);
    font-size: 24px;
    font-weight: var(--font-weight-lexend-bold);
    margin-bottom: 16px;
    text-align: center;
    color: #ffffff;
}

.page-about .impact-card p {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 16px;
    color: #ffffff;
}

.page-about .impact-card strong {
    font-weight: 700;
    display: block;
    margin-top: 12px;
    color: #ffffff;
}

.page-about .impact-btn-wrap {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.page-about .btn-impact-purple {
    background-color: #87246A;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 6px;
    font-family: var(--font-lexend);
    font-size: 13px;
    font-weight: var(--font-weight-lexend-bold);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease;
}

.page-about .btn-impact-teal {
    background-color: #23A9BC;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 6px;
    font-family: var(--font-lexend);
    font-size: 12px;
    font-weight: var(--font-weight-lexend-bold);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
}

.page-about .btn-impact-yellow {
    background-color: #F5B41A;
    color: #181818;
    padding: 12px 20px;
    border-radius: 6px;
    font-family: var(--font-lexend);
    font-size: 12px;
    font-weight: var(--font-weight-lexend-bold);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
}

.page-about .impact-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* OUR VALUES SECTION WITH FULL-HEIGHT EXTENDED SCRUNCHED PAPER OVERLAY */
.page-about .section-about-values {
    background-color: #193845 !important;
    padding: 80px 0 120px 0;
    position: relative;
    overflow: hidden;
}

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

.page-about .section-about-values .container {
    position: relative;
    z-index: 2;
}

.page-about .values-header-center {
    text-align: center;
    margin-bottom: 60px;
}

.page-about .values-title {
    font-family: var(--font-lexend);
    font-size: 44px;
    font-weight: var(--font-weight-lexend-bold);
    color: #ffffff;
}

.page-about .values-title .script-prefix {
    font-family: var(--font-script);
    font-size: 46px;
    color: #ffffff;
    font-weight: normal;
    margin-right: 10px;
}

.page-about .values-title-line {
    width: 160px;
    height: 4px;
    background: #F5B41A;
    margin: 10px auto 0 auto;
    border-radius: 2px;
}

.page-about .values-notes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.page-about .sticky-note-card {
    border-radius: 12px;
    padding: 32px 24px;
    position: relative;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    text-align: center;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
}

.page-about .sticky-note-card:hover {
    transform: scale(1.05) rotate(0deg) !important;
    z-index: 10;
}

/* TAPE GRAPHIC AT TOP */
.page-about .sticky-note-card::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 26px;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 2px;
}

.page-about .sticky-note-card.note-yellow {
    background-color: #F5B41A;
    color: #181818;
    transform: rotate(-4deg);
}

.page-about .sticky-note-card.note-pink {
    background-color: #E371B5;
    color: #ffffff;
    transform: rotate(3deg);
}

.page-about .sticky-note-card.note-orange {
    background-color: #F27756;
    color: #ffffff;
    transform: rotate(-3deg);
}

.page-about .sticky-note-card.note-teal {
    background-color: #23A9BC;
    color: #ffffff;
    transform: rotate(4deg);
}

.page-about .sticky-note-card h4 {
    font-family: var(--font-lexend);
    font-size: 20px;
    font-weight: var(--font-weight-lexend-bold);
    margin-bottom: 12px;
}

.page-about .sticky-note-card p {
    font-size: 16px;
    line-height: 1.4;
    opacity: 0.95;
}

/* -------------------------------------------------------------
   PAGE-METHODOLOGY SCOPED METHODOLOGY STYLES (.page-methodology)
------------------------------------------------------------- */
.page-methodology section {
    border: none !important;
    outline: none !important;
}

.page-methodology .section-methodology-evidence,
.page-methodology .section-methodology-pillars {
    position: relative;
    padding-bottom: 10px !important;
}

.page-methodology .wave-divider-box {
    position: absolute;
    bottom: -2px !important;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 5;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
}

.page-methodology .wave-divider-box svg {
    position: relative;
    display: block;
    width: 100%;
    height: 82px;
    margin: 0;
    padding: 0;
    transform: scale(1.01);
    transform-origin: bottom center;
}

.page-methodology .fill-bg-light { fill: #F3EFE4 !important; }
.page-methodology .fill-footer-dark { fill: #87246A !important; }

/* METHODOLOGY HERO BANNER WITH DECORATIVE GEOMETRIC SHAPES */
.page-methodology .methodology-hero-banner {
    background-color: #C7BDA2;
    padding: 75px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-methodology .methodology-hero-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('images/HAY_Brandmark_White.png');
    background-repeat: repeat;
    background-size: 205px 205px;
    opacity: 0.15;
    pointer-events: none;
}

.page-methodology .methodology-hero-banner h1 {
    font-family: var(--font-lexend);
    font-size: 48px;
    font-weight: var(--font-weight-lexend-bold);
    color: #ffffff;
    margin-bottom: 8px;
    position: relative;
    z-index: 9;
}

.page-methodology .methodology-breadcrumb {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 9;
}

.page-methodology .methodology-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

/* FLOATING GEOMETRIC DECORATIVE SHAPES IN HERO */
.page-methodology .methodology-shapes-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.page-methodology .geo-shape {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.page-methodology .geo-shape-1 {
    top: -20px;
    left: -160px;
    width: 220px;
    height: 220px;
    border: 32px solid #F5B41A;
    border-radius: 50%;
    transform: rotate(-15deg);
}

.page-methodology .geo-shape-2 {
    top: -40px;
    right: -150px;
    width: 280px;
    height: 280px;
    border: 44px solid #F5B41A;
    border-radius: 50%;
    background: radial-gradient(circle, #87246A 35%, transparent 36%);
}

.page-methodology .geo-shape-3 {
    bottom: -30px;
    left: -80px;
    width: 260px;
    height: 60px;
    background-color: #23A9BC;
    transform: rotate(-22deg);
    border-radius: 8px;
}

.page-methodology .geo-shape-4 {
    bottom: -10px;
    right: -90px;
    width: 240px;
    height: 110px;
    background-color: #87246A;
    transform: rotate(20deg);
    border-radius: 16px;
}

/* SECTION 1: EVIDENCE INCORPORATED */
.page-methodology .section-methodology-evidence {
    background-color: #ffffff;
    padding: 80px 0 50px 0 !important;
    position: relative;
}

.page-methodology .evidence-grid {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 50px;
    align-items: center;
    width: 90%;
}

.page-methodology .evidence-img-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    background: #ffffff;
    padding: 16px;
}

.page-methodology .evidence-img-card img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

.page-methodology .evidence-text-block h2 {
    font-family: var(--font-lexend);
    font-size: 38px;
    font-weight: var(--font-lexend-weight-bold);
    color: #1C3D4E;
    line-height: 1.3;
    margin-bottom: 24px;
}

.page-methodology .evidence-text-block .script-highlight {
    font-family: var(--font-script);
    font-size: 38px;
    color: #5C7E8E;
    font-weight: normal;
}

.page-methodology .evidence-text-block .script-highlight-block {
    font-family: var(--font-script);
    font-size: 38px;
    color: #87246A;
    font-weight: normal;
    display: block;
}

.page-methodology .evidence-text-block p {
    font-size: 17.5px;
    line-height: 1.35;
    color: #1C3D4E;
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-regular);
}

/* METHODOLOGY WAVE DIVIDER WITH GRAPH PAPER LINES TEXTURE */
.page-methodology .wave-graph-divider {
    background-color: #E1DBCA !important;
    background-image: 
        linear-gradient(rgba(170, 160, 135, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(170, 160, 135, 0.22) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,45 C240,95 480,95 720,45 C960,-5 1200,-5 1440,45 L1440,120 L0,120 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,45 C240,95 480,95 720,45 C960,-5 1200,-5 1440,45 L1440,120 L0,120 Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    height: 120px;
    width: 100.5%;
    margin-left: -0.25%;
    margin-bottom: -1px;
    position: relative;
    top: 56px;
    z-index: 10;
}

.page-methodology .wave-graph-divider svg {
    display: none !important;
    position: relative;
}

/* SECTION 2: 3 METHODOLOGY PILLARS ON GRAPH PAPER (#E1DBCA) */
.page-methodology .section-methodology-pillars {
    background-color: #E1DBCA !important;
    background-image: 
        linear-gradient(rgba(170, 160, 135, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(170, 160, 135, 0.22) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    padding: 0px 0 5px 0;
}

.page-methodology .pillars-circuit-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 20px 0;
}

.page-methodology .pillar-row {
    display: grid;
    grid-template-columns: 1.35fr 360px;
    gap: 40px;
    align-items: center;
    position: relative;
    padding: 30px 0;
}

.page-methodology .pillar-row-practise {
    grid-template-columns: 360px 1.35fr;
    padding-top: 63px;
    padding-bottom: 63px;
}

.page-methodology .pillar-row-consolidate {
    padding-top: 63px;
    padding-bottom: 63px;
}

/* HORIZONTAL STRAIGHT WHITE LINES ABOVE AND BELOW ROW */
.page-methodology .straight-white-line {
    position: absolute;
    left: -10000px;
    right: 182px;
    height: 10px;
    background-color: #ffffff;
    z-index: 1;
}

.page-methodology .straight-white-line.line-top {
    top: 3px;
}

.page-methodology .straight-white-line.line-bottom {
    bottom: -7px;
    left: 240px;
}

.page-methodology .straight-white-line.line-bottom-practise {
    bottom: 105px;
    left: 240px;
}

.page-methodology .straight-white-line.line-bottom-consolidate {
    top: 326px;
}

/* REMOVE WHITE BOX CONTAINER AROUND MAIN TEXT */
.page-methodology .pillar-content-col-learn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    position: relative;
    top: -0;
    z-index: 2;
}

.page-methodology .pillar-content-col-practise {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    position: relative;
    top: -95px;
    left: -100px;
    z-index: 2;
}

.page-methodology .pillar-content-col-consolidate {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    position: relative;
    top: -190px;
    z-index: 2;
}

.page-methodology .pillar-title {
    font-family: var(--font-script);
    font-size: 48px;
    font-weight: normal;
    margin-bottom: 16px;
}

.page-methodology .title-learn { color: #23A9BC; }
.page-methodology .title-practise { color: #23A9BC; }
.page-methodology .title-consolidate { color: #23A9BC; }

.page-methodology .pillar-desc {
    font-size: 20px;
    line-height: 1.65;
    color: #1C3D4E;
    margin-bottom: 24px;
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-regular);
}

/* KEEP OUR METHODOLOGY WHITE CARD PILL */
.page-methodology .pillar-methodology-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.page-methodology .pillar-methodology-card p {
    font-size: 18px;
    line-height: 1.45;
    color: #1C3D4E;
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-regular);
    margin-bottom: 18px;
}

.page-methodology .pillar-btn-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.page-methodology .btn-pillar-teal {
    background-color: #23A9BC;
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease;
}

.page-methodology .btn-pillar-yellow {
    background-color: #F5B41A;
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease;
}

/* GRAPHIC ARC FRAME WITH WHITE SEMICIRCLE IMAGE CONNECTED TO TOP & BOTTOM LINES */
.page-methodology .pillar-shape-col {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.page-methodology .graphic-arc-frame {
    position: relative;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 320px;
}

.page-methodology .graphic-arc-frame::before {
    display: none;
}

.page-methodology .white-semicircle-arc {
    position: relative;
    top: 13px;
    bottom: -26px;
    right: 0px;
    height: calc(100% + 230px);
    width: auto;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    z-index: 5;
}

.page-methodology .white-semicircle-arc.arc-right {
    top: 5px;
    right: 65px;
}

.page-methodology .white-semicircle-arc.arc-left {
    left: -165px;
    transform: scaleX(-1);
    top: -94px;
}

.page-methodology .white-semicircle-arc.arc-right-2 {
    top: -192.5px;
    right: 70px;
}

.page-methodology .svg-graphic-donut {
    width: 400px;
    height: 400px;
    display: block;
    filter: drop-shadow(0 10px 25px rgba(135, 36, 106, 0.22));
    position: relative;
    right: -150px;
    top: 5px;
}

.page-methodology .svg-graphic-semicircle {
    width: 400px;
    height: 400px;
    display: block;
    filter: drop-shadow(0 10px 25px rgba(135, 36, 106, 0.22));
    position: relative;
    right: -85px;
    top: -92px;
}

.page-methodology .shape-crescent-left {
    width: 135px;
    height: 270px;
    background-color: #87246A;
    border-top-right-radius: 135px;
    border-bottom-right-radius: 135px;
    box-shadow: 0 10px 25px rgba(135, 36, 106, 0.22);
}

.page-methodology .shape-split-circle {
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    right: -130px;
    top: -190px;
}

.page-methodology .split-circle-top {
    width: 400px;
    height: 192px;
    background-color: #87246A;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    filter: drop-shadow(0 6px 15px rgba(135, 36, 106, 0.2));
    position: relative;
    top: -10px;
    z-index: 3;
}

.page-methodology .split-circle-bottom {
    width: 400px;
    height: 192px;
    background-color: #87246A;
    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 200px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    filter: drop-shadow(0 6px 15px rgba(135, 36, 106, 0.2));
    position: relative;
    bottom: -10px;
    z-index: 3;
}

.page-methodology .methodology-difference-banner {
    margin-top: 0px;
    background-color: #23A9BC;
    border-radius: 20px;
    padding: 40px 60px;
    color: #ffffff;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: center;
    box-shadow: 0 15px 35px rgba(35, 169, 188, 0.3);
    position: relative;
    top: -140px;
}

.page-methodology .methodology-difference-banner h2 {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 24px;
}

.page-methodology .methodology-difference-banner .script-diff {
    font-family: var(--font-script);
    font-size: 34px;
    font-weight: normal;
    color: #ffffff;
}

.page-methodology .btn-read-reviews {
    display: inline-block;
    background-color: #706EAC;
    color: #ffffff;
    padding: 12px 32px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease;
}

.page-methodology .btn-read-reviews:hover {
    background-color: #87246A;
}

.page-methodology .banner-img-col img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.2));
}

/* -------------------------------------------------------------
   PAGE-RESOURCES SCOPED FREE RESOURCES STYLES (.page-resources)
------------------------------------------------------------- */
.page-resources section {
    border: none !important;
    outline: none !important;
}

.page-resources .resources-hero-banner {
    background-color: #193845 !important;
    padding: 75px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-resources .resources-hero-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('images/HAY_Brandmark_White.png');
    background-repeat: repeat;
    background-size: 205px 205px;
    opacity: 0.15;
    pointer-events: none;
}

.page-resources .resources-hero-banner h1 {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    position: relative;
    z-index: 3;
}

.page-resources .resources-breadcrumb {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 3;
}

.page-resources .resources-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

/* FLOATING GEOMETRIC SHAPES IN RESOURCES HERO */
.page-resources .geo-shape {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.page-resources .geo-shape-1 {
    top: -20px;
    left: -40px;
    width: 220px;
    height: 220px;
    border: 32px solid #F5B41A;
    border-radius: 50%;
    transform: rotate(-15deg);
}

.page-resources .geo-shape-2 {
    top: -40px;
    right: -30px;
    width: 280px;
    height: 280px;
    border: 44px solid #F5B41A;
    border-radius: 50%;
    background: radial-gradient(circle, #87246A 35%, transparent 36%);
}

.page-resources .geo-shape-3 {
    bottom: -30px;
    left: 40px;
    width: 260px;
    height: 60px;
    background-color: #23A9BC;
    transform: rotate(-22deg);
    border-radius: 8px;
}

.page-resources .geo-shape-4 {
    bottom: -10px;
    right: 30px;
    width: 240px;
    height: 110px;
    background-color: #87246A;
    transform: rotate(20deg);
    border-radius: 16px;
}

/* MAIN CONTENT SECTION (#E6F1F4 LIGHT BLUE) */
.page-resources .section-resources-main {
    background-color: #E6F1F4 !important;
    padding: 60px 0 100px 0;
}

.page-resources .resources-layout-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: start;
}

/* SIDEBAR CARD */
.page-resources .resources-sidebar-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.page-resources .resources-sidebar-card h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: #193845;
    margin-bottom: 12px;
}

.page-resources .sidebar-intro {
    font-size: 13.5px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 24px;
}

.page-resources .resources-search-box {
    position: relative;
    margin-bottom: 28px;
}

.page-resources .resources-search-box input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border-radius: 8px;
    border: 1.5px solid #A6C8D5;
    background: #F4F9FB;
    font-size: 14px;
    outline: none;
    color: #193845;
}

.page-resources .resources-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8CAAB6;
    font-size: 15px;
}

.page-resources .sidebar-widget-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    color: #193845;
    margin-bottom: 16px;
}

.page-resources .resources-cat-list {
    list-style: none;
    padding: 0;
    margin-bottom: 32px;
}

.page-resources .resources-cat-list li {
    margin-bottom: 1px;
}

.page-resources .cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #2D4C58;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.page-resources .cat-link i {
    margin-right: 8px;
    color: #23A9BC;
}

.page-resources .cat-link span {
    font-weight: 500;
    color: #888888;
}

.page-resources .cat-link:hover,
.page-resources .cat-link.active {
    background-color: #E6F1F4;
    color: #193845;
}

.page-resources .resources-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-resources .tag-pill {
    background: #F4F9FB;
    border: 1px solid #D1E3EB;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #6A8A96;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-resources .tag-pill:hover {
    background: #23A9BC;
    color: #ffffff;
    border-color: #23A9BC;
}

/* RIGHT CONTENT LANDING 4 FEATURE CARDS */
.page-resources .feature-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.page-resources .res-card {
    border-radius: 20px;
    padding: 50px 32px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.page-resources .res-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.page-resources .res-card.card-diagnostics {
    background: linear-gradient(135deg, #5B7B8A, #446473);
}

.page-resources .res-card.card-userguides {
    background: linear-gradient(135deg, #C5B695, #B3A482);
}

.page-resources .res-card.card-maths {
    background-color: #23A9BC;
}

.page-resources .res-card.card-english {
    background-color: #F5B41A;
    color: #ffffff;
}

.page-resources .card-icon-wrap {
    font-size: 42px;
    margin-bottom: 16px;
}

.page-resources .math-symbols {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 800;
    letter-spacing: 4px;
}

.page-resources .alphabet-symbols {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 2px;
}

.page-resources .res-card h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
}

/* SELECTED VIEW ITEMS LIST */
.page-resources .resources-selected-view {
    display: none;
    margin-bottom: 40px;
}

.page-resources .res-section-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: #193845;
    margin-bottom: 24px;
}

.page-resources .res-items-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.page-resources .res-item-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 200px 1fr;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.page-resources .res-item-thumb {
    background-color: #23A9BC;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.page-resources .res-item-body {
    padding: 24px;
}

.page-resources .res-item-cat {
    font-size: 12px;
    font-weight: 700;
    color: #23A9BC;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}

.page-resources .res-item-body h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: #193845;
    margin-bottom: 8px;
}

.page-resources .res-item-body p {
    font-size: 14px;
    color: #666666;
    line-height: 1.55;
    margin-bottom: 16px;
}

.page-resources .btn-res-action {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    background-color: #F27756;
    transition: background 0.2s ease;
}

.page-resources .btn-res-action:hover {
    background-color: #87246A;
}

.page-resources .resources-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 40px 0 20px 0;
}

.page-resources .page-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #193845;
    cursor: pointer;
}

.page-resources .page-num.active {
    background-color: #87246A;
    color: #ffffff;
}

.page-resources .page-next {
    font-size: 16px;
    color: #193845;
    cursor: pointer;
}

/* "GOT AN IDEA?" CALLOUT BANNER */
.page-resources .resources-idea-banner {
    background-color: #87246A;
    border-radius: 20px;
    padding: 40px;
    color: #ffffff;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: center;
    box-shadow: 0 15px 35px rgba(135, 36, 106, 0.25);
}

.page-resources .idea-text-col h2 {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 14px;
}

.page-resources .idea-text-col .script-idea {
    font-family: var(--font-script);
    font-size: 34px;
    font-weight: normal;
    color: #ffffff;
}

.page-resources .idea-text-col p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 24px;
}

.page-resources .btn-get-in-touch {
    display: inline-block;
    background-color: #F5B41A;
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease;
}

.page-resources .btn-get-in-touch:hover {
    background-color: #ffffff;
    color: #F5B41A;
}

.page-resources .idea-img-col img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------------------------
   PAGE-RESOURCE-SINGLE SCOPED SINGLE RESOURCE STYLES (.page-resource-single)
------------------------------------------------------------- */
.page-resource-single section {
    border: none !important;
    outline: none !important;
}

.page-resource-single .single-res-hero-banner {
    position: relative;
    background-image: url('images/article_secondary.jpg');
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    text-align: center;
    color: #ffffff;
}

.page-resource-single .hero-overlay-dark {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.page-resource-single .single-res-hero-banner .container {
    position: relative;
    z-index: 2;
}

.page-resource-single .single-res-hero-banner h1 {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.page-resource-single .single-res-breadcrumb {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.page-resource-single .single-res-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

/* MAIN SECTION (#E6F1F4 LIGHT BLUE) */
.page-resource-single .section-single-res-main {
    background-color: #E6F1F4 !important;
    padding: 60px 0 100px 0;
}

.page-resource-single .single-res-layout-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: start;
}

/* SIDEBAR CARD */
.page-resource-single .single-res-sidebar-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.page-resource-single .single-res-sidebar-card h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    color: #193845;
    margin-bottom: 16px;
}

.page-resource-single .single-res-search-box {
    position: relative;
    margin-bottom: 28px;
}

.page-resource-single .single-res-search-box input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border-radius: 8px;
    border: 1.5px solid #A6C8D5;
    background: #F4F9FB;
    font-size: 14px;
    outline: none;
    color: #193845;
}

.page-resource-single .single-res-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8CAAB6;
    font-size: 15px;
}

.page-resource-single .sidebar-widget-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    color: #193845;
    margin-bottom: 16px;
}

/* LATEST RESOURCES WIDGET */
.page-resource-single .latest-res-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.page-resource-single .latest-res-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.page-resource-single .latest-res-thumb {
    width: 54px;
    height: 54px;
    background-color: #706EAC;
    color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.page-resource-single .latest-res-meta h5 {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.page-resource-single .latest-res-meta h5 a {
    color: #193845;
    text-decoration: none;
}

.page-resource-single .latest-res-meta span {
    font-size: 12px;
    color: #888888;
}

.page-resource-single .single-res-cat-list {
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
}

.page-resource-single .single-res-cat-list li {
    margin-bottom: 10px;
}

.page-resource-single .single-res-cat-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #2D4C58;
    text-decoration: none;
}

.page-resource-single .single-res-cat-list a i {
    margin-right: 8px;
    color: #23A9BC;
}

.page-resource-single .single-res-cat-list a span {
    font-weight: 500;
    color: #888888;
}

.page-resource-single .single-res-cat-list a.active,
.page-resource-single .single-res-cat-list a:hover {
    background-color: #E6F1F4;
    color: #193845;
}

.page-resource-single .single-res-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-resource-single .tag-pill {
    background: #F4F9FB;
    border: 1px solid #D1E3EB;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #6A8A96;
    cursor: pointer;
}

/* RIGHT ARTICLE CARD */
.page-resource-single .single-res-article-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 44px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.page-resource-single .article-cat-label {
    font-size: 13px;
    font-weight: 700;
    color: #23A9BC;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

.page-resource-single .article-main-title {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 800;
    color: #193845;
    margin-bottom: 12px;
}

.page-resource-single .article-author-byline {
    font-size: 15px;
    color: #666666;
    margin-bottom: 28px;
}

/* HIGHLIGHT QUOTE CARD */
.page-resource-single .article-highlight-box {
    background-color: #87246A;
    border-radius: 14px;
    padding: 28px 36px;
    color: #ffffff;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 36px;
    box-shadow: 0 10px 25px rgba(135, 36, 106, 0.2);
}

.page-resource-single .article-body-text .article-heading-1,
.page-resource-single .article-body-text .article-heading-2 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: #87246A;
    margin: 32px 0 14px 0;
}

.page-resource-single .article-body-text h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    color: #193845;
    margin: 28px 0 12px 0;
}

.page-resource-single .article-body-text p {
    font-size: 15px;
    color: #444444;
    line-height: 1.75;
    margin-bottom: 20px;
}

/* FEATURE GRAPHIC BOX */
.page-resource-single .article-media-box {
    margin: 32px 0;
    border-radius: 16px;
    overflow: hidden;
    height: 280px;
    background-color: #F5B41A;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.page-resource-single .article-media-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ARTICLE TAGS & SOCIAL FOOTER */
.page-resource-single .article-footer-bar {
    border-top: 1px solid #EAEAEA;
    padding-top: 24px;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.page-resource-single .article-tags-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-resource-single .tag-pill-outline {
    border: 1.5px solid #D1E3EB;
    background: #F4F9FB;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: #6A8A96;
}

.page-resource-single .article-social-share {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #193845;
}

.page-resource-single .article-social-share a {
    width: 32px;
    height: 32px;
    background-color: #87246A;
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.page-resource-single .article-social-share a:hover {
    transform: translateY(-2px);
}

/* PREV / NEXT NAVIGATION CARDS */
.page-resource-single .article-nav-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.page-resource-single .nav-card {
    border: 1.5px solid #D1E3EB;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: #193845;
    background: #ffffff;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.page-resource-single .nav-card:hover {
    background-color: #F4F9FB;
    border-color: #23A9BC;
}

.page-resource-single .nav-card i {
    font-size: 20px;
    color: #193845;
}

.page-resource-single .nav-card span {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

/* -------------------------------------------------------------
   PAGE-CONTACT SCOPED CONTACT US STYLES (.page-contact)
------------------------------------------------------------- */
.page-contact section {
    border: none !important;
    outline: none !important;
}

.page-contact .section-contact-top {
    background-color: #E6F1F4 !important;
    padding: 80px 0 60px 0;
    position: relative;
    overflow: hidden;
}

/* FLOATING GEOMETRIC SHAPES IN CONTACT HERO */
.page-contact .geo-shape {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.page-contact .geo-shape-1 {
    top: -30px;
    left: -40px;
    width: 220px;
    height: 220px;
    border: 32px solid #F5B41A;
    border-radius: 50%;
    transform: rotate(-15deg);
}

.page-contact .geo-shape-2 {
    top: -40px;
    right: -30px;
    width: 280px;
    height: 280px;
    border: 44px solid #F5B41A;
    border-radius: 50%;
    background: radial-gradient(circle, #87246A 35%, transparent 36%);
}

.page-contact .geo-shape-3 {
    bottom: 20px;
    left: 40px;
    width: 260px;
    height: 60px;
    background-color: #23A9BC;
    transform: rotate(-22deg);
    border-radius: 8px;
}

.page-contact .contact-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* LEFT CYAN TORN PAPER INFO CARD */
.page-contact .contact-info-card {
    background-color: #23A9BC;
    color: #ffffff;
    border-radius: 20px;
    padding: 50px 44px;
    position: relative;
    box-shadow: 0 15px 35px rgba(35, 169, 188, 0.25);
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* TORN PAPER STYLING */
    clip-path: polygon(
        0% 0%, 
        100% 2%, 
        98% 98%, 
        2% 100%
    );
}

.page-contact .paper-plane-icon {
    position: absolute;
    top: 24px;
    right: 28px;
    font-size: 38px;
    color: #ffffff;
    transform: rotate(-15deg);
}

.page-contact .contact-info-card h2 {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 32px;
}

.page-contact .info-group {
    margin-bottom: 28px;
}

.page-contact .info-label {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.page-contact .info-email-link {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.page-contact .info-email-link:hover {
    opacity: 0.85;
}

.page-contact .contact-social-circles {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

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

.page-contact .contact-social-circles a:hover {
    transform: translateY(-3px);
    background-color: #F5B41A;
    color: #181818;
}

/* RIGHT GET IN TOUCH FORM CARD */
.page-contact .get-in-touch-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 44px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.page-contact .get-in-touch-card h3 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    color: #193845;
    margin-bottom: 6px;
}

.page-contact .form-subheading {
    font-size: 14px;
    font-weight: 700;
    color: #87246A;
    margin-bottom: 24px;
}

.page-contact .contact-form,
.page-contact .report-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-contact .form-group input,
.page-contact .form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border-radius: 8px;
    border: 1.5px solid #A6C8D5;
    background: #ffffff;
    font-size: 14.5px;
    font-family: var(--font-primary);
    outline: none;
    color: #193845;
    transition: border-color 0.2s ease;
}

.page-contact .form-group input:focus,
.page-contact .form-group textarea:focus {
    border-color: #23A9BC;
}

.page-contact .btn-contact-submit,
.page-contact .btn-report-submit {
    align-self: flex-end;
    background-color: #87246A;
    color: #ffffff;
    border: none;
    padding: 12px 36px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.page-contact .btn-contact-submit:hover,
.page-contact .btn-report-submit:hover {
    background-color: #23A9BC;
    transform: translateY(-2px);
}

/* SECTION 2: APOLOGY BANNER */
.page-contact .section-apology-banner {
    background-color: #E6F1F4 !important;
    padding: 20px 0 40px 0;
}

.page-contact .apology-banner-box {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.page-contact .exclamation-icon {
    width: 34px;
    height: 34px;
    background-color: #F27756;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    flex-shrink: 0;
}

.page-contact .apology-banner-box p {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    color: #193845;
    text-align: center;
}

/* SECTION 3: FAQ & REPORT ERROR SECTION */
.page-contact .section-faq-report {
    background-color: #E6F1F4 !important;
    padding: 40px 0 100px 0;
}

.page-contact .faq-report-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* FAQ CARD */
.page-contact .faq-list-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 44px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.page-contact .faq-list-card h3 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: #193845;
    margin-bottom: 12px;
}

.page-contact .faq-intro {
    font-size: 13.5px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 28px;
}

.page-contact .faq-categories-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-contact .faq-cat-pill {
    display: block;
    padding: 12px 20px;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 2px solid transparent;
}

/* FIGMA EXPLICIT FAQ CATEGORY COLORS & HOVER STATES */
.page-contact .cat-yellow { border-color: #F5B41A; color: #181818; }
.page-contact .cat-yellow:hover { background-color: #F5B41A; color: #181818; }

.page-contact .cat-orange { border-color: #F27756; color: #F27756; }
.page-contact .cat-orange:hover { background-color: #F27756; color: #ffffff; }

.page-contact .cat-teal { border-color: #23A9BC; color: #23A9BC; }
.page-contact .cat-teal:hover { background-color: #23A9BC; color: #ffffff; }

.page-contact .cat-beige { border-color: #C7BDA2; color: #181818; }
.page-contact .cat-beige:hover { background-color: #C7BDA2; color: #ffffff; }

.page-contact .cat-lightpink { border-color: #F7C0B1; color: #181818; }
.page-contact .cat-lightpink:hover { background-color: #F7C0B1; color: #181818; }

.page-contact .cat-pink { border-color: #E371B5; color: #E371B5; }
.page-contact .cat-pink:hover { background-color: #E371B5; color: #ffffff; }

.page-contact .cat-slate { border-color: #8CA5B1; color: #8CA5B1; }
.page-contact .cat-slate:hover { background-color: #8CA5B1; color: #ffffff; }

.page-contact .cat-red { border-color: #F27756; color: #F27756; }
.page-contact .cat-red:hover { background-color: #F27756; color: #ffffff; }

.page-contact .cat-purple { border-color: #706EAC; color: #706EAC; }
.page-contact .cat-purple:hover { background-color: #706EAC; color: #ffffff; }

/* REPORT FORM CARD */
.page-contact .report-form-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 44px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.page-contact .report-form-card h3 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: #193845;
    margin-bottom: 8px;
}

/* -------------------------------------------------------------
   GLOBAL FOOTER SECTION (#87246A MAGENTA/PURPLE FIGMA SPEC)
------------------------------------------------------------- */
.footer-site {
    background-color: #87246A !important;
    color: #ffffff;
    padding: 60px 0 30px 0;
    position: relative;
    z-index: 10;
    margin: 0 !important;
    border: none !important;
}

.page-home .footer-site {
    position: relative;
    top: 0 !important;
}

.footer-site a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-site a:hover {
    opacity: 0.8;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand-col img {
    height: 92px;
    width: auto;
    border-radius: 4px;
    margin-bottom: 16px;
}

.footer-brand-col p {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-light);
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 16px;
}

.footer-email-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-light);
    font-size: 16px;
}

.footer-brand-col p strong,
.footer-site strong {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-bold) !important;
}

.footer-site h4,
.footer-nav-col h4,
.footer-newsletter-col h4 {
    font-family: var(--font-lexend) !important;
    font-size: 21px !important;
    font-weight: var(--font-lexend-weight-semibold) !important;
    margin-bottom: 16px;
    color: #ffffff;
}

.footer-newsletter-col p {
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-light);
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 16px;
    line-height: 1.45;
}

.footer-subscribe-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.footer-subscribe-form input {
    flex: 1;
    padding: 10px 16px;
    border-radius: 6px;
    border: none;
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-light);
    font-size: 16px;
    outline: none;
}

.footer-subscribe-form button {
    background-color: var(--color-orange);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.footer-subscribe-form button:hover {
    background-color: #e06645;
}

.footer-social-icons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.footer-social-circle {
    width: 36px;
    height: 36px;
    background-color: #ffffff !important;
    color: #87246A !important;
    border-radius: 50%;
    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, color 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.footer-social-circle i {
    color: #87246A !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

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

.footer-social-circle:hover i {
    color: #1C3B47 !important;
}

.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
    font-family: var(--font-lexend);
    font-weight: var(--font-lexend-weight-light);
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}

/* =========================================================
   LOGIN / CREATE ACCOUNT PAGE (FIGMA SPECIFICATIONS)
========================================================= */
.account-page-main {
    position: relative;
    background-color: #E6F2F7;
    padding: 45px 0 80px 0;
    min-height: calc(100vh - 120px);
    overflow: hidden;
}

/* BACKGROUND GEOMETRIC CIRCLE PATTERN OVERLAY */
.account-bg-pattern {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(35, 169, 188, 0.06) 0%, transparent 60%),
        radial-gradient(circle at 10% 20%, rgba(135, 36, 106, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(135, 36, 106, 0.05) 0%, transparent 40%);
    opacity: 0.9;
    pointer-events: none;
}

.account-container {
    position: relative;
    z-index: 2;
}

/* PREVIEW FIGMA STATE SWITCHER TOOLBAR */
.figma-state-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    padding: 10px 18px;
    border-radius: 40px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    max-width: 820px;
    margin: 0 auto 36px auto;
    border: 1px solid rgba(135, 36, 106, 0.15);
}

.switcher-label {
    font-family: var(--font-lexend);
    font-size: 13px;
    font-weight: 700;
    color: #87246A;
    margin-right: 6px;
}

.state-btn {
    background: #f0f4f7;
    border: 1px solid #d0dfe6;
    color: #444;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--font-lexend);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.state-btn:hover,
.state-btn.active {
    background: #87246A;
    color: #ffffff;
    border-color: #87246A;
    box-shadow: 0 4px 12px rgba(135, 36, 106, 0.25);
}

/* CARDS GRID LAYOUT */
.account-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
    max-width: 980px;
    margin: 0 auto;
}

@media (max-width: 860px) {
    .account-cards-grid {
        grid-template-columns: 1fr;
    }
}

.single-auth-card-wrap {
    max-width: 580px;
    margin: 0 auto;
}

/* AUTHENTICATION CARD */
.auth-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 38px 36px 36px 36px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    position: relative;
    border: 1px solid rgba(200, 215, 225, 0.6);
}

.auth-card-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    color: #193845;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 22px;
}

.auth-card-subtitle {
    font-family: var(--font-lexend);
    font-size: 14px;
    line-height: 1.5;
    color: #555555;
    margin-bottom: 24px;
}

.auth-error-banner {
    color: #D93838;
    font-family: var(--font-lexend);
    font-size: 13px;
    font-weight: 700;
    margin-top: -12px;
    margin-bottom: 16px;
}

/* SOCIAL BUTTONS */
.social-auth-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.btn-social {
    width: 100%;
    height: 44px;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.btn-social:hover {
    transform: translateY(-2px);
    opacity: 0.92;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.btn-apple {
    background-color: #181818;
    color: #ffffff;
}

.btn-facebook {
    background-color: #3B5998;
    color: #ffffff;
}

.btn-google {
    background-color: #EA4335;
    color: #ffffff;
}

/* AUTH FORM & INPUT FIELDS */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-field {
    width: 100%;
}

.auth-input {
    width: 100%;
    height: 46px;
    background: #ffffff;
    border: 1.5px solid #CFDFE5;
    border-radius: 30px;
    padding: 0 22px;
    font-family: var(--font-lexend);
    font-size: 13.5px;
    color: #193845;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input:focus {
    border-color: #87246A;
    box-shadow: 0 0 0 3px rgba(135, 36, 106, 0.12);
}

.auth-input.has-error {
    border-color: #D93838 !important;
    box-shadow: 0 0 0 3px rgba(217, 56, 56, 0.15) !important;
}

.auth-input::placeholder {
    color: #8CA0A8;
}

.text-center-input {
    text-align: center;
}

.auth-row-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-lexend);
    font-size: 13px;
    color: #444444;
    margin: 4px 0 10px 0;
}

.remember-me-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.remember-me-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #87246A;
    cursor: pointer;
}

.forgot-link {
    color: #193845;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.2s ease;
}

.forgot-link:hover {
    color: #87246A;
}

.auth-helper-note {
    font-family: var(--font-lexend);
    font-size: 12px;
    color: #777777;
    font-style: italic;
    margin-top: 2px;
    margin-bottom: 6px;
}

/* SUBMIT & ACTION BUTTONS */
.btn-auth-submit {
    width: 100%;
    height: 46px;
    background-color: #87246A;
    color: #ffffff;
    border: none;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-auth-submit:hover {
    background-color: #751E5B;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(117, 30, 91, 0.3);
}

.btn-auth-outline {
    height: 46px;
    padding: 0 24px;
    background-color: transparent;
    color: #87246A;
    border: 2px solid #87246A;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-auth-outline:hover {
    background-color: #87246A;
    color: #ffffff;
    transform: translateY(-2px);
}

.auth-dual-action-row {
    display: flex;
    gap: 14px;
    margin-top: 10px;
}

.flex-btn {
    flex: 1;
}

.inline-btn {
    display: inline-block;
}

/* SUCCESS STATE STYLING */
.auth-success-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    color: #87246A;
    line-height: 1.45;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.purple-highlight {
    color: #87246A;
    text-decoration: underline;
}

.resend-link {
    color: #87246A;
    font-weight: 700;
    text-decoration: underline;
}

.resend-link:hover {
    color: #23A9BC;
}

.margin-b-30 {
    margin-bottom: 28px;
}

/* FOOTER LEGAL LINKS */
.account-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
    font-family: var(--font-lexend);
    font-size: 13.5px;
    font-weight: 600;
    color: #555555;
}

.account-footer-links a {
    color: #555555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.account-footer-links a:hover {
    color: #87246A;
    text-decoration: underline;
}

.account-footer-links .divider {
    color: #aaa;
}

/* =========================================================
   CHECKOUT PAGE STYLES (FIGMA SPEC)
========================================================= */
.page-checkout {
    background-color: #ffffff;
    font-family: var(--font-lexend);
    color: #333333;
}

.checkout-page-main {
    padding: 40px 0 80px 0;
    background-color: #ffffff;
}

/* RETURNING CUSTOMER BANNER */
.returning-customer-banner {
    background-color: #87246A;
    color: #ffffff;
    padding: 14px 24px;
    border-radius: 8px;
    font-family: var(--font-lexend);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.returning-customer-banner .login-inline-link {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 800;
}

/* CHECKOUT GRID */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 36px;
    align-items: start;
}

@media (max-width: 1024px) {
    .checkout-grid {
        grid-template-columns: 1fr;
    }
}

/* LEFT COLUMN SECTION BOXES */
.checkout-section-box {
    margin-bottom: 36px;
}

.checkout-section-title {
    font-family: var(--font-lexend);
    font-weight: 800;
    font-size: 20px;
    color: #183B47;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.checkout-subtitle {
    font-size: 13.5px;
    color: #666666;
    margin-bottom: 18px;
}

/* FORM LAYOUT */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

.form-group {
    margin-bottom: 16px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.checkout-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    font-family: var(--font-lexend);
    font-size: 14px;
    color: #333333;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: #ffffff;
    box-sizing: border-box;
}

.checkout-input:focus {
    border-color: #199EB3;
    box-shadow: 0 0 0 3px rgba(25, 158, 179, 0.12);
}

.checkout-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%3C333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.checkout-textarea {
    resize: vertical;
    min-height: 100px;
}

/* CUSTOM CHECKBOXES & TOOLTIPS */
.checkout-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    font-size: 14px;
    font-weight: var(--font-lexend-weight-medium);
    color: #333333;
    user-select: none;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox .checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 18px;
    width: 18px;
    background-color: #ffffff;
    border: 1.5px solid #aaaaaa;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.custom-checkbox:hover input ~ .checkmark {
    border-color: #87246A;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #87246A;
    border-color: #87246A;
}

.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.tooltip-icon {
    color: #999999;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.tooltip-icon:hover {
    color: #87246A;
}

/* CONTACT PREFERENCES ROW */
.contact-pref-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    font-size: 13.5px;
    color: #555555;
}

.pref-label {
    font-weight: 500;
}

.small-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* PAYMENT SECTION & EXPRESS BUTTONS */
.payment-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.payment-card-logos {
    display: flex;
    gap: 10px;
    font-size: 26px;
    color: #1A1F71;
}

.express-payment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

@media (max-width: 600px) {
    .express-payment-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.btn-express-pay {
    padding: 12px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    background-color: #ffffff;
    font-family: var(--font-lexend);
    font-weight: 700;
    font-size: 12.5px;
    color: #333333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-express-pay:hover {
    border-color: #87246A;
    background-color: #fdf5f9;
}

.stripe-badge {
    background-color: #635BFF;
    color: #ffffff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
}

/* SECURE CREDIT CARD FORM */
.credit-card-form-box {
    background-color: #fbfbfb;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.ssl-encrypted-notice {
    font-size: 13px;
    color: #555555;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.ssl-encrypted-notice i {
    color: #199EB3;
}

.privacy-notice-text {
    font-size: 12.5px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 16px;
}

.terms-accept-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.btn-submit-checkout {
    width: 100%;
    height: 52px;
    background-color: #199EB3;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-lexend);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.15s ease;
}

.btn-submit-checkout:hover {
    background-color: #148395;
    transform: translateY(-1px);
}

/* RIGHT SIDEBAR YOUR CART CARD */
.checkout-cart-card {
    background-color: #728E95;
    border-radius: 16px;
    padding: 24px;
    color: #ffffff;
}

.cart-card-header {
    font-weight: 800;
    font-size: 22px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.free-shipping-bar {
    background-color: #183B47;
    color: #ffffff;
    text-align: center;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 20px;
}

.checkout-discount-wrap {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.discount-code-input {
    flex: 1;
    background-color: #92AAAF;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    color: #ffffff;
    font-family: var(--font-lexend);
    font-size: 13.5px;
    outline: none;
}

.discount-code-input::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.btn-apply-discount {
    background-color: #87246A;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-apply-discount:hover {
    background-color: #6e1c55;
}

/* CHECKOUT ITEMS TABLE */
.checkout-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 13px;
}

.checkout-items-table th {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.checkout-items-table td {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.item-name-td {
    font-weight: 600;
}

.qty-pill {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.btn-remove-item {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 13px;
    transition: color 0.2s ease;
}

.btn-remove-item:hover {
    color: #ff6b6b;
}

/* TOTALS SUMMARY */
.cart-totals-summary {
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    padding-top: 14px;
    margin-bottom: 24px;
}

.summary-total-line {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 600;
}

.grand-total-line {
    background-color: #183B47;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 16px;
    margin-top: 10px;
}

/* RECOMMENDED BUNDLES */
.recommended-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.rec-bundle-card {
    background-color: #183B47;
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rec-bundle-img {
    width: 44px;
    height: 54px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 6px;
}

.rec-bundle-title {
    font-weight: 700;
    font-size: 11px;
    margin-bottom: 4px;
}

.rec-stars {
    color: #F5B41A;
    font-size: 9px;
    margin-bottom: 4px;
}

.rec-price-row {
    font-size: 8.5px;
    margin-bottom: 8px;
}

.rec-price-row .old-price {
    display: block;
    text-decoration: line-through;
    opacity: 0.7;
}

.rec-price-row .new-price {
    display: block;
    font-weight: 700;
    color: #F5B41A;
}

.btn-rec-add {
    background-color: #F5B41A;
    color: #183B47;
    border: none;
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 9.5px;
    font-weight: 800;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease;
}

.btn-rec-add:hover {
    background-color: #e5a717;
}

/* SECURITY FOOTER */
.cart-security-footer {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 16px;
}

.pay-using-title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

.pay-using-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 24px;
    margin-bottom: 16px;
}

.payment-security-box {
    background-color: rgba(24, 59, 71, 0.5);
    border-radius: 8px;
    padding: 12px;
    font-size: 11.5px;
    line-height: 1.4;
}

.payment-security-box strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
}

/* CHECKOUT SUCCESSFUL STATE VIEW (FIGMA SPEC) */
.checkout-success-view-container {
    background-color: #E6F2F7;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background-image: radial-gradient(#199EB3 0.75px, transparent 0.75px), radial-gradient(#199EB3 0.75px, #E6F2F7 0.75px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

.checkout-success-card {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(24, 59, 71, 0.08);
    padding: 56px 40px;
    text-align: center;
    max-width: 580px;
    width: 100%;
}

.success-check-circle {
    width: 64px;
    height: 64px;
    background-color: #E0F7FA;
    color: #199EB3;
    font-size: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.success-title {
    font-family: var(--font-lexend);
    font-weight: 800;
    font-size: 28px;
    color: #183B47;
    margin-bottom: 14px;
}

.success-desc {
    font-family: var(--font-lexend);
    font-size: 15px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 36px;
}

.success-actions-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-back-home {
    border: 2px solid #87246A;
    color: #87246A;
    background-color: transparent;
    padding: 12px 28px;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-back-home:hover {
    background-color: #87246A;
    color: #ffffff;
}

.btn-continue-shopping {
    background-color: #87246A;
    color: #ffffff;
    border: 2px solid #87246A;
    padding: 12px 30px;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-continue-shopping:hover {
    background-color: #6e1c55;
    border-color: #6e1c55;
}

.checkout-qty-input {
    width: 44px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: rgba(0, 0, 0, 0.2);
    color: #ffffff;
    font-family: var(--font-lexend);
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    outline: none;
}

.checkout-qty-input:focus {
    border-color: #ffffff;
    background-color: rgba(0, 0, 0, 0.35);
}

/* =============================================================
   FIGMA SHOP INTRO & LPC SHOWCASE SECTION
   ============================================================= */
.shop-hero-banner {
    position: relative;
    height: 333px !important;
    min-height: 333px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

.shop-hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/HAY_Brandmark_White.png');
    background-repeat: repeat;
    background-size: 205px 205px;
    background-position: center top;
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
}

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

.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;
}

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

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

.shop-hero-banner h1 {
    font-size: 38px !important;
    font-weight: 800;
    margin: 0 0 6px 0 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px;
    color: #ffffff !important;
}

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

.shop-breadcrumb {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.95;
    margin: 0 !important;
}

.shop-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.shop-breadcrumb a:hover {
    text-decoration: underline;
}

.shop-lpc-showcase {
    position: relative;
    background-color: #ffffff;
    padding: 50px 0 40px;
    border-bottom: 1px solid #e2e8f0;
    z-index: 2;
}

.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;
}

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

.shop-lpc-showcase .lpc-main-headline .hl-learn { color: #F5B41A; font-weight: 800; font-family: var(--font-script); }
.shop-lpc-showcase .lpc-main-headline .hl-practise { color: #199EB3; font-weight: 800; font-family: var(--font-script); }
.shop-lpc-showcase .lpc-main-headline .hl-consolidate { color: #87246A; font-weight: 800; font-family: var(--font-script); }

/* STICKY WARNING NOTE */
.warning-sticky-note {
    position: absolute;
    top: -20px;
    right: -200px;
    width: 180px;
    padding: 18px 16px;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    z-index: 10;
    font-family: 'Lexend', sans-serif;
}

.warning-sticky-note.maths-note {
    background-color: #F5B41A;
    color: #183B47;
    transform: rotate(5deg);
}

.warning-sticky-note.english-note {
    background-color: #F27756;
    color: #ffffff;
    transform: rotate(-4deg);
}

.warning-sticky-note::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 18px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.warning-sticky-note .note-heading {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.warning-sticky-note .note-text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

/* TWO COLUMN LPC GRID */
.lpc-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: center;
}

.lpc-graphic-card {
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.04);
}

.lpc-graphic-card.maths-card {
    background-color: #B9E3EE;
}

.lpc-graphic-card.english-card {
    background-color: #FCE39E;
}

.lpc-graphic-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
    top: -18px;
}

.lpc-content-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lpc-intro-paragraph {
    font-size: 18px;
    color: #334155;
    line-height: 1.6;
}

.lpc-intro-paragraph strong {
    color: #183B47;
}

.lpc-points-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

.lpc-point-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.lpc-point-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}

.lpc-point-number.num-1 { background-color: #F5B41A; color: #183B47; }
.lpc-point-number.num-2 { background-color: #199EB3; }
.lpc-point-number.num-3 { background-color: #87246A; }

.lpc-point-text {
    font-size: 18px;
    color: #475569;
    line-height: 1.5;
}

.lpc-point-text strong {
    color: #183B47;
}

.view-workbooks-anchor-wrap {
    text-align: center;
    margin-top: 32px;
}

.view-workbooks-anchor {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #183B47;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.view-workbooks-anchor:hover {
    color: #199EB3;
    transform: translateY(3px);
}

@media (max-width: 991px) {
    .lpc-showcase-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .warning-sticky-note {
        position: relative;
        top: 0;
        right: 0;
        margin: 0 auto 24px;
        transform: rotate(0);
    }
}

/* =============================================================
   FIGMA SHOP LAYOUT & CARD SPECIFICATIONS
   ============================================================= */
.shop-sidebar {
    background-color: #E6F2F7;
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.sidebar-switch-btn {
    display: block !important;
    width: 100% !important;
    background-color: #1C3B47 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 0 18px !important;
    border-radius: 30px !important;
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    margin-bottom: 14px !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(28, 59, 71, 0.2);
    height: 44px !important;
    line-height: 44px !important;
}

.sidebar-switch-btn:hover {
    background-color: #142a33;
    transform: translateY(-2px);
}

.sidebar-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    color: #1C3B47;
    margin-bottom: 12px;
}

.sidebar-search-box {
    position: relative;
    margin-bottom: 24px;
}

.sidebar-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #728E95;
    font-size: 14px;
}

.sidebar-search-box input {
    width: 100%;
    background-color: #e1edf2;
    border: 1px solid #c2d8e3;
    border-radius: 8px;
    padding: 11px 14px 11px 38px;
    font-family: var(--font-lexend);
    font-size: 13.5px;
    color: #1C3B47;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.sidebar-search-box input:focus {
    border-color: #199EB3;
    background-color: #ffffff;
}

.subcategories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.subcat-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 10px;
    border-radius: 2px;
    font-family: var(--font-lexend);
    font-weight: 600;
    font-size: 14px;
    color: #1C3B47;
    text-decoration: none;
    transition: all 0.2s ease;
}

.subcat-link:hover {
    color: #199EB3;
    background-color: rgba(255, 255, 255, 0.5);
}

/* ACTIVE YEAR ITEM WITH ARROW > AND PRESERVED YEAR COLOR */
.subcat-link.active {
    color: #ffffff !important;
    font-weight: 800;
    border-radius: 24px;
    padding: 9px 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.subcat-link .active-arrow {
    font-size: 12px;
    font-weight: 800;
}

/* PRESERVED YEAR GROUP COLORS FOR ACTIVE YEAR PILLS */
.subcat-link.active[data-year="rec"], .subcat-link.active.year-rec { background-color: #C7BDA2; color: #ffffff !important; }
.subcat-link.active[data-year="y1"], .subcat-link.active.year-y1 { background-color: #E1CE9D; color: #183B47 !important; }
.subcat-link.active[data-year="y2"], .subcat-link.active.year-y2 { background-color: #D0A1C8; color: #ffffff !important; }
.subcat-link.active[data-year="y3"], .subcat-link.active.year-y3 { background-color: #9DC7D8; color: #183B47 !important; }
.subcat-link.active[data-year="y4"], .subcat-link.active.year-y4 { background-color: #B7D5C4; color: #183B47 !important; }
.subcat-link.active[data-year="y5"], .subcat-link.active.year-y5 { background-color: #F5B41A; color: #183B47 !important; }
.subcat-link.active[data-year="y6"], .subcat-link.active.year-y6 { background-color: #199EB3; color: #ffffff !important; }
.subcat-link.active[data-year="y7"], .subcat-link.active.year-y7 { background-color: #87246A; color: #ffffff !important; }
.subcat-link.active[data-year="y8"], .subcat-link.active.year-y8 { background-color: #E371B5; color: #ffffff !important; }
.subcat-link.active[data-year="y9"], .subcat-link.active.year-y9 { background-color: #F27756; color: #ffffff !important; }
.subcat-link.active[data-year="all"] { background-color: #1C3B47; color: #ffffff !important; }

/* STRAND & SKILL FILTER PILLS HEADER BAR */
.strand-filter-section {
    margin-bottom: 28px;
}

.strand-filter-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 14px;
}

.strand-filter-title.maths-title {
    color: #199EB3;
}

.strand-filter-title.english-title {
    color: #87246A;
}

.strand-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.strand-pill-btn {
    background: #ffffff;
    color: #1C3B47;
    border: 1.5px solid #1C3B47;
    padding: 7px 15px;
    border-radius: 8px;
    font-family: var(--font-lexend);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.strand-pill-btn:hover {
    background-color: #1C3B47;
    color: #ffffff;
}

.strand-pill-btn.active {
    background-color: #1C3B47;
    color: #ffffff;
    border-color: #1C3B47;
}

/* FIGMA 3-COLUMN PRODUCT CARDS */
.figma-catalog-main {
    flex: 1;
}

.figma-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.figma-product-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.figma-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

.figma-thumb-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    background-color: transparent;
    text-align: center;
    padding: 0;
    width: 100%;
}

.figma-thumb-wrapper > a:not(.thumb-zoom-icon) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.figma-thumb-wrapper img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
}

.thumb-zoom-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px !important;
    height: 28px !important;
    background-color: #1C3B47;
    color: #ffffff;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 10;
    flex-shrink: 0;
}

.thumb-zoom-icon:hover {
    background-color: #199EB3;
    transform: scale(1.1);
}

.figma-product-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    color: #1C3B47;
    text-align: center;
    margin-bottom: 8px;
    line-height: 1.35;
}

.figma-product-title a {
    color: inherit;
    text-decoration: none;
}

.figma-product-title a:hover {
    color: #199EB3;
}

.figma-badges-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}

.sku-badge, .stock-badge {
    border: 1px solid #CBD5E1;
    color: #64748B;
    font-family: var(--font-lexend);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    background-color: #ffffff;
}

.retail-price-label {
    text-align: center;
    font-family: var(--font-lexend);
    font-weight: 700;
    font-size: 14.5px;
    color: #1C3B47;
    margin-bottom: 14px;
}

.retail-price-label span {
    color: #87246A;
    font-weight: 800;
    font-size: 16px;
}

.figma-action-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: auto;
}

.btn-figma-add-basket {
    background-color: #87246A;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.btn-figma-add-basket:hover {
    background-color: #6e1c55;
}

.btn-figma-learn-more {
    border: 1.5px solid #87246A;
    color: #87246A;
    background-color: transparent;
    padding: 7px 14px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 11px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-figma-learn-more:hover {
    background-color: #87246A;
    color: #ffffff;
}

/* =============================================================
   REPORT AN ERROR PAGE STYLING
   ============================================================= */
.report-error-hero {
    position: relative;
    background: linear-gradient(135deg, #E06D53 0%, #D95D40 100%);
    padding: 48px 0;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

.report-error-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/HAY_Brandmark_White.png');
    background-repeat: repeat;
    background-size: 205px 205px;
    background-position: center top;
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
}

/* =============================================================
   POLICY PAGES STYLING (REFUND, PRIVACY, TERMS, DELIVERY)
   ============================================================= */
.policy-hero-banner {
    position: relative;
    background: linear-gradient(135deg, #1C3B47 0%, #122831 100%);
    padding: 56px 0 48px;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

.policy-hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/HAY_Brandmark_White.png');
    background-repeat: repeat;
    background-size: 205px 205px;
    background-position: center top;
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
}

.policy-hero-banner .container {
    position: relative;
    z-index: 2;
}

.policy-hero-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 38px;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.policy-breadcrumb {
    font-family: var(--font-lexend);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
}

.policy-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

.policy-breadcrumb a:hover {
    text-decoration: underline;
}

.policy-content-section {
    padding: 60px 0 90px;
    background-color: #ffffff;
}

.policy-content-wrap {
    max-width: 860px;
    margin: 0 auto;
    color: #334155;
    font-family: var(--font-lexend);
    line-height: 1.7;
}

.policy-content-wrap h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 24px;
    color: #1C3B47;
    margin-top: 32px;
    margin-bottom: 14px;
}

.policy-content-wrap h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    color: #1C3B47;
    margin-top: 24px;
    margin-bottom: 10px;
}

.policy-content-wrap p {
    font-size: 14.5px;
    color: #475569;
    margin-bottom: 16px;
    line-height: 1.7;
}

.policy-content-wrap ul {
    margin: 12px 0 20px 24px;
    padding: 0;
}

.policy-content-wrap li {
    font-size: 14px;
    color: #475569;
    margin-bottom: 8px;
}

.report-error-hero .container {
    position: relative;
    z-index: 2;
}

.report-error-hero h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 36px;
    color: #ffffff;
    margin-bottom: 8px;
}

.report-error-breadcrumb {
    font-family: var(--font-lexend);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.report-error-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

.report-error-breadcrumb span {
    margin: 0 6px;
    opacity: 0.8;
}

.report-error-main {
    padding: 60px 0 80px;
    background-color: #FAFAF9;
}

.report-error-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: start;
}

.error-left-col {
    padding-right: 10px;
}

.error-warning-icon-wrap {
    width: 56px;
    height: 56px;
    background-color: #F97316;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 900;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3);
    margin-bottom: 20px;
}

.error-main-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 24px;
    color: #1C3B47;
    line-height: 1.35;
    margin-bottom: 16px;
}

.error-para {
    font-family: var(--font-lexend);
    font-size: 14.5px;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 16px;
}

.error-gift-box {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 22px 24px;
    margin-top: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.error-gift-box p {
    font-family: var(--font-lexend);
    font-size: 13.5px;
    color: #334155;
    line-height: 1.6;
    margin: 0;
}

/* RIGHT FORM CARD */
.report-form-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 36px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.report-form-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 20px;
    color: #1C3B47;
    margin-bottom: 6px;
}

.report-form-subtitle {
    font-family: var(--font-lexend);
    font-size: 13px;
    font-weight: 700;
    color: #87246A;
    line-height: 1.45;
    margin-bottom: 10px;
}

.form-mandatory-note {
    font-family: var(--font-lexend);
    font-size: 12.5px;
    font-weight: 700;
    color: #DC2626;
    margin-bottom: 20px;
}

.report-form-group {
    margin-bottom: 18px;
}

.report-form-group input,
.report-form-group textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 12px 14px;
    font-family: var(--font-lexend);
    font-size: 13.5px;
    color: #1C3B47;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.report-form-group input:focus,
.report-form-group textarea:focus {
    border-color: #87246A;
    box-shadow: 0 0 0 3px rgba(135, 36, 106, 0.1);
}

.report-submit-btn-wrap {
    text-align: right;
    margin-top: 24px;
}

.btn-report-submit {
    background-color: #87246A;
    color: #ffffff;
    border: none;
    padding: 12px 36px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-report-submit:hover {
    background-color: #6e1c55;
    transform: translateY(-2px);
}

/* SUCCESS MODAL POPUP */
.report-success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 59, 71, 0.65);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.report-success-card {
    background: #ffffff;
    border-radius: 20px;
    max-width: 520px;
    width: 100%;
    padding: 40px 32px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: popupScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popupScale {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

.success-check-circle {
    width: 64px;
    height: 64px;
    background-color: #E0F2FE;
    color: #0EA5E9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
}

.report-success-card h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 24px;
    color: #1C3B47;
    margin-bottom: 12px;
}

.report-success-card p {
    font-family: var(--font-lexend);
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 28px;
}

.btn-report-back-home {
    display: inline-block;
    background-color: #87246A;
    color: #ffffff !important;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 12.5px;
    padding: 12px 32px;
    border-radius: 24px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-report-back-home:hover {
    background-color: #6e1c55;
    transform: translateY(-2px);
}

@media (max-width: 868px) {
    .report-error-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 991px) {
    .figma-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .figma-catalog-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   FAQS PAGE STYLING (FIGMA ACCORDION SPEC)
   ============================================================= */
.faq-main-section {
    padding: 60px 0 90px;
    background-color: #EBF3F6;
    position: relative;
    overflow: hidden;
}

/* Geometric Watermark Graphic on Bottom Left */
.faq-main-section::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -80px;
    width: 380px;
    height: 380px;
    background-image: url('images/peopel_logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

.faq-layout-grid {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 36px;
    align-items: start;
    position: relative;
    z-index: 2;
}

/* Sidebar Categories Card */
.faq-sidebar-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.faq-sidebar-card h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 20px;
    color: #1C3B47;
    margin-bottom: 8px;
}

.faq-sidebar-desc {
    font-family: var(--font-lexend);
    font-size: 12.5px;
    color: #475569;
    line-height: 1.55;
    margin-bottom: 20px;
}

.faq-search-box {
    position: relative;
    margin-bottom: 20px;
}

.faq-search-box input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: var(--font-lexend);
    font-size: 13px;
    box-sizing: border-box;
}

.faq-search-box i {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
}

.faq-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq-cat-item {
    margin-bottom: 6px;
}

.faq-cat-link {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--font-lexend);
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: all 0.2s ease;
}

.faq-cat-link:hover {
    background-color: #f1f5f9;
    color: #1C3B47;
}

.faq-cat-link.active {
    background-color: #FDE8AB;
    color: #1C3B47;
    font-weight: 700;
}

.faq-cat-link.active::before {
    content: '›';
    font-size: 18px;
    font-weight: 800;
    margin-right: 8px;
    color: #F5B41A;
}

/* Right Accordion List */
.faq-accordion-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-accordion-card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.faq-accordion-header {
    background-color: #F5B41A;
    color: #1C3B47;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: var(--font-lexend);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.4;
}

.faq-accordion-header.coral-header {
    background-color: #F27756;
    color: #ffffff;
}

.faq-accordion-header.purple-header {
    background-color: #7C6DA0;
    color: #ffffff;
}

.faq-accordion-header.olive-header {
    background-color: #B7A977;
    color: #ffffff;
}

.faq-accordion-header.teal-header {
    background-color: #199EB3;
    color: #ffffff;
}

.faq-accordion-header.pink-header {
    background-color: #E371B5;
    color: #ffffff;
}

.faq-accordion-header.slate-header {
    background-color: #5B7B8D;
    color: #ffffff;
}

.faq-accordion-header.peach-header {
    background-color: #F28F79;
    color: #ffffff;
}

.faq-accordion-header.lavender-header {
    background-color: #9696C7;
    color: #ffffff;
}

/* Category Sidebar Active Themes matching Figma */
.faq-cat-link.active,
.faq-cat-link.active-yellow {
    background-color: #FDE8AB !important;
    color: #1C3B47 !important;
    font-weight: 700;
}
.faq-cat-link.active::before,
.faq-cat-link.active-yellow::before {
    content: '›';
    font-size: 16px;
    font-weight: 800;
    margin-right: 6px;
    color: #F5B41A;
}

.faq-cat-link.active-coral {
    background-color: #FCDCD4 !important;
    color: #80230A !important;
    font-weight: 700;
}
.faq-cat-link.active-coral::before {
    content: '›';
    font-size: 16px;
    font-weight: 800;
    margin-right: 6px;
    color: #F27756;
}

.faq-cat-link.active-purple {
    background-color: #E5E0F2 !important;
    color: #3B2C5F !important;
    font-weight: 700;
}
.faq-cat-link.active-purple::before {
    content: '›';
    font-size: 16px;
    font-weight: 800;
    margin-right: 6px;
    color: #7C6DA0;
}

.faq-cat-link.active-olive {
    background-color: #F0EBD8 !important;
    color: #4A4328 !important;
    font-weight: 700;
}
.faq-cat-link.active-olive::before {
    content: '›';
    font-size: 16px;
    font-weight: 800;
    margin-right: 6px;
    color: #B7A977;
}

.faq-cat-link.active-teal {
    background-color: #D2F2F7 !important;
    color: #0C4B56 !important;
    font-weight: 700;
}
.faq-cat-link.active-teal::before {
    content: '›';
    font-size: 16px;
    font-weight: 800;
    margin-right: 6px;
    color: #199EB3;
}

.faq-cat-link.active-pink {
    background-color: #FAD6EC !important;
    color: #6E1F52 !important;
    font-weight: 700;
}
.faq-cat-link.active-pink::before {
    content: '›';
    font-size: 16px;
    font-weight: 800;
    margin-right: 6px;
    color: #E371B5;
}

.faq-cat-link.active-slate {
    background-color: #D8E4EC !important;
    color: #1E313D !important;
    font-weight: 700;
}
.faq-cat-link.active-slate::before {
    content: '›';
    font-size: 16px;
    font-weight: 800;
    margin-right: 6px;
    color: #5B7B8D;
}

.faq-cat-link.active-peach {
    background-color: #FDEAE4 !important;
    color: #A6442E !important;
    font-weight: 700;
}
.faq-cat-link.active-peach::before {
    content: '›';
    font-size: 16px;
    font-weight: 800;
    margin-right: 6px;
    color: #F28F79;
}

.faq-cat-link.active-lavender {
    background-color: #E8E8F8 !important;
    color: #50508D !important;
    font-weight: 700;
}
.faq-cat-link.active-lavender::before {
    content: '›';
    font-size: 16px;
    font-weight: 800;
    margin-right: 6px;
    color: #9696C7;
}

/* =============================================================
   HARRISON & YORK ARTICLES LISTING & SINGLE ARTICLE STYLING
   ============================================================= */
.articles-main-section {
    padding: 50px 0 80px;
    background-color: #EEF6FA;
}

.articles-layout-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: start;
}

/* Welcome Card */
.articles-welcome-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.articles-welcome-card h1 {
    font-family: var(--font-script);
    font-size: 26px;
    font-weight: 700;
    color: #5C7E8E;
    margin-bottom: 10px;
}

.articles-welcome-card .rest {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: #1C3B47;
    margin-bottom: 10px;
}

.articles-welcome-card .welcome-subtitle {
    font-family: var(--font-lexend);
    font-size: 16px;
    font-weight: 700;
    color: #87246A;
    margin-bottom: 12px;
    line-height: 1.4;
}

.articles-welcome-card p {
    font-family: var(--font-lexend);
    font-size: 14px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

/* Articles 2x2 Grid */
.articles-2x2-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.article-card-figma {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.article-card-figma:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.article-thumb-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.article-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.article-card-figma:hover .article-thumb-wrapper img {
    transform: scale(1.05);
}

.article-date-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ffffff;
    color: #1C3B47;
    font-family: var(--font-lexend);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.article-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-cat-label {
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.article-card-title {
    font-family: var(--font-lexend);
    font-size: 16.5px;
    font-weight: 700;
    color: #1C3B47;
    line-height: 1.35;
    margin-bottom: 10px;
}

.article-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-card-title a:hover {
    color: #87246A;
}

.article-card-excerpt {
    font-family: var(--font-lexend);
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* Pagination */
.articles-pagination-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}

.page-num-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    color: #1C3B47;
    border: 1px solid #CBD5E1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-lexend);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-num-btn.active {
    background: #87246A;
    color: #ffffff;
    border-color: #87246A;
}

.page-num-btn:hover:not(.active) {
    background: #F1F5F9;
    border-color: #94A3B8;
}

/* Sidebar Widgets & Tooltips */
.sidebar-widget {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.sidebar-widget h4 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: #1C3B47;
    margin-bottom: 16px;
}

.latest-articles-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.latest-article-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #1C3B47;
}

.latest-article-item img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.latest-article-title {
    font-family: var(--font-lexend);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #1C3B47;
    transition: color 0.2s ease;
}

.latest-article-item:hover .latest-article-title {
    color: #87246A;
}

.latest-article-date {
    font-size: 11px;
    color: #64748B;
    margin-top: 3px;
}

/* Category List with Tooltips */
.article-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-cat-item-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid #F1F5F9;
}

.article-cat-item-wrap:last-child {
    border-bottom: none;
}

.cat-left-info {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.cat-qmark-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #E2E8F0;
    color: #475569;
    font-family: var(--font-lexend);
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cat-qmark-icon:hover {
    background: #87246A;
    color: #ffffff;
}

/* Information Bubble Pop-up */
.cat-tooltip-box {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
    background: #87246A;
    color: #ffffff;
    padding: 12px 14px;
    border-radius: 10px;
    font-family: var(--font-lexend);
    font-size: 12px;
    line-height: 1.45;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.cat-tooltip-box::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent #87246A transparent transparent;
}

.cat-qmark-icon:hover .cat-tooltip-box {
    opacity: 1;
    visibility: visible;
}

.article-cat-name {
    font-family: var(--font-lexend);
    font-size: 13px;
    color: #475569;
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-cat-name:hover {
    color: #1C3B47;
    font-weight: 600;
}

.article-cat-count {
    font-family: var(--font-lexend);
    font-size: 12px;
    color: #94A3B8;
}

/* Tags */
.article-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-pill-btn {
    background: #F1F5F9;
    border: 1px solid #CBD5E1;
    color: #475569;
    font-family: var(--font-lexend);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.tag-pill-btn:hover {
    background: #87246A;
    color: #ffffff;
    border-color: #87246A;
}

/* =============================================================
   SINGLE ARTICLE PAGE STYLING
   ============================================================= */
.single-article-main {
    padding: 50px 0 80px;
    background-color: #EEF6FA;
}

.article-key-takeaway {
    background: #87246A;
    color: #ffffff;
    border-radius: 14px;
    padding: 24px 28px;
    font-family: var(--font-lexend);
    font-size: 15px;
    line-height: 1.65;
    font-weight: 500;
    margin-bottom: 28px;
}

.single-article-body h2, .single-article-body h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: #1C3B47;
    margin: 28px 0 12px;
}

.single-article-body p {
    font-family: var(--font-lexend);
    font-size: 14px;
    color: #334155;
    line-height: 1.75;
    margin-bottom: 18px;
}

.article-2img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0;
}

.article-2img-grid img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
}

.article-quote-callout {
    background: #E0F2F1;
    border-left: 4px solid #23A9BC;
    padding: 20px 24px;
    border-radius: 0 12px 12px 0;
    margin: 24px 0;
    color: #0C4B56;
    font-family: var(--font-lexend);
    font-style: italic;
    font-size: 14.5px;
    line-height: 1.6;
}

.social-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #CBD5E1;
    border-bottom: 1px solid #CBD5E1;
    padding: 14px 0;
    margin: 32px 0;
}

.social-share-title {
    font-family: var(--font-lexend);
    font-size: 13px;
    font-weight: 700;
    color: #1C3B47;
}

.social-share-icons {
    display: flex;
    gap: 10px;
}

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

.social-share-circle:hover {
    background: #F5B41A;
    transform: translateY(-2px);
}

.article-nav-prev-next {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 40px;
}

.article-nav-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 10px;
    text-decoration: none;
    color: #1C3B47;
    font-family: var(--font-lexend);
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}

.article-nav-link-btn:hover {
    background: #87246A;
    color: #ffffff;
}

/* Comments Section */
.article-comments-wrapper {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
}

.article-comments-wrapper h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: #1C3B47;
    margin-bottom: 24px;
}

.comment-single-item {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #F1F5F9;
}

.comment-avatar-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    font-size: 18px;
    flex-shrink: 0;
}

.comment-author-name {
    font-family: var(--font-lexend);
    font-size: 14px;
    font-weight: 700;
    color: #1C3B47;
}

.comment-date {
    font-size: 11.5px;
    color: #94A3B8;
    margin-left: 8px;
    font-weight: 400;
}

.comment-text-p {
    font-family: var(--font-lexend);
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    margin: 6px 0 8px;
}

.comment-reply-btn {
    font-family: var(--font-lexend);
    font-size: 12px;
    font-weight: 700;
    color: #87246A;
    text-decoration: none;
}

.comment-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

.comment-form-grid input, .comment-form-grid textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    font-family: var(--font-lexend);
    font-size: 13px;
    outline: none;
}

.comment-form-grid textarea {
    grid-column: span 2;
    height: 110px;
    resize: vertical;
}

.btn-post-comment {
    grid-column: span 2;
    width: fit-content;
    padding: 12px 28px;
    background: #F27756;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-lexend);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-post-comment:hover {
    background: #D85D3D;
}

.faq-accordion-header .toggle-icon {
    font-size: 16px;
    font-weight: 800;
    margin-left: 12px;
    transition: transform 0.2s ease;
}

.faq-accordion-body {
    padding: 20px 24px;
    font-family: var(--font-lexend);
    font-size: 13.5px;
    color: #334155;
    line-height: 1.65;
}

.faq-accordion-body a {
    color: #87246A;
    font-weight: 700;
    text-decoration: underline;
}

.faq-accordion-body h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    color: #1C3B47;
    margin: 16px 0 8px;
}

.faq-accordion-body ol, .faq-accordion-body ul {
    margin: 8px 0 14px 20px;
    padding: 0;
}

.faq-accordion-body li {
    margin-bottom: 6px;
    font-size: 13px;
}

@media (max-width: 991px) {
    .faq-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   HEADER LIVE SEARCH RESULTS DROPDOWN STYLING
   ============================================================= */
.header-search-results-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    max-height: 420px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
    z-index: 9999;
    padding: 12px 0;
    display: none;
    border: 1px solid #CBD5E1;
}

.header-search-results-dropdown.active {
    display: block;
}

.search-result-group-title {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: #64748B;
    text-transform: uppercase;
    padding: 6px 16px 4px;
    letter-spacing: 0.5px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    text-decoration: none;
    color: #1C3B47;
    transition: background-color 0.2s ease;
}

.search-result-item:hover {
    background-color: #F1F5F9;
}

.search-result-item img {
    width: 34px;
    height: 42px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.search-result-info {
    flex: 1;
    overflow: hidden;
}

.search-result-title {
    font-family: var(--font-lexend);
    font-size: 13.5px;
    font-weight: 700;
    color: #1C3B47;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-meta {
    font-family: var(--font-lexend);
    font-size: 11.5px;
    color: #87246A;
    font-weight: 600;
}

.search-no-results {
    padding: 16px;
    text-align: center;
    font-family: var(--font-lexend);
    font-size: 13px;
    color: #64748B;
}

.search-page-icon-badge {
    width: 34px;
    height: 34px;
    background-color: #E6F2F7;
    color: #87246A;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* =============================================================
   X (TWITTER) LOGO ICON RELIABLE STYLING & FALLBACK
   ============================================================= */
.fa-x-twitter,
i.fa-x-twitter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-style: normal !important;
}

.fa-x-twitter::before {
    content: "𝕏" !important;
    font-family: var(--font-heading), 'Lexend', sans-serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.top-bar-social .fa-x-twitter::before {
    font-size: 22px !important;
}

.footer-social-circle .fa-x-twitter::before {
    font-size: 18px !important;
}

/* =============================================================
   DISCOVER WHAT'S INSIDE HOVER MINI QUICK VIEW POPOVER (MATCHING ZOOM MODAL)
   ============================================================= */
.discover-shops-wrapper .shop-item-card {
    position: relative;
    overflow: visible !important;
}

.discover-shops-wrapper {
    overflow: visible !important;
}

.hover-preview-popover.figma-mini-quickview {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.95);
    width: 380px;
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.28);
    border: 1.5px solid rgba(135, 36, 106, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    text-align: left;
}

.hover-preview-popover.figma-mini-quickview::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 9px 9px 0 9px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.1));
}

.shop-item-card:hover .hover-preview-popover.figma-mini-quickview {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.mini-qv-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    align-items: start;
}

.mini-qv-cover img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
}

.mini-qv-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    color: #193845;
    line-height: 1.3;
    margin-bottom: 6px;
}

.mini-qv-stars {
    font-size: 11px;
    color: #F5B41A;
    margin-bottom: 6px;
}

.mini-qv-stars span {
    color: #888888;
    font-size: 11px;
}

.mini-qv-price {
    font-size: 13.5px;
    color: #475569;
    font-weight: 600;
    margin-bottom: 8px;
}

.mini-qv-price strong {
    color: #23A9BC;
    font-size: 16px;
    font-weight: 800;
}

.mini-qv-specs {
    background: #EBF3F6;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11px;
    color: #333333;
    line-height: 1.45;
    margin-bottom: 10px;
}

.mini-qv-specs strong {
    color: #4A6B78;
}

.btn-mini-add-basket {
    width: 100%;
    background: #23A9BC;
    color: #ffffff;
    border: none;
    padding: 8px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s ease;
}

.btn-mini-add-basket:hover {
    background: #199EB3;
}

/* =============================================================
   PRODUCT CARD BADGES ROW - 5 STARS RATING IN PLACE OF IN STOCK TAG
   ============================================================= */
.badge-stock,
.stock-badge,
.badge-instock {
    display: none !important;
}

.shop-item-badges,
.figma-badges-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

.shop-item-badges .badge-flow,
.figma-badges-row .sku-badge {
    margin: 0 !important;
}

.shop-item-badges .shop-item-stars,
.figma-badges-row .shop-item-stars {
    font-size: 11.5px !important;
    color: #F5B41A !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.shop-item-badges .shop-item-stars span,
.figma-badges-row .shop-item-stars span {
    color: #64748B !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    margin-left: 2px !important;
}

/* =============================================================
   STOCK LIMIT ERROR TOAST BANNER STYLES
   ============================================================= */
.stock-error-toast-banner {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    background: #E53E3E !important;
    color: #ffffff !important;
    padding: 14px 22px !important;
    border-radius: 12px !important;
    font-family: var(--font-lexend) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: 0 16px 36px rgba(229, 62, 62, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 999999999 !important; /* Always sits on top of drawer */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    max-width: 440px !important;
}

.stock-error-toast-banner.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

.stock-error-toast-banner i {
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

/* Reposition to the left of the cart sidebar when open */
body.cart-open .stock-error-toast-banner {
    right: 464px !important;
}

@media (max-width: 768px) {
    body.cart-open .stock-error-toast-banner {
        right: 24px !important;
        top: 80px !important;
    }
}

/* ENSURE SLIDE 5 TESTIMONIAL & STATS DOES NOT CLIP COMMA BACKGROUND */
.page-home .slide-testimonial-stats {
    overflow: visible !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}




/* ==========================================================================
   CAROUSEL NAV BUTTONS (Hidden by default on Desktop)
   ========================================================================== */
.shop-nav-btn,
.audience-nav-btn,
.testi-nav-btn,
.articles-nav-btn,
.shop-dots-pagination,
.audience-dots-pagination,
.articles-dots-pagination {
    display: none !important;
}

/* ==========================================================================
   MOBILE NAVIGATION DRAWER & TRIGGER STYLES
   ========================================================================== */
.mobile-nav-trigger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    padding: 0;
    z-index: 1001;
}
.mobile-nav-trigger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-navigation-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 320px;
    height: 100%;
    background-color: #87246A; /* Harrison Purple */
    z-index: 2000;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.mobile-navigation-drawer.active {
    right: 0;
}
.mobile-drawer-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.mobile-drawer-header .close-drawer-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 38px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
}
.mobile-drawer-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mobile-drawer-search {
    margin-bottom: 24px;
}
.mobile-drawer-search label {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    font-family: var(--font-lexend);
    text-transform: capitalize;
}
.mobile-search-input-wrap {
    position: relative;
    width: 100%;
}
.mobile-search-input-wrap .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
}
.mobile-search-input-wrap input {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 10px 14px 10px 38px;
    color: #ffffff;
    font-size: 16px;
    font-family: var(--font-lexend);
    outline: none;
    box-sizing: border-box;
}
.mobile-search-input-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}
.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mobile-menu-list li {
    margin-bottom: 16px;
}
.mobile-menu-list a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--font-lexend);
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mobile-menu-list a:hover {
    color: #F27C4B;
}

/* Mobile dropdown sub-menu */
.mobile-dropdown-menu {
    list-style: none;
    padding-left: 16px;
    margin-top: 10px;
    display: none;
}
.mobile-dropdown.active .mobile-dropdown-menu {
    display: block;
}
.mobile-dropdown-menu li {
    margin-bottom: 10px;
}
.mobile-dropdown-menu a {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}
.mobile-dropdown-toggle .toggle-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
}
.mobile-dropdown.active .toggle-icon {
    transform: rotate(180deg);
}

/* Drawer Footer */
.mobile-drawer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.mobile-drawer-footer .footer-link {
    font-family: var(--font-lexend);
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mobile-drawer-footer .footer-link i {
    font-size: 18px;
    opacity: 0.9;
}

body.drawer-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .mobile-nav-trigger {
        display: flex !important;
    }
    .shop-nav-btn, .audience-nav-btn, .testi-nav-btn, .articles-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: #ffffff;
        color: #87246A;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 20;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        transition: background 0.3s, color 0.3s;
    }
    .shop-nav-btn:hover, .audience-nav-btn:hover, .testi-nav-btn:hover, .articles-nav-btn:hover {
        background: #87246A;
        color: #ffffff;
    }
    .shop-prev, .audience-prev, .testi-prev, .articles-prev {
        left: 10px;
    }
    .shop-next, .audience-next, .testi-next, .articles-next {
        right: 10px;
    }
    .shop-dots-pagination, .audience-dots-pagination, .articles-dots-pagination {
        display: flex !important;
        justify-content: center;
        gap: 8px;
        margin-top: 15px;
    }
}

/* ==========================================================================
   HERO SLIDE 1 ROTATING HEADLINE WORDS (EXCELLENCE, INNOVATION, VERSATILITY, CREATIVITY)
   ========================================================================== */
.headline-rotating-box {
    position: relative;
    display: inline-block;
    height: 1.2em;
    min-width: 320px;
    vertical-align: bottom;
}
.headline-rotating-box .script-excellence {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    opacity: 0;
    font-family: var(--font-script);
    font-size: 40px;
    color: #ffffff !important;
    animation: rotateWordAnimation 12s infinite ease-in-out;
}
.headline-rotating-box .word-1 { animation-delay: 0s; }
.headline-rotating-box .word-2 { animation-delay: 3s; }
.headline-rotating-box .word-3 { animation-delay: 6s; }
.headline-rotating-box .word-4 { animation-delay: 9s; }

@keyframes rotateWordAnimation {
    0% { opacity: 0; transform: translateY(12px); }
    5% { opacity: 1; transform: translateY(0); }
    25% { opacity: 1; transform: translateY(0); }
    30% { opacity: 0; transform: translateY(-12px); }
    100% { opacity: 0; transform: translateY(-12px); }
}

/* GLOBAL SECTION TOP WAVE POSITIONING (ELIMINATES BACKGROUND BLEED) */
.page-home .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;
    pointer-events: none !important;
}
.page-home .section-wave-top img,
.page-home .section-wave-top svg,
.page-home .section-wave-svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
    top: auto !important;
}


/* WAVE POSITIONING: TIE TOP OF WAVE TO BOTTOM OF PRECEDING SECTION (top: 0; transform: translateY(0)) */
.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;
}


/* 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) */
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;
}


/* 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;
}

.figma-feature-card {
    border-radius: 20px;
    padding: 36px 36px 0 36px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    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: 24px;
    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: 28px;
    color: #ffffff;
    display: inline-block;
    margin-right: 6px;
}

.feature-card-content p {
    font-size: 14px;
    line-height: 1.6;
    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: 100%;
    height: 100%;
    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: 18px;
    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: 9.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: 100%;
    height: 100%;
    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: 400 !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: 400 !important;
    display: inline !important;
}

html body .feature-card-clock-wrap,
body .feature-card-clock-wrap,
.feature-card-clock-wrap {
    position: absolute !important;
    bottom: -55px !important;
    right: -45px !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: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18)) !important;
}


/* BUNDLE PRODUCT CARDS: TALLER & NARROWER (235px WIDE x 430px TALL) */
html body .figma-bundles-grid,
body .figma-bundles-grid,
.figma-bundles-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 235px)) !important;
    justify-content: center !important;
    gap: 18px !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;
    max-width: 235px !important;
    width: 100% !important;
    margin: 0 !important;
}

html body .bundle-thumb-box,
body .bundle-thumb-box,
.bundle-thumb-box {
    border-radius: 16px !important;
    padding: 24px 14px !important;
    height: 275px !important;
    min-height: 275px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

html body .bundle-cover-img,
body .bundle-cover-img,
.bundle-cover-img {
    max-width: 92% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18)) !important;
}

@media (max-width: 991px) {
    html body .figma-bundles-grid,
    body .figma-bundles-grid,
    .figma-bundles-grid {
        grid-template-columns: repeat(2, minmax(0, 235px)) !important;
    }
}

@media (max-width: 576px) {
    html body .figma-bundles-grid,
    body .figma-bundles-grid,
    .figma-bundles-grid {
        grid-template-columns: minmax(0, 260px) !important;
    }
    html body .figma-bundle-card,
    body .figma-bundle-card,
    .figma-bundle-card {
        max-width: 260px !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;
}

/* =========================================================
   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: 30px !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: 30px !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: #F5B41A !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: #F59E0B !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: anchored bottom-left inside banner */
    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: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
        height: auto !important;
        max-height: 100% !important;
        width: auto !important;
        max-width: 110px !important;
        z-index: 1 !important;
    }

    /* Right Decor SVG: anchored top-right inside banner */
    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: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        transform: none !important;
        height: auto !important;
        max-height: 100% !important;
        width: auto !important;
        max-width: 110px !important;
        z-index: 1 !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;
    }
}

/* =========================================================
   MOVE MAGNIFYING GLASS ICON FURTHER DOWN INSIDE ZOOM CIRCLE
========================================================= */

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 {
    transform: translateY(5px) !important;
    margin-top: 2px !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 (ALL VIEWPORTS)
========================================================= */

@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 .sitewide-sticky-header-wrap,
    body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap {
    width: 100% !important;
}

    html body .top-bar,
    body .top-bar,
    .top-bar {
        position: relative !important;
        top: auto !important;
        z-index: 100000 !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;
        z-index: 99999 !important;
        width: 100% !important;
        background-color: #87246A !important;
    }
}

/* MOBILE VIEW (<= 991px): Yellow Bar & Purple Header FULLY NON-STICKY */
@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;
        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;
        left: auto !important;
        right: auto !important;
        z-index: 99999 !important;
        width: 100% !important;
        background-color: #87246A !important;
        box-shadow: none !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,
    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: 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 .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: 20px !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .figma-bundle-card,
body .figma-bundle-card,
.figma-bundle-card {
    flex: 0 1 235px !important;
    max-width: 235px !important;
    width: 235px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
/* =========================================================
   BUNDLES SECTION PERFECT TIGHT PAGE CENTERING (ZERO GAP DISTORTION)
========================================================= */
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 auto !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: auto !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

html body .figma-bundle-card,
body .figma-bundle-card,
.figma-bundle-card {
    flex: 0 0 235px !important;
    max-width: 235px !important;
    width: 235px !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: 10px 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: 10px 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: 10px 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;
}

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 FITTED IN BANNER
========================================================= */
@media (min-width: 768px) {
    html body .shop-hero-banner,
    body .shop-hero-banner,
    .shop-hero-banner {
        overflow: hidden !important;
        position: relative !important;
        z-index: 1 !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: 0 !important;
        top: auto !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: left bottom !important;
        vertical-align: bottom !important;
        z-index: 1 !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 {
        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 FITTED IN BANNER */
    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,
    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;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: left bottom !important;
        vertical-align: bottom !important;
        z-index: 1 !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 FITTED IN BANNER */
    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: 0 !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        max-width: 110px !important;
        max-height: 100% !important;
        z-index: 1 !important;
        pointer-events: none !important;
        transform: none !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: 13.5px !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;
}

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,
html body .btn-bundle-add-basket.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,
html body .btn-bundle-add-basket.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,
html body .btn-bundle-learn-more.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,
html body .btn-bundle-learn-more.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;
}