/*
Theme Name: Harrison & York Custom Theme
Theme URI: https://harrisonandyork.com/
Author: Harrison & York Publishing Ltd
Description: A premium, fast, custom WooCommerce theme for the Harrison & York maths and english workbooks series.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: harrison-york
*/


/* =========================================================
   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,
    body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 99999 !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;
    }
}

@media (max-width: 991px) {
    html body .sitewide-sticky-header-wrap,
    body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
        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;
        width: 100% !important;
        z-index: 99999 !important;
        background-color: #87246A !important;
        box-shadow: none !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: 2px 0 4px 0 !important;
    }

    html body .you-may-also-like-wrap .shop-item-card .card-price-row,
    html body .you-may-also-like-wrap .shop-item-card .retail-price-label,
    html body .figma-bundles-grid .figma-bundle-card .retail-price-label,
    body .you-may-also-like-wrap .shop-item-card .card-price-row,
    body .figma-bundles-grid .figma-bundle-card .retail-price-label {
        font-size: 11.5px !important;
        margin: 2px 0 6px 0 !important;
    }

    html body .you-may-also-like-wrap .shop-item-card .btn-shop-add-basket,
    html body .you-may-also-like-wrap .shop-item-card a,
    html body .figma-bundles-grid .figma-bundle-card button,
    html body .figma-bundles-grid .figma-bundle-card a,
    body .you-may-also-like-wrap .shop-item-card .btn-shop-add-basket,
    body .figma-bundles-grid .figma-bundle-card button {
        font-size: 9.5px !important;
        padding: 6px 2px !important;
        border-radius: 6px !important;
    }
}
/* =========================================================
   SINGLE PRODUCT PAGE MOBILE HERO SECTION (EXACT MOCKUP SCREENSHOT 1)
========================================================= */
@media (max-width: 767px) {
    html body .product-main-card,
    body .product-main-card,
    .product-main-card {
        background: #F4F9FC !important;
        border: 2px solid #00A3AD !important;
        border-radius: 16px !important;
        padding: 16px !important;
        margin-bottom: 30px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    }

    html body .product-grid-layout,
    body .product-grid-layout,
    .product-grid-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    html body .vertical-thumbs-col,
    body .vertical-thumbs-col,
    .vertical-thumbs-col {
        display: none !important;
    }

    html body .main-cover-box,
    body .main-cover-box,
    .main-cover-box {
        position: relative !important;
        width: 100% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid #CBD5E1 !important;
        aspect-ratio: 1 / 1.32 !important;
        margin-bottom: 12px !important;
    }

    html body .main-cover-box img,
    body .main-cover-box img,
    .main-cover-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    html body .main-cover-box .cover-nav-arrow,
    body .main-cover-box .cover-nav-arrow,
    .main-cover-box .cover-nav-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #183B47 !important;
        color: #ffffff !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        cursor: pointer !important;
        z-index: 10 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
    }

    html body .main-cover-box .cover-nav-arrow.nav-prev,
    body .main-cover-box .cover-nav-arrow.nav-prev {
        left: 10px !important;
    }

    html body .main-cover-box .cover-nav-arrow.nav-next,
    body .main-cover-box .cover-nav-arrow.nav-next {
        right: 10px !important;
    }

    html body #singleProductTitle,
    body #singleProductTitle,
    #singleProductTitle {
        font-family: var(--font-heading), 'Lexend', sans-serif !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #183B47 !important;
        text-align: left !important;
        line-height: 1.3 !important;
        margin: 8px 0 6px 0 !important;
    }

    html body .product-rating-row,
    body .product-rating-row,
    .product-rating-row {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 14px !important;
    }

    html body .product-rating-row .stars,
    body .product-rating-row .stars {
        color: #F59E0B !important;
        font-size: 15px !important;
    }

    html body .product-rating-row .review-count,
    body .product-rating-row .review-count {
        color: #145C6C !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
    }

    html body .figma-content-box,
    body .figma-content-box,
    .figma-content-box {
        background: #EEF6FA !important;
        border: 1.5px solid #CBD5E1 !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        margin: 14px 0 18px 0 !important;
    }

    html body .figma-content-box h5,
    body .figma-content-box h5 {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #183B47 !important;
        margin: 0 0 6px 0 !important;
    }

    html body .figma-content-box ul,
    body .figma-content-box ul {
        margin: 0 !important;
        padding-left: 18px !important;
    }

    html body .figma-content-box li,
    body .figma-content-box li {
        font-size: 13px !important;
        color: #334155 !important;
        line-height: 1.5 !important;
        margin-bottom: 4px !important;
    }

    html body .product-meta-table,
    body .product-meta-table,
    .product-meta-table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 16px !important;
    }

    html body .product-meta-table td,
    body .product-meta-table td {
        padding: 5px 0 !important;
        font-size: 13.5px !important;
    }

    html body .product-meta-table .meta-label,
    body .product-meta-table .meta-label {
        font-weight: 800 !important;
        color: #183B47 !important;
        width: 130px !important;
    }

    html body .product-meta-table .meta-value,
    body .product-meta-table .meta-value {
        font-weight: 500 !important;
        color: #334155 !important;
    }

    html body .price-action-box,
    body .price-action-box,
    .price-action-box {
        border-top: 1.5px solid #CBD5E1 !important;
        padding-top: 16px !important;
        margin-top: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    html body .price-label-tag,
    body .price-label-tag,
    .price-label-tag {
        font-family: var(--font-heading), 'Lexend', sans-serif !important;
        font-size: 26px !important;
        font-weight: 800 !important;
        color: #00A3AD !important;
        display: flex !important;
        align-items: baseline !important;
        gap: 8px !important;
    }

    html body .price-label-tag span,
    body .price-label-tag span {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #334155 !important;
    }

    html body .single-product-actions-mobile-row,
    body .single-product-actions-mobile-row,
    .single-product-actions-mobile-row {
        display: flex !important;
        gap: 10px !important;
        width: 100% !important;
    }

    html body .single-product-actions-mobile-row .btn-add-basket-mobile,
    body .single-product-actions-mobile-row .btn-add-basket-mobile {
        flex: 1 !important;
        background: #87246A !important;
        color: #ffffff !important;
        border: none !important;
        padding: 12px 6px !important;
        border-radius: 10px !important;
        font-family: var(--font-heading), 'Lexend', sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        text-align: center !important;
    }

    html body .single-product-actions-mobile-row .btn-wishlist-mobile,
    body .single-product-actions-mobile-row .btn-wishlist-mobile {
        flex: 1 !important;
        background: #F0A1D9 !important;
        color: #ffffff !important;
        border: none !important;
        padding: 12px 6px !important;
        border-radius: 10px !important;
        font-family: var(--font-heading), 'Lexend', sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        text-align: center !important;
    }
}
/* =========================================================
   SINGLE PRODUCT PAGE MOBILE COVER IMAGE FULL FIT (OBJECT-FIT COVER)
========================================================= */
@media (max-width: 767px) {
    html body .main-cover-box,
    body .main-cover-box,
    .main-cover-box {
        position: relative !important;
        width: 100% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid #CBD5E1 !important;
        aspect-ratio: 1 / 1.35 !important;
        margin-bottom: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html body .main-cover-box img,
    body .main-cover-box img,
    .main-cover-box img,
    html body #mainCoverImage,
    body #mainCoverImage,
    #mainCoverImage {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 12px !important;
    }
}
/* =========================================================
   SINGLE PRODUCT PAGE DESKTOP VS MOBILE ACTION BUTTONS VISIBILITY
========================================================= */
@media (min-width: 768px) {
    html body .desktop-only-actions,
    body .desktop-only-actions,
    .desktop-only-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 14px !important;
    }

    html body .mobile-only-actions-wrap,
    body .mobile-only-actions-wrap,
    .mobile-only-actions-wrap {
        display: none !important;
    }
}

@media (max-width: 767px) {
    html body .desktop-only-actions,
    body .desktop-only-actions,
    .desktop-only-actions {
        display: none !important;
    }

    html body .mobile-only-actions-wrap,
    body .mobile-only-actions-wrap,
    .mobile-only-actions-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }
}
/* =========================================================
   UNIFIED SINGLE PRODUCT ACTION BUTTONS (NO DUPLICATE SETS)
========================================================= */
html body .price-action-box .action-buttons-group,
html body .price-action-box .desktop-only-actions,
body .price-action-box .action-buttons-group,
body .price-action-box .desktop-only-actions,
.price-action-box .action-buttons-group,
.price-action-box .desktop-only-actions {
    display: none !important;
}

html body .single-product-actions-row,
body .single-product-actions-row,
.single-product-actions-row {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
}
/* =========================================================
   CART DRAWER PRODUCT IMAGE & PRICE STYLING REFINEMENTS
========================================================= */
html body .drawer-items-table td .drawer-item-img-wrap,
html body .drawer-items-table td div,
body .drawer-items-table td .drawer-item-img-wrap,
body .drawer-items-table td div,
.drawer-items-table td .drawer-item-img-wrap,
.drawer-items-table td div {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html body .drawer-items-table td:nth-child(3),
body .drawer-items-table td:nth-child(3),
.drawer-items-table td:nth-child(3),
html body .drawer-item-price,
body .drawer-item-price,
.drawer-item-price {
    color: #ffffff !important;
    font-weight: 800 !important;
}
/* =========================================================
   DESKTOP SHOP & SINGLE PRODUCT HERO LEFT GRAPHIC DOWNWARD SHIFT
========================================================= */
@media (min-width: 768px) {
    html body .shop-hero-banner,
    body .shop-hero-banner,
    .shop-hero-banner {
        overflow: visible !important;
    }

    html body .shop-hero-banner .shop-banner-decor.left-decor,
    html body .shop-banner-decor.left-decor,
    html body .maths-banner .left-decor,
    html body .english-banner .left-decor,
    html body picture.left-decor,
    html body picture.left-decor img,
    body .shop-hero-banner .shop-banner-decor.left-decor,
    .shop-hero-banner .shop-banner-decor.left-decor {
        position: absolute !important;
        bottom: -45px !important;
        top: auto !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(45px) !important;
        object-position: left bottom !important;
        vertical-align: bottom !important;
        z-index: 5 !important;
    }
}
/* =========================================================
   STRICT RESPONSIVE DESKTOP & MOBILE HERO BANNER GRAPHICS
========================================================= */

/* 1. DESKTOP VIEW (@media (min-width: 768px)) */
@media (min-width: 768px) {
    html body .shop-hero-banner,
    body .shop-hero-banner,
    .shop-hero-banner {
        overflow: visible !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 SHIFT DOWN (75px) */
    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: -75px !important;
        top: auto !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(75px) !important;
        object-position: left bottom !important;
        vertical-align: bottom !important;
        z-index: 5 !important;
    }
}

/* 2. MOBILE VIEW (@media (max-width: 767px)) */
@media (max-width: 767px) {
    /* STRICTLY HIDE ALL DESKTOP GRAPHICS ON MOBILE */
    html body .desktop-banner-decor,
    body .desktop-banner-decor,
    .desktop-banner-decor {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* SHOW ONLY MOBILE SPECIFIC GRAPHICS ON MOBILE */
    html body .mobile-banner-decor,
    body .mobile-banner-decor,
    .mobile-banner-decor {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* MOBILE LEFT GRAPHIC SHIFTED FURTHER DOWN (-55px) */
    html body .mobile-banner-decor.left-decor,
    body .mobile-banner-decor.left-decor,
    .mobile-banner-decor.left-decor,
    html body .shop-banner-decor.left-decor.mobile-banner-decor,
    body .shop-banner-decor.left-decor.mobile-banner-decor {
        position: absolute !important;
        left: 0 !important;
        bottom: -55px !important;
        top: auto !important;
        width: 100px !important;
        height: auto !important;
        max-width: 100px !important;
        max-height: none !important;
        z-index: 5 !important;
        pointer-events: none !important;
        transform: translateY(55px) !important;
        transform-origin: left bottom !important;
    }

    /* MOBILE RIGHT GRAPHIC MUCH SMALLER (55px) & FITTED IN BANNER */
    html body .mobile-banner-decor.right-decor,
    body .mobile-banner-decor.right-decor,
    .mobile-banner-decor.right-decor,
    html body .shop-banner-decor.right-decor.mobile-banner-decor,
    body .shop-banner-decor.right-decor.mobile-banner-decor {
        position: absolute !important;
        right: 6px !important;
        top: 6px !important;
        bottom: auto !important;
        width: 55px !important;
        max-width: 55px !important;
        height: auto !important;
        max-height: 55px !important;
        object-fit: contain !important;
        z-index: 5 !important;
        pointer-events: none !important;
        transform: none !important;
    }
}
/* =========================================================
   YOU MAY ALSO LIKE SECTION: PERFECT 2X2 MOBILE GRID
========================================================= */

/* Desktop view (>= 768px) */
@media (min-width: 768px) {
    /* cleaned */
    body .you-may-also-like-wrap .shop-item-card,
    .you-may-also-like-wrap .shop-item-card {
        flex: 0 0 210px !important;
        max-width: 210px !important;
        width: 210px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Mobile view (< 767px) - Strict 2x2 Grid */
@media (max-width: 767px) {
    html body .you-may-also-like-grid,
    html body .you-may-also-like-wrap .figma-shop-grid,
    body .you-may-also-like-grid,
    body .you-may-also-like-wrap .figma-shop-grid,
    .you-may-also-like-grid,
    .you-may-also-like-wrap .figma-shop-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 12px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    html body .you-may-also-like-grid .shop-item-card,
    /* cleaned */
    body .you-may-also-like-grid .shop-item-card,
    body .you-may-also-like-wrap .shop-item-card,
    .you-may-also-like-grid .shop-item-card,
    .you-may-also-like-wrap .shop-item-card {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 6px 12px 6px !important;
        border-radius: 12px !important;
    }

    html body .you-may-also-like-grid .shop-item-card h4,
    body .you-may-also-like-grid .shop-item-card h4 {
        font-size: 12.5px !important;
        line-height: 1.25 !important;
        margin: 2px 0 4px 0 !important;
    }

    html body .you-may-also-like-grid .shop-item-card .shop-item-details,
    body .you-may-also-like-grid .shop-item-card .shop-item-details {
        padding: 0 2px !important;
    }

    html body .you-may-also-like-grid .shop-item-card button,
    html body .you-may-also-like-grid .shop-item-card a,
    body .you-may-also-like-grid .shop-item-card button,
    body .you-may-also-like-grid .shop-item-card a {
        font-size: 9.5px !important;
        padding: 7px 1px !important;
    }
}
/* =========================================================
   ULTRA-HIGH SPECIFICITY YOU MAY ALSO LIKE 2X2 MOBILE GRID
========================================================= */

@media (max-width: 767px) {
    html body.single-product .you-may-also-like-wrap .figma-shop-grid,
    html body.single-product .you-may-also-like-grid,
    html body .single-product-bottom-sections .you-may-also-like-grid,
    html body .you-may-also-like-wrap .figma-shop-grid,
    html body .you-may-also-like-grid,
    body .you-may-also-like-grid,
    .you-may-also-like-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 12px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    html body.single-product .you-may-also-like-wrap .shop-item-card,
    html body.single-product .you-may-also-like-grid .shop-item-card,
    html body.single-product .single-product-bottom-sections .shop-item-card,
    html body .single-product-bottom-sections .you-may-also-like-wrap .shop-item-card,
    /* cleaned */
    html body .you-may-also-like-grid .shop-item-card,
    body .you-may-also-like-grid .shop-item-card,
    .you-may-also-like-grid .shop-item-card {
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        min-width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 6px 12px 6px !important;
        border-radius: 12px !important;
    }

    html body.single-product .you-may-also-like-wrap .shop-item-card h4,
    html body .you-may-also-like-grid .shop-item-card h4,
    body .you-may-also-like-grid .shop-item-card h4 {
        font-size: 12.5px !important;
        line-height: 1.25 !important;
        margin: 2px 0 4px 0 !important;
    }

    html body.single-product .you-may-also-like-wrap .shop-item-card .shop-item-details,
    html body .you-may-also-like-grid .shop-item-card .shop-item-details,
    body .you-may-also-like-grid .shop-item-card .shop-item-details {
        padding: 0 2px !important;
    }

    html body.single-product .you-may-also-like-wrap .shop-item-card button,
    html body.single-product .you-may-also-like-wrap .shop-item-card a,
    html body .you-may-also-like-grid .shop-item-card button,
    html body .you-may-also-like-grid .shop-item-card a,
    body .you-may-also-like-grid .shop-item-card button,
    body .you-may-also-like-grid .shop-item-card a {
        font-size: 9.5px !important;
        padding: 7px 1px !important;
    }
}
/* =========================================================
   YOU MAY ALSO LIKE: DEFINITIVE 2X2 MOBILE GRID (CSS GRID)
========================================================= */

/* Desktop view (>= 768px) */
@media (min-width: 768px) {
    html body .you-may-also-like-grid-container,
    html body.single-product .you-may-also-like-grid-container,
    body .you-may-also-like-grid-container,
    .you-may-also-like-grid-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: 1160px !important;
        margin: 0 auto !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card,
    html body .you-may-also-like-grid-container .shop-item-card,
    body .you-may-also-like-grid-container .you-may-like-card,
    .you-may-also-like-grid-container .you-may-like-card {
        flex: 0 0 210px !important;
        width: 210px !important;
        max-width: 210px !important;
        min-width: 210px !important;
    }
}

/* Mobile view (< 767px): STRICT 2X2 GRID REPEAT(2, 1FR) */
@media (max-width: 767px) {
    html body .you-may-also-like-grid-container,
    html body.single-product .you-may-also-like-grid-container,
    html body .you-may-also-like-wrap .you-may-also-like-grid-container,
    body .you-may-also-like-grid-container,
    .you-may-also-like-grid-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card,
    html body .you-may-also-like-grid-container .shop-item-card,
    html body.single-product .you-may-also-like-grid-container .shop-item-card,
    html body .you-may-also-like-wrap .you-may-like-card,
    body .you-may-also-like-grid-container .you-may-like-card,
    .you-may-also-like-grid-container .you-may-like-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 6px 12px 6px !important;
        border-radius: 12px !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card h4,
    body .you-may-also-like-grid-container .you-may-like-card h4 {
        font-size: 16px !important;
        line-height: 1.25 !important;
        margin: 2px 0 4px 0 !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card .shop-item-details,
    body .you-may-also-like-grid-container .you-may-like-card .shop-item-details {
        padding: 0 2px !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card button,
    html body .you-may-also-like-grid-container .you-may-like-card a,
    body .you-may-also-like-grid-container .you-may-like-card button,
    body .you-may-also-like-grid-container .you-may-like-card a {
        font-size: 9px !important;
        padding: 6px 1px !important;
        letter-spacing: 0 !important;
    }
}
/* =========================================================
   YOU MAY ALSO LIKE: CLEAN RESPONSIVE DESKTOP & MOBILE GRID
========================================================= */

/* Desktop view (>= 768px) */
@media (min-width: 768px) {
    html body .you-may-also-like-grid-container,
    html body .you-may-also-like-grid,
    body .you-may-also-like-grid-container,
    .you-may-also-like-grid-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: 1160px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card,
    html body .you-may-also-like-grid-container .shop-item-card,
    body .you-may-also-like-grid-container .you-may-like-card,
    .you-may-also-like-grid-container .you-may-like-card {
        flex: 0 0 210px !important;
        width: 210px !important;
        max-width: 210px !important;
        min-width: 210px !important;
        margin: 0 !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        border: 1px solid #e2e8f0 !important;
        padding: 0 0 16px 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        position: relative !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
        overflow: hidden !important;
    }
}

/* Mobile view (< 767px): PERFECT 2X2 GRID (2 CARDS PER ROW) */
@media (max-width: 767px) {
    html body .you-may-also-like-grid-container,
    html body.single-product .you-may-also-like-grid-container,
    html body .you-may-also-like-wrap .you-may-also-like-grid-container,
    body .you-may-also-like-grid-container,
    .you-may-also-like-grid-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card,
    html body .you-may-also-like-grid-container .shop-item-card,
    html body.single-product .you-may-also-like-grid-container .shop-item-card,
    html body .you-may-also-like-wrap .you-may-like-card,
    body .you-may-also-like-grid-container .you-may-like-card,
    .you-may-also-like-grid-container .you-may-like-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 6px 12px 6px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
        overflow: hidden !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card h4,
    body .you-may-also-like-grid-container .you-may-like-card h4 {
        font-size: 16px !important;
        line-height: 1.25 !important;
        margin: 2px 0 4px 0 !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card .shop-item-details,
    body .you-may-also-like-grid-container .you-may-like-card .shop-item-details {
        padding: 0 2px !important;
    }

    html body .you-may-also-like-grid-container .you-may-like-card button,
    html body .you-may-also-like-grid-container .you-may-like-card a,
    body .you-may-also-like-grid-container .you-may-like-card button,
    body .you-may-also-like-grid-container .you-may-like-card a {
        font-size: 9px !important;
        padding: 6px 1px !important;
        letter-spacing: 0 !important;
    }
}
/* =========================================================
   FIGMA EXACT DESIGN: YOU MAY ALSO LIKE SECTION & 2X2 GRID
========================================================= */

html body .you-may-also-like-wrap,
body .you-may-also-like-wrap,
.you-may-also-like-wrap {
    margin-bottom: 70px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body .you-may-like-title,
body .you-may-like-title,
.you-may-like-title {
    font-family: 'Rock Salt', cursive, sans-serif !important;
    font-size: 34px !important;
    color: #183B47 !important;
    text-align: center !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: 1.2px !important;
}

html body .you-may-like-pencil-wrap,
body .you-may-like-pencil-wrap,
.you-may-like-pencil-wrap {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 28px !important;
    width: 100% !important;
}

html body .you-may-like-pencil,
body .you-may-like-pencil,
.you-may-like-pencil {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    display: block !important;
    margin: 8px auto 0 auto !important;
}

/* DESKTOP VIEW (>= 768px) */
@media (min-width: 768px) {
    html body .you-may-also-like-grid-container,
    body .you-may-also-like-grid-container,
    .you-may-also-like-grid-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 1140px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    html body .you-may-like-card,
    body .you-may-like-card,
    .you-may-like-card {
        flex: 0 0 calc(25% - 15px) !important;
        max-width: calc(25% - 15px) !important;
        width: calc(25% - 15px) !important;
        background: #ffffff !important;
        border-radius: 14px !important;
        border: 1px solid #E2E8F0 !important;
        padding: 0 0 16px 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

/* MOBILE VIEW (< 767px): STRICT 2X2 GRID REPEAT(2, 1FR) */
@media (max-width: 767px) {
    html body .you-may-like-title,
    body .you-may-like-title {
        font-size: 26px !important;
    }

    html body .you-may-also-like-grid-container,
    body .you-may-also-like-grid-container,
    .you-may-also-like-grid-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
    }

    html body .you-may-like-card,
    body .you-may-like-card,
    .you-may-like-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 0 0 12px 0 !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
        overflow: hidden !important;
    }
}

/* INNER CARD ELEMENTS (MATCHING FIGMA MOCKUP EXACTLY) */
html body .you-may-like-cover-wrap,
body .you-may-like-cover-wrap,
.you-may-like-cover-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1.32 !important;
    overflow: hidden !important;
    background: #F8FAFC !important;
    margin-bottom: 10px !important;
}

html body .you-may-like-cover-img,
body .you-may-like-cover-img,
.you-may-like-cover-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

html body .you-may-like-zoom-btn,
body .you-may-like-zoom-btn,
.you-may-like-zoom-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: rgba(25, 56, 69, 0.85) !important;
    color: #ffffff !important;
    border: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    z-index: 3 !important;
}

html body .you-may-like-details,
body .you-may-like-details,
.you-may-like-details {
    padding: 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
}

html body .you-may-like-card-title,
body .you-may-like-card-title,
.you-may-like-card-title {
    font-family: var(--font-heading), 'Lexend', 'Outfit', sans-serif !important;
    font-size: 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;
}
/* =========================================================
   DRAWER SCRIM COVERS THE WHOLE SCREEN, INCLUDING THE HEADER
   =========================================================
   The dim layer spans the full viewport and the drawer panel runs from
   the very top of the screen, so both sit over the site header rather
   than starting beneath it. The header stays in place and is visible
   through the scrim, just dimmed like the rest of the page.
   ========================================================= */

body.cart-open .cart-drawer-overlay,
body.wishlist-open .wishlist-drawer-overlay {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;   /* mobile browser chrome */
    max-height: none !important;
}

body.cart-open .cart-drawer-panel,
body.wishlist-open .wishlist-drawer-panel {
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
}

/* Header sits below both layers so the scrim dims it and the panel
   overlaps it. This is its normal stacking order - stated explicitly so
   a later rule cannot accidentally lift it back above the drawer. */
body.cart-open .main-header,
body.cart-open header.main-header,
body.wishlist-open .main-header,
body.wishlist-open header.main-header {
    z-index: 99999 !important;
}

/* =========================================================
   DRAWER CART / WISHLIST SWITCH BUTTON - TOP-LEFT CORNER
   =========================================================
   The switch button used to float 20px in and vertically centred in the
   drawer header. It now sits flush in the drawer's top-left corner, with
   only its inner corner rounded so it reads as fitted into the corner
   rather than dropped on top of it.

   The button's own geometry lives in its inline style attribute in
   footer.php: inline !important beats stylesheet !important, so it
   cannot be set from here. This file handles state and small screens.
   ========================================================= */

.drawer-switch-corner {
    line-height: 0;               /* no stray descender gap above the button */
}

.btn-drawer-cart-switch:hover,
.btn-drawer-wishlist-switch:hover {
    filter: brightness(1.08);
    padding-right: 22px !important;   /* small nudge outward on hover */
}

.btn-drawer-cart-switch:active,
.btn-drawer-wishlist-switch:active {
    filter: brightness(0.94);
}

.btn-drawer-cart-switch:focus-visible,
.btn-drawer-wishlist-switch:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

/* Keep the corner tab from crowding the drawer title on narrow screens. */
@media (max-width: 480px) {
    .btn-drawer-cart-switch,
    .btn-drawer-wishlist-switch {
        font-size: 11.5px !important;
        padding: 9px 14px 9px 16px !important;
        border-radius: 0 0 13px 0 !important;
    }
    .btn-drawer-cart-switch:hover,
    .btn-drawer-wishlist-switch:hover {
        padding-right: 14px !important;
    }
}

/* =========================================================
   SINGLE PRODUCT: ADD TO CART + WISHLIST BUTTON ICONS
   =========================================================
   Both buttons are laid out as flex rows so their icon and label stay
   centred together as one unit.

   The heart deliberately has NO colour of its own. It inherits from the
   button, so the existing hover rule (white background, #E893CD text)
   carries the icon pink along with the label. It used to be pinned white
   by an inline style="color:#ffffff !important" in single-product.php,
   and inline !important cannot be overridden from a stylesheet - so the
   fix was to remove it there rather than fight it here.
   ========================================================= */

html body .btn-add-basket-single,
html body .btn-wishlist-single,
.btn-add-basket-single,
.btn-wishlist-single {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

html body .btn-add-basket-single i,
html body .btn-wishlist-single i,
.btn-add-basket-single i,
.btn-wishlist-single i {
    font-size: 1.05em;
    line-height: 1;
    color: inherit;                       /* follow the button, including on hover */
    transition: color 0.25s ease;
}

/* The label colour transition is already declared on .btn-wishlist-single;
   naming color here keeps the icon in step with it rather than snapping. */
html body .btn-wishlist-single,
.btn-wishlist-single {
    transition: background-color 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.25s ease !important;
}

/* =========================================================
   DRAWER CLOSE BUTTON - LARGE, TOP-RIGHT CORNER
   =========================================================
   Size and position live in the inline style attribute in footer.php,
   because inline !important cannot be overridden from a stylesheet.

   What must be handled here is the old hover rule in custom-styles.css:

       .drawer-close-btn:hover { transform: translateY(-50%) scale(1.1) }

   That -50% went with the old vertically-centred position. Now the button
   is pinned to top:0 it would jump upward out of the corner on hover, so
   these more specific rules replace the transform with a plain scale.
   ========================================================= */

html body .cart-drawer-panel .drawer-close-btn:hover,
html body .wishlist-drawer-panel .drawer-close-btn:hover,
.cart-drawer-panel .drawer-close-btn:hover,
.wishlist-drawer-panel .drawer-close-btn:hover {
    transform: scale(1.12) !important;
    opacity: 1 !important;
}

html body .cart-drawer-panel .drawer-close-btn:active,
html body .wishlist-drawer-panel .drawer-close-btn:active,
.cart-drawer-panel .drawer-close-btn:active,
.wishlist-drawer-panel .drawer-close-btn:active {
    transform: scale(0.96) !important;
}

html body .cart-drawer-panel .drawer-close-btn,
html body .wishlist-drawer-panel .drawer-close-btn,
.cart-drawer-panel .drawer-close-btn,
.wishlist-drawer-panel .drawer-close-btn {
    transition: transform 0.18s ease, opacity 0.18s ease !important;
}

.cart-drawer-panel .drawer-close-btn:focus-visible,
.wishlist-drawer-panel .drawer-close-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -8px;
    border-radius: 6px;
}

/* =========================================================
   WORDPRESS ADMIN BAR - MAKE ROOM, DO NOT HIDE
   =========================================================
   custom-styles.css used to carry `#wpadminbar { display: none }` inside
   its (min-width: 992px) block, so administrators never saw the toolbar
   on desktop. That rule is gone; this makes space for it instead.

   Padding the body is the whole fix. The toolbar is position:fixed, so
   32px of body padding moves the entire page - yellow top bar, purple
   header and all - down clear of it, exactly as WordPress's own
   `html { margin-top: 32px }` would if the theme did not override it
   with `margin-top: 0 !important`.

   Do NOT add `top: 32px` to .main-header here. The header is
   position:relative on desktop, so a top offset shifts it bodily
   downwards and opens a gap between it and the yellow bar rather than
   just moving where a sticky element parks.

   body.admin-bar only exists when the toolbar renders, so logged-out
   visitors are unaffected.
   ========================================================= */

html body.admin-bar,
body.admin-bar {
    padding-top: 32px !important;
}

/* WordPress makes the toolbar 46px tall below 783px wide. */
@media screen and (max-width: 782px) {
    html body.admin-bar,
    body.admin-bar {
        padding-top: 46px !important;
    }
}

/* =========================================================
   SITEWIDE STICKY HEADER RULE  (single source of truth)
   =========================================================
   Desktop (>= 992px): the WHOLE header sticks - yellow top bar and
                       purple bar together.
   Mobile  (<= 991px): only the purple bar sticks; the yellow top bar
                       scrolls away with the page.

   header.php wraps both bars in .sitewide-sticky-header-wrap, so that
   wrapper is the sticky element at both breakpoints - only the offset
   changes. On mobile it is pulled up by exactly the height of the yellow
   bar, so the yellow scrolls out of view and the purple parks at the top.

   Why the wrapper and not .main-header: a sticky element can only travel
   inside its parent's box, and the wrapper is barely taller than the two
   bars - a sticky .main-header would unstick almost immediately.

   All competing positioning for this wrapper has been stripped out of
   custom-styles.css, styles.css and the two shop page templates (there
   were 19 contradictory rules, including one titled "MOBILE SITEWIDE
   COMPLETELY NON-STICKY HEADER OVERRIDE"). Keep it that way: if the
   header misbehaves again, look for a new rule elsewhere rather than
   adding another one here.
   ========================================================= */

:root { --hay-topbar-h: 38px; }   /* default until footer.php measures it */

/* position:sticky cannot work inside a scroll container, and
   `html, body { overflow-x: hidden }` creates one. `clip` prevents
   sideways scrolling identically without that side effect. */
html,
body {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

html body .sitewide-sticky-header-wrap,
body .sitewide-sticky-header-wrap,
.sitewide-sticky-header-wrap {
    position: -webkit-sticky !important;
    position: sticky !important;
    width: 100% !important;

    /* The mobile navigation drawer lives INSIDE this wrapper. Giving the
       wrapper a z-index creates a stacking context, and a descendant can
       never paint higher than its context - so the drawer's own z-index
       is capped at whatever is set here. This sits above all page content
       while staying below the cart/wishlist drawers (9999999+), which are
       modals and should still cover the header. */
    z-index: 1000000 !important;
}

/* Children stay in normal flow. Anything sticky or fixed here would
   escape the wrapper and break the arrangement. They keep real z-index
   values rather than `auto` so the purple bar layers over the yellow. */
html body .sitewide-sticky-header-wrap .top-bar,
.sitewide-sticky-header-wrap .top-bar {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
}

html body .sitewide-sticky-header-wrap .main-header,
html body .sitewide-sticky-header-wrap header.main-header,
.sitewide-sticky-header-wrap .main-header,
.sitewide-sticky-header-wrap header.main-header {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 2 !important;
}

/* The mobile menu is fixed to the viewport and must clear the page. */
html body .mobile-navigation-drawer,
html body #mobileNavigationDrawer,
.mobile-navigation-drawer,
#mobileNavigationDrawer {
    z-index: 999999 !important;
}

/* --- Desktop: both bars stick together --- */
@media screen and (min-width: 992px) {
    html body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap {
        top: 0 !important;
    }
    body.admin-bar .sitewide-sticky-header-wrap {
        top: 32px !important;   /* park below the WP toolbar */
    }
}

/* --- Mobile: only the purple bar stays --- */
@media screen and (max-width: 991px) {
    html body .sitewide-sticky-header-wrap,
    .sitewide-sticky-header-wrap {
        top: calc(-1 * var(--hay-topbar-h)) !important;
    }
    body.admin-bar .sitewide-sticky-header-wrap {
        top: calc(46px - var(--hay-topbar-h)) !important;
    }
}

/* =========================================================
   LOGIN (LOGGED-OUT MY ACCOUNT) PAGE - CENTRING
   =========================================================
   .my-account-card-box is capped at max-width:480px, which is right for
   the logged-in account view (one column of settings) but wrong for the
   logged-out page, where .account-cards-grid holds TWO cards side by side
   and asks for 1040px.

   Two things went wrong as a result:

   1. The grid was squeezed to 480px.
   2. Worse, `repeat(2, 1fr)` means each column's minimum is its
      min-content width. Long labels like "CONTINUE WITH FACEBOOK" cannot
      shrink below their own width, so the grid was forced wider than its
      480px parent and overflowed to the right - which is what reads as
      "not centred". minmax(0, 1fr) lets the columns shrink instead.

   Scoped to the logged-out account page, so the logged-in view keeps its
   480px column exactly as it is.
   ========================================================= */

body.woocommerce-account:not(.logged-in) .my-account-container {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

body.woocommerce-account:not(.logged-in) .my-account-card-box {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.woocommerce-account:not(.logged-in) .account-cards-grid,
#customer_login.account-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-items: stretch !important;
}

/* Stack to one column early enough that the cards never feel cramped. */
@media (max-width: 860px) {
    body.woocommerce-account:not(.logged-in) .account-cards-grid,
    #customer_login.account-cards-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body.woocommerce-account:not(.logged-in) .my-account-card-box {
        max-width: 520px !important;
    }
}

/* Social buttons must be allowed to wrap rather than set a floor on the
   column width. This is what actually stops the overflow. */
body.woocommerce-account:not(.logged-in) .btn-social,
#customer_login .btn-social {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    word-break: break-word !important;
}

/* =========================================================
   PASSWORD RESET SCREENS (lost password / confirmation / reset)
   =========================================================
   Shared by the three myaccount templates. Deliberately self-contained
   under .hay-pw-* rather than reusing .auth-card, so the login page's
   two-card grid and these single centred cards can be tuned separately.
   ========================================================= */

.hay-pw-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 48px 20px 64px;
    box-sizing: border-box;
}

.hay-pw-card {
    width: 100%;
    max-width: 430px;
    background: #ffffff;
    border-radius: 16px;
    padding: 30px 30px 26px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(25, 56, 69, 0.10);
    text-align: center;
    font-family: var(--font-lexend), 'Lexend', sans-serif;
}

.hay-pw-title {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #87246A;
}

.hay-pw-title--confirm {
    font-size: 17px;
    margin-bottom: 12px;
}

.hay-pw-email {
    white-space: nowrap;
}

.hay-pw-subtitle {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.55;
    color: #64748b;
}

.hay-pw-field { margin-bottom: 16px; }

.hay-pw-input {
    width: 100%;
    height: 44px;
    padding: 11px 14px;
    box-sizing: border-box;
    border: 1px solid #EBD9A8;
    border-radius: 8px;
    background: #FEFCF3;
    color: #1c3b47;
    font-size: 13.5px;
    font-family: inherit;
    text-align: center;
}

.hay-pw-input::placeholder { color: #C0B491; }

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

/* --- Buttons: ghost (outlined) + solid, side by side --- */
.hay-pw-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.hay-pw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hay-pw-btn-ghost {
    background: #ffffff;
    color: #87246A;
    border: 1.5px solid #E893CD;
}
.hay-pw-btn-ghost:hover {
    background: #FDF2F9;
    border-color: #87246A;
    color: #87246A;
}

.hay-pw-btn-solid {
    background: #87246A;
    color: #ffffff;
    border: 1.5px solid #87246A;
}
.hay-pw-btn-solid:hover {
    background: #6E1C56;
    border-color: #6E1C56;
    color: #ffffff;
}

.hay-pw-btn-block {
    width: 100%;
    display: flex;
}

/* --- Confirmation screen --- */
.hay-pw-resend-line {
    margin: 0 0 18px;
    font-size: 12.5px;
    color: #64748b;
}

.hay-pw-resend {
    color: #F5B41A;
    font-weight: 800;
    text-decoration: none;
}
.hay-pw-resend:hover { text-decoration: underline; }

/* --- Terms / Privacy beneath the card --- */
.hay-pw-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.hay-pw-legal-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-lexend), 'Lexend', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #1c3b47;
    text-decoration: none;
}
.hay-pw-legal-link i { font-size: 12px; opacity: 0.65; }
.hay-pw-legal-link:hover { color: #87246A; }

/* WooCommerce notices sit above the card, centred with it. */
.hay-pw-screen .woocommerce-message,
.hay-pw-screen .woocommerce-error,
.hay-pw-screen .woocommerce-info {
    width: 100%;
    max-width: 430px;
    margin: 0 auto 16px;
    box-sizing: border-box;
}

@media (max-width: 420px) {
    .hay-pw-actions { grid-template-columns: minmax(0, 1fr); }
    .hay-pw-card { padding: 26px 20px 22px; }
    .hay-pw-title { font-size: 17px; }
}

/* =========================================================
   HOME HERO: LET THE SLIDE 3 GRAPHIC BLEED TO HEADER + WAVE
   =========================================================
   The sample-pages graphic is absolutely positioned inside .hero-slide,
   so it is clipped by .hero-slider-container's `overflow: hidden` - and
   that container sits INSIDE .hero-section's 70px top / 110px bottom
   padding. That is why the workbook pages were cut off in mid-air well
   short of the wave.

   The container's overflow cannot simply be turned off: it is what hides
   the other carousel slides sitting alongside in .hero-slides-wrapper.

   Instead the padding moves from the section to the container. `overflow`
   clips at the PADDING edge, not the content edge, so the visible area
   grows by exactly that padding while the overall hero height, the slide
   contents and the nav dots all stay exactly where they were.

   Top clip line  -> the very top of the hero, i.e. under the header.
   Bottom clip line -> the hero's bottom edge, where the wave sits.

   The wave is z-index 5 and the graphic's wrapper z-index 3, so the wave
   paints over the graphic and forms the bottom cut.
   ========================================================= */

@media (min-width: 992px) {
    body.page-home .hero-section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.page-home .hero-slider-container {
        padding-top: 70px !important;      /* was .hero-section's padding-top */
        padding-bottom: 110px !important;  /* was .hero-section's padding-bottom */
        box-sizing: content-box !important;
    }
}

/* =========================================================
   HOME HERO SLIDE 2: LARGER LEARN / PRACTISE / CONSOLIDATE ROAD
   =========================================================
   lpc_road.svg is .cpl-road-col img. custom-styles.css caps it at
   max-width: 380px across several competing desktop rules (380 / 360 /
   380 - the last one wins). This raises that cap.

   .hero-cpl-graphic-wrap is a flex row holding the road and the numbered
   list card, both at width:100%, so they share the space. Giving the road
   column a flex-basis to match the new width is what actually lets it
   grow - raising max-width alone would leave flex shrinking it back.

   ---- ONE NUMBER TO TUNE ----
   Change 460px in all three places below to resize. Larger takes width
   from the list card beside it, so much past ~500px starts to crowd the
   text. Was 380px.
   ========================================================= */

@media (min-width: 992px) {
    body.page-home .cpl-road-col img,
    body.page-home .cpl-road-graphic-img,
    .cpl-road-col img,
    .cpl-road-graphic-img {
        width: 100% !important;
        max-width: 460px !important;
        height: auto !important;
    }

    body.page-home .hero-cpl-graphic-wrap .cpl-road-col,
    .hero-cpl-graphic-wrap .cpl-road-col {
        flex: 0 1 460px !important;
        max-width: 460px !important;
        min-width: 0 !important;
    }

    /* Let the list card give up the width the road has taken. */
    body.page-home .hero-cpl-graphic-wrap .cpl-list-col,
    .hero-cpl-graphic-wrap .cpl-list-col {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}