/* ================================================================
   SVRG CHILD THEME - custom.css
   ================================================================
   Table of contents:
    Section1   Base reset & typography
    Section2   Sticky header
    Section3   Buttons (sharp, brand-accent)
    Section4   WooCommerce product grid
    Section5   Product card image & hover
    Section6   Price display & sale badge
    Section12  Dark header (SVRG.id style)
    Section13  Dark footer
    Section14  Homepage - Hero
    Section15  Homepage - Category grid
    Section16  Homepage - Horizontal product rows
    Section17  Homepage - Brand banner
    Section18  Homepage responsive
    Section7   Loop variation swatches
    Section8   Single product summary
    Section9   WhatsApp order button
    Section10  Trust / shipping accordion
    Section11  Mobile bottom navigation bar
    Section12  Responsive breakpoints
   ================================================================ */


/* ================================================================
   Section1  BASE RESET & TYPOGRAPHY
   ================================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

/* ================================================================
   MERRYSBOOK CLIENT REVISION 2026-07-16
   Featured medical categories, compact variation picker, no filters
   ================================================================ */

/* Homepage: exactly seven configurable medical categories + More. */
#svrg-categories.mbook-featured-categories {
    padding: 34px 0 26px !important;
}

#svrg-categories.mbook-featured-categories .svrg-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

#svrg-categories.mbook-featured-categories .mbook-medical-cat-tile {
    min-width: 0 !important;
    min-height: 202px !important;
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    border: 1px solid #dfe5e8 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(18, 36, 58, 0.06) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

#svrg-categories.mbook-featured-categories .mbook-medical-cat-tile:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(0, 97, 96, 0.34) !important;
    box-shadow: 0 10px 24px rgba(18, 36, 58, 0.11) !important;
}

#svrg-categories.mbook-featured-categories .mbook-category-icon {
    position: static !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    min-height: 132px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    color: var(--mbook-teal, #006160) !important;
    opacity: 1 !important;
    transform: none !important;
}

#svrg-categories.mbook-featured-categories .mbook-category-icon::before {
    content: none !important;
    display: none !important;
}

#svrg-categories.mbook-featured-categories .mbook-category-icon svg {
    width: 82px !important;
    height: 82px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

#svrg-categories.mbook-featured-categories .mbook-category-icon .mbook-category-photo {
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#svrg-categories.mbook-featured-categories .svrg-cat-tile-label {
    position: static !important;
    min-height: 68px !important;
    padding: 10px 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 0 !important;
    color: var(--mbook-ink, #12243a) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
}

#svrg-categories.mbook-featured-categories .svrg-cat-tile-label span::before {
    content: none !important;
}

/* Attribute dropdowns/sidebar are intentionally removed on category/search. */
.paradise-shopbar--simple {
    justify-content: flex-end !important;
}

.svrg-search-sidebar,
.svrg-search-results-toolbar .svrg-sf-open-btn,
.svrg-sf-overlay,
.svrg-sf-modal {
    display: none !important;
}

.svrg-search-body {
    display: block !important;
}

.svrg-search-main {
    width: 100% !important;
    max-width: none !important;
}

/* The card Add to Cart button opens this focused variation picker. */
.svrg-qv-modal.is-cart-picker {
    width: min(620px, calc(100vw - 32px)) !important;
    max-width: 620px !important;
}

.svrg-qv-modal.is-cart-picker .svrg-qv-inner {
    display: block !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
}

.svrg-qv-modal.is-cart-picker .svrg-qv-gallery,
.svrg-qv-modal.is-cart-picker .svrg-qv-readmore {
    display: none !important;
}

.svrg-qv-modal.is-cart-picker .svrg-qv-info {
    width: 100% !important;
    max-height: min(78vh, 680px) !important;
    padding: 30px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.svrg-qv-modal.is-cart-picker .svrg-qv-title {
    padding-right: 34px !important;
    margin-bottom: 8px !important;
    font-size: 23px !important;
    line-height: 1.3 !important;
}

.svrg-qv-modal.is-cart-picker .svrg-qv-price {
    margin-bottom: 20px !important;
}

.svrg-qv-modal.is-cart-picker form.cart,
.svrg-qv-modal.is-cart-picker form.variations_form {
    width: 100% !important;
}

.svrg-qv-modal.is-cart-picker table.variations {
    width: 100% !important;
    margin-bottom: 14px !important;
}

.svrg-qv-modal.is-cart-picker table.variations tr,
.svrg-qv-modal.is-cart-picker table.variations th,
.svrg-qv-modal.is-cart-picker table.variations td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.svrg-qv-modal.is-cart-picker table.variations th {
    padding: 10px 0 6px !important;
    text-align: left !important;
}

.svrg-qv-modal.is-cart-picker table.variations td {
    padding: 0 0 8px !important;
}

.svrg-qv-modal.is-cart-picker table.variations select {
    width: 100% !important;
    min-height: 46px !important;
    border: 1px solid #cfd9dc !important;
    border-radius: 8px !important;
    background-color: #fff !important;
}

@media (max-width: 1200px) {
    #svrg-categories.mbook-featured-categories .svrg-cat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    #svrg-categories.mbook-featured-categories {
        padding: 24px 0 18px !important;
    }

    #svrg-categories.mbook-featured-categories .svrg-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #svrg-categories.mbook-featured-categories .mbook-medical-cat-tile {
        min-height: 154px !important;
    }

    #svrg-categories.mbook-featured-categories .mbook-category-icon {
        min-height: 96px !important;
    }

    #svrg-categories.mbook-featured-categories .mbook-category-icon svg {
        width: 60px !important;
        height: 60px !important;
    }

    #svrg-categories.mbook-featured-categories .mbook-category-icon .mbook-category-photo {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }

    #svrg-categories.mbook-featured-categories .svrg-cat-tile-label {
        min-height: 56px !important;
        padding: 8px 7px 12px !important;
        font-size: 12px !important;
    }

    .svrg-qv-modal.is-cart-picker {
        width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 32px) !important;
    }

    .svrg-qv-modal.is-cart-picker .svrg-qv-info {
        max-height: calc(100vh - 32px) !important;
        padding: 24px 18px 20px !important;
    }

    .svrg-qv-modal.is-cart-picker .svrg-qv-title {
        font-size: 19px !important;
    }
}

/* Final product-card visibility overrides. */
.svrg-hcard-img-wrap {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

.svrg-hcard-img-link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.svrg-hcard-img-wrap .svrg-hcard-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 10px 14px 4px !important;
}

.svrg-hcard-img-wrap .svrg-hcard-wishlist {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 8 !important;
    width: 34px !important;
    height: 34px !important;
    padding: 5px !important;
    border: 1px solid #dfe7e8 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #00756f !important;
    line-height: 1 !important;
}

.svrg-hcard-img-wrap .svrg-hcard-wishlist svg {
    display: block !important;
    visibility: visible !important;
    width: 22px !important;
    height: 22px !important;
    stroke: #00756f !important;
    fill: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover {
    color: var(--color-accent-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.05em;
    color: var(--color-text);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

input, select, textarea, button {
    font-family: inherit;
}

/* Remove default list styles inside WC */
.woocommerce ul.products,
.svrg-trust-list,
.svrg-bottom-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ================================================================
   Section2  STICKY HEADER  (stays in place while scrolling)
   Social topbar scrolls away; main nav row sticks at top.
   ================================================================ */

header.site-header,
.site-header {
    position: sticky !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    z-index: 1000;
    background-color: var(--color-bg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    transition: box-shadow var(--transition);
    border-bottom: none;
}

/* Admin bar compensation - sticky header must sit BELOW the admin bar */
.admin-bar header.site-header,
.admin-bar .site-header {
    top: 32px !important; /* desktop admin bar: 32px */
}
@media screen and (max-width: 782px) {
    .admin-bar header.site-header,
    .admin-bar .site-header {
        top: 46px !important; /* mobile admin bar: 46px */
    }
}

header.site-header.is-sticky,
.site-header.is-sticky {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

/* Ensure no double border from parent themes */
.storefront-primary-navigation,
.site-navigation {
    border-top: none;
}


/* ================================================================
   Section3  BUTTONS - Sharp, High-Contrast, Brand-Accented
   ================================================================ */

/* Reset all WC/WP button styles first */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 24px;
    border-radius: var(--radius-none);
    border: 2px solid var(--color-text);
    background: var(--color-text);
    color: #fff;
    cursor: pointer;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* Primary CTA - Add to Cart on single product */
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    width: 100%;
    padding: 17px 28px;
    font-size: 13px;
    min-height: 52px;
}

.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

/* Disabled / out of stock */
.woocommerce .button:disabled,
.woocommerce .button.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* ================================================================
   Section4  WOOCOMMERCE PRODUCT GRID
   ================================================================ */

/* Override Storefront/theme's default grid with a proper CSS Grid */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    float: none !important;
    width: 100% !important;
    clear: both;
}

/* Remove any float-based widths set by Storefront on li.product */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
    transition:
        box-shadow var(--transition),
        transform var(--transition);
    display: flex;
    flex-direction: column;
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

/* Inner anchor that wraps the product image */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    display: block;
    overflow: hidden;
    position: relative;
    background: var(--color-bg-alt);
}

.woocommerce ul.products li.product img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    object-position: center;
    background: #fff;
    transition: transform 0.45s ease;
    margin: 0;
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.05);
}

/* Product title on card - 2-line clamp keeps cards uniform height */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.45;
    padding: 12px 14px 4px;
    margin: 0;
    color: var(--color-text);
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(13px * 1.45 * 2);
}

/* Loop "Add to Cart" button */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
    margin: 4px 14px 14px;
    width: calc(100% - 28px);
    text-align: center;
    font-size: 11px;
    padding: 11px;
}


/* ================================================================
   Section5  PRICE DISPLAY & SALE BADGE
   ================================================================ */

/* Loop price */
.woocommerce ul.products li.product .price {
    display: block;
    padding: 2px 14px 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0;
}

.woocommerce ul.products li.product .price del {
    color: var(--color-text-light);
    font-weight: 400;
    font-size: 11px;
    margin-right: 5px;
    opacity: 0.7;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
}

/* Single product price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-accent);
}

/* ── Custom Sale Badge ── */
/* Hide WooCommerce's default badge */
.woocommerce span.onsale {
    display: none !important;
}

/* Our custom badge - red matching SVRG.id #dc2626 */
.svrg-sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-sale);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 8px 4px;
    line-height: 1;
    border-radius: var(--radius-sm);
    z-index: 10;
    pointer-events: none;
}

/* On single product, badge is inside .images div */
.woocommerce div.product .svrg-sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
}


/* ================================================================
   Section6  LOOP VARIATION SWATCHES  (shop grid cards)
   ================================================================ */

.svrg-loop-swatches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 14px 10px;
}

.svrg-swatch-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-right: 2px;
    flex-shrink: 0;
}

.svrg-swatch-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 7px;
    border: 1.5px solid var(--color-border);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
    transition:
        border-color var(--transition),
        background var(--transition),
        color var(--transition);
    border-radius: var(--radius-none);
    white-space: nowrap;
}

.svrg-swatch-pill:hover {
    border-color: var(--color-text);
}

.svrg-swatch-pill.active {
    border-color: var(--color-text);
    background: var(--color-text);
    color: #fff;
}

/* Single product variation swatches injected by JS */
.svrg-swatches-container {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 4px;
}

.svrg-swatches-container .svrg-swatch-pill {
    min-width: 44px;
    height: 44px;
    font-size: 12px;
}


/* ================================================================
   Section7  SINGLE PRODUCT SUMMARY
   ================================================================ */

.woocommerce div.product .product_title {
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 10px;
    color: var(--color-text);
}

/* Star rating */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.woocommerce p.stars a:hover ~ a::before,
.woocommerce p.stars.selected a.active ~ a::before {
    color: var(--color-accent);
}

/* Variations label */
.woocommerce div.product form.variations_form table.variations td,
.woocommerce div.product form.variations_form table.variations th {
    border: none;
    padding: 2px 0;
    vertical-align: middle;
}

.woocommerce div.product form.variations_form table.variations label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

/* Storefront's own woocommerce.css sets table.variations .value {
   margin-bottom: 1em } - that stray 16px was the real source of the
   remaining gap between each attribute group (Bahan/Size/Warna). */
.woocommerce div.product table.variations .value {
    margin-bottom: 8px !important;
}
.woocommerce div.product table.variations tr:last-child .value {
    margin-bottom: 0 !important;
}

/* Quantity input */
.woocommerce .quantity .qty {
    width: 64px;
    height: 52px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-none);
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding: 0 8px;
    -moz-appearance: textfield;
}
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* Summary padding on wide screens */
@media (min-width: 769px) {
    .woocommerce div.product div.summary {
        padding-left: 40px;
    }
}

/* ── Custom quantity stepper ── */
.svrg-qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--color-border);
    overflow: hidden;
    height: 52px;
}

.svrg-qty-stepper .qty {
    border: none !important;
    width: 56px !important;
    height: 100% !important;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding: 0 !important;
    -moz-appearance: textfield;
    border-radius: 0 !important;
}

.svrg-qty-stepper .qty::-webkit-inner-spin-button,
.svrg-qty-stepper .qty::-webkit-outer-spin-button { -webkit-appearance: none; }

.svrg-qty-btn {
    width: 48px;
    height: 100%;
    background: #f5f5f5;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-heading);
    transition: background 0.15s;
    flex-shrink: 0;
}

.svrg-qty-btn:hover { background: #e8e8e8; }

/* ── Add to Cart - full-width uppercase black on single product ── */
.woocommerce div.product form.cart .single_add_to_cart_button {
    display: block !important;
    width: 100% !important;
    background: #111 !important;
    color: #fff !important;
    border: none !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 18px 24px !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    border-radius: 0 !important;
    margin-top: 12px !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: #333 !important;
}

/* ── Hemat X% inline price badge ── */
.svrg-hemat-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent);
    margin-left: 6px;
    white-space: nowrap;
}

/* ── Variation pills on single product ── */
.svrg-swatches-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}

.woocommerce div.product .svrg-swatches-container .svrg-swatch-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border: 1.5px solid #ddd;
    background: #fff;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
    line-height: 1;
}

.woocommerce div.product .svrg-swatches-container .svrg-swatch-pill:hover {
    border-color: var(--color-heading);
}

.woocommerce div.product .svrg-swatches-container .svrg-swatch-pill.active {
    border-color: var(--color-heading);
    background: var(--color-heading);
    color: #fff;
}

/* ── DESKRIPSI / SPESIFIKASI accordion ── */
.svrg-desc-accordion {
    margin-top: 12px;
    border-top: 1px solid var(--color-border);
}

.svrg-desc-acc-item {
    border-bottom: 1px solid var(--color-border);
}

/* The blanket "button { background:#000; color:#fff }" accent rule
   (Section accent: black buttons) sweeps up this <button> too, turning it
   into a solid black bar - undo it here specifically, same pattern as
   .svrg-lang-btn / .svrg-qty-btn. Reference wants plain white/transparent
   with dark text, not a filled bar. */
.svrg-desc-acc-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none !important;
    border: none;
    padding: 12px 0;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-heading) !important;
    cursor: pointer;
    text-align: left;
}
.svrg-desc-acc-trigger:hover {
    background: none !important;
    color: var(--color-heading) !important;
}

.svrg-desc-acc-trigger svg {
    transition: transform 0.22s ease;
    flex-shrink: 0;
}

.svrg-desc-acc-item.is-open .svrg-desc-acc-trigger svg {
    transform: rotate(180deg);
}

.svrg-desc-acc-body {
    display: none;
    padding: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text);
}

.svrg-desc-acc-item.is-open .svrg-desc-acc-body { display: block; }

.svrg-desc-acc-body p { margin-bottom: 8px; }
.svrg-desc-acc-body ul,
.svrg-desc-acc-body ol {
    margin: 0 0 8px;
    padding-left: 18px;
}
.svrg-desc-acc-body li { margin-bottom: 3px; }

.svrg-desc-acc-body table.shop_attributes {
    width: 100%;
    border-collapse: collapse;
}

.svrg-desc-acc-body table.shop_attributes th,
.svrg-desc-acc-body table.shop_attributes td {
    padding: 8px 12px;
    font-size: 13px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.svrg-desc-acc-body table.shop_attributes th {
    width: 40%;
    font-weight: 600;
    color: var(--color-text-light);
    background: #f9f9f9;
}


/* ================================================================
   Section8  WHATSAPP ORDER BUTTON
   ================================================================ */

.svrg-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    padding: 15px 28px;
    min-height: 52px;
    background: var(--color-whatsapp);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--color-whatsapp);
    border-radius: var(--radius-none);
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
    line-height: 1;
}

.svrg-whatsapp-btn:hover {
    background: var(--color-whatsapp-dk);
    border-color: var(--color-whatsapp-dk);
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
}

.svrg-whatsapp-btn svg {
    flex-shrink: 0;
}


/* ================================================================
   Section9  TRUST / SHIPPING ACCORDION
   ================================================================ */

.svrg-trust-accordion {
    width: 100%;
    max-width: 640px;
    margin: 36px 0 16px;
    border-top: 1px solid var(--color-border);
}

.svrg-accordion-item {
    border-bottom: 1px solid var(--color-border);
}

.svrg-accordion-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
    transition: color var(--transition);
    outline-offset: 2px;
}

.svrg-accordion-trigger:hover {
    color: var(--color-accent);
}

.svrg-accordion-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--color-accent);
}

.svrg-accordion-label {
    flex: 1;
}

.svrg-accordion-chevron {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--color-text-light);
    transition: transform var(--transition);
}

.svrg-accordion-trigger[aria-expanded="true"] .svrg-accordion-chevron {
    transform: rotate(180deg);
}

.svrg-accordion-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.32s ease;
}

.svrg-accordion-item.is-open .svrg-accordion-body {
    max-height: 500px;
}

.svrg-trust-list {
    padding: 0 0 18px 30px;
}

.svrg-trust-list li {
    position: relative;
    padding: 4px 0;
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.65;
}

.svrg-trust-list li::before {
    content: '-';
    position: absolute;
    left: -18px;
    color: var(--color-accent);
    font-weight: 700;
}

.svrg-trust-list strong {
    color: var(--color-text);
    font-weight: 600;
}


/* ================================================================
   Section10  MOBILE BOTTOM NAVIGATION BAR
   ================================================================ */

.svrg-bottom-nav {
    display: none;  /* Shown only on mobile via Section11 media query */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    /* Safe area inset for iPhones with home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.svrg-bottom-nav-list {
    display: flex;
    align-items: stretch;
}

.svrg-bottom-nav-list li {
    flex: 1;
}

.svrg-bottom-nav-list a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 4px 8px;
    min-height: 56px;   /* ≥44px touch target */
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition);
    position: relative;
}

.svrg-bottom-nav-list a:hover,
.svrg-bottom-nav-list a.active {
    color: var(--color-accent);
}

.svrg-bottom-nav-list a svg {
    flex-shrink: 0;
}

/* Cart item count badge */
.svrg-bottom-nav-cart-count {
    position: absolute;
    top: 7px;
    right: calc(50% - 22px);
    background: var(--color-accent);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}


/* ================================================================
   Section11  RESPONSIVE BREAKPOINTS
   ================================================================ */

/* ── 3-col grid above 1024px ── */
@media (min-width: 1025px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

/* ── Storefront 4.x overrides - ensure our grid wins ── */
.storefront-full-width-content .site-main > .woocommerce > ul.products,
.woocommerce-page .woocommerce ul.products,
body.woocommerce ul.products,
body.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Uniform card height via flex column */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* Push button to bottom of card */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
    margin-top: auto;
}

/* Storefront site header - sticky: topbar scrolls away, nav sticks */
.site-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    background: var(--color-accent) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Header is now sticky (in normal flow) - no padding-top offset needed on #page */
#page {
    padding-top: 0 !important;
}

/* Storefront strips default border-bottom from nav */
.storefront-primary-navigation {
    border-top: none !important;
    background: var(--color-accent) !important;
}

/* Nav links accent on hover */
.site-navigation ul li a:hover {
    color: var(--color-accent) !important;
}

/* Cart count bubble */
.site-header .cart-contents .count {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

/* ── Tablet: 2-col grid ── */
@media (max-width: 768px) {
    /* Show mobile bottom nav */
    .svrg-bottom-nav {
        display: block;
    }

    /* Body needs padding so content doesn't hide behind the bottom bar */
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* 2-col product grid */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    /* Tighter product card text */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 12px;
        padding: 10px 10px 4px;
    }

    .woocommerce ul.products li.product .price {
        padding: 0 10px 6px;
        font-size: 13px;
    }

    .svrg-loop-swatches {
        padding: 0 10px 8px;
    }

    .woocommerce ul.products li.product a.button {
        margin: 4px 10px 10px;
        width: calc(100% - 20px);
    }

    /* Single product summary */
    .woocommerce div.product div.summary {
        padding-left: 0;
        padding-top: 20px;
    }

    /* Full-width WA button */
    .svrg-whatsapp-btn {
        min-height: 52px;
    }

    /* Larger swatch touch targets on mobile */
    .svrg-swatch-pill {
        min-width: 44px;
        height: 44px;
        font-size: 13px;
    }

    /* Trust accordion full width */
    .svrg-trust-accordion {
        max-width: 100%;
    }
}

.mbook-lower-trust {
    width: min(calc(100% - 56px), 1544px) !important;
    margin: 18px auto 0 !important;
    padding: 22px 0 !important;
    border: 1px solid #edf0f0 !important;
    border-radius: 10px !important;
    background: #f7f8f7 !important;
}

.mbook-lower-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
}

.mbook-lower-trust-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    min-height: 72px !important;
    padding: 0 28px !important;
    color: var(--mbook-teal) !important;
}

.mbook-lower-trust-item + .mbook-lower-trust-item {
    border-left: 1px solid #dfe5e4 !important;
}

.mbook-lower-trust-item svg {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
}

.mbook-lower-trust-item span {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mbook-lower-trust-item strong {
    color: var(--mbook-ink) !important;
    font-size: 18px !important;
}

.mbook-lower-trust-item small {
    color: var(--mbook-ink) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

@media (max-width: 768px) {
    .mbook-lower-trust {
        width: calc(100% - 24px) !important;
        margin-top: 14px !important;
        padding: 8px 0 !important;
    }

    .mbook-lower-trust-grid {
        grid-template-columns: 1fr !important;
    }

    .mbook-lower-trust-item {
        justify-content: flex-start !important;
        min-height: 68px !important;
        padding: 10px 20px !important;
    }

    .mbook-lower-trust-item + .mbook-lower-trust-item {
        border-top: 1px solid #dfe5e4 !important;
        border-left: 0 !important;
    }
}

/* Merrysbook footer presentation. Existing footer fields remain Customizer-driven. */
.svrg-footer {
    margin-top: 28px !important;
    background: var(--mbook-teal-dark, #006160) !important;
    color: #fff !important;
}

.svrg-footer .svrg-footer-inner {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.15fr) minmax(0, 1.8fr) minmax(240px, 1fr) !important;
    gap: 36px !important;
    max-width: 1544px !important;
    padding: 42px 28px 30px !important;
}

.svrg-footer .svrg-footer-logo {
    max-width: 285px !important;
    filter: brightness(0) invert(1) !important;
}

.svrg-footer .svrg-footer-tagline,
.svrg-footer .svrg-footer-heading,
.svrg-footer .svrg-footer-links a,
.svrg-footer .svrg-footer-card-title,
.svrg-footer .svrg-footer-card-desc {
    color: #fff !important;
}

.svrg-footer .svrg-footer-tagline,
.svrg-footer .svrg-footer-card-desc {
    line-height: 1.55 !important;
}

.svrg-footer .svrg-footer-links-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
}

.svrg-footer .svrg-footer-link-col + .svrg-footer-link-col {
    border-left: 1px solid rgba(255,255,255,.18) !important;
    padding-left: 28px !important;
}

.svrg-footer .svrg-footer-links a:hover {
    color: #d9b267 !important;
}

.svrg-footer .svrg-footer-cards,
.svrg-footer .svrg-footer-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.svrg-footer .svrg-footer-card-btn {
    background: #fff !important;
    color: var(--mbook-teal-dark, #006160) !important;
}

.svrg-footer .svrg-footer-bottom {
    max-width: 1544px !important;
    border-top: 1px solid rgba(255,255,255,.2) !important;
    color: rgba(255,255,255,.85) !important;
}

@media (max-width: 900px) {
    .svrg-footer .svrg-footer-inner {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 32px 20px 24px !important;
    }

    .svrg-footer .svrg-footer-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .svrg-footer .svrg-footer-link-col + .svrg-footer-link-col {
        border-left: 0 !important;
        padding-left: 0 !important;
    }
}

@media (max-width: 520px) {
    .svrg-footer .svrg-footer-links-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }
}

/* Tight spacing between the product row, brand showcase, and lower trust bar. */
.svrg-brand-showcase {
    margin-top: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 0 !important;
}

.mbook-lower-trust {
    margin-top: 10px !important;
}

.svrg-footer {
    background: #006766 !important;
    color: #fff !important;
}

.svrg-footer .svrg-footer-heading {
    margin: 0 0 16px !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.svrg-footer .svrg-footer-links a,
.svrg-footer .svrg-footer-contact-list,
.svrg-footer .svrg-footer-tagline {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.svrg-footer .svrg-footer-contact-list {
    margin: 0 0 14px !important;
    padding: 0 !important;
    list-style: none !important;
    color: rgba(255,255,255,.9) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.svrg-footer .svrg-footer-contact-list li {
    margin: 0 0 5px !important;
}

.svrg-footer .svrg-footer-contact-list a {
    color: #fff !important;
}

.svrg-footer .svrg-footer-cards {
    display: none !important;
}

.svrg-footer .svrg-footer-links-grid {
    grid-column: 2 / -1 !important;
}

.svrg-footer-payments {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 18px !important;
}

.svrg-footer-payments span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 4px 12px !important;
    border-radius: 5px !important;
    background: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.svrg-footer-payments img {
    display: block !important;
    width: auto !important;
    max-width: 112px !important;
    height: 30px !important;
    object-fit: contain !important;
}

.svrg-footer-payments .payment-dana { color: #168bd0 !important; }
.svrg-footer-payments .payment-ovo { color: #6043a5 !important; }
.svrg-footer-payments .payment-gopay { color: #222 !important; }
.svrg-footer-payments .payment-shopee { color: #e45c43 !important; }

@media (max-width: 900px) {
    .svrg-footer .svrg-footer-links-grid {
        grid-column: auto !important;
    }
}

/* ── Small mobile: tighter gaps ── */
@media (max-width: 480px) {
    .woocommerce ul.products {
        gap: 8px;
    }
}

/* ── Hide bottom nav on desktop ── */
@media (min-width: 769px) {
    .svrg-bottom-nav {
        display: none !important;
    }
}


/* ================================================================
   Section12  TEAL HEADER (SVRG.id style)
   ================================================================ */

/* ── Core header shell - teal, no border (topbar already separates) ── */
.site-header,
header.site-header {
    background-color: var(--color-accent) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    border-top: none !important;
    margin-top: 0 !important;
    /* Storefront adds margin-bottom:4.235em on .home.blog .site-header
       to make space for breadcrumbs - zero it out on our custom homepage */
    margin-bottom: 0 !important;
}

.site-header.is-sticky {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ── Site title / logo ── */
.site-branding .site-title a,
.site-branding .site-title a:visited,
.site-branding p.site-title a {
    color: #fff !important;
}
.site-branding .site-description {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Navigation links - white on dark green ── */
.site-navigation ul li a,
.main-navigation ul li a,
.storefront-primary-navigation ul li a,
.storefront-primary-navigation .menu > li > a {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-navigation ul li a:hover,
.main-navigation ul li a:hover,
.storefront-primary-navigation ul li a:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Active / current menu item - underline indicator */
.site-navigation ul li.current-menu-item > a,
.site-navigation ul li.current_page_item > a {
    color: #fff !important;
}

.svrg-nav-menu > li.current-menu-item > a,
.svrg-nav-menu > li.current_page_item > a,
.svrg-nav-menu > li.current-menu-ancestor > a {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 4px;
}

/* ── Storefront nav bar below header ── */
.storefront-primary-navigation,
nav.storefront-primary-navigation {
    background-color: var(--color-accent) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ── Cart icon in header ── */
.site-header .cart-contents,
.site-header-cart .cart-contents,
.site-header .site-header-cart a {
    color: #fff !important;
}

.site-header .cart-contents .amount {
    color: #fff !important;
}

.site-header .cart-contents .count,
.site-header-cart .count {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* ── Search field in dark header ── */
.site-header .widget_product_search input,
.site-header .search-field {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.site-header .search-field::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* ── Mobile handheld header (Storefront) ── */
.storefront-handheld-footer-bar,
.storefront-sticky-nav {
    background: var(--color-accent) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.storefront-handheld-footer-bar ul li a,
.storefront-sticky-nav ul li a {
    color: #fff !important;
}

/* ── Dropdown sub-menus ── */
.site-navigation ul ul,
.main-navigation ul ul {
    background: var(--color-accent-dark) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.site-navigation ul ul li a {
    color: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.site-navigation ul ul li a:hover {
    color: #fff !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

/* ── Single-row header - PHP-rebuilt flex layout (Section2c in functions.php) ── */

/* Wrapper: full-width flex, everything in one row */
header.site-header .svrg-hdr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 28px !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Logo - left */
.svrg-hdr-logo {
    flex-shrink: 0;
    margin-right: 24px;
}
.svrg-hdr-logo .site-branding {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
.svrg-hdr-logo .site-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.svrg-hdr-logo .site-title a,
.svrg-hdr-logo .site-title a:visited {
    color: #fff !important;
}
.svrg-hdr-logo .site-description {
    display: none !important;
}
.svrg-hdr-logo .custom-logo-link,
.svrg-hdr-logo .site-logo {
    display: block;
    overflow: visible !important;
    max-width: none !important;
}
.svrg-hdr-logo .custom-logo-link img,
.svrg-hdr-logo .site-logo img {
    max-height: 48px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block;
}

/* Nav - center (flex: 1, justify center) */
.svrg-hdr-nav {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    min-height: 52px !important;
}

.svrg-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.svrg-nav-menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    height: 72px !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color var(--transition) !important;
}

.svrg-nav-menu > li > a:hover,
.svrg-nav-menu > li.current-menu-item > a,
.svrg-nav-menu > li.current_page_item > a {
    color: #fff !important;
}

/* ================================================================
   Section0  SHOP CATALOG PAGE - full-width category grid
   ================================================================ */

/* Break out of Storefront's .col-full max-width */
.svrg-catalog-wrap {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 28px 24px 64px;
    box-sizing: border-box;
}

.svrg-catalog-header {
    max-width: 1320px;
    margin: 0 auto 20px;
}

.svrg-catalog-title {
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
}

.svrg-catalog-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    max-width: 1320px;
    margin: 0 auto;
}

.svrg-cat-tile {
    position: relative;
    display: block;
    text-decoration: none;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background: #111;
}

.svrg-cat-tile-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.svrg-cat-tile:hover .svrg-cat-tile-bg {
    transform: scale(1.06);
}

.svrg-cat-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,0.75) 100%);
    transition: opacity 0.3s ease;
}

.svrg-cat-tile:hover .svrg-cat-tile-overlay {
    opacity: 0.9;
}

.svrg-cat-tile-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 10px 10px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
}

.svrg-cat-tile-name {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.svrg-cat-tile-bar {
    color: var(--color-accent);
    margin-right: 6px;
    font-weight: 900;
}

.svrg-cat-tile-arrow {
    font-size: 18px;
    color: var(--color-accent);
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.2s ease;
}

.svrg-cat-tile:hover .svrg-cat-tile-arrow {
    transform: translate(2px, -2px);
}

/* Responsive */
@media (max-width: 1100px) {
    .svrg-catalog-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
    .svrg-catalog-wrap { padding: 16px 12px 40px; }
    .svrg-catalog-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .svrg-cat-tile-name { font-size: 11px; }
}

@media (max-width: 480px) {
    .svrg-catalog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   Section0b  PRODUCT CATEGORY PAGE - Hero + 4-col products + Koleksi Terbaik
   ================================================================ */

/* --- Category Hero --- */
.svrg-cat-hero {
    /* Full-width break-out from col-full container */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 380px;
    background: var(--color-header-bg, #111);
    background-size: cover;
    background-position: center top;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-bottom: 0;
    /* Ensure full row in flex parent */
    flex: 0 0 100%;
    order: 0;
    box-sizing: border-box;
}

.svrg-cat-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
}

.svrg-cat-hero-body {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 36px 40px;
}

.svrg-cat-hero-name {
    font-family: var(--font-heading);
    font-size: clamp(32px, 4vw, 60px);
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

/* --- Custom layout wrapper: full viewport width, sidebar LEFT + products RIGHT --- */
.svrg-cat-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    /* Break out of .col-full container to use full viewport width */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 24px 40px 0;
    box-sizing: border-box;
}

/* Custom filter sidebar */
.svrg-filter-sidebar {
    flex: 0 0 240px;
    width: 240px;
    min-width: 0;
    padding-top: 4px;
}

/* Products column - fills remaining width after sidebar */
.svrg-cat-products-col {
    flex: 1 1 0%;
    min-width: 0;
    width: 0; /* force flex to control width, not content */
}

/* Override any Storefront #primary / #main width constraints inside our layout */
.svrg-cat-products-col #primary.content-area,
.svrg-cat-products-col main#main {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

/* Hide Storefront's default #secondary (no longer needed) */
body.product_cat #secondary.widget-area { display: none !important; }

/* ── Shop toolbar: result count LEFT, ordering RIGHT ── */
.svrg-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
    width: 100%;
}

.svrg-shop-toolbar .woocommerce-result-count {
    font-family: var(--font-sans);
    font-size: 13px;
    color: #777;
    margin: 0 !important;
    float: none !important;
    padding: 0;
}

.svrg-shop-toolbar .woocommerce-ordering {
    margin: 0 !important;
    float: none !important;
}

.svrg-shop-toolbar .woocommerce-ordering select {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 14px 6px 10px;
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--color-heading);
    background: #fff;
    cursor: pointer;
    outline: none;
}

/* ── Filter accordion ── */
.svrg-filter-group {
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 0;
}

.svrg-filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 14px 0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-heading);
    cursor: pointer;
    text-align: left;
}

.svrg-filter-chevron {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.svrg-filter-group[data-open="0"] .svrg-filter-chevron {
    transform: rotate(-90deg);
}

.svrg-filter-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 12px;
    overflow: hidden;
}

.svrg-filter-group[data-open="0"] .svrg-filter-body {
    display: none;
}

.svrg-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-family: var(--font-sans);
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: color 0.15s;
}

.svrg-filter-option:hover { color: var(--color-heading); }

.svrg-filter-option.is-active { color: var(--color-accent); font-weight: 600; }

.svrg-filter-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1.5px solid #ccc;
    border-radius: 3px;
    font-size: 11px;
    flex-shrink: 0;
    color: #fff;
    background: #fff;
}

.svrg-filter-option.is-active .svrg-filter-check {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.svrg-filter-count {
    margin-left: auto;
    font-size: 11px;
    color: #aaa;
}

.svrg-filter-empty {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    padding: 8px 0;
}

/* --- Product grid: 4-column layout, clears Storefront clearfix ghost items --- */
ul.svrg-product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
    align-items: start;
    justify-items: stretch;
}

/* Storefront clearfix adds ::before {content:'';display:table} - in grid
   that becomes an invisible first grid item, shifting products right by 1 column. */
ul.svrg-product-grid::before,
ul.svrg-product-grid::after {
    content: none !important;
    display: none !important;
}

ul.svrg-product-grid > li {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
    position: relative !important;
}

/* --- Koleksi Terbaik section --- */
.svrg-koleksi-wrap {
    clear: both;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 48px 40px 64px;
    box-sizing: border-box;
    border-top: 1px solid #e8e8e8;
    margin-top: 16px;
}

.svrg-koleksi-title {
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0 0 20px;
}

.svrg-koleksi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.svrg-koleksi-item {
    display: flex;
    flex-direction: column;
}

.svrg-koleksi-item .svrg-cat-tile {
    display: block;
}

.svrg-koleksi-label {
    display: block;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-heading);
    text-transform: uppercase;
    padding: 6px 4px 0;
}

/* ================================================================
   QUICK VIEW - button on card + modal
   ================================================================ */

/* Image-only link wrapper (from content-product.php override) */
.svrg-card-img-link {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--color-bg-alt, #f5f5f5);
}

/* Quick View slide-up button */
.svrg-qv-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    border: none;
    padding: 13px 12px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1;
    transform: translateY(100%);
    transition: transform 0.22s ease;
    z-index: 5;
}

li.product:hover .svrg-qv-btn,
.svrg-card-img-link:focus-within .svrg-qv-btn {
    transform: translateY(0);
}

.svrg-qv-btn:hover {
    background: rgba(0, 0, 0, 0.95);
}

/* ── Quick View Modal ── */
.svrg-qv-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.svrg-qv-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.svrg-qv-modal {
    position: relative;
    background: #fff;
    max-width: 880px;
    width: 92%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 40px;
    box-sizing: border-box;
    transform: translateY(16px);
    transition: transform 0.24s ease;
}

.svrg-qv-overlay.is-open .svrg-qv-modal {
    transform: translateY(0);
}

.svrg-qv-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 4px 8px;
    transition: color var(--transition);
}

.svrg-qv-close:hover { color: #111; }

.svrg-qv-inner {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.svrg-qv-gallery {
    flex: 0 0 42%;
}

.svrg-qv-main-wrap { overflow: hidden; }

.svrg-qv-main-img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.13s ease;
}

.svrg-qv-main-img.is-fading { opacity: 0; }

.svrg-qv-thumbs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.svrg-qv-thumb {
    width: 56px;
    height: 56px;
    border: 2px solid #ddd;
    background: none;
    cursor: pointer;
    padding: 2px;
    overflow: hidden;
    transition: border-color var(--transition);
    flex-shrink: 0;
}

.svrg-qv-thumb.is-active { border-color: var(--color-accent); }

.svrg-qv-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }

.svrg-qv-info {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    max-height: calc(88vh - 80px);
}

.svrg-qv-title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-heading);
    margin: 0 0 12px;
}

.svrg-qv-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 20px;
}

.svrg-qv-price del { color: #999; font-weight: 400; font-size: 14px; margin-right: 6px; }
.svrg-qv-price ins { text-decoration: none; }

.svrg-qv-readmore {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-heading);
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 2px;
    transition: color var(--transition);
}

.svrg-qv-readmore:hover { color: var(--color-accent); }

/* Loading spinner */
.svrg-qv-loading {
    position: absolute;
    inset: 0;
    background: #fff;
    display: none;
    align-items: center;
    justify-content: center;
}

.svrg-qv-modal.is-loading .svrg-qv-loading { display: flex; }
.svrg-qv-modal.is-loading .svrg-qv-inner { visibility: hidden; }

.svrg-qv-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: svrg-spin 0.7s linear infinite;
}

@keyframes svrg-spin { to { transform: rotate(360deg); } }

body.svrg-qv-open { overflow: hidden; }

@media (max-width: 640px) {
    .svrg-qv-modal { padding: 24px 16px; width: 96%; }
    .svrg-qv-inner { flex-direction: column; gap: 20px; }
    .svrg-qv-gallery { flex: none; width: 100%; }
    .svrg-qv-info { max-height: none; }
}

/* Responsive */
@media (max-width: 1024px) {
    .svrg-cat-layout { padding: 20px 24px 0; gap: 24px; }
    .svrg-filter-sidebar { flex: 0 0 200px; width: 200px; }
    ul.svrg-product-grid { grid-template-columns: repeat(3, 1fr); }
    .svrg-koleksi-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .svrg-cat-hero { height: 240px; }
    .svrg-cat-hero-body { padding: 20px 16px; }
    .svrg-cat-hero-name { font-size: 28px; }

    .svrg-cat-layout { flex-direction: column; padding: 16px 16px 0; gap: 0; }
    ul.svrg-product-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .svrg-koleksi-grid { grid-template-columns: repeat(2, 1fr); }
    .svrg-koleksi-wrap { padding: 32px 16px 48px; }

    /* ── Category filter: mobile drawer (same pattern as search filter) ── */
    .svrg-filter-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 88% !important;
        max-width: 360px !important;
        background: #fff !important;
        z-index: 100011 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        overflow: hidden !important;
        padding: 0 !important;
        border-right: none !important;
        flex: none !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .svrg-filter-sidebar.is-open {
        transform: translateX(0) !important;
    }
    .svrg-filter-mobile-head {
        display: flex !important;
    }
    /* Show mobile filter button, hide desktop result count */
    .svrg-cat-filter-open {
        display: inline-flex !important;
    }
    .svrg-shop-toolbar .svrg-search-count-desktop {
        display: none;
    }
}
@media (min-width: 769px) {
    /* Desktop: sidebar is normal, hide mobile-only elements */
    .svrg-filter-mobile-head { display: none; }
    .svrg-cat-filter-open { display: none !important; }
    .svrg-shop-toolbar .svrg-search-count-desktop { display: block; }
}

/* ── Mega Menu ─────────────────────────────────────────────────── */

/* Let the site-header be the positioning context */
.site-header { position: relative; overflow: visible; }

/* The Shop <li> must not clip its child */
.svrg-nav-menu > li.has-megamenu {
    position: static !important;
}

.svrg-nav-menu > li.has-megamenu > a::after {
    content: none;
}

.svrg-megamenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    border-top: 3px solid var(--color-accent);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    z-index: 9998;
}

.svrg-nav-menu > li.has-megamenu:hover .svrg-megamenu,
.svrg-nav-menu > li.has-megamenu:focus-within .svrg-megamenu {
    display: block;
}

.svrg-mm-inner {
    display: flex;
    gap: 0;
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 40px 40px;
}

.svrg-mm-col {
    flex: 1;
    padding: 0 24px 0 0;
    border-right: 1px solid #f0f0f0;
    min-width: 140px;
}

.svrg-mm-col:last-child {
    border-right: none;
    padding-right: 0;
}

.svrg-mm-col + .svrg-mm-col {
    padding-left: 24px;
}

.svrg-mm-head {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-heading);
    margin-bottom: 16px;
    text-decoration: none;
}

a.svrg-mm-head--link {
    color: var(--color-heading);
    text-decoration: none;
    transition: color 0.18s ease;
}

a.svrg-mm-head--link:hover {
    color: var(--color-accent);
}

.svrg-mm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.svrg-mm-list li { margin: 0; }

.svrg-mm-list a {
    font-family: var(--font-sans);
    font-size: 13px;
    color: rgba(0,0,0,0.6);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.18s ease;
}

.svrg-mm-list a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

/* Actions - right (cart) */
.svrg-hdr-actions {
    flex-shrink: 0;
    margin-left: 16px;
    display: flex !important;
    align-items: center !important;
}

.svrg-hdr-actions .site-header-cart {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
    position: relative !important;
}

.svrg-hdr-actions .site-header-cart .cart-contents,
.svrg-hdr-actions .site-header-cart a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 4px !important;
    transition: color var(--transition) !important;
}

.svrg-hdr-actions .site-header-cart .cart-contents:hover {
    color: #fff !important;
}

.svrg-hdr-actions .cart-contents .count,
.svrg-hdr-actions .site-header-cart .count {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    border-radius: 100px !important;
    font-size: 10px !important;
    min-width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    line-height: 1 !important;
}

/* ── Profile, Search & Cart icon buttons ── */
.svrg-hdr-icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    border-radius: 50% !important;
    transition: background var(--transition), color var(--transition) !important;
    flex-shrink: 0;
}

.svrg-hdr-icon:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.svrg-hdr-icon svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
    stroke-width: 2;
}

/* Cart count badge */
.svrg-hdr-badge {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    background: var(--color-text) !important;
    color: #fff !important;
    font-family: var(--font-sans) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 100px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* ── Search overlay - fixed white bar slides down from top ── */
.svrg-search-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100000 !important; /* above WP admin bar (99999) */
    background: #fff !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
    transform: translateY(-105%) !important;
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.32s !important;
    border: none !important;
    visibility: hidden !important; /* hard stop - overridden by .is-open */
}

.svrg-search-wrap.is-open {
    visibility: visible !important;
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0s !important;
}

/* When WP admin bar is visible, slide down from below it */
.admin-bar .svrg-search-wrap {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    /* Admin bar is hidden on mobile - search bar sits at top: 0 in both states */
    .admin-bar .svrg-search-wrap,
    .admin-bar .svrg-search-wrap.is-open {
        top: 0 !important;
    }
}

.svrg-search-wrap.is-open {
    transform: translateY(0) !important;
}

/* Dim backdrop covering everything below the search bar */
.svrg-search-wrap::after {
    content: '';
    position: fixed;
    inset: 0;
    top: 80px;
    background: rgba(0,0,0,0.45);
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
}
.svrg-search-wrap.is-open::after {
    opacity: 1;
    pointer-events: auto;
}

.svrg-search-inner {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    height: 80px !important;
}

.svrg-search-icon-left {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: rgba(0,0,0,0.45);
    stroke-width: 2;
}

.svrg-search-input {
    flex: 1 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    font-family: var(--font-sans) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    padding: 6px 0 !important;
    outline: none !important;
    color: var(--color-text) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: border-color 0.2s ease !important;
}

.svrg-search-input:focus {
    border-bottom-color: var(--color-accent) !important;
    box-shadow: none !important;
}

.svrg-search-input::placeholder {
    color: rgba(0,0,0,0.35) !important;
    font-size: 16px !important;
}

.svrg-search-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    color: #fff;
    transition: background var(--transition), transform var(--transition);
}

.svrg-search-close:hover {
    background: var(--color-accent-dark);
    transform: rotate(90deg);
}

.svrg-search-close svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .svrg-search-inner {
        padding: 0 16px !important;
        gap: 12px !important;
    }
    .svrg-search-input {
        font-size: 16px !important;
    }
}

/* Cart dropdown widget */
.svrg-hdr-actions .site-header-cart .widget_shopping_cart {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    width: 300px !important;
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-hover) !important;
    z-index: 9999 !important;
    display: none;
}
.svrg-hdr-actions .site-header-cart:hover .widget_shopping_cart {
    display: block;
}

/* Mobile: hide nav, push logo left + actions right */
@media (max-width: 768px) {
    header.site-header .svrg-hdr {
        min-height: 56px !important;
        padding: 0 16px !important;
        justify-content: space-between !important;
    }
    .svrg-hdr-nav {
        display: none !important;
    }
    .svrg-hdr-logo .site-title {
        font-size: 16px !important;
    }
}


/* ================================================================
   Section13  DARK FOOTER
   ================================================================ */

.site-footer,
footer.site-footer {
    background-color: #0d0d0d !important;
    color: rgba(255, 255, 255, 0.55) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.site-footer a,
.site-footer .widget a {
    color: rgba(255, 255, 255, 0.55) !important;
}

.site-footer a:hover,
.site-footer .widget a:hover {
    color: var(--color-accent) !important;
}

.site-footer .widget-title,
.site-footer h1, .site-footer h2,
.site-footer h3, .site-footer h4 {
    color: #fff !important;
}

.site-footer .storefront-credit,
.site-footer .storefront-credit a {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 12px;
}

/* Storefront widget dividers */
.footer-widget-1,
.footer-widget-2,
.footer-widget-3,
.footer-widget-4 {
    border-color: rgba(255, 255, 255, 0.06) !important;
}


/* ================================================================
   Section14  HOMEPAGE - SHARED LAYOUT
   ================================================================ */

/* ── Nuke ALL spacing between header and hero on the homepage ──
   Targets every possible Storefront/WP wrapper element.
   body.home margin-top is NOT zeroed here - WP admin bar sets body margin
   and the sticky header relies on it for correct top offset.          */
body.home .hfeed {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.home .col-full,
body.home #content,
body.home #content > .col-full,
body.home .site-content,
body.home .site-content > .col-full,
body.home #primary,
body.home .content-area,
body.home #main,
body.home .site-main,
body.home .hentry,
body.home article,
body.home .type-page {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border: none !important;
    float: none !important;
}

/* Header widget region (Storefront outputs this between </header> and content) */
body.home .header-widget-region,
body.home aside.header-widget-region {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#svrg-homepage {
    overflow-x: visible; /* allow hero + full-width sections to break out */
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

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

.svrg-section {
    padding: 64px 0;
}

.svrg-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}

.svrg-section-title {
    font-family: var(--font-sans);
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--color-text);
    margin: 0;
    line-height: 1.1;
}

.svrg-view-more {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 9px 22px;
    border: 1.5px solid var(--color-text);
    border-radius: 100px;
    transition: background var(--transition), color var(--transition);
}

.svrg-view-more:hover {
    background: var(--color-text);
    color: #fff;
}


/* ================================================================
   Section15  HOMEPAGE - HERO SLIDER  (SVRG.id style)
   Full-width dark image + sticker badge + big title + bottom bar
   ================================================================ */

.svrg-hero-slider {
    position: relative;
    /* Align with header content: max-width 1600px with 28px gutters. */
    width: min(calc(100% - 56px), 1544px) !important;
    max-width: none !important;
    left: auto !important;
    transform: none !important;
    height: calc(100vh - var(--hdr-bottom, 108px));
    min-height: 400px;
    overflow: hidden;
    background: #0d0d0d;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    user-select: none;
    margin: 12px auto 0 !important;
    padding: 0 !important;
    display: block;
}

.svrg-slides-wrap {
    position: absolute;
    inset: 0;
}

/* Each slide - background-image set via inline style in PHP */
.svrg-slide {
    position: absolute;
    inset: 0;
    background-color: #0d0d0d;
    /* Not "100% auto" - when the photo's aspect ratio is wider than the
       container's, that left the container's own black background
       showing below the image instead of the photo filling the box. */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}

.svrg-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Dark vignette overlay */
.svrg-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.22) 55%,
        rgba(0,0,0,0.70) 100%
    );
    z-index: 1;
}

/* ── "NEW LAUNCH" sticker badge ── */
.svrg-slide-badge {
    position: absolute;
    top: 23%;
    left: calc(50% - 110px);
    transform: rotate(-9deg);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    pointer-events: none;
}

.svrg-badge-line1,
.svrg-badge-line2 {
    display: block;
    background: #c8ff00;
    color: #0d0d0d;
    font-family: var(--font-sans);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    clip-path: polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%);
}

.svrg-badge-line1 {
    font-size: 14px;
    letter-spacing: 0.1em;
    padding: 5px 16px 5px 12px;
}

.svrg-badge-line2 {
    font-size: 24px;
    letter-spacing: 0.04em;
    padding: 6px 18px 5px 12px;
}

/* ── Center body: big title + subtitle ── */
.svrg-slide-body {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 30px;
    margin-top: -48px;
    width: 100%;          /* flex column + align-items:center shrinks children to content width,
                             causing the title to overflow and get clipped by hero overflow:hidden */
    box-sizing: border-box;
}

.svrg-slide-title {
    font-family: var(--font-sans);
    font-size: clamp(60px, 9vw, 118px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.88;
    color: #fff;
    margin: 0 0 18px;
    text-transform: lowercase;
}

.svrg-slide-sub {
    font-family: var(--font-sans);
    font-size: clamp(11px, 1.3vw, 14px);
    font-weight: 600;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

/* ── Bottom bar: hidden - images already have their own CTA ── */
.svrg-slide-foot {
    display: none !important;
}

.svrg-slide-cat {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
}

.svrg-slide-btn {
    display: inline-flex;
    align-items: center;
    padding: 13px 36px;
    background: var(--color-accent);
    color: #0d0d0d;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
    white-space: nowrap;
}

.svrg-slide-btn:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: #0d0d0d;
    transform: translateY(-1px);
}

/* ── Navigation dots ── */
.svrg-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
}

.svrg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 0;
    transition: background var(--transition), transform var(--transition), border-color var(--transition);
}

.svrg-dot.is-active {
    width: 22px;
    border-radius: 5px;
    background: #fff;
    border-color: #fff;
}

/* ── Prev / next arrows ── */
.svrg-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: none;
    color: #111827;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    transition: background 0.15s ease, transform 0.15s ease;
}
.svrg-hero-arrow:hover {
    background: #f3f4f6;
}
/* A generic svg sizing rule elsewhere collapses this icon's width to 0
   (it has no dedicated CSS size the way e.g. the hamburger icon does) -
   pin it explicitly, same fix pattern as .svrg-hdr-hamburger svg. */
.svrg-hero-arrow svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}
.svrg-hero-arrow--prev { left: 20px; }
.svrg-hero-arrow--next { right: 20px; }

@media (max-width: 768px) {
    .svrg-hero-arrow { display: none; }
}

/* ── Hero Responsive ── */
@media (max-width: 1024px) {
    .svrg-hero-slider {
        width: calc(100% - 32px) !important;
        height: calc(100vh - var(--hdr-bottom, 108px));
        min-height: 360px;
    }
}

@media (max-width: 768px) {
    .svrg-hero-slider {
        width: calc(100% - 32px) !important;
        height: clamp(280px, 60vw, 500px);
        border-radius: 8px;
        margin-top: 10px !important;
    }

    .svrg-slide-body { margin-top: 0; padding: 0 16px; }

    .svrg-slide-title { font-size: clamp(36px, 10vw, 72px); }

    .svrg-slide-foot {
        padding: 12px 16px;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .svrg-slide-cat { font-size: 10px; letter-spacing: 0.1em; }

    .svrg-slide-btn {
        padding: 9px 18px;
        font-size: 10px;
    }

    .svrg-slider-dots { bottom: 14px; }

    .svrg-slide-badge {
        top: 14%;
        left: calc(50% - 70px);
    }
    .svrg-badge-line1 { font-size: 10px; padding: 4px 12px; }
    .svrg-badge-line2 { font-size: 16px; padding: 4px 14px; }
}

@media (max-width: 480px) {
    .svrg-hero-slider {
        width: calc(100% - 32px) !important;
        height: clamp(240px, 65vw, 380px);
        border-radius: 6px;
        margin-top: 8px !important;
    }

    .svrg-slide-title { font-size: clamp(28px, 9vw, 54px); }

    .svrg-slide-sub { font-size: 9px; letter-spacing: 0.25em; }

    .svrg-slide-foot {
        padding: 10px 12px;
        gap: 8px;
    }

    .svrg-slide-badge { display: none; }

    .svrg-slide-cat { display: none; }
}


/* ================================================================
   Section16  HOMEPAGE - CATEGORY GRID
   ================================================================ */

.svrg-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.svrg-cat-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111;
    text-decoration: none;
}

.svrg-cat-tile-img {
    position: absolute;
    inset: 0;
    background-color: #1c1c1c;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease, opacity 0.4s ease;
    opacity: 0.85;
}

.svrg-cat-tile:hover .svrg-cat-tile-img {
    transform: scale(1.07);
    opacity: 1;
}

.svrg-cat-tile-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 14px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    transition: color var(--transition);
}

/* "|" accent bar before category name - SVRG.id style */
.svrg-cat-tile-label span::before {
    content: '| ';
    color: var(--color-accent);
    font-weight: 800;
}

.svrg-cat-tile:hover .svrg-cat-tile-label {
    color: #fff;
}

.svrg-cat-tile:hover .svrg-cat-tile-label svg {
    color: var(--color-accent);
    transform: translate(2px, -2px);
    transition: transform 0.3s ease, color 0.3s ease;
}


/* ================================================================
   Section16b  HOMEPAGE - CATEGORY TILES  (CPT svrg_tile - SVRG.id style)
   ================================================================ */

.svrg-tiles-section {
    padding: 16px 0 8px;
}

.svrg-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.svrg-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: #111;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    border-radius: 2px;
    transition: transform 0.28s ease;
}

/* Dark gradient overlay */
.svrg-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.28) 50%,
        rgba(0,0,0,0.10) 100%
    );
    z-index: 1;
}

.svrg-tile:hover {
    transform: scale(1.025);
}

/* Footer row: label (bar + name) left, arrow right */
.svrg-tile-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 14px 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    z-index: 2;
}

.svrg-tile-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.svrg-tile-bar {
    flex-shrink: 0;
    width: 3px;
    align-self: stretch;
    min-height: 16px;
    background: var(--color-accent);
    border-radius: 1px;
    margin-top: 2px;
}

.svrg-tile-name {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.25;
}

.svrg-tile-arrow {
    flex-shrink: 0;
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
    transition: transform 0.22s ease, color 0.22s ease;
}

.svrg-tile:hover .svrg-tile-arrow {
    transform: translate(3px, -3px);
    color: var(--color-accent);
}

.svrg-tiles-footer {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.svrg-tiles-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
    border: 1.5px solid var(--color-text);
    border-radius: 100px;
    padding: 11px 28px;
    transition: background var(--transition), color var(--transition);
}

.svrg-tiles-more-btn:hover {
    background: var(--color-text);
    color: #fff;
    text-decoration: none;
}


/* ================================================================
   Section17  HOMEPAGE - HORIZONTAL PRODUCT ROWS
   ================================================================ */

.svrg-prod-section {
    padding: 12px 0;
    overflow: hidden;
}

.svrg-prod-track-wrap {
    overflow: hidden;
}

.svrg-prod-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    padding-right: 28px;
    cursor: grab;
    user-select: none;
}

.svrg-prod-track::-webkit-scrollbar {
    display: none;
}

/* cursor is toggled inline by JS during drag - no class needed */

/* Individual horizontal card */
.svrg-hcard {
    flex: 0 0 220px;
    scroll-snap-align: start;
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
}

.svrg-hcard:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.svrg-hcard .svrg-sale-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-size: 9px;
    padding: 4px 7px;
}

.svrg-hcard-img-wrap {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-alt);
    flex-shrink: 0;
}

.svrg-hcard-img-link {
    display: block;
}

/* Quick View button - slides up from bottom on card hover */
.svrg-hcard-qv {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 8px;
    background: rgba(0, 0, 0, 0.82);
    color: #fff !important;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    border: none;
    cursor: pointer;
    transform: translateY(100%);
    transition: transform 0.24s ease, background 0.2s ease;
    width: 100%;
}

.svrg-hcard-qv:hover {
    background: rgba(0, 0, 0, 0.95);
}

.svrg-hcard:hover .svrg-hcard-qv {
    transform: translateY(0);
}

.svrg-hcard-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    background: #fff;
    display: block;
    transition: transform 0.4s ease;
}

.svrg-hcard:hover .svrg-hcard-img {
    transform: scale(1.05);
}

.svrg-hcard-body {
    padding: 12px 12px 6px;
    flex: 1;
}

.svrg-hcard-name {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-text);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.svrg-hcard-name:hover { color: var(--color-accent); }

.svrg-hcard-price {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.3;
}

.svrg-hcard-price del {
    color: var(--color-text-light);
    font-weight: 400;
    font-size: 11px;
    margin-right: 3px;
    opacity: 0.7;
}

.svrg-hcard-price ins {
    text-decoration: none;
}

.svrg-hcard-foot {
    padding: 8px 12px 12px;
}

.svrg-hcard-foot .button,
.svrg-hcard-foot a.button {
    width: 100%;
    text-align: center;
    display: block;
    font-size: 10px;
    padding: 10px 8px;
    margin: 0;
    letter-spacing: 0.07em;
}


/* ================================================================
   Section18  HOMEPAGE - BRAND SHOWCASE CARDS
   ================================================================ */

.svrg-brand-showcase {
    padding: 60px 0 80px;
    background: var(--color-bg);
}

.svrg-bc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

/* 1 card -> full width; 3 cards -> first spans 2 cols */
.svrg-bc-count-1 .svrg-bc-card { grid-column: 1 / -1; max-width: 720px; margin: 0 auto; }
.svrg-bc-count-3 .svrg-bc-card:first-child { grid-column: 1 / -1; }
.svrg-bc-count-3 .svrg-bc-card:first-child .svrg-bc-img-wrap { aspect-ratio: 16 / 7; }

.svrg-bc-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.svrg-bc-img-wrap {
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-alt);
}

.svrg-bc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}

a.svrg-bc-card:hover .svrg-bc-img {
    transform: scale(1.04);
}

.svrg-bc-body {
    padding: 18px 4px 0;
}

.svrg-bc-title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-heading);
    margin: 0 0 8px;
}

.svrg-bc-desc {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.65;
    margin: 0;
}


/* ================================================================
   Section19  HOMEPAGE RESPONSIVE
   ================================================================ */

@media (min-width: 1025px) {
    .svrg-cat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .svrg-tile-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .svrg-hcard {
        flex: 0 0 260px;
    }
}

/* ── Tablet: 769px-1024px ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .svrg-container {
        padding: 0 20px;
    }
    .svrg-section {
        padding: 48px 0;
    }
    .svrg-prod-section,
    .svrg-tiles-section {
        padding: 12px 0;
    }
    .svrg-cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .svrg-tile-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .svrg-hcard {
        flex: 0 0 200px;
    }
    .svrg-bc-grid {
        gap: 18px;
    }
}

/* ── Small tablet: 480px-768px (phones in landscape, small tablets) ── */
@media (min-width: 481px) and (max-width: 768px) {
    .svrg-cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .svrg-tile-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
}

@media (max-width: 768px) {
    .svrg-container {
        padding: 0 16px;
    }

    .svrg-section {
        padding: 44px 0;
    }

    .svrg-prod-section,
    .svrg-tiles-section {
        padding: 8px 0;
    }

    /* Category grid - 3 cols on mobile */
    .svrg-cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .svrg-tile-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .svrg-tile-name {
        font-size: 11px;
        letter-spacing: 0.04em;
    }

    /* Horizontal cards - smaller */
    .svrg-hcard {
        flex: 0 0 160px;
    }

    .svrg-hcard-img {
        aspect-ratio: 1 / 1;
    }

    /* Brand showcase - stack to 1 col on mobile */
    .svrg-bc-grid,
    .svrg-bc-count-3 .svrg-bc-card:first-child {
        grid-template-columns: 1fr;
        grid-column: auto;
    }
    .svrg-bc-count-3 .svrg-bc-card:first-child .svrg-bc-img-wrap {
        aspect-ratio: 4 / 3;
    }
    .svrg-brand-showcase {
        padding: 40px 0 52px;
    }
}

@media (max-width: 480px) {
    .svrg-hcard {
        flex: 0 0 150px;
    }
    /* 3-col category grid on portrait phones */
    .svrg-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .svrg-tile-grid {
        gap: 5px;
    }
    .svrg-tile-name {
        font-size: 10px;
    }
}


/* ================================================================
   Section20  SOCIAL TOPBAR (above header - SVRG.id style)
   ================================================================ */

/* ── Topbar is in normal flow (storefront_before_header), OUTSIDE the sticky header.
   It scrolls away as user scrolls; sticky header then takes the top position. ── */
.svrg-topbar {
    background: var(--color-accent);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.svrg-topbar-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 28px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.svrg-topbar-socials {
    display: flex;
    align-items: center;
    gap: 12px;
}

.svrg-topbar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color var(--transition), transform var(--transition);
    width: 20px;
    height: 20px;
}

.svrg-topbar-icon:hover {
    color: #fff;
    transform: translateY(-1px);
}

.svrg-topbar-icon svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .svrg-topbar {
        display: none !important;
    }
}

/* ── Hide WordPress admin bar on mobile - it floats over content and
   is not useful on small screens. Admins use desktop for WP navigation. ── */
@media screen and (max-width: 782px) {
    #wpadminbar {
        display: none !important;
    }
    /* WordPress inlines "html { margin-top: 46px !important }" for the admin bar.
       Counter it with a plain html selector - same specificity, later order wins. */
    html {
        margin-top: 0 !important;
    }
}


/* ================================================================
   Section20b  LANGUAGE SWITCHER (inside topbar)
   ================================================================ */

.svrg-topbar-lang {
    display: flex;
    align-items: center;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    height: 16px;
}

.svrg-lang-drop {
    position: relative;
}

.svrg-lang-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    padding: 0;
    line-height: 1;
    font-family: var(--font-sans);
    white-space: nowrap;
    transition: color var(--transition);
}

.svrg-lang-btn:hover {
    color: #fff;
}

.svrg-lang-btn svg {
    flex-shrink: 0;
    transition: transform var(--transition);
}

.svrg-lang-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.svrg-lang-list {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 130px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 4px 0;
    list-style: none;
    margin: 0;
    z-index: 1100;
    display: none;
    box-shadow: var(--shadow-hover);
}

.svrg-lang-list.is-open {
    display: block;
}

.svrg-lang-list li a {
    display: block;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition);
}

.svrg-lang-list li a:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

/* ================================================================
   Section21  WOOCOMMERCE NOTICE / COMING SOON BANNER SUPPRESSION
   Removes the orange "Coming Soon" band that WooCommerce injects
   between the header and page content when store is in preview mode.
   The PHP filter woocommerce_demo_store also clears it server-side.
   ================================================================ */

/* Classic WC store demo notice */
p.demo_store,
.woocommerce-store-notice,
.woocommerce-store-notice__dismiss-link {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* WC 8.5+ Coming Soon mode block/banner */
.wc-block-store-notices,
.wc-coming-soon,
.wc-coming-soon-page,
.wp-block-woocommerce-store-notices,
[class*="wc-coming-soon"],
.notice.woocommerce-coming-soon {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* WooCommerce notices wrapper - when empty it still creates a gap via margin.
   Hidden on homepage since notices shouldn't appear above the hero.         */
body.home .woocommerce-notices-wrapper {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ================================================================
   Section22  CTA BANNER (Homepage - centered spotlight style)
   ================================================================ */

.svrg-cta-banner {
    position: relative;
    padding: 80px 0 88px;
    background: #fff;
}

/* Dark overlay when a background image is used */
.svrg-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 0;
}

.svrg-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    max-width: 680px;
    margin: 0 auto;
}

.svrg-cta-tag {
    display: inline-block;
    padding: 5px 16px;
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
}

/* When bg image: make tag pop on dark overlay */
.svrg-cta-banner.has-bg-img .svrg-cta-tag {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.svrg-cta-title {
    font-family: var(--font-sans);
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--color-heading);
    margin: 0;
}

.svrg-cta-banner.has-bg-img .svrg-cta-title {
    color: #fff;
}

.svrg-cta-desc {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text-light);
    margin: 0;
    max-width: 560px;
}

.svrg-cta-banner.has-bg-img .svrg-cta-desc {
    color: rgba(255, 255, 255, 0.82);
}

.svrg-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 40px;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    margin-top: 6px;
}

.svrg-cta-btn:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 212, 189, 0.35);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 768px) {
    .svrg-cta-banner {
        padding: 60px 0 68px;
    }
    .svrg-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .svrg-cta-banner {
        padding: 44px 0 52px;
    }
    .svrg-cta-title {
        font-size: 26px;
    }
}

/* Admin bar compensation for sticky header on mobile */
@media screen and (max-width: 782px) {
    body.admin-bar header.site-header {
        top: 46px !important;
    }
}

@media screen and (min-width: 783px) {
    body.admin-bar header.site-header {
        top: 32px !important;
    }
}

/* ================================================================
   Section22b  HOMEPAGE - WHATSAPP CTA SECTION
   ================================================================ */

.svrg-wa-cta {
    padding: 72px 0 80px;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.svrg-wa-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    max-width: 640px;
    margin: 0 auto;
}

.svrg-wa-cta-title {
    font-family: var(--font-sans);
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-heading);
    margin: 0;
}

.svrg-wa-cta-desc {
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text-light);
    margin: 0;
    max-width: 520px;
}

.svrg-wa-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 36px;
    background: #25D366;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: var(--radius-pill);
    margin-top: 8px;
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.svrg-wa-cta-btn:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(37, 211, 102, 0.38);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 480px) {
    .svrg-wa-cta {
        padding: 48px 0 56px;
    }
    .svrg-wa-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================================
   Section23  FLOATING WHATSAPP BUTTON
   Fixed bottom-right FAB. Label tooltip slides in on hover.
   ================================================================ */

.svrg-wa-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-whatsapp);
    color: #fff;
    border-radius: var(--radius-pill);
    /* equal padding -> 15+26+15 = 56px perfect circle */
    padding: 15px;
    gap: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    transition: background var(--transition), transform var(--transition),
                box-shadow var(--transition), gap 0.25s ease, padding 0.25s ease;
}

.svrg-wa-float:hover {
    background: var(--color-whatsapp-dk);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    padding: 15px 20px;
    gap: 9px;
    text-decoration: none;
    color: #fff;
}

.svrg-wa-float-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2; /* icon stays on the right */
}

.svrg-wa-float-label {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    order: 1; /* label slides in from the left */
    transition: opacity 0.18s ease, max-width 0.25s ease;
}

.svrg-wa-float:hover .svrg-wa-float-label {
    opacity: 1;
    max-width: 180px;
}

@media (max-width: 480px) {
    .svrg-wa-float {
        bottom: 76px; /* above mobile bottom nav */
        right: 16px;
    }
}

/* ================================================================
   Section24  QUICK VIEW MODAL
   ================================================================ */

.svrg-qv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.svrg-qv-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.svrg-qv-modal {
    position: relative;
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 980px;
    max-height: 92vh;
    overflow-y: auto;
    transform: translateY(24px) scale(0.98);
    transition: transform 0.25s ease;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

.svrg-qv-overlay.is-open .svrg-qv-modal {
    transform: translateY(0) scale(1);
}

/* Close button */
.svrg-qv-close {
    position: sticky;
    top: 14px;
    float: right;
    margin: 14px 14px 0 0;
    width: 36px;
    height: 36px;
    border: 1.5px solid #ddd;
    border-radius: 50%;
    background: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    color: #333;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.svrg-qv-close:hover {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #fff;
}

/* Inner layout */
.svrg-qv-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    clear: both;
}

/* Gallery - left column */
.svrg-qv-gallery {
    display: flex;
    gap: 10px;
    padding: 24px;
    background: #f7f7f7;
    border-radius: 10px 0 0 10px;
    min-height: 400px;
}

.svrg-qv-thumbs {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 68px;
    flex-shrink: 0;
    overflow-y: auto;
    max-height: 500px;
}

.svrg-qv-thumbs::-webkit-scrollbar { width: 3px; }
.svrg-qv-thumbs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

.svrg-qv-thumb {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.18s;
    flex-shrink: 0;
}

.svrg-qv-thumb.is-active,
.svrg-qv-thumb:hover {
    border-color: var(--color-accent);
}

.svrg-qv-main-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.svrg-qv-main-img {
    max-width: 100%;
    max-height: 480px;
    object-fit: contain;
    border-radius: 4px;
    transition: opacity 0.15s ease;
}

.svrg-qv-main-img.is-fading {
    opacity: 0;
}

/* Info - right column */
.svrg-qv-info {
    padding: 32px 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    max-height: 92vh;
}

.svrg-qv-title {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    margin: 0;
    padding-right: 40px; /* avoid overlap with sticky close button */
}

.svrg-qv-price .price {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}

.svrg-qv-price .price del {
    color: var(--color-text-light);
    font-size: 13px;
    font-weight: 400;
    text-decoration: line-through;
    margin-right: 6px;
}

.svrg-qv-price .price ins {
    text-decoration: none;
    color: var(--color-text);
}

/* WC form inside modal */
.svrg-qv-form .quantity { margin-bottom: 10px; }

.svrg-qv-form .single_add_to_cart_button {
    width: 100%;
    border-radius: var(--radius-pill) !important;
    padding: 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Read More link */
.svrg-qv-readmore {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--color-border);
    transition: color 0.2s, text-decoration-color 0.2s;
    margin-top: auto;
}

.svrg-qv-readmore:hover {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
    text-decoration: underline;
}

/* Loading state */
.svrg-qv-loading {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    align-items: center;
    justify-content: center;
}

.svrg-qv-modal.is-loading .svrg-qv-loading {
    display: flex;
}

.svrg-qv-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid #eee;
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: svrg-spin 0.65s linear infinite;
}

@keyframes svrg-spin { to { transform: rotate(360deg); } }

body.svrg-qv-open { overflow: hidden; }

/* Responsive */
@media (max-width: 768px) {
    .svrg-qv-inner {
        grid-template-columns: 1fr;
    }
    .svrg-qv-gallery {
        border-radius: 10px 10px 0 0;
        min-height: 260px;
        padding: 16px;
    }
    .svrg-qv-main-img { max-height: 260px; }
    .svrg-qv-thumbs { flex-direction: row; width: auto; max-height: none; overflow-x: auto; max-width: 100%; }
    .svrg-qv-thumb { width: 52px; height: 52px; flex-shrink: 0; }
    .svrg-qv-info { padding: 20px 16px 24px; }
}


/* ================================================================
   Section25  CUSTOM FOOTER
   ================================================================ */

/* Remove Storefront's default footer */
.site-footer { display: none !important; }

.svrg-footer {
    background: #1a1a1a;
    color: rgba(255,255,255,0.7);
    font-family: var(--font-sans);
    font-size: 14px;
}

.svrg-footer-top {
    padding: 64px 0 48px;
}

.svrg-footer-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 200px repeat(4, 1fr);
    gap: 40px;
    align-items: start;
}

/* ── Brand col ── */
.svrg-footer-col--brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.svrg-footer-logo-link { display: inline-block; }

.svrg-footer-logo {
    max-width: 90px;
    height: auto;
    filter: brightness(0) invert(1);
}

.svrg-footer-logo-text {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
}

.svrg-footer-tagline {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
    margin: 0;
}

.svrg-footer-socials {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.svrg-footer-social-link {
    color: rgba(255,255,255,0.6);
    transition: color 0.2s ease, transform 0.2s ease;
    line-height: 0;
}

.svrg-footer-social-link:hover {
    color: var(--color-accent);
    transform: translateY(-2px);
}

/* ── Nav columns ── */
.svrg-footer-heading {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 18px;
}

.svrg-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.svrg-footer-links li { margin: 0; }

.svrg-footer-links a,
.svrg-footer-links li a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    transition: color 0.18s ease;
}

.svrg-footer-links a:hover,
.svrg-footer-links li a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

/* ── Store location col ── */
.svrg-footer-store {
    margin-bottom: 20px;
}

.svrg-footer-store:last-child { margin-bottom: 0; }

.svrg-footer-store-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 6px;
}

.svrg-footer-store--service .svrg-footer-store-name {
    color: rgba(255,255,255,0.85);
    margin-top: 4px;
}

.svrg-footer-store-addr {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    line-height: 1.65;
    margin: 0;
}

/* ── Bottom bar ── */
.svrg-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 40px;
    text-align: center;
    max-width: 1320px;
    margin: 0 auto;
}

.svrg-footer-copy {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .svrg-footer-container {
        grid-template-columns: 180px repeat(4, 1fr);
        gap: 28px;
        padding: 0 24px;
    }
}

@media (max-width: 900px) {
    .svrg-footer-container {
        grid-template-columns: repeat(3, 1fr);
    }
    .svrg-footer-col--brand {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 24px;
    }
    .svrg-footer-socials { margin-top: 0; }
}

@media (max-width: 600px) {
    .svrg-footer-top { padding: 44px 0 32px; }
    .svrg-footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
        padding: 0 20px;
    }
    .svrg-footer-col--brand {
        grid-column: 1 / -1;
        flex-direction: column;
    }
    .svrg-footer-bottom {
        padding: 16px 20px;
    }
}

/* Final category cleanup: no legacy bars, button, or oversized section gap. */
#svrg-categories {
    padding-top: 14px !important;
    padding-bottom: 28px !important;
    margin-top: 0 !important;
}

#svrg-categories .svrg-view-more,
#svrg-categories .svrg-tiles-footer,
#svrg-categories .svrg-cat-tile-bar {
    display: none !important;
}

#svrg-categories .svrg-cat-tile-label span::before {
    content: none !important;
    display: none !important;
}

#svrg-categories .svrg-section-head {
    margin-bottom: 18px !important;
}

/* Product cards matched to the medical bookstore reference. */
.svrg-prod-section {
    padding-top: 18px !important;
    padding-bottom: 24px !important;
}

.svrg-prod-track {
    gap: 18px !important;
    padding-right: 28px !important;
}

.svrg-hcard {
    flex: 0 0 250px !important;
    min-height: 408px !important;
    overflow: hidden !important;
    border: 1px solid #e7ebef !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(18, 36, 58, 0.07) !important;
}

.svrg-hcard-img-wrap {
    height: 280px !important;
    position: relative !important;
    background: #fff !important;
}

.svrg-hcard-img-link {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
}

.svrg-hcard-img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    padding: 12px 14px 4px !important;
}

.svrg-hcard-body {
    position: relative !important;
    min-height: 128px !important;
    padding: 12px 16px 14px !important;
}

.svrg-hcard-name {
    min-height: 38px !important;
    margin-bottom: 8px !important;
    color: #12243a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.svrg-hcard-price {
    color: #12243a !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

.svrg-hcard-price-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 34px !important;
}

.svrg-hcard-wishlist,
.svrg-hcard-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    color: #12243a !important;
    cursor: pointer;
}

.svrg-hcard-wishlist {
    position: absolute !important;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 30px;
    height: 30px;
}

.svrg-hcard-wishlist svg {
    width: 24px;
    height: 24px;
}

.svrg-hcard-cart {
    position: static !important;
    flex: 0 0 32px !important;
    width: 32px;
    height: 32px;
    color: var(--mbook-teal) !important;
}

.svrg-hcard-cart svg {
    width: 25px;
    height: 25px;
}

.svrg-new-badge,
.svrg-sale-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 4 !important;
    padding: 5px 9px !important;
    border-radius: 5px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.svrg-new-badge {
    background: var(--mbook-teal) !important;
}

.svrg-sale-badge {
    background: #dc2626 !important;
}

.svrg-new-badge + .svrg-sale-badge,
.svrg-sale-badge ~ .svrg-new-badge {
    top: 48px !important;
}

@media (max-width: 900px) {
    .svrg-hcard {
        flex-basis: 210px !important;
        min-height: 350px !important;
    }

    .svrg-hcard-img-wrap { height: 230px !important; }
}

/* ================================================================
   HALAMAN PENUH (page-about.php / Contact / dll)
   ================================================================ */

/* Wrapper - full width, no sidebar */
.svrg-fullpage {
    width: 100%;
    overflow-x: hidden;
}

/* Hide Storefront sidebar on this template */
.page-template-page-about #secondary { display: none !important; }
.page-template-page-about #primary   { width: 100% !important; float: none !important; max-width: 100% !important; }

/* Hide breadcrumb - full-width pages start with a cover hero, no nav trail needed */
.page-template-page-about .storefront-breadcrumb,
.page-template-page-about .woocommerce-breadcrumb {
    display: none !important;
}

/* Break Storefront's .col-full constraint so blocks can go edge-to-edge */
.page-template-page-about .col-full {
    max-width: 100% !important;
    padding: 0 !important;
    margin-top: 0 !important;
}
.page-template-page-about #content.site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.page-template-page-about .svrg-fullpage,
.page-template-page-about .svrg-fullpage-content {
    margin: 0;
    padding: 0;
}

/* Page title header - white area with H1 before full-width content */
.svrg-fullpage-header {
    background: #fff;
    padding: 28px 40px 20px;
}
.svrg-fullpage-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    text-align: left;
}
@media (max-width: 768px) {
    .svrg-fullpage-header { padding: 20px 20px 16px; }
    .svrg-fullpage-title  { font-size: 24px; }
}

/* Gutenberg content container */
.svrg-fullpage-content {
    width: 100%;
}

/* ── Meta Box driven layout - page-about.php ─────────────────────── */

/* YouTube hero */
.svrg-fpage-hero {
    width: 100%;
    aspect-ratio: 16 / 6;
    background: #000;
    overflow: hidden;
}
.svrg-fpage-hero iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    pointer-events: none;
}

/* Content sections */
.svrg-fpage-sec {
    display: flex;
    align-items: center;
    gap: 56px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 40px;
    box-sizing: border-box;
}
.svrg-fpage-sec--text-only {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.svrg-fpage-sec-text { flex: 1; }
.svrg-fpage-sec-img  { flex: 1; }
.svrg-fpage-sec-img-el {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    object-fit: cover;
}
.svrg-fpage-sec h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--color-text);
    text-align: left;
}
.svrg-fpage-sec p { margin: 0 0 12px; line-height: 1.7; }

/* Alternate rows: even sections get light bg */
.svrg-fpage-sec:nth-child(even) { background: #f7f9f8; }

/* Google Maps */
.svrg-fpage-map {
    width: 100%;
    height: 480px;
}
.svrg-fpage-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Customer reviews */
.svrg-fpage-reviews {
    background: #f0f4f2;
    padding: 56px 40px;
}
.svrg-fpage-reviews-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.svrg-fpage-review {
    background: #fff;
    border: 1px solid #e0e8e4;
    border-radius: 6px;
    padding: 24px;
}
.svrg-fpage-review-text {
    font-size: 15px;
    line-height: 1.65;
    color: #444;
    margin-bottom: 14px;
}
.svrg-fpage-review-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
}

@media (max-width: 768px) {
    .svrg-fpage-hero  { aspect-ratio: 16 / 9; }
    .svrg-fpage-sec   { flex-direction: column !important; gap: 28px; padding: 40px 20px; }
    .svrg-fpage-map   { height: 300px; }
    .svrg-fpage-reviews { padding: 40px 20px; }
    .svrg-fpage-reviews-inner { grid-template-columns: 1fr; }
}

/* Heading blocks: Storefront centers H1 globally - restore left alignment
   unless the editor explicitly set center/right via has-text-align-* class */
.entry-content .wp-block-heading:not(.has-text-align-center):not(.has-text-align-right),
.svrg-fullpage-content .wp-block-heading:not(.has-text-align-center):not(.has-text-align-right) {
    text-align: left;
}

/* Let wide/full-width blocks break out naturally */
.svrg-fullpage-content .alignfull,
.svrg-fullpage-content .wp-block-cover.alignfull,
.svrg-fullpage-content .wp-block-group.alignfull,
.svrg-fullpage-content .wp-block-columns.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}


.svrg-fullpage-content .alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Default content max-width */
.svrg-fullpage-content > *:not(.alignfull):not(.alignwide):not(.wp-block-cover) {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* ── Block: Cover (hero-style sections) ── */
.svrg-fullpage-content .wp-block-cover {
    min-height: 480px;
}

.svrg-fullpage-content .wp-block-cover h1,
.svrg-fullpage-content .wp-block-cover h2 {
    font-family: var(--font-sans);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

/* ── Block: Headings ── */
.svrg-fullpage-content h1,
.svrg-fullpage-content h2,
.svrg-fullpage-content h3 {
    font-family: var(--font-sans);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--color-text);
    line-height: 1.15;
}

.svrg-fullpage-content h2 { font-size: clamp(22px, 2.8vw, 34px); }
.svrg-fullpage-content h3 { font-size: clamp(16px, 1.8vw, 22px); }

/* ── Block: Paragraph ── */
.svrg-fullpage-content p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

/* ── Block: Columns ── */
.svrg-fullpage-content .wp-block-columns {
    gap: 48px;
    align-items: center;
}

/* ── Block: Image ── */
.svrg-fullpage-content .wp-block-image img {
    border-radius: 10px;
}

/* ── Block: Buttons ── */
.svrg-fullpage-content .wp-block-button__link {
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    padding: 14px 36px !important;
    border-radius: 100px !important;
    transition: opacity 0.2s !important;
}

.svrg-fullpage-content .wp-block-button__link:hover {
    opacity: 0.88 !important;
}

/* ── Block: Separator ── */
.svrg-fullpage-content .wp-block-separator {
    border-color: var(--color-border);
}

/* ── Block: Group (dark/accent sections) ── */
.svrg-fullpage-content .wp-block-group {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Mobile */
@media (max-width: 768px) {
    .svrg-fullpage-content .wp-block-columns { gap: 24px; }
    .svrg-fullpage-content .wp-block-group   { padding-top: 48px; padding-bottom: 48px; }
    .svrg-fullpage-content .wp-block-cover   { min-height: 360px; }
}

/* ── Hero ── */
.svrg-about-hero {
    position: relative;
    min-height: 520px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 24px;
}

.svrg-about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 100%);
}

.svrg-about-hero-body {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.svrg-about-hero-brand {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 16px;
    background: rgba(33,212,189,0.12);
    padding: 5px 14px;
    border-radius: 100px;
    border: 1px solid rgba(33,212,189,0.3);
}

.svrg-about-hero-title {
    font-family: var(--font-sans);
    font-size: clamp(32px, 5vw, 60px);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #fff;
    line-height: 1.05;
    margin: 0 0 18px;
}

.svrg-about-hero-sub {
    font-size: clamp(14px, 1.6vw, 17px);
    color: rgba(255,255,255,0.78);
    line-height: 1.65;
    margin: 0 0 32px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.svrg-about-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 36px;
    border-radius: 100px;
    transition: background var(--transition), transform 0.15s;
}

.svrg-about-hero-btn:hover {
    background: var(--color-accent-dark);
    transform: translateY(-1px);
}

/* ── Stats Bar ── */
.svrg-about-stats {
    display: flex;
    background: #0d0d0d;
}

.svrg-about-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    border-right: 1px solid rgba(255,255,255,0.07);
    text-align: center;
    gap: 6px;
}

.svrg-about-stat:last-child { border-right: none; }

.svrg-about-stat-val {
    font-family: var(--font-sans);
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 900;
    color: var(--color-accent);
    line-height: 1;
    letter-spacing: -0.02em;
}

.svrg-about-stat-label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

/* ── Brand Story ── */
.svrg-about-story {
    padding: 88px 0;
    background: #fff;
}

.svrg-about-story-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.svrg-about-story-no-img {
    grid-template-columns: 1fr;
    max-width: 760px;
}

.svrg-about-story-h2 {
    font-family: var(--font-sans);
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 900;
    letter-spacing: -0.035em;
    color: var(--color-text);
    margin: 0 0 20px;
    line-height: 1.15;
}

.svrg-about-story-text p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin: 0 0 14px;
}

.svrg-about-story-text p:last-child { margin-bottom: 0; }

.svrg-about-story-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    object-fit: cover;
    aspect-ratio: 4/3;
}

/* ── Content Sections (meta boxes) ── */
.svrg-about-section {
    padding: 80px 0;
    background: #fff;
}

.svrg-about-section.svrg-sec-alt { background: #f7f7f7; }

.svrg-about-section-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.svrg-layout-text-only .svrg-about-section-grid { grid-template-columns: 1fr; }

.svrg-about-text-col.svrg-text-full {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.svrg-about-sec-h2 {
    font-family: var(--font-sans);
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin: 0 0 16px;
    line-height: 1.2;
}

.svrg-about-text-col p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin: 0 0 12px;
}

.svrg-about-img-col img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    object-fit: cover;
    aspect-ratio: 4/3;
}

/* ── Values / Keunggulan ── */
.svrg-about-values {
    background: #0d0d0d;
    padding: 88px 0;
}

.svrg-about-values-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.svrg-about-values-title {
    font-family: var(--font-sans);
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: center;
    margin: 0 0 48px;
}

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

.svrg-about-val-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 32px 22px;
    text-align: center;
    transition: border-color 0.2s;
}

.svrg-about-val-card:hover {
    border-color: rgba(33,212,189,0.35);
}

.svrg-about-val-icon {
    display: block;
    font-size: 34px;
    margin-bottom: 14px;
    line-height: 1;
}

.svrg-about-val-title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 10px;
}

.svrg-about-val-text {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.55);
    margin: 0;
}

/* ── Reviews ── */
.svrg-about-reviews { background: #f7f7f7; }

.svrg-about-rv-inner,
.svrg-about-map-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 40px;
}

.svrg-about-section-title {
    font-family: var(--font-sans);
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 36px;
}

.svrg-about-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.svrg-about-rv-card {
    background: #fff;
    padding: 28px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid var(--color-border);
}

.svrg-about-rv-stars { display: flex; gap: 3px; }

.svrg-about-rv-text {
    font-size: 14px;
    line-height: 1.75;
    color: var(--color-text);
    margin: 0;
    flex: 1;
    font-style: italic;
}

.svrg-about-rv-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.svrg-about-rv-author {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
}

.svrg-about-rv-product {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Map ── */
.svrg-about-map { background: #fff; }

.svrg-about-map-wrap {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.svrg-about-map-wrap iframe {
    width: 100% !important;
    height: 460px !important;
    display: block;
    border: 0;
}

/* ── CTA Banner ── */
.svrg-about-cta {
    background: var(--color-accent);
    padding: 88px 24px;
    text-align: center;
}

.svrg-about-cta-inner { max-width: 600px; margin: 0 auto; }

.svrg-about-cta-h2 {
    font-family: var(--font-sans);
    font-size: clamp(24px, 3.2vw, 40px);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.1;
}

.svrg-about-cta-sub {
    font-size: 15px;
    color: rgba(255,255,255,0.82);
    margin: 0 0 32px;
    line-height: 1.65;
}

.svrg-about-cta-btn {
    display: inline-block;
    background: #fff;
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 100px;
    transition: opacity 0.2s, transform 0.15s;
}

.svrg-about-cta-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .svrg-about-story-grid,
    .svrg-about-section-grid { gap: 40px; padding: 0 24px; }
    .svrg-about-values-inner,
    .svrg-about-rv-inner,
    .svrg-about-map-inner { padding-left: 24px; padding-right: 24px; }
    .svrg-about-reviews-grid { grid-template-columns: repeat(2, 1fr); }
    .svrg-about-values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .svrg-about-hero { min-height: 420px; padding: 72px 20px; }
    .svrg-about-hero-sub { margin-bottom: 28px; }

    .svrg-about-stats { flex-wrap: wrap; }
    .svrg-about-stat {
        flex: 0 0 50%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .svrg-about-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.07); }
    .svrg-about-stat:nth-last-child(-n+2) { border-bottom: none; }

    .svrg-about-story { padding: 56px 0; }
    .svrg-about-story-grid,
    .svrg-about-story-no-img { grid-template-columns: 1fr; gap: 28px; padding: 0 20px; }

    .svrg-about-section { padding: 56px 0; }
    .svrg-about-section-grid { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; }
    .svrg-layout-text-right .svrg-about-img-col { order: -1; }

    .svrg-about-values { padding: 56px 0; }
    .svrg-about-values-inner,
    .svrg-about-rv-inner,
    .svrg-about-map-inner { padding-left: 20px; padding-right: 20px; }
    .svrg-about-values-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .svrg-about-reviews-grid { grid-template-columns: 1fr; }
    .svrg-about-map-wrap iframe { height: 300px !important; }
    .svrg-about-cta { padding: 64px 20px; }
}


/* ================================================================
   PRODUCT REVIEWS - SVRG Custom Styling
   ================================================================ */

.svrg-reviews-section {
    max-width: 1280px;
    margin: 48px auto 0;
    padding: 0 40px;
    clear: both;
}

.svrg-reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}

.svrg-reviews-title {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
}

.svrg-write-review-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    background: var(--color-heading);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 100px;
    transition: background 0.18s;
}

.svrg-write-review-btn:hover { background: #333; color: #fff; }

/* Rating overview */
.svrg-rating-overview {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 28px 32px;
    background: #f9f9f9;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.svrg-rating-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 100px;
}

.svrg-rating-num {
    font-family: var(--font-sans);
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-heading);
}

.svrg-rating-stars {
    display: flex;
    gap: 2px;
}

.svrg-rating-total {
    font-size: 13px;
    color: var(--color-text-light);
    font-family: var(--font-sans);
}

.svrg-rating-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 200px;
}

.svrg-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.svrg-bar-stars {
    display: flex;
    gap: 1px;
    flex-shrink: 0;
}

.svrg-bar-track {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 100px;
    overflow: hidden;
}

.svrg-bar-fill {
    height: 100%;
    background: #f59e0b;
    border-radius: 100px;
    transition: width 0.4s ease;
}

.svrg-bar-pct {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-light);
    width: 32px;
    text-align: right;
    font-family: var(--font-sans);
    flex-shrink: 0;
}

/* Sort row */
.svrg-reviews-sort {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.svrg-reviews-sort-select {
    border: 1px solid var(--color-border);
    padding: 6px 10px;
    font-size: 12px;
    font-family: var(--font-sans);
    background: #fff;
    cursor: pointer;
}

/* Reviews grid */
ol.svrg-reviews-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

ol.svrg-reviews-grid::before,
ol.svrg-reviews-grid::after { content: none; display: none; }

.svrg-review-card {
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.svrg-review-stars { display: flex; gap: 2px; }

.svrg-review-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.svrg-review-author img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    flex-shrink: 0;
}

.svrg-review-author-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.svrg-review-name {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-heading);
}

.svrg-review-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #f0fdf4;
    border-radius: 50%;
    flex-shrink: 0;
}

.svrg-review-text {
    font-size: 13px;
    line-height: 1.65;
    color: var(--color-text);
    flex: 1;
}

.svrg-review-text p { margin: 0; }

.svrg-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}

.svrg-review-date {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-text-light);
}

.svrg-no-reviews {
    font-size: 14px;
    color: var(--color-text-light);
    text-align: center;
    padding: 40px 0;
}

/* Comment form inside reviews */
.svrg-reviews-section #review_form_wrapper {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
}

.svrg-reviews-section .comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.svrg-reviews-section .comment-form-comment,
.svrg-reviews-section .comment-form-rating,
.svrg-reviews-section .form-submit { grid-column: 1 / -1; }

.svrg-reviews-section .comment-form p { margin: 0; }

.svrg-reviews-section .comment-form label {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 6px;
}

.svrg-reviews-section .comment-form input[type="text"],
.svrg-reviews-section .comment-form input[type="email"],
.svrg-reviews-section .comment-form textarea,
.svrg-reviews-section .comment-form select {
    width: 100%;
    border: 1.5px solid var(--color-border);
    padding: 12px 14px;
    font-size: 14px;
    font-family: var(--font-sans);
    box-sizing: border-box;
    border-radius: 0;
    background: #fff;
    transition: border-color 0.15s;
}

.svrg-reviews-section .comment-form input:focus,
.svrg-reviews-section .comment-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.svrg-reviews-section .comment-form .submit {
    display: inline-flex;
    align-items: center;
    padding: 14px 36px;
    background: var(--color-heading);
    color: #fff;
    border: none;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s;
}

.svrg-reviews-section .comment-form .submit:hover { background: #333; }

@media (max-width: 768px) {
    .svrg-reviews-section { padding: 0 16px; }
    ol.svrg-reviews-grid { grid-template-columns: repeat(2, 1fr); }
    .svrg-rating-overview { gap: 20px; padding: 20px; }
}

@media (max-width: 480px) {
    ol.svrg-reviews-grid { grid-template-columns: 1fr; }
    .svrg-reviews-section .comment-form { grid-template-columns: 1fr; }
}

/* ================================================================
   RELATED PRODUCTS + RECENTLY VIEWED - 5-column grid, left-aligned
   ================================================================ */

.woocommerce .related.products,
.woocommerce .up-sells,
.svrg-recently-viewed-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 40px 0;
    clear: both;
    box-sizing: border-box;
}

.woocommerce .related.products h2,
.woocommerce .up-sells h2,
.svrg-recently-viewed-section h2 {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 24px;
}

/* 5-column product grid - left-to-right fill regardless of item count */
.woocommerce .related.products ul.products,
.woocommerce .up-sells ul.products,
.svrg-recently-viewed-section ul.products {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
    justify-items: stretch !important;
    align-items: start !important;
}

/* Kill Storefront clearfix ghost items */
.woocommerce .related.products ul.products::before,
.woocommerce .related.products ul.products::after,
.woocommerce .up-sells ul.products::before,
.woocommerce .up-sells ul.products::after,
.svrg-recently-viewed-section ul.products::before,
.svrg-recently-viewed-section ul.products::after {
    content: none !important;
    display: none !important;
}

.woocommerce .related.products ul.products li.product,
.woocommerce .up-sells ul.products li.product,
.svrg-recently-viewed-section ul.products li.product {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}

@media (max-width: 1024px) {
    .woocommerce .related.products ul.products,
    .woocommerce .up-sells ul.products,
    .svrg-recently-viewed-section ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .woocommerce .related.products,
    .woocommerce .up-sells,
    .svrg-recently-viewed-section { padding: 32px 16px 0; }
    .woocommerce .related.products ul.products,
    .woocommerce .up-sells ul.products,
    .svrg-recently-viewed-section ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ================================================================
   Section26  MOBILE RESPONSIVE - COMPREHENSIVE FIXES
   ================================================================ */

/* ── Global: prevent horizontal scroll ── */
html {
    overflow-x: clip; /* clip = no scroll-container = no scroll-origin shift */
}
body {
    overflow-x: clip;
    max-width: 100%;
}

/* All images / videos respect their container */
img, video {
    max-width: 100%;
    height: auto;
}

/* Hide Storefront's built-in handheld footer bar - we use .svrg-bottom-nav */
.storefront-handheld-footer-bar {
    display: none !important;
}

/* ── Fix: svrg-homepage scroll-container shift ── */
@media (max-width: 768px) {
    #svrg-homepage {
        overflow-x: visible !important; /* full-bleed disabled on mobile - no clipping needed */
    }
}

/* ── Fix: Storefront .col-full em-margins cause left/right asymmetry on mobile.
   At ≤568px Storefront sets margin-left/right: 1.41575em on .col-full. The em
   value depends on inherited font-size and stacks unpredictably with
   .svrg-container's padding. Zero both out and use only svrg-container's 16px
   padding for consistent symmetric spacing. ── */
@media (max-width: 768px) {
    .col-full {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ── Fix: full-bleed 100vw elements - disable break-out on mobile ──
   The left:50%+translateX(-50%)+100vw trick breaks when the parent has
   horizontal padding (Storefront .col-full adds 1em each side). On mobile
   full-bleed isn't needed; just constrain to the natural parent width. */
@media (max-width: 768px) {

    /* Disable full-bleed - let each element fill its parent container */
    .svrg-cat-hero,
    .svrg-catalog-wrap,
    .svrg-cat-layout,
    .svrg-koleksi-wrap {
        width: 100% !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Tighten inner padding so tiles aren't too inset */
    .svrg-catalog-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .svrg-koleksi-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Products column: width:0 collapses in flex-direction:column - fix to 100% */
    .svrg-cat-products-col {
        width: 100% !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Header icons: hide search + cart + account on mobile - bottom nav + hamburger cover these */
    .svrg-hdr-search,
    .svrg-hdr-cart,
    .svrg-hdr-account {
        display: none !important;
    }
}

/* ──────────────────────────────────────────────────────────────
   max-width: 768px  (phones + small tablets)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── WooCommerce single product layout ── */
    .woocommerce div.product .woocommerce-product-gallery {
        margin-bottom: 0;
    }

    /* Single product price: slightly smaller */
    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 20px;
    }

    /* Variations table: scroll horizontally if columns are wide */
    .woocommerce div.product form.variations_form table.variations {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Spec/attributes table: horizontal scroll */
    .svrg-desc-acc-body table.shop_attributes {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .svrg-desc-acc-body table.shop_attributes th,
    .svrg-desc-acc-body table.shop_attributes td {
        white-space: normal;
    }

    /* Accordion trigger: smaller text, comfortable padding */
    .svrg-desc-acc-trigger {
        padding: 14px 0;
        font-size: 11px;
    }

    /* Qty stepper: don't stretch full-width, keep at sensible max */
    .svrg-qty-stepper {
        max-width: 180px;
    }

    /* Reviews: tighten rating overview padding */
    .svrg-rating-overview {
        gap: 20px;
        padding: 20px 16px;
    }

    /* Rating bars: allow full width within flex */
    .svrg-rating-bars {
        min-width: 0;
        flex: 1;
    }

    /* Reviews header: stack on small screens */
    .svrg-reviews-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* About page section heading */
    .svrg-about-sec-h2 {
        font-size: 20px;
    }

    .svrg-about-section-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    /* About page: YouTube hero - let it fill full width naturally */
    .svrg-about-yt-wrap {
        max-height: 56.25vw;
    }

    /* WooCommerce breadcrumb */
    .woocommerce .woocommerce-breadcrumb {
        padding: 8px 16px;
        font-size: 12px;
    }

    /* WooCommerce notices */
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info {
        font-size: 13px;
        padding: 12px 16px 12px 44px;
    }

    /* WooCommerce cart table: allow horizontal scroll */
    .woocommerce table.shop_table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Header icons: slightly larger tap target */
    .svrg-hdr-icon {
        padding: 8px;
    }
}

/* ──────────────────────────────────────────────────────────────
   max-width: 640px  (phones, landscape included)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

    /* ── Rating overview: stack score box above bars ── */
    .svrg-rating-overview {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .svrg-rating-score-box {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        min-width: auto;
        width: 100%;
    }

    .svrg-rating-num {
        font-size: 42px;
    }

    .svrg-rating-bars {
        width: 100%;
    }

    /* Reviews grid: 2-col (already set at 768px - re-confirm) */
    ol.svrg-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Review card: tighter padding */
    .svrg-review-card {
        padding: 14px;
        gap: 10px;
    }

    /* WooCommerce single product cart form: vertical flow */
    .woocommerce div.product form.cart {
        display: flex;
        flex-direction: column;
    }

    /* About page sections */
    .svrg-about-section {
        padding: 40px 0;
    }

    /* Quick view modal: already handled at 640px in Section24 */
}

/* ──────────────────────────────────────────────────────────────
   max-width: 480px  (small phones - primary mobile target)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* ── Footer: full 1-column ── */
    .svrg-footer-container {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .svrg-footer-col--brand {
        grid-column: 1 / 1 !important;
    }

    .svrg-footer-top {
        padding: 40px 0 28px;
    }

    .svrg-footer-bottom {
        padding: 14px 16px;
    }

    /* ── Rating overview: centred single column ── */
    .svrg-rating-overview {
        align-items: center;
        text-align: center;
    }

    .svrg-rating-score-box {
        justify-content: center;
        width: 100%;
    }

    .svrg-bar-row {
        text-align: left;
    }

    /* ── Related / Recently Viewed section heading ── */
    .woocommerce .related.products h2,
    .woocommerce .up-sells h2,
    .svrg-recently-viewed-section h2 {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .woocommerce .related.products,
    .woocommerce .up-sells,
    .svrg-recently-viewed-section {
        padding-top: 24px;
    }

    /* ── Single product adjustments ── */
    .woocommerce div.product .product_title {
        font-size: clamp(17px, 5vw, 22px);
    }

    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 18px;
    }

    /* Qty stepper: full width on very small screens */
    .svrg-qty-stepper {
        max-width: 100%;
        width: 160px;
    }

    /* DESKRIPSI / SPESIFIKASI accordion body text */
    .svrg-desc-acc-body {
        font-size: 13px;
    }

    /* ── Reviews: 1-col already in existing CSS ── */

    /* ── About page: small phone adjustments ── */
    .svrg-about-yt-wrap {
        max-height: none;
    }

    .svrg-about-sec-h2 {
        font-size: 17px;
    }

    .svrg-about-section-title {
        font-size: 17px;
    }

    .svrg-about-rv-inner,
    .svrg-about-map-inner {
        padding: 32px 16px;
    }

    .svrg-about-map-wrap iframe {
        height: 240px !important;
    }

    /* About page reviews: 1-col */
    .svrg-about-reviews-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .svrg-about-rv-card {
        padding: 16px;
    }

    /* ── Product loop cards: tighter text ── */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 11px;
        padding: 8px 8px 3px;
    }

    .woocommerce ul.products li.product .price {
        font-size: 12px;
        padding: 0 8px 4px;
    }

    .woocommerce ul.products li.product a.button {
        font-size: 11px;
        padding: 8px 10px;
        margin: 3px 8px 8px;
        width: calc(100% - 16px);
    }

    /* ── WooCommerce checkout col2-set: stack ── */
    .woocommerce-page .col2-set {
        display: flex;
        flex-direction: column;
    }

    .woocommerce-page .col2-set .col-1,
    .woocommerce-page .col2-set .col-2 {
        width: 100%;
        float: none;
    }

    /* ── WooCommerce message buttons: full-width ── */
    .woocommerce-message a.button,
    .woocommerce-message .button {
        display: block;
        text-align: center;
        float: none !important;
        width: 100%;
        margin: 8px 0 0;
        box-sizing: border-box;
    }

    /* ── Hero slider: hide arrows on very small screens ── */
    .svrg-slider-arrow {
        display: none !important;
    }

    /* Hero slider: dots closer together */
    .svrg-slider-dots {
        gap: 6px;
    }

    /* ── WhatsApp CTA section ── */
    .svrg-wa-cta-btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Quick view button: bigger tap target ── */
    .svrg-qv-btn {
        padding: 10px 16px;
        font-size: 11px;
    }

    /* ── Category hero: tighter ── */
    .svrg-cat-hero {
        height: 180px;
    }

    .svrg-cat-hero-name {
        font-size: 22px;
    }

    /* ── Search bar: full-height ── */
    .svrg-search-inner {
        padding: 0 16px;
    }

    .svrg-search-input {
        font-size: 16px; /* prevents iOS zoom on focus */
    }
}

/* ──────────────────────────────────────────────────────────────
   max-width: 360px  (very small phones, e.g. iPhone SE 1st gen)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {

    /* Product cards: minimal gap */
    .woocommerce ul.products {
        gap: 6px !important;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 10px;
        padding: 6px 6px 2px;
    }

    .woocommerce ul.products li.product .price {
        font-size: 11px;
        padding: 0 6px 4px;
    }

    /* Single product price */
    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 16px;
    }

    /* Header logo text smaller */
    .svrg-hdr-logo .site-title {
        font-size: 14px !important;
    }

    /* Footer cols: tighter horizontal padding */
    .svrg-footer-container {
        padding: 0 16px !important;
    }

    /* About page: section padding */
    .svrg-about-section {
        padding: 32px 0;
    }

    .svrg-about-section-grid {
        padding: 0 14px;
    }

    .svrg-about-title-inner {
        padding: 20px 14px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   Section27  MOBILE NAV DRAWER
   Hamburger toggle (visible mobile only) + slide-from-right drawer
   ═══════════════════════════════════════════════════════════════ */

/* ── Hamburger toggle: hidden on desktop ── */
.svrg-hdr-hamburger {
    display: none !important;
}

/* ── Overlay backdrop ── */
.svrg-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    cursor: pointer;
}
.svrg-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* ── Drawer panel (slides from right) ── */
.svrg-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: #fff;
    z-index: 100001;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 28px rgba(0, 0, 0, 0.18);
    overscroll-behavior: contain;
}
.svrg-nav-drawer.is-open {
    transform: translateX(0);
}

/* ── Drawer header row ── */
.svrg-nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 56px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}
.svrg-nav-drawer-title {
    font-family: var(--font-sans, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text, #1a1a1a);
}
.svrg-nav-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    margin-right: -6px;
    color: var(--color-text, #1a1a1a);
    transition: color 0.2s ease;
}
.svrg-nav-drawer-close:hover { color: var(--color-accent, #000); }
.svrg-nav-drawer-close svg { width: 20px; height: 20px; }

/* ── Drawer nav items ── */
.svrg-nav-drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.svrg-nav-drawer-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    font-family: var(--font-sans, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text, #1a1a1a);
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 0.15s ease, color 0.15s ease;
}
.svrg-nav-drawer-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.svrg-nav-drawer-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-accent, #000);
}
.svrg-nav-drawer-signout { color: #666; }

/* Primary menu items inside drawer */
.svrg-nav-drawer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.svrg-nav-drawer-menu > li > a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    font-family: var(--font-sans, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text, #1a1a1a);
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 0.15s ease, color 0.15s ease;
    background: transparent !important;
}
.svrg-nav-drawer-menu > li > a:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--color-accent, #000);
}
.svrg-nav-drawer-menu > li.current-menu-item > a {
    color: var(--color-accent, #244233);
}
.svrg-nav-drawer-signout:hover {
    background: rgba(220, 38, 38, 0.05);
    color: #dc2626;
}

/* ── Hamburger: show only on mobile ── */
@media (max-width: 768px) {
    .svrg-hdr-hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border: none;
        background: none;
        cursor: pointer;
        padding: 0;
        margin-right: -8px; /* flush to right edge of header padding */
        color: #fff;
    }
    .svrg-hdr-hamburger svg {
        width: 28px;
        height: 28px;
    }
}



/* ═══════════════════════════════════════════════════════════════
   Section28  SEARCH RESULTS PAGE
   ═══════════════════════════════════════════════════════════════ */

.svrg-search-results-wrap {
    padding: 28px 0 48px;
}
/* Hide breadcrumb on search results page */
.svrg-search-results-wrap ~ .storefront-breadcrumb,
.woocommerce-page .svrg-search-results-wrap + .storefront-breadcrumb { display: none !important; }
.search-results .storefront-breadcrumb,
.woocommerce-page.search-results .storefront-breadcrumb { display: none !important; }

/* Force full-width on search page - desktop only */
@media (min-width: 769px) {
    .svrg-search-page .col-full,
    .svrg-search-page #page .col-full {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .svrg-search-page #primary,
    .svrg-search-page #main {
        width: 100% !important;
        float: none !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .svrg-search-page .svrg-container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    .svrg-search-page .svrg-search-results-wrap {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}
/* Sidebar hidden on mobile, visible on desktop */
.svrg-search-page #secondary {
    display: none !important;
}

/* ── "Cari" heading ── */
.svrg-search-results-title {
    font-family: var(--font-sans, sans-serif);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-text, #1a1a1a);
    margin: 0 0 20px;
}

/* ── Re-search form ── */
.svrg-search-results-form {
    margin-bottom: 24px;
    max-width: 600px;
}
.svrg-search-results-form-inner {
    display: flex;
    align-items: center;
    background: #f2f2f2;
    border-radius: 100px;
    padding: 4px 4px 4px 18px;
    gap: 8px;
}
.svrg-search-results-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    font-family: var(--font-sans, sans-serif);
    font-size: 15px;
    padding: 10px 0;
    outline: none !important;
    color: var(--color-text, #1a1a1a);
    box-shadow: none !important;
    border-radius: 0 !important;
}
.svrg-search-results-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.svrg-search-results-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: none;
    background: var(--color-accent, #21d4bd);
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s ease;
}
.svrg-search-results-btn:hover {
    background: var(--color-accent-dark, #1ab9a3);
}
.svrg-search-results-btn svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2.5 !important;
    display: block;
    flex-shrink: 0;
}

/* ── Toolbar: result count + sort ── */
.svrg-search-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.svrg-search-results-toolbar .woocommerce-result-count {
    font-size: 12px;
    color: #888;
    margin: 0;
}
.svrg-search-results-toolbar .woocommerce-ordering {
    margin: 0;
}
.svrg-search-results-toolbar .woocommerce-ordering select {
    border: 1.5px solid var(--color-text, #1a1a1a) !important;
    border-radius: 100px !important;
    padding: 7px 16px !important;
    font-family: var(--font-sans, sans-serif) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    background: transparent !important;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Product grid on search results - 2 col mobile, 4 col desktop ── */
.svrg-search-products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    width: 100% !important;
}
.svrg-search-products::before,
.svrg-search-products::after {
    content: none !important;
    display: none !important;
}
.svrg-search-products > li {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
@media (min-width: 769px) {
    .svrg-search-products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
}

/* ── Product card buttons - override WC default large style ── */
.svrg-search-results-wrap .products li.product a.button,
.svrg-search-results-wrap .products li.product button.button {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 9px 14px !important;
    border-radius: 4px !important;
    background: var(--color-text, #1a1a1a) !important;
    color: #fff !important;
    border: none !important;
    line-height: 1.4 !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    margin-top: 8px !important;
    transition: opacity 0.15s ease !important;
}
.svrg-search-results-wrap .products li.product a.button:hover,
.svrg-search-results-wrap .products li.product button.button:hover {
    opacity: 0.82 !important;
    color: #fff !important;
}

/* ================================================================
   Section29 SEARCH FILTER - desktop sidebar + mobile modal
   ================================================================ */

/* ── Desktop 2-col layout: sidebar + main ── */
.svrg-search-body {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 24px;
}
.svrg-search-sidebar {
    flex: 0 0 220px;
    width: 220px;
    border-right: 1px solid #eee;
    padding-right: 24px;
}
.svrg-search-main {
    flex: 1;
    min-width: 0;
}

/* Hide/show per breakpoint */
.svrg-sf-open-btn      { display: none; }   /* hidden by default - shown mobile */
.svrg-search-count-desktop { display: block; font-size: 13px; color: #888; }

@media (max-width: 768px) {
    .svrg-search-body   { flex-direction: column; gap: 0; margin-top: 0; }
    .svrg-search-sidebar { display: none; }
    .svrg-search-main   { width: 100%; }
    .svrg-sf-open-btn   { display: inline-flex !important; }
    .svrg-search-count-desktop { display: none; }
}

/* ── Toolbar: Filter button + sort ── */
.svrg-search-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-bottom: 16px;
    gap: 8px;
}
.svrg-search-results-toolbar .woocommerce-ordering {
    flex-shrink: 0;
    margin: 0 !important;
}
.svrg-search-results-toolbar .woocommerce-ordering select {
    max-width: 180px;
}
.svrg-sf-open-btn {
    display: none;   /* shown only on mobile via media query below */
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1.5px solid var(--color-text, #1a1a1a);
    border-radius: 100px;
    background: transparent;
    color: var(--color-text, #1a1a1a);
    font-family: var(--font-sans, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.svrg-sf-open-btn:hover {
    background: var(--color-text, #1a1a1a);
    color: #fff;
}
.svrg-sf-open-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Backdrop overlay ── */
.svrg-sf-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100010;
}
.svrg-sf-overlay.is-open {
    display: block;
}

/* ── Modal panel - left drawer, ~88% width ── */
.svrg-sf-modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 88%;
    max-width: 360px;
    background: #fff;
    z-index: 100011;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow: hidden;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}
.svrg-sf-modal.is-open {
    transform: translateX(0);
}

/* ── Modal header (search) ── */
.svrg-sf-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    background: #fff;
}

/* ── Category filter drawer header - mobile only ── */
.svrg-filter-mobile-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    background: #fff;
}
.svrg-sf-modal-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--color-text, #1a1a1a);
    text-transform: uppercase;
}
.svrg-sf-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-text, #1a1a1a);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text, #1a1a1a);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.svrg-sf-close-btn:hover {
    background: var(--color-text, #1a1a1a);
    color: #fff;
}
.svrg-sf-close-btn svg {
    width: 18px;
    height: 18px;
}

/* ── Modal scrollable body (search) ── */
.svrg-sf-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

/* ── Category filter drawer scrollable body ── */
.svrg-filter-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
}

/* ── Filter accordion groups ── */
.svrg-sf-group {
    border-bottom: 1px solid #eee;
}
.svrg-sf-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 20px;
    background: transparent;
    border: none;
    font-family: var(--font-sans, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text, #1a1a1a);
    cursor: pointer;
    text-align: left;
}
.svrg-sf-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.22s ease;
}
.svrg-sf-group-heading[aria-expanded="true"] .svrg-sf-chevron {
    transform: rotate(180deg);
}
.svrg-sf-group-body {
    display: none;
    padding: 4px 0 12px;
}
.svrg-sf-group-body.is-open {
    display: block;
}

/* ── Filter options ── */
.svrg-sf-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: var(--color-text, #1a1a1a);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s;
}
.svrg-sf-option:hover {
    background: #f5f5f5;
}
.svrg-sf-check {
    width: 20px;
    height: 20px;
    border: 1.5px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
}
.svrg-sf-option.is-active .svrg-sf-check {
    background: var(--color-text, #1a1a1a);
    border-color: var(--color-text, #1a1a1a);
}
.svrg-sf-check svg {
    width: 12px;
    height: 12px;
    stroke: #fff;
}
.svrg-sf-option-label {
    flex: 1;
}

/* ── Desktop sidebar - tighter heading padding ── */
.svrg-search-sidebar .svrg-sf-group-heading {
    padding: 14px 0;
    font-size: 12px;
}
.svrg-search-sidebar .svrg-sf-option {
    padding: 8px 0;
}
.svrg-search-sidebar .svrg-sf-group {
    border-bottom-color: #e8e8e8;
}


/* ═══════════════════════════════════════════════════════
   Section30  CART PAGE
   ═══════════════════════════════════════════════════════ */

.svrg-cart-page {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px 72px;
    box-sizing: border-box;
}

.svrg-cart-empty-recs {
    margin-top: 32px;
}
.svrg-cart-empty-recs-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 24px;
}

/* Desktop: cart items left, sticky order summary right */
.svrg-cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 56px;
    align-items: start;
}

.svrg-cart-main { min-width: 0; }

.svrg-cart-summary {
    background: #f7f7f5;
    border-radius: 10px;
    padding: 28px 24px;
    box-sizing: border-box;
    position: sticky;
    top: 100px;
}

@media (max-width: 900px) {
    .svrg-cart-page { max-width: 560px; }
    .svrg-cart-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .svrg-cart-summary {
        position: static;
        background: none;
        border-radius: 0;
        padding: 0;
    }
}

/* Hide Storefront's sidebar on cart */
.woocommerce-cart #secondary { display: none !important; }
.woocommerce-cart #primary { width: 100% !important; float: none !important; max-width: 100% !important; }

/* Checkout: comfortable horizontal padding on mobile.
   (Cart page manages its own padding via .svrg-cart-page - adding it
   here too used to triple-stack with .entry-content/.woocommerce and
   crush the mobile content width. Keep this scoped to checkout only.) */
@media (max-width: 768px) {
    .woocommerce-checkout #primary .entry-content,
    .woocommerce-checkout .woocommerce,
    .wp-block-woocommerce-checkout {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
    /* WooCommerce blocks inner containers */
    .wc-block-checkout,
    .wp-block-woocommerce-checkout > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .woocommerce-cart #primary .entry-content,
    .woocommerce-cart .woocommerce {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.svrg-cart-title {
    text-align: left;
    font-size: 30px;
    font-weight: 700;
    color: var(--color-text, #171717);
    margin: 28px 0 8px;
}

.svrg-cart-continue {
    display: block;
    text-align: left;
    color: var(--color-accent, #244233);
    text-decoration: underline;
    font-size: 14px;
    margin-bottom: 32px;
}

@media (max-width: 900px) {
    .svrg-cart-title,
    .svrg-cart-continue {
        text-align: center;
    }
}

/* ── Cart item card ── */
.svrg-cart-item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border, #e4e4e4);
}

.svrg-cart-img {
    width: 110px;
    flex-shrink: 0;
}
.svrg-cart-img a { display: block; }
.svrg-cart-img img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.svrg-cart-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.svrg-cart-name a {
    color: var(--color-accent, #244233);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}

/* WooCommerce variation meta */
.svrg-cart-info .wc-item-meta,
.svrg-cart-info dl.variation {
    margin: 2px 0 0;
    font-size: 13px;
    color: #555;
}
.svrg-cart-info dl.variation dt,
.svrg-cart-info dl.variation dd {
    display: inline;
    margin: 0;
    font-weight: normal;
}
.svrg-cart-info dl.variation dt::after { content: ' '; }
.svrg-cart-info dl.variation dd::after { content: ''; }

/* Qty + price row */
.svrg-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    gap: 8px;
}

/* Qty stepper in cart.
   Shares the .svrg-qty-stepper class with the single-product page's
   stepper, which has its own width/max-width rules at small breakpoints
   (e.g. width:160px under 480px) - force auto width here so the cart's
   compact 32/36/32 box always wins regardless of viewport. */
.svrg-cart-qty {
    display: flex;
    align-items: center;
    border: 1.5px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    width: auto !important;
    max-width: none !important;
    height: 32px !important;
}
.svrg-cart-qty .svrg-qty-btn {
    width: 32px !important;
    height: 32px !important;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.svrg-cart-qty .svrg-qty-input {
    width: 36px !important;
    height: 32px !important;
    text-align: center;
    border: none;
    border-left: 1.5px solid #ccc;
    border-right: 1.5px solid #ccc;
    font-size: 14px;
    -moz-appearance: textfield;
    padding: 0 !important;
    outline: none;
    flex-shrink: 0;
}
.svrg-cart-qty .svrg-qty-input::-webkit-inner-spin-button,
.svrg-cart-qty .svrg-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Price column */
.svrg-cart-price { text-align: right; flex-shrink: 0; }
.svrg-cart-price del {
    display: block;
    font-size: 12px;
    color: #aaa;
    text-decoration: line-through;
}
.svrg-cart-price ins,
.svrg-cart-price > .woocommerce-Price-amount {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent, #244233);
    text-decoration: none;
}

/* Remove link */
.svrg-cart-remove {
    display: inline-block;
    margin-top: 6px;
    color: var(--color-accent, #244233);
    font-size: 13px;
    text-decoration: none;
}

/* ── Order notes ── */
.svrg-cart-notes-wrap {
    border-bottom: 1px solid var(--color-border, #e4e4e4);
    margin-top: 4px;
}
.svrg-cart-notes-toggle {
    width: 100%;
    background: none !important;
    border: none !important;
    outline: none !important;
    text-align: left;
    padding: 16px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-accent, #244233) !important;
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.svrg-cart-notes-toggle:hover {
    background: none !important;
    color: var(--color-accent, #244233) !important;
}
.svrg-cart-notes-body {
    display: none;
    padding-bottom: 12px;
}
.svrg-cart-notes-body.is-open { display: block; }
.svrg-cart-notes-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--color-text, #171717);
}

/* ── Subtotal / coupon rows ── */
.svrg-cart-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border, #e4e4e4);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text, #171717);
}

.svrg-cart-coupon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: var(--color-accent, #244233);
    border-bottom: 1px solid var(--color-border, #e4e4e4);
}

/* ── Terms checkbox ── */
.svrg-cart-terms {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 12px;
    cursor: pointer;
}
.svrg-cart-terms input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-accent, #244233);
    cursor: pointer;
}
.svrg-cart-terms span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text, #171717);
    text-transform: uppercase;
    line-height: 1.3;
}

/* ── Checkout button ── */
.svrg-cart-checkout-btn {
    display: block;
    width: 100%;
    padding: 17px 24px;
    background: var(--color-accent, #244233);
    color: #fff !important;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-decoration: none !important;
    border-radius: 50px;
    text-transform: uppercase;
    margin-bottom: 16px;
    box-sizing: border-box;
    transition: background 0.2s ease;
}
.svrg-cart-checkout-btn:hover {
    background: var(--color-accent-dark, #1c3428);
}

/* ── Shipping note ── */
.svrg-cart-shipping-note {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}
.svrg-cart-shipping-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ── Empty cart ── */
.svrg-cart-empty {
    text-align: center;
    padding: 40px 0;
}

/* ================================================================
   Section19  MEGA MENU
   Konten dikelola di: Appearance -> Customize -> G - Shop Mega Menu
   Tambah CSS class "has-mega-menu" ke item Shop di Appearance -> Menus
   ================================================================ */

/* Izinkan panel keluar dari header */
.site-header,
header.site-header,
.site-header .col-full {
    overflow: visible !important;
}

/* Li Shop: static -> panel berposisi relatif ke site-header (sticky) */
li.has-mega-menu {
    position: static !important;
}

/* Sembunyikan sub-menu WordPress lama - konten dari Customizer saja */
li.has-mega-menu > ul.sub-menu {
    display: none !important;
}

/* Panel utama - tersembunyi default */
.svrg-mega-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 99999;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,.15);
    border-top: 3px solid var(--color-accent, #244233);
    padding: 28px 40px 36px;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}

/* Tampil saat hover li Shop */
li.has-mega-menu:hover .svrg-mega-panel {
    display: flex;
}

/* Tiap kolom */
.svrg-mega-col {
    flex: 1;
    min-width: 130px;
    padding-right: 24px;
}
.svrg-mega-col:last-child {
    padding-right: 0;
}

/* Judul kolom */
.svrg-mega-col-hd {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #111;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--color-accent, #244233);
}

/* Daftar item */
.svrg-mega-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.svrg-mega-col ul li a {
    display: block;
    padding: 5px 0;
    font-size: 14px;
    font-weight: 400;
    color: #555 !important;
    background: transparent !important;
    text-decoration: none;
    line-height: 1.5;
}
.svrg-mega-col ul li a:hover {
    color: var(--color-accent, #244233) !important;
    text-decoration: underline;
    background: transparent !important;
}

/* Mobile */
@media (max-width: 768px) {
    .svrg-mega-panel {
        position: static;
        flex-direction: column;
        box-shadow: none;
        border-top: none;
        padding: 8px 0 8px 16px;
    }
    li.has-mega-menu:hover .svrg-mega-panel {
        display: flex;
    }
    .svrg-mega-col {
        padding-right: 0;
        padding-bottom: 12px;
        min-width: 0;
    }
}


/* ================================================================
   PARADISE STREETWEAR - COLOR OVERRIDES
   White header · Black accent · Dark footer
   ================================================================ */

/* ── Topbar: light grey ── */
.svrg-topbar {
    background: #f5f5f5 !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
.svrg-topbar-icon,
.svrg-topbar-icon svg,
.svrg-topbar-lang {
    color: #444 !important;
    stroke: #444 !important;
}
.svrg-topbar-icon:hover { color: #000 !important; }

/* ── Header: white background ── */
.site-header,
header.site-header {
    background-color: #ffffff !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

.site-header.is-sticky,
header.site-header.is-sticky {
    box-shadow: 0 2px 16px rgba(0,0,0,0.10) !important;
}

/* ── Nav links: Cititex style (clean, normal case) ── */
.svrg-nav-menu > li > a {
    color: #1a1a1a !important;
    text-transform: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    height: 64px !important;
    padding: 0 14px !important;
}
.svrg-nav-menu > li > a:hover,
.svrg-nav-menu > li.current-menu-item > a,
.svrg-nav-menu > li.current_page_item > a {
    color: #000 !important;
    opacity: 1 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Cart / icons: dark ── */
.svrg-hdr-actions .site-header-cart .cart-contents,
.svrg-hdr-actions .site-header-cart a,
.site-header .cart-contents,
.site-header .site-header-cart a,
.site-header .cart-contents .amount {
    color: #1a1a1a !important;
}

.svrg-hdr-actions .cart-contents .count,
.svrg-hdr-actions .site-header-cart .count,
.site-header .cart-contents .count,
.site-header-cart .count {
    background: rgba(0,0,0,0.08) !important;
    color: #1a1a1a !important;
}

/* ── Hamburger icon: dark ── */
.svrg-hdr-hamburger svg,
.svrg-hdr-icon svg {
    stroke: #1a1a1a !important;
    color: #1a1a1a !important;
}

/* ── Wishlist / search / account icons ── */
.svrg-hdr-icon {
    color: #1a1a1a !important;
}

/* ── Search field in white header ── */
.site-header .widget_product_search input,
.site-header .search-field {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.15) !important;
    color: #1a1a1a !important;
}
.site-header .search-field::placeholder {
    color: rgba(0,0,0,0.4) !important;
}

/* ── Accent: black (buttons, borders, highlights) ── */
.button,
button,
input[type="submit"],
.wc-block-components-button,
.wp-block-button__link {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}
.button:hover,
button:hover,
input[type="submit"]:hover {
    background: #333 !important;
    border-color: #333 !important;
}
/* The blanket "button { background:#000 }" above also paints the
   language-switcher <button> (which should stay plain text, no box)
   since it's a real <button> element too. Undo it there specifically. */
.svrg-lang-btn,
.svrg-lang-btn:hover {
    background: none !important;
    border-color: transparent !important;
    color: #444 !important;
}
/* Same blanket rule also turned the quantity −/+ buttons into solid
   black squares - they should be plain, sitting inside the bordered
   .svrg-qty-stepper box (Cititex-style), not their own filled buttons. */
.svrg-qty-btn,
.svrg-qty-btn:hover {
    background: #fff !important;
    border-color: transparent !important;
    color: #374151 !important;
}
/* Same blanket rule also paints the mobile hamburger toggle and the
   nav drawer's close (X) button as solid black circles - both are real
   <button> elements too, and their own "background: none" (no
   !important) lost to it. They should stay plain/transparent icon
   buttons, not filled. */
.svrg-hdr-hamburger,
.svrg-hdr-hamburger:hover,
.svrg-nav-drawer-close,
.svrg-nav-drawer-close:hover {
    background: none !important;
    border-color: transparent !important;
}
/* Same blanket rule would also paint the hero slider's prev/next arrows
   solid black - they're real <button> elements too. Keep them white
   circles as designed. */
.svrg-hero-arrow {
    background: #fff !important;
    border-color: transparent !important;
    color: #111827 !important;
}
.svrg-hero-arrow:hover {
    background: #f3f4f6 !important;
}

a { color: #000; }
a:hover { color: #555; }

/* Accent fallback override for all var(--color-accent, #244233) */
.svrg-mega-col-hd,
.svrg-mega-panel { border-color: #000 !important; }
.svrg-mega-col ul li a:hover { color: #000 !important; }

/* ── Footer: dark grey ── */
.site-footer,
footer.site-footer {
    background-color: #1a1a1a !important;
    color: #ccc !important;
}
.site-footer a,
footer.site-footer a {
    color: #ccc !important;
}
.site-footer a:hover,
footer.site-footer a:hover {
    color: #fff !important;
}
.site-footer .widget-title,
footer.site-footer .widget-title {
    color: #fff !important;
}
.site-footer hr {
    border-color: rgba(255,255,255,0.1) !important;
}

/* ── Mobile drawer: white bg, dark text ── */
.svrg-nav-drawer {
    background: #fff !important;
    color: #1a1a1a !important;
}
.svrg-nav-drawer-item,
.svrg-nav-drawer-menu > li > a {
    color: #1a1a1a !important;
    border-color: rgba(0,0,0,0.08) !important;
}
.svrg-nav-drawer-item:hover,
.svrg-nav-drawer-menu > li > a:hover {
    background: rgba(0,0,0,0.04) !important;
    color: #000 !important;
}
.svrg-nav-drawer-title { color: #1a1a1a !important; }
.svrg-nav-drawer-close { color: #1a1a1a !important; }

/* ════════════════════════════════════════════════════════════════
   PARADISE - PRODUCT DETAIL PAGE FIXES
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Accordion trigger: override Storefront button reset ── */
.svrg-accordion-trigger {
    background: transparent !important;
    color: #1a1a1a !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 0 !important;
}
.svrg-accordion-trigger:hover,
.svrg-accordion-trigger:focus {
    background: transparent !important;
    color: #000 !important;
    text-decoration: none !important;
}
.svrg-accordion-icon { color: #1a1a1a !important; }
.svrg-accordion-icon svg { stroke: #1a1a1a !important; }

/* ── 2. WooCommerce product tabs (DESKRIPSI, ULASAN) ── */
.woocommerce-tabs { margin-top: 32px !important; }
.woocommerce-tabs ul.tabs {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.12) !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after { display: none !important; }
.woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin: 0 4px 0 0 !important;
    border-radius: 0 !important;
}
.woocommerce-tabs ul.tabs li a {
    background: transparent !important;
    color: #888 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 10px 16px !important;
    border: none !important;
    border-radius: 0 !important;
    display: inline-block !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    background: transparent !important;
    color: #000 !important;
    border-bottom-color: #000 !important;
    box-shadow: none !important;
}
.woocommerce-tabs .panel {
    background: transparent !important;
    border: none !important;
    padding: 20px 0 !important;
    margin: 0 !important;
}
.woocommerce-tabs .panel p,
.woocommerce-tabs .panel li {
    font-size: 14px !important;
    color: #444 !important;
    line-height: 1.75 !important;
}

/* ── 3. Product detail typography ── */
.woocommerce div.product .product_title {
    font-size: clamp(20px, 2.4vw, 28px) !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 14px !important;
    color: #555 !important;
    line-height: 1.7 !important;
    margin-top: 12px !important;
}
.woocommerce div.product .woocommerce-product-details__short-description p {
    font-size: 14px !important;
    color: #555 !important;
}

/* ── 4. Content width: ALL pages align with header 28px padding ── */

/* Page wrapper: no extra spacing */
#page.hfeed,
.site-content,
#content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* col-full: full-width with 28px gutter matching the header */
.col-full {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Breadcrumb row: kill whatever is producing the large gap below it
   before the product content starts (DevTools showed a big margin/
   padding band directly under the breadcrumb text). */
.storefront-breadcrumb {
    margin: 0 !important;
    padding: 12px 0 !important;
}
.storefront-breadcrumb .col-full {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}
.woocommerce-breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
}

/* Primary content area: full-width, no sidebar float */
#primary.content-area {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide sidebar on all pages */
#secondary.widget-area {
    display: none !important;
}

@media (max-width: 768px) {
    .col-full {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   PARADISE - CITITEX-STYLE HEADER REDESIGN
   Reference: cititex.com/id - DM Sans, thin topbar, left-nav
   ════════════════════════════════════════════════════════════════ */

/* ── Font: DM Sans throughout ── */
:root { --font-sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; }
body,
button,
input,
select,
textarea,
.svrg-nav-menu > li > a,
.svrg-hdr,
.svrg-topbar {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ── Topbar: thin light-gray, right-aligned (Cititex exact) ── */
.svrg-topbar {
    background: #FAFAFA !important;
    border-bottom: 1px solid #E6E6E6 !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 28px !important;
    color: #64686D !important;
}
.svrg-topbar-inner {
    justify-content: space-between !important;
    height: 28px !important;
    gap: 4px !important;
}
/* Social icons - client wants these visible (unlike the Cititex
   reference), positioned beside the language switcher on the right. */
.svrg-topbar-socials {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: 16px !important;
}
.svrg-topbar-socials .svrg-topbar-icon {
    color: #64686D !important;
    width: 15px !important;
    height: 15px !important;
}
.svrg-topbar-socials .svrg-topbar-icon:hover {
    color: #111827 !important;
}
.svrg-topbar-socials .svrg-topbar-icon svg {
    width: 14px !important;
    height: 14px !important;
}
/* Layanan Pelanggan / Lacak Pesanan / Temukan Toko - left side */
.svrg-topbar-links {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-right: auto !important;
}
.svrg-topbar-links a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    color: #64686D !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.svrg-topbar-links a:hover {
    color: #111827 !important;
}
/* Language switcher: small gray text */
.svrg-topbar-lang,
.svrg-lang-drop,
.svrg-lang-drop span,
.svrg-lang-option {
    font-size: 12px !important;
    color: #64686D !important;
    font-weight: 400 !important;
}

/* "Mulai Design Custom" pill button - main header row (Cititex-style) */
.svrg-hdr-custom-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 38px !important;
    padding: 0 18px !important;
    margin: 0 16px !important;
    background: #111827 !important;
    color: #fff !important;
    border-radius: 100px !important;
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    transition: background 0.15s !important;
}
.svrg-hdr-custom-cta:hover {
    background: #374151 !important;
    color: #fff !important;
}
.svrg-hdr-custom-cta-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, #EC4899, #F97316, #EAB308, #16A34A, #2563EB, #7C3AED, #EC4899);
    flex-shrink: 0;
}
@media (max-width: 1024px) {
    .svrg-hdr-custom-cta-text { display: none; }
    .svrg-hdr-custom-cta { padding: 0; width: 38px; justify-content: center; }
}
@media (max-width: 768px) {
    .svrg-hdr-custom-cta { display: none !important; }
}

/* ── Main header: height 72px, subtle bottom border ── */
header.site-header,
header.site-header.sticky {
    background-color: #ffffff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #ECEDEE !important;
}
header.site-header .svrg-hdr {
    min-height: 72px !important;
    height: 72px !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 28px !important;
    box-shadow: none !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
}

/* ── Logo: right border separator (Cititex style) ── */
.svrg-hdr-logo {
    border-right: 1px solid #E6E6E6 !important;
    padding-right: 24px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 72px !important;
}

/* ── Nav: left-aligned immediately after logo ── */
.svrg-hdr-nav {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 24px !important;
    height: 72px !important;
}

/* ── Nav links: DM Sans, 14px, weight 400, Cititex color ── */
.svrg-nav-menu {
    gap: 0 !important;
}
.svrg-nav-menu > li > a {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #2F3133 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 0 12px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
}
.svrg-nav-menu > li > a:hover {
    color: #000 !important;
    border-bottom-color: #000 !important;
    text-decoration: none !important;
    opacity: 1 !important;
}
.svrg-nav-menu > li.current-menu-item > a,
.svrg-nav-menu > li.current-page-ancestor > a {
    color: #000 !important;
    font-weight: 500 !important;
    border-bottom-color: #000 !important;
}

/* ── Icons (search, account, cart): keep dark ── */
.svrg-hdr-actions {
    gap: 4px !important;
}
.svrg-hdr-icon svg {
    stroke: #2F3133 !important;
}

/* ── Dropdown chevron: items with children show ▾ (Cititex style) ── */
.svrg-nav-menu > li.menu-item-has-children > a {
    gap: 4px !important;
}
.svrg-nav-menu > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F3133' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.svrg-nav-menu > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* ── Dropdown submenu: clean white card (Cititex style) ── */
/* The <li> itself needs position:relative - without it, the submenu's
   "position:absolute; left:0" anchors to the nearest positioned
   ancestor (the sticky header) instead of this menu item, landing the
   dropdown at the viewport's left edge instead of under "Cara Order". */
.svrg-nav-menu > li {
    position: relative;
}
.svrg-nav-menu > li > ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 200px;
    background: #ffffff !important;
    border: 1px solid #ECEDEE !important;
    border-top: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border-radius: 0 0 4px 4px !important;
}
.svrg-nav-menu > li:hover > ul.sub-menu {
    display: block !important;
}
.svrg-nav-menu > li > ul.sub-menu > li > a {
    display: block !important;
    padding: 9px 16px !important;
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #2F3133 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    transition: background 0.1s ease, color 0.1s ease !important;
}
.svrg-nav-menu > li > ul.sub-menu > li > a:hover {
    background: #F5F5F5 !important;
    color: #000 !important;
}
.svrg-nav-menu > li > ul.sub-menu > li.current-menu-item > a {
    color: #000 !important;
    font-weight: 500 !important;
}

/* ── Mobile: compact topbar, 60px header ── */
@media (max-width: 768px) {
    .svrg-topbar {
        height: auto !important;
        min-height: 26px !important;
        padding: 4px 16px !important;
    }
    header.site-header .svrg-hdr {
        min-height: 60px !important;
        height: 60px !important;
        padding: 0 16px !important;
    }
    .svrg-hdr-logo {
        border-right: none !important;
        padding-right: 0 !important;
        height: 60px !important;
    }
    .svrg-hdr-nav {
        height: 60px !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   PARADISE - CITITEX-STYLE FOOTER
   ════════════════════════════════════════════════════════════════ */

.svrg-footer {
    background: #1a1a1a !important;
    color: #aaa !important;
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
    border-top: none !important;
}

/* ── Main inner: 4-column flex ── */
.svrg-footer-inner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 48px !important;
    max-width: 100% !important;
    padding: 56px 28px 40px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Brand column */
.svrg-footer-brand {
    flex: 0 0 260px !important;
    min-width: 0 !important;
}
.svrg-footer-logo-link {
    display: inline-block !important;
    margin-bottom: 16px !important;
}
.svrg-footer-logo {
    max-height: 48px !important;
    width: auto !important;
    filter: brightness(0) invert(1) !important;
}
.svrg-footer-logo-text {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0.02em !important;
}
.svrg-footer-tagline {
    font-size: 13px !important;
    color: #999 !important;
    line-height: 1.65 !important;
    margin: 0 0 20px !important;
}
.svrg-footer-socials {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 4px !important;
}
.svrg-footer-social-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.08) !important;
    color: #ccc !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.svrg-footer-social-link:hover {
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
}

/* 3-column links grid */
.svrg-footer-links-grid {
    flex: 1 1 0 !important;
    display: flex !important;
    gap: 32px !important;
    min-width: 0 !important;
}
.svrg-footer-link-col {
    flex: 1 !important;
    min-width: 0 !important;
}
.svrg-footer-heading {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 0 12px !important;
}
.svrg-footer-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.svrg-footer-links li {
    margin-bottom: 8px !important;
}
.svrg-footer-links a {
    font-size: 13px !important;
    color: #888 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
}
.svrg-footer-links a:hover {
    color: #fff !important;
}

/* Support card column */
.svrg-footer-cards {
    flex: 0 0 220px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.svrg-footer-card {
    background: rgba(255,255,255,0.06) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}
.svrg-footer-card-icon {
    flex-shrink: 0 !important;
    color: #ccc !important;
    margin-top: 2px !important;
}
.svrg-footer-card-body {
    min-width: 0 !important;
}
.svrg-footer-card-title {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 4px !important;
}
.svrg-footer-card-desc {
    font-size: 12px !important;
    color: #888 !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
}
.svrg-footer-card-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #25D366 !important;
    border-radius: 100px !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
    transition: opacity 0.15s ease !important;
}
.svrg-footer-card-btn:hover {
    opacity: 0.85 !important;
    color: #fff !important;
}

/* Bottom bar */
.svrg-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 16px 28px !important;
    text-align: center !important;
}
.svrg-footer-copy {
    font-size: 12px !important;
    color: #555 !important;
    margin: 0 !important;
}

/* ── Responsive footer ── */
@media (max-width: 1024px) {
    .svrg-footer-inner {
        flex-wrap: wrap !important;
        gap: 32px !important;
    }
    .svrg-footer-brand { flex: 0 0 100% !important; }
    .svrg-footer-links-grid { flex: 1 1 auto !important; }
    .svrg-footer-cards { flex: 0 0 200px !important; }
}
@media (max-width: 640px) {
    .svrg-footer-inner { padding: 40px 16px 32px !important; gap: 24px !important; }
    .svrg-footer-links-grid { flex-direction: column !important; gap: 24px !important; }
    .svrg-footer-cards { flex: 0 0 100% !important; }
    .svrg-footer-bottom { padding: 12px 16px !important; }
}

/* ════════════════════════════════════════════════════════════════
   PARADISE - KOLEKSI MEGA DROPDOWN (Cititex-style two-column)
   ════════════════════════════════════════════════════════════════ */

/* Anchor point for the absolute dropdown */
.svrg-nav-menu > li.has-koleksi-mega {
    position: relative !important;
}

/* Hide the default WP sub-menu for Koleksi - we use our custom mega instead */
.svrg-nav-menu > li.has-koleksi-mega > ul.sub-menu {
    display: none !important;
}

/* Mega panel: hidden by default */
.paradise-koleksi-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999;
    background: #ffffff;
    border: 1px solid #ECEDEE;
    border-top: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    border-radius: 0 0 8px 8px;
    min-width: 360px;
    padding: 24px;
    box-sizing: border-box;
}

/* Show on hover */
.svrg-nav-menu > li.has-koleksi-mega:hover .paradise-koleksi-mega {
    display: block;
}

/* Two-column inner layout */
.paradise-koleksi-mega-inner {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.paradise-mm-col {
    flex: 1;
    min-width: 0;
}

/* Column heading (e.g. "Koleksi", "Kategori") */
.paradise-mm-head {
    display: block;
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F3F4F6;
}

/* Link list */
.paradise-mm-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.paradise-mm-list li {
    margin: 0 !important;
    padding: 0 !important;
}
.paradise-mm-list a {
    display: block;
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #4B5563;
    text-decoration: none !important;
    padding: 6px 0;
    transition: color 0.12s ease;
    line-height: 1.4;
}
.paradise-mm-list a:hover {
    color: #111827;
}

/* Hide mega on mobile - nav collapses to hamburger anyway */
@media (max-width: 768px) {
    .paradise-koleksi-mega {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   PARADISE - CATEGORY PAGE: HERO BANNER
   ════════════════════════════════════════════════════════════════ */

.paradise-cat-hero {
    position: relative;
    width: 100%;
    height: 96px;
    background: #1a1a1a;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.paradise-cat-hero.has-img {
    background-size: cover;
    background-position: center top;
    height: 120px;
}
.paradise-cat-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
}
.paradise-cat-hero-body {
    position: relative;
    z-index: 1;
    padding: 0 24px 18px;
    color: #fff;
}
.paradise-cat-hero-name {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
}
.paradise-cat-hero-desc {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    margin: 0;
    max-width: 480px;
}
@media (max-width: 768px) {
    .paradise-cat-hero { height: 80px; }
    .paradise-cat-hero.has-img { height: 96px; }
    .paradise-cat-hero-body { padding: 0 14px 12px; }
    .paradise-cat-hero-name { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════
   PARADISE - HORIZONTAL FILTER + SORT BAR (Cititex style)
   ════════════════════════════════════════════════════════════════ */

.paradise-shopbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 28px;
    border-bottom: 1px solid #ECEDEE;
    background: #fff;
    flex-wrap: wrap;
}

/* Left side: label + filter buttons */
.paradise-shopbar-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.paradise-shopbar-label {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    white-space: nowrap;
    margin-right: 4px;
}

/* Individual filter button wrapper */
.paradise-filt-wrap {
    position: relative;
}

/* Filter button */
.paradise-filt-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}
.paradise-filt-btn:hover {
    border-color: #9CA3AF;
    background: #F9FAFB;
}
.paradise-filt-wrap.is-active .paradise-filt-btn {
    border-color: #111827;
    background: #111827;
    color: #fff;
}
.paradise-filt-wrap.is-active .paradise-filt-btn svg {
    stroke: #fff;
}
.paradise-filt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #fff;
    color: #111827;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.paradise-filt-chevron {
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.paradise-filt-wrap.open .paradise-filt-chevron {
    transform: rotate(180deg);
}

/* Dropdown panel */
.paradise-filt-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 9999;
    min-width: 180px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    padding: 6px;
    display: none;
}
.paradise-filt-wrap.open .paradise-filt-dropdown {
    display: block;
}

/* Filter dropdown items */
.paradise-filt-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    color: #374151;
    text-decoration: none !important;
    border-radius: 6px;
    transition: background 0.1s;
    white-space: nowrap;
}
.paradise-filt-item:hover {
    background: #F3F4F6;
    color: #111827;
}
.paradise-filt-item.is-active {
    color: #111827;
    font-weight: 500;
}
.paradise-filt-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1.5px solid #D1D5DB;
    border-radius: 4px;
    flex-shrink: 0;
    background: #fff;
}
.paradise-filt-item.is-active .paradise-filt-check {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

/* Right side: result count + sort */
.paradise-shopbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.paradise-shopbar-right .woocommerce-result-count {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    color: #6B7280;
    margin: 0;
    white-space: nowrap;
}
.paradise-shopbar-right .woocommerce-ordering {
    margin: 0;
}
.paradise-shopbar-right .woocommerce-ordering select {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    padding: 5px 10px;
    height: 34px;
    background: #fff;
    color: #374151;
    cursor: pointer;
}

@media (max-width: 768px) {
    .paradise-shopbar {
        padding: 10px 16px;
        gap: 10px;
    }
    .paradise-shopbar-label { display: none; }
    .paradise-shopbar-filters { gap: 6px; }
    .paradise-filt-btn { height: 32px; font-size: 12px; padding: 0 10px; }
    .paradise-shopbar-right .woocommerce-result-count { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   PARADISE - PRODUCT GRID (archive + search)
   ════════════════════════════════════════════════════════════════ */

.paradise-archive-wrap {
    padding: 24px 28px 40px;
}

/* Triple-class specificity beats any external !important grid override */
ul.paradise-product-grid.paradise-product-grid.paradise-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 0 32px !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}
ul.paradise-product-grid.paradise-product-grid.paradise-product-grid::before,
ul.paradise-product-grid.paradise-product-grid.paradise-product-grid::after {
    display: none !important;
    content: none !important;
}
ul.paradise-product-grid > li {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

@media (min-width: 600px) {
    ul.paradise-product-grid.paradise-product-grid.paradise-product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (min-width: 900px) {
    ul.paradise-product-grid.paradise-product-grid.paradise-product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .paradise-archive-wrap { padding: 16px 16px 32px; }
    ul.paradise-product-grid.paradise-product-grid.paradise-product-grid {
        gap: 10px !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   PARADISE - PRODUCT CARD (Cititex style)
   ════════════════════════════════════════════════════════════════ */

.paradise-product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: none;
    border-radius: 0;
    overflow: visible;
    padding: 0 !important;
    margin: 0 !important;
}

/* Image wrapper: square with light gray bg */
.paradise-card-img-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    background: #F5F5F5;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
    text-decoration: none !important;
}
.paradise-card-img-wrap img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transition: transform 0.3s ease !important;
    padding: 8px;
    box-sizing: border-box;
}
.paradise-card-img-wrap:hover img {
    transform: scale(1.04) !important;
}

/* Sale badge */
.paradise-product-card .onsale {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    background: #EF4444 !important;
    color: #fff !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Quick view button (on hover) - a bare, unscoped ".svrg-qv-btn" rule
   elsewhere (styled for an older full-width slide-up bar design) sets
   right:0 and width:100%. Those two properties aren't touched below, so
   they leaked through and fought with left:50%, stretching this pill
   way past the card's right edge. Cancel both explicitly. */
.paradise-product-card .svrg-qv-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    right: auto;
    width: auto;
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 100px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.paradise-card-img-wrap:hover .svrg-qv-btn {
    opacity: 1 !important;
    /* !important: a legacy rule ("li.product:hover .svrg-qv-btn { transform:
       translateY(0) }", from the old full-width slide-up design) has higher
       specificity (li + .product + :hover + .svrg-qv-btn) than this rule and
       matches too, since our cards are also <li class="... product ...">.
       It was overwriting translateX(-50%), leaving the button's LEFT edge
       (not its center) sitting at the 50% mark - shifted right by half its
       own width on every real hover. */
    transform: translateX(-50%) translateY(0) !important;
}

/* Color swatches row */
.paradise-card-swatches {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.paradise-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
}
.paradise-swatch-more {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: #6B7280;
    margin-left: 2px;
}

/* Metadata row (Warna · Ukuran · GSM · Min) */
.paradise-card-meta {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    color: #9CA3AF;
    margin-bottom: 5px;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* Product title */
.paradise-product-card .paradise-card-title {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}
.paradise-product-card .paradise-card-title a {
    color: #111827 !important;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.paradise-product-card .paradise-card-title a:hover {
    color: #000 !important;
}

/* Short description */
.paradise-card-desc {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    color: #9CA3AF;
    line-height: 1.5;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price */
.paradise-card-price .price {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}
.paradise-card-price .price del {
    font-weight: 400 !important;
    color: #9CA3AF !important;
    font-size: 12px !important;
    margin-right: 4px;
}
.paradise-card-price .price ins {
    text-decoration: none !important;
    color: #EF4444 !important;
}

/* Add to cart button */
.paradise-product-card .button.add_to_cart_button,
.paradise-product-card .button.product_type_simple {
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 9px 0 !important;
    background: #111827 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    text-decoration: none !important;
}
.paradise-product-card .button.add_to_cart_button:hover,
.paradise-product-card .button.product_type_simple:hover {
    background: #374151 !important;
}

/* ════════════════════════════════════════════════════════════════
   PARADISE - RESPONSIVE NAV (mobile hamburger + mega)
   ════════════════════════════════════════════════════════════════ */

/* Storefront mobile nav toggle - keep it visible and styled */
@media (max-width: 768px) {
    /* Show Storefront's built-in hamburger */
    .storefront-handheld-footer-bar,
    button.menu-toggle {
        display: block !important;
    }

    /* Nav hides on mobile (Storefront toggles it) */
    .svrg-hdr-nav {
        display: none !important;
    }

    /* When nav is open (Storefront adds .toggled class) */
    .site-header nav.main-navigation.toggled .svrg-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: #fff !important;
        z-index: 99990 !important;
        padding: 16px 0 !important;
        overflow-y: auto !important;
        box-shadow: 0 4px 32px rgba(0,0,0,0.12) !important;
    }

    /* Mobile mega: hide, show sub-menu instead */
    .paradise-koleksi-mega { display: none !important; }
    .svrg-nav-menu > li.has-koleksi-mega > ul.sub-menu {
        display: block !important;
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        background: #F9FAFB !important;
        padding: 0 !important;
    }

    /* Mobile nav links */
    .svrg-nav-menu > li > a {
        padding: 14px 20px !important;
        font-size: 15px !important;
        border-bottom: 1px solid #F3F4F6 !important;
        height: auto !important;
    }
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
    .svrg-nav-menu > li > a {
        padding: 0 8px !important;
        font-size: 13px !important;
    }
    header.site-header .svrg-hdr {
        padding: 0 16px !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   PARADISE - ALIGNMENT FIX
   col-full already has padding: 0 28px (mobile: 0 16px).
   Remove horizontal padding from children so they align with header.
   Hero breaks out of col-full via negative margins for full-width.
   ════════════════════════════════════════════════════════════════ */

/* Shopbar & grid: no extra horizontal padding (col-full provides it) */
.paradise-shopbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.paradise-archive-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hero banner: break out of col-full to be truly full-width */
.paradise-cat-hero {
    margin-left: -28px !important;
    margin-right: -28px !important;
    width: calc(100% + 56px) !important;
    max-width: none !important;
}
@media (max-width: 768px) {
    .paradise-cat-hero {
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   PARADISE - SINGLE PRODUCT PAGE (Cititex style)
   ════════════════════════════════════════════════════════════════ */

/* ── Two-column layout: gallery left (55%), summary right (45%) ──
   CSS Grid, not flexbox: two consecutive flex-based attempts here both
   broke at particular viewport widths (a zero-slack percentage/gap
   calculation, then a flex-shrink edge case) once the description
   column's content got wide/long enough to compete for space. Grid's
   fr-unit tracks divide the space left over after the gap is reserved
   directly, with no shrink-weight math to get subtly wrong. */
.woocommerce div.product {
    display: grid !important;
    /* minmax(0, Nfr) not bare Nfr - a bare fr track's minimum defaults
       to the content's min-content size, so any deeply-nested fixed
       min-width (e.g. the qty stepper + Add to Cart group) could force
       this column wider than its fr-share and overflow past the
       viewport. minmax(0, …) removes that automatic minimum. */
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr) !important;
    gap: 40px !important;
    align-items: start !important;
}
.woocommerce div.product .paradise-product-gallery,
.woocommerce div.product .woocommerce-product-gallery {
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-width: none !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    /* Not position:sticky: even at scroll position 0 (no scrolling at
       all), sticky's "stay at least 88px from viewport top" constraint
       pushed the gallery down out of alignment with the summary column
       beside it - a permanent gap, not just scroll-follow behavior. */
    position: static !important;
}
.woocommerce div.product .summary.entry-summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}
/* WooCommerce hooks related products, upsells, and Storefront's prev/next
   product nav onto 'woocommerce_after_single_product_summary' - they
   render as siblings of the gallery/summary, i.e. a 3rd/4th child of
   this same grid. With no explicit placement they auto-flowed into a
   single narrow column instead of spanning both, so "Mungkin kamu juga
   suka ini" ended up squeezed into (roughly) the summary column's width
   instead of running the full page width like the shop/category grid. */
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells,
.woocommerce div.product .storefront-product-pagination,
.woocommerce div.product .svrg-recently-viewed-section {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
}

/* Below ~1080px, stack full-width instead of squeezing both columns.
   (Was 900px - the qty-stepper+Add-to-Cart bar in the summary column
   can't wrap onto a second line by design, so once the 2-col layout's
   summary share got narrower than that bar's min content width, it
   overflowed the column instead of shrinking. Stacking earlier keeps
   the summary column full-width until there's always room for it.)
   Must reset grid-column back to auto here - the explicit column 1/2
   assignment above still applies inside a single-column grid otherwise,
   so the browser silently adds a 2nd column to satisfy it instead of
   actually stacking. */
@media (max-width: 1080px) {
    .woocommerce div.product {
        grid-template-columns: 1fr !important;
    }
    .woocommerce div.product .paradise-product-gallery,
    .woocommerce div.product .woocommerce-product-gallery,
    .woocommerce div.product .summary.entry-summary {
        grid-column: 1 !important;
    }
    .woocommerce div.product .paradise-product-gallery,
    .woocommerce div.product .woocommerce-product-gallery {
        grid-row: 1 !important;
        position: static !important;
    }
    .woocommerce div.product .summary.entry-summary {
        grid-row: 2 !important;
    }
}

/* ── Gallery grid: 2-column equal squares ── */
/* A single product photo has nowhere else to go in a fixed 2-column
   grid - it fills only the first cell, leaving the second cell blank
   and making the photo look tiny. Go full-width when there's only one. */
.paradise-gallery-grid:has(.paradise-gallery-item:only-child) {
    grid-template-columns: 1fr !important;
}
.paradise-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}
.paradise-gallery-item {
    display: block;
    aspect-ratio: 420 / 550; /* matches Cititex's product photo ratio */
    background: #F5F5F5;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    transition: opacity 0.15s ease;
}
.paradise-gallery-item:hover { opacity: 0.92; }
.paradise-gallery-item img,
.paradise-gallery-item--placeholder img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Counter badge + next arrow: hidden on desktop's 2-col grid, only
   used in the mobile one-slide-at-a-time carousel below. */
.paradise-gallery-counter,
.paradise-gallery-next {
    display: none;
}

/* ── Mobile: one photo per view, swipe/scroll-snap, like the
   reference storefront's "1/4" carousel instead of a stacked grid ── */
@media (max-width: 1080px) {
    /* Matches the desktop sticky rule's specificity
       (.woocommerce div.product .paradise-product-gallery) - a bare
       ".paradise-product-gallery { position: relative }" here loses to
       that !important rule regardless of media query, leaving this
       container position:sticky-but-not-actually-relative-positioned...
       except sticky elements ARE their own containing block too, so
       what actually happened was the *desktop* rule's position:sticky
       never got a chance to take hold with no scroll container sizing
       the same way - matching specificity here is the reliable fix. */
    .woocommerce div.product .paradise-product-gallery,
    .woocommerce div.product .woocommerce-product-gallery {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .paradise-gallery-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        border-radius: 12px !important;
        overflow-y: hidden;
    }
    .paradise-gallery-grid::-webkit-scrollbar { display: none; }
    .paradise-gallery-item {
        scroll-snap-align: start !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
    }
    .paradise-gallery-counter {
        display: block !important;
        position: absolute !important;
        z-index: 5 !important;
        left: 16px;
        bottom: 16px;
        background: rgba(17, 24, 39, 0.75) !important;
        color: #fff !important;
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        font-weight: 600;
        padding: 4px 12px;
        border-radius: 100px;
    }
    .paradise-gallery-next {
        display: flex !important;
        z-index: 5 !important;
        align-items: center;
        justify-content: center;
        position: absolute !important;
        left: calc(100% - 52px);
        /* Vertical centering is set inline by JS (initGalleryCarousel),
           not CSS - top:50%, and separately top:0/bottom:0+margin:auto,
           both silently failed to resolve against this container's auto
           height (it's sized by the photo, not a fixed value), leaving
           the element positioned outside the visible box every time.
           A plain pixel top computed from the actual rendered height
           sidesteps that percentage-resolution quirk entirely. */
        top: 50%;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: rgba(17, 24, 39, 0.55) !important;
        color: #fff;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
}

/* ── Product badge pills (POPULER, TURUN HARGA) ── */
.paradise-product-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.paradise-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 100px;
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.paradise-badge--populer {
    background: #DCFCE7;
    color: #166534;
    border: 1px solid #BBF7D0;
}
.paradise-badge--sale {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}

/* ── Product title ── */
.woocommerce div.product .product_title {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: clamp(20px, 2.2vw, 28px) !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.25 !important;
    margin: 0 0 8px !important;
}

/* ── Short description ── */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 14px !important;
    color: #6B7280 !important;
    line-height: 1.65 !important;
    margin-bottom: 12px !important;
}

/* ── Price row ── */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 4px !important;
}
.paradise-price-unit {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #9CA3AF;
    margin-left: 2px;
}
.paradise-detail-harga {
    display: block !important;
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #6B7280;
    margin-top: 2px;
}
.paradise-detail-harga a {
    color: #111827;
    font-weight: 600;
    text-decoration: underline;
}
/* Tighten the dead space WooCommerce reserves between the variations
   table and the add-to-cart area (the empty "selected variation info"
   alert box normally shows a price/description here once a full
   combination is picked - with nothing in it, it was just a gap). */
.woocommerce div.product .woocommerce-variation.single_variation {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
.woocommerce div.product table.variations {
    margin: 0 !important;
}
.woocommerce div.product form.variations_form {
    margin: 0 !important;
    padding: 0 !important;
}

.paradise-stock-location {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 6px 0;
}
.paradise-stock-chevron {
    color: #9CA3AF;
    margin-left: 2px;
}
.paradise-stock-location-main {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
}
.paradise-stock-location strong {
    color: #111827;
    font-weight: 700;
}
.paradise-stock-location-desc {
    margin: 4px 0 0;
    font-size: 12px;
    color: #9CA3AF;
    line-height: 1.5;
}

/* ── Variation swatches: color circles ── */
.woocommerce div.product .variations label,
.woocommerce div.product .variations td.label label {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    text-transform: none !important;
}
.woocommerce div.product .variations .value select {
    display: none !important; /* hidden; replaced by JS swatches */
}
/* The JS swatches container */
.svrg-variation-swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 6px 0 0 !important;
}
.svrg-var-swatch {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 14px !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: border-color 0.12s, background 0.12s !important;
}
/* Not !important: a Warna swatch sets its real colour via inline
   style (background:<hex> from JS) - an !important rule here would
   beat that plain inline style and always render white regardless. */
.svrg-var-swatch {
    background: #fff;
}
.svrg-var-swatch.is-selected,
.svrg-var-swatch:not(.is-disabled):hover {
    border-color: #111827 !important;
    color: #111827 !important;
    background: #F9FAFB !important;
}
/* Out-of-stock / impossible combination for the currently-selected
   other attributes (WooCommerce disables the underlying <option>) */
.svrg-var-swatch.is-disabled {
    color: #D1D5DB !important;
    border-color: #F3F4F6 !important;
    background: #fff !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
}
.svrg-var-swatch[data-type="color"].is-disabled {
    opacity: 0.3 !important;
}
/* Color swatch: circle with color bg - Warna only */
.svrg-var-swatch[data-type="color"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid #E5E7EB !important;
}
.svrg-var-swatch[data-type="color"].is-selected {
    border-color: #111827 !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827 !important;
}

/* Selected-value text after the attribute label, e.g. "Warna: Hitam" */
.svrg-attr-selected {
    font-weight: 400 !important;
    color: #6B7280 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ── Add to cart area ── */
.woocommerce div.product form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 8px 0 !important;
    flex-wrap: wrap !important;
}
/* Storefront's own woocommerce.css gives .product_meta a full 1em
   padding-top plus a border - cut it down along with the rest of the
   column so the collapsed accordion state doesn't trail off past the
   photo gallery's bottom edge with dead space. */
.woocommerce div.product .product_meta {
    padding-top: 8px !important;
    font-size: 13px !important;
}
/* Wrapper around the qty stepper + real button + decorative accent, so
   all three read as one fused bar and move/wrap together as a single
   unit inside the form.cart row (matches reference: no gaps between
   them, rounding only at the two outer ends). */
.paradise-cart-btn-group {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 220px !important;
    gap: 0 !important;
}
/* Storefront's own woocommerce.css floats .quantity and gives it a
   .875em margin-right - kill both so it sits flush against the button
   with no gap inside the fused bar. */
.woocommerce div.product form.cart .quantity {
    float: none !important;
    margin: 0 !important;
}
.svrg-qty-stepper {
    border-radius: 8px 0 0 8px;
}
.woocommerce div.product form.cart .button {
    flex: 1 !important;
    min-width: 160px !important;
    height: 52px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #111827 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 8px 8px 0 !important;
    overflow: hidden !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.woocommerce div.product form.cart .button:hover {
    background: #374151 !important;
}
/* The button's text content, wrapped by JS (initCartAccentMerge) so it
   can sit flex:1 + centered while the accent keeps a fixed width at the
   end - without this the accent (also flex:1 by default) would fight
   the text for space instead of reading as a fixed end-cap. */
.paradise-cart-btn-text {
    flex: 1;
    padding: 0 16px;
    text-align: center;
}
/* Decorative yellow accent - moved inside the button by JS so it's
   structurally part of the same clickable element instead of a
   separate span bolted on beside it. Rounding now lives on the button
   itself (overflow:hidden clips this corner); this stays square all
   around so it doesn't double up on radius at the seam. */
.paradise-cart-accent {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    background: #F5C518 !important;
    color: #111827 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
    transition: background 0.15s, color 0.15s !important;
}
/* Before a full variation is picked, WooCommerce disables the button -
   the generic ".woocommerce .button:disabled { opacity:.45 }" rule then
   fades the dark button to a washed-out translucent grey while the
   yellow accent stayed full-bright right next to it. Give the disabled
   state its own solid, deliberate look instead, and mute the accent to
   match so the whole fused bar reads as one coherent "not ready yet"
   state rather than two mismatched buttons. */
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
    opacity: 1 !important;
    background: #D1D5DB !important;
    color: #6B7280 !important;
    cursor: not-allowed !important;
}
.paradise-cart-btn-group:has(.single_add_to_cart_button:disabled) .paradise-cart-accent {
    background: #E5E7EB !important;
    color: #9CA3AF !important;
}

/* ── CTA cards (Pesanan Grosir + Mulai Desain Kustom) ── */
.paradise-cta-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 12px;
}
.paradise-cta-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    text-decoration: none !important;
    transition: border-color 0.15s, background 0.15s;
}
.paradise-cta-card:hover {
    border-color: #9CA3AF;
    background: #F3F4F6;
}
.paradise-cta-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: #374151;
}
.paradise-cta-card-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.paradise-cta-card-text strong {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}
.paradise-cta-card-text span {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #6B7280;
    line-height: 1.4;
}
.paradise-cta-card-arrow {
    flex-shrink: 0;
    color: #9CA3AF;
    transition: transform 0.15s, color 0.15s;
}
.paradise-cta-card:hover .paradise-cta-card-arrow {
    transform: translateX(3px);
    color: #374151;
}

/* ── Related products heading (Mungkin kamu juga suka ini) ── */
.woocommerce-page .related > h2,
.woocommerce .related > h2 {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 20px !important;
}
.woocommerce .related ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce .related ul.products > li {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ── Responsive: single product ── */
@media (max-width: 1080px) {
    .woocommerce div.product {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .woocommerce .related ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .paradise-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   PARADISE - HEADER NAV/HAMBURGER SWITCH POINT
   Placed at the very end of the file so it reliably wins over the
   earlier unconditional ".svrg-hdr-nav { display:flex !important }"
   rule (media queries don't add specificity - later source order
   is what decides ties between equally-important, equally-specific
   rules). The desktop nav (7 menu items + "Mulai Design Custom" +
   search/account/cart icons) needs roughly 1240px to fit without
   wrapping onto a second row; below that, switch to the hamburger
   drawer instead of letting the too-wide nav wrap awkwardly.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1240px) and (min-width: 769px) {
    .svrg-hdr-nav {
        display: none !important;
    }
    /* .svrg-hdr-nav normally has flex:1, acting as the spacer that
       pushes the search/account/cart/hamburger group to the right edge.
       With nav hidden at this breakpoint, that spacer disappears too -
       push the group right some other way instead. */
    .svrg-hdr-actions {
        margin-left: auto !important;
    }
    .svrg-hdr-hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        background: none;
        cursor: pointer;
        padding: 0;
        color: #1a1a1a;
    }
    .svrg-hdr-hamburger svg {
        width: 24px;
        height: 24px;
    }
}

/* ════════════════════════════════════════════════════════════════
   PARADISE - LOGIN PAGE (Cititex style, 2-column)
   woocommerce/myaccount/form-login.php
   ════════════════════════════════════════════════════════════════ */
.svrg-login-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: calc(100vh - var(--hdr-bottom, 108px));
    align-items: stretch;
}
.svrg-login-col {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 60px 60px;
}
.svrg-login-panel {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}
.svrg-login-title {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px;
}
.svrg-login-sub {
    font-size: 14px;
    line-height: 1.6;
    color: #6B7280;
    margin: 0 0 28px;
}
.svrg-login-phone-row {
    display: flex;
    align-items: center;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
}
.svrg-login-phone-code {
    flex-shrink: 0;
    padding: 0 16px;
    height: 52px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    border-right: 1px solid #E5E7EB;
    background: #F9FAFB;
}
.svrg-login-phone-input {
    flex: 1;
    height: 52px;
    border: none;
    padding: 0 16px;
    font-size: 14px;
    font-family: inherit;
    color: #111827;
    background: transparent;
    min-width: 0;
}
.svrg-login-phone-input:focus {
    outline: none;
}
.svrg-login-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    /* !important: the site-wide "button {background:#000}" rule would
       otherwise win over these (this class is defined earlier in the
       cascade than that blanket rule). */
    background: #1F2937 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-bottom: 4px;
}
.svrg-login-btn-primary:hover {
    background: #111827 !important;
}
.svrg-login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #9CA3AF;
    font-size: 12px;
    margin: 20px 0;
}
.svrg-login-divider::before,
.svrg-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E5E7EB;
}
.svrg-login-divider span {
    padding: 0 12px;
}
.svrg-login-btn-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    /* !important: same site-wide blanket button rule as above. Also
       covers the real <a> version of this class (svrg_google_button())
       once Google OAuth credentials are configured - same visual, just
       a real link instead of a placeholder <button>. */
    background: #fff !important;
    color: #111827 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-bottom: 10px;
}
.svrg-login-btn-alt:hover {
    background: #F9FAFB !important;
    border-color: #D1D5DB !important;
}
.svrg-login-footer {
    text-align: center;
    font-size: 13px;
    color: #6B7280;
    margin: 24px 0 0;
}
.svrg-login-footer a {
    color: #111827;
    font-weight: 600;
    text-decoration: underline;
}
.svrg-login-note {
    margin: 14px 0 0;
    padding: 10px 14px;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    font-size: 12.5px;
    color: #92400E;
    text-align: center;
}
.svrg-login-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none !important;
    border: none !important;
    padding: 0;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #6B7280 !important;
    cursor: pointer;
}
.svrg-login-back:hover {
    color: #111827 !important;
}
.svrg-login-field {
    margin: 0 0 14px;
}
.svrg-login-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.svrg-login-field input {
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
}
.svrg-login-rememberme {
    margin: 0 0 18px;
    font-size: 13px;
    color: #374151;
}
.svrg-login-form .woocommerce-LostPassword {
    text-align: center;
    margin: 14px 0 0;
    font-size: 13px;
}
.svrg-login-form .woocommerce-LostPassword a {
    color: #6B7280;
}
.svrg-login-photo {
    background-color: #E5E7EB;
    background-size: cover;
    background-position: center;
}

@media (max-width: 900px) {
    .svrg-login-page {
        grid-template-columns: 1fr;
    }
    .svrg-login-photo {
        display: none;
    }
    .svrg-login-col {
        padding: 40px 24px;
    }
}

/* "My account" page title - the custom 2-col login layout below it
   already has its own "Masuk"/"Daftar" headings, so the generic page
   title read as a redundant duplicate line above it. */
.woocommerce-account .entry-header {
    display: none;
}

/* Same duplicate-title issue on the Cart page: .svrg-cart-title already
   renders "Keranjang" inside the custom cart.php template, so the
   generic "Cart" page title above it is a redundant duplicate line. */
.woocommerce-cart .entry-header {
    display: none;
}



/* Paradise header: larger action icons, logo unchanged */
.svrg-hdr-actions {
    gap: 8px !important;
}

.svrg-hdr-icon {
    width: 52px !important;
    height: 52px !important;
}

.svrg-hdr-icon svg {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 2.2 !important;
}

.svrg-hdr-badge {
    top: 4px !important;
    right: 4px !important;
    min-width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
}

/* Paradise topbar: slightly larger language and social controls */
.svrg-topbar-inner {
    height: 42px !important;
    overflow: visible !important;
}

.svrg-topbar-socials {
    gap: 14px !important;
    height: 100% !important;
    align-items: center !important;
    overflow: visible !important;
    transform: translateY(-5px);
}

.svrg-topbar-icon {
    width: 24px !important;
    height: 24px !important;
    line-height: 0 !important;
    overflow: visible !important;
}

.svrg-topbar-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    overflow: visible !important;
}

.svrg-topbar-lang {
    height: 20px !important;
    padding-left: 16px !important;
}

.svrg-lang-btn {
    gap: 6px !important;
    font-size: 13px !important;
    min-height: 24px !important;
    transform: translateY(-5px);
}

.svrg-lang-btn svg {
    width: 12px !important;
    height: 12px !important;
}






/* ================================================================
   MERRYSBOOK REDESIGN OVERRIDES
   ================================================================ */
:root {
    --mbook-teal: #006160;
    --mbook-teal-dark: #004b4a;
    --mbook-gold: #c99842;
    --mbook-ink: #12243a;
    --mbook-border: #e6eaee;
    --mbook-cream: #fbf4e8;
}

body {
    background: #fff !important;
    color: var(--mbook-ink) !important;
}

body h1, body h2, body h3, body h4, body h5, body h6,
.svrg-slide-title, .svrg-section-title, .mbook-action-label {
    letter-spacing: 0 !important;
}

.site-header,
header.site-header {
    background: #fff !important;
    border-bottom: 1px solid rgba(18, 36, 58, 0.08) !important;
    box-shadow: 0 8px 26px rgba(18, 36, 58, 0.08) !important;
}

.site-header .col-full {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mbook-topbar {
    background: var(--mbook-teal) !important;
    color: #fff !important;
    font-size: 13px;
}

.mbook-topbar-inner {
    max-width: 1400px;
    height: 48px !important;
    margin: 0 auto;
    padding: 0 28px;
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
    align-items: center;
    gap: 20px;
}

.mbook-topbar-left,
.mbook-topbar-center,
.mbook-topbar-right,
.mbook-topbar-right a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    font-weight: 600;
}

.mbook-topbar-center {
    justify-content: center;
    opacity: 0.95;
}

.mbook-topbar-right {
    justify-content: flex-end;
}

.mbook-topbar svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.mbook-topbar-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
}

.mbook-topbar-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.36);
}

header.site-header .mbook-header-main {
    display: grid !important;
    grid-template-columns: minmax(300px, 360px) minmax(420px, 640px) minmax(240px, 1fr);
    align-items: center !important;
    gap: 28px;
    max-width: 1400px;
    min-height: 112px !important;
    height: auto !important;
    margin: 0 auto;
    padding: 20px 28px 14px !important;
    background: #fff !important;
}

.mbook-logo-wrap {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.mbook-logo-wrap .site-branding {
    display: flex !important;
    align-items: center;
    width: auto !important;
}

.mbook-logo-wrap .custom-logo-link img,
.mbook-logo-wrap .site-logo img {
    max-height: 74px !important;
    width: auto !important;
}

.mbook-logo-wrap .site-title {
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #3b241f !important;
    margin: 0 !important;
}

.mbook-logo-wrap .site-title a,
.mbook-logo-wrap .site-title a:visited {
    color: #3b241f !important;
}

.mbook-logo-wrap .site-description {
    display: block !important;
    margin-top: 4px !important;
    color: #8b6b5e !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.mbook-search-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 180px 58px;
    height: 56px;
    border: 1px solid var(--mbook-border);
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 22px rgba(18, 36, 58, 0.07);
}

.mbook-search-form input,
.mbook-search-form select {
    width: 100% !important;
    min-width: 0;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--mbook-ink) !important;
    font-size: 15px !important;
    font-weight: 600;
    padding: 0 20px !important;
    box-shadow: none !important;
}

.mbook-search-form input::placeholder {
    color: #8a94a6;
}

.mbook-search-form select {
    border-left: 1px solid var(--mbook-border) !important;
    color: #5b6473 !important;
    cursor: pointer;
}

.mbook-search-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--mbook-teal) !important;
    color: #fff !important;
    padding: 0 !important;
    cursor: pointer;
}

.mbook-search-form button:hover {
    background: var(--mbook-teal-dark) !important;
}

.mbook-search-form button svg {
    width: 28px;
    height: 28px;
}

.mbook-header-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 26px !important;
}

.mbook-action,
.svrg-hdr-icon.mbook-action {
    width: auto !important;
    height: auto !important;
    min-width: 48px;
    padding: 0 !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--mbook-ink) !important;
    background: transparent !important;
    border: 0 !important;
    position: relative;
}

.mbook-action svg,
.svrg-hdr-icon.mbook-action svg {
    width: 31px !important;
    height: 31px !important;
    stroke-width: 2 !important;
}

.mbook-action-label {
    display: block;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    color: #111827;
}

.mbook-cart-icon-wrap {
    position: relative;
    display: inline-flex;
}

/* Cart count badge, matching the wishlist count badge's look
   (.svrg-wishlist-count) - the header's actual cart icon markup
   (mbook_cart_icon_link_html()) renders this class, but it never had its
   own styling, so it was falling back to plain inline text. */
.svrg-cart-count {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #006160;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    z-index: 5;
}

.svrg-hdr-badge {
    top: -8px !important;
    right: -9px !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    background: var(--mbook-teal) !important;
    color: #fff !important;
    border: 2px solid #fff;
}

.mbook-main-nav {
    display: flex !important;
    justify-content: flex-start !important;
    max-width: 1400px;
    height: 72px !important;
    margin: 0 auto;
    padding: 0 28px !important;
    border-top: 1px solid rgba(18, 36, 58, 0.08);
    background: #fff;
}

.mbook-nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: clamp(28px, 5vw, 86px) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mbook-nav-menu > li > a {
    height: 72px !important;
    padding: 0 6px !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative;
}

.mbook-nav-menu > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    height: 4px;
    border-radius: 999px;
    background: transparent;
}

.mbook-nav-menu > li > a:hover,
.mbook-nav-menu > li.current-menu-item > a {
    color: var(--mbook-teal) !important;
    background: transparent !important;
}

.mbook-nav-menu > li > a:hover::after,
.mbook-nav-menu > li.current-menu-item > a::after {
    background: var(--mbook-teal);
}

#svrg-homepage {
    background: #fff !important;
    padding-top: 0 !important;
}

.svrg-hero-slider {
    max-width: 1368px !important;
    height: 532px !important;
    min-height: 0 !important;
    margin: 16px auto 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: var(--mbook-cream) !important;
    box-shadow: none !important;
}

.svrg-slides-wrap,
.svrg-slide {
    height: 100% !important;
}

.svrg-slide {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 520px);
    grid-template-rows: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 50px 68px 34px !important;
    background-color: #fff7e8 !important;
    color: var(--mbook-ink) !important;
}

.svrg-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(45deg, transparent 45%, rgba(201, 152, 66, 0.85) 45% 55%, transparent 55%), linear-gradient(-35deg, transparent 45%, rgba(201, 152, 66, 0.65) 45% 55%, transparent 55%);
    background-size: 132px 126px, 178px 160px;
    opacity: 0.42;
    pointer-events: none;
}

.svrg-slide > * {
    position: relative;
    z-index: 1;
}

.svrg-slide-badge {
    grid-column: 1;
    align-self: end;
    position: static !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mbook-gold) !important;
    transform: none !important;
    display: block !important;
    margin: 0 0 8px !important;
}

.svrg-slide-badge span {
    display: block !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    color: var(--mbook-gold) !important;
}

.svrg-slide-body {
    grid-column: 1;
    align-self: start;
    margin: 0 !important;
    max-width: 540px !important;
    text-align: left !important;
}

.svrg-slide-title {
    margin: 0 0 18px !important;
    color: var(--mbook-ink) !important;
    font-size: clamp(64px, 8vw, 124px) !important;
    line-height: 0.9 !important;
    font-weight: 900 !important;
    text-transform: uppercase;
}

.svrg-slide-title::first-line {
    font-size: 0.62em;
}

.svrg-slide-sub {
    max-width: 520px !important;
    margin: 0 !important;
    color: #25364a !important;
    font-size: 20px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
    text-transform: none !important;
}

.svrg-slide-foot {
    grid-column: 1;
    align-self: end;
    display: flex !important;
    align-items: center !important;
    gap: 20px;
    position: static !important;
    margin: 8px 0 0 !important;
}

.svrg-slide-cat {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 28px;
    background: var(--mbook-teal) !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    border-radius: 0 !important;
}

.svrg-slide-btn {
    min-height: 56px !important;
    padding: 0 34px !important;
    border-radius: 6px !important;
    background: var(--mbook-teal) !important;
    border: 0 !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
}

.svrg-slide-btn::after {
    content: '->';
    font-size: 22px;
    line-height: 1;
}

.mbook-hero-art {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: stretch;
    min-height: 330px;
    position: relative;
}

.mbook-book-stack {
    position: absolute;
    right: 0;
    top: 34px;
    width: min(100%, 470px);
    transform: perspective(900px) rotateY(-8deg);
}

.mbook-book {
    display: flex;
    align-items: center;
    width: 100%;
    height: 58px;
    margin: 0 0 7px auto;
    padding: 0 28px;
    border-radius: 3px 10px 10px 3px;
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    box-shadow: 22px 8px 0 #f8f4ec, 0 14px 22px rgba(18, 36, 58, 0.16);
    border-right: 10px solid rgba(255, 255, 255, 0.74);
}

.mbook-book-1 { width: 92%; background: #101820; }
.mbook-book-2 { width: 98%; background: #12385f; }
.mbook-book-3 { width: 88%; background: #006160; }
.mbook-book-4 { width: 94%; background: #7b1e1e; }
.mbook-book-5 { width: 82%; background: #f7f7f4; color: #1f2937; }

.mbook-stethoscope {
    position: absolute;
    right: 10px;
    bottom: 22px;
    width: 160px;
    height: 82px;
    border: 8px solid #17212b;
    border-top: 0;
    border-left-color: transparent;
    border-radius: 0 0 90px 90px;
    opacity: 0.9;
}

.mbook-stethoscope::before {
    content: '';
    position: absolute;
    right: -22px;
    bottom: -18px;
    width: 46px;
    height: 46px;
    border: 8px solid #cfd5da;
    border-radius: 50%;
    background: #fff;
}

.svrg-hero-arrow {
    background: #fff !important;
    color: var(--mbook-teal) !important;
    border: 1px solid rgba(18, 36, 58, 0.08) !important;
    box-shadow: 0 8px 18px rgba(18, 36, 58, 0.12) !important;
}

.svrg-slider-dots {
    bottom: 18px !important;
}

.svrg-dot {
    width: 13px !important;
    height: 13px !important;
    background: #d2d6d9 !important;
}

.svrg-dot.is-active {
    background: var(--mbook-teal) !important;
}

.mbook-trust-strip {
    max-width: 1368px;
    margin: 0 auto 36px;
    padding: 28px 36px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: #fff;
    border-bottom: 1px solid rgba(18, 36, 58, 0.08);
}

.mbook-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 62px;
    color: var(--mbook-teal);
    border-right: 1px solid var(--mbook-border);
}

.mbook-trust-item:last-child {
    border-right: 0;
}

.mbook-trust-item svg {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
}

.mbook-trust-item span {
    display: grid;
    gap: 4px;
}

.mbook-trust-item strong {
    color: var(--mbook-ink);
    font-size: 15px;
    line-height: 1.1;
}

.mbook-trust-item small {
    color: #49576a;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 1180px) {
    header.site-header .mbook-header-main {
        grid-template-columns: 220px minmax(320px, 1fr) auto;
        gap: 18px;
    }
    .mbook-header-actions { gap: 16px !important; }
    .mbook-action-label { font-size: 12px; }
    .mbook-main-nav { height: 62px !important; }
    .mbook-nav-menu { gap: 28px !important; }
    .mbook-nav-menu > li > a { height: 62px !important; }
}

@media (max-width: 900px) {
    .mbook-topbar-inner {
        grid-template-columns: 1fr;
        height: auto !important;
        min-height: 42px;
        padding: 10px 18px;
        text-align: center;
    }
    .mbook-topbar-left,
    .mbook-topbar-right { display: none; }
    header.site-header .mbook-header-main {
        grid-template-columns: 1fr auto;
        min-height: auto !important;
        padding: 14px 18px !important;
    }
    .mbook-search-form {
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: 1fr 52px;
        height: 50px;
        order: 3;
    }
    .mbook-search-form select { display: none; }
    .mbook-header-actions .mbook-action:not(.svrg-hdr-hamburger) { display: none !important; }
    .mbook-main-nav { display: none !important; }
    .svrg-hero-slider {
        height: auto !important;
        min-height: 560px !important;
        margin: 10px 14px 0 !important;
    }
    .svrg-slide {
        position: relative !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto;
        padding: 34px 24px 28px !important;
    }
    .mbook-hero-art {
        grid-column: 1;
        grid-row: auto;
        min-height: 240px;
    }
    .svrg-slide-title { font-size: clamp(56px, 18vw, 86px) !important; }
    .svrg-slide-sub { font-size: 16px !important; }
    .svrg-slide-foot { flex-wrap: wrap; }
    .mbook-trust-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 14px 28px;
        padding: 16px;
    }
    .mbook-trust-item {
        justify-content: flex-start;
        border-right: 0;
        border-bottom: 1px solid var(--mbook-border);
        padding: 12px 0;
    }
    .mbook-trust-item:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 560px) {
    .mbook-logo-wrap .custom-logo-link img,
    .mbook-logo-wrap .site-logo img { max-height: 54px !important; }
    .mbook-logo-wrap .site-title { font-size: 26px !important; }
    .mbook-trust-strip { grid-template-columns: 1fr; }
    .mbook-trust-item,
    .mbook-trust-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--mbook-border); }
    .mbook-trust-item:last-child { border-bottom: 0; }
    .mbook-book { height: 48px; font-size: 14px; }
}
.svrg-slide-title { white-space: pre-line !important; }

/* ================================================================
   MERRYSBOOK POLISH 2026-07-14
   ================================================================ */
.mbook-topbar,
.mbook-topbar * {
    transform: none !important;
}

/* Compact category cards matching the Merrysbook reference. */
@media (min-width: 1201px) {
    #svrg-categories {
        padding-top: 28px !important;
    }

    #svrg-categories .svrg-cat-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }

    #svrg-categories .svrg-cat-tile {
        min-height: 158px !important;
        aspect-ratio: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        border-radius: 8px !important;
        background: #fff !important;
        box-shadow: 0 3px 14px rgba(18, 36, 58, 0.08) !important;
    }

    #svrg-categories .svrg-cat-tile-img {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 104px !important;
        height: 104px !important;
        background-size: 58px !important;
        background-position: center !important;
    }

    #svrg-categories .svrg-cat-tile-label {
        position: static !important;
        min-height: 54px !important;
        padding: 0 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        background: #fff !important;
        border-top: 0 !important;
        color: var(--mbook-ink) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-align: center !important;
    }

    #svrg-categories .svrg-cat-tile-label svg {
        display: none !important;
    }

    #svrg-categories .svrg-cat-all-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--mbook-teal) !important;
        background-image: none !important;
    }

    #svrg-categories .svrg-cat-all-icon svg {
        width: 58px !important;
        height: 58px !important;
    }
}

@media (min-width: 601px) and (max-width: 1200px) {
    #svrg-categories .svrg-cat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    #svrg-categories .svrg-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    #svrg-categories .svrg-cat-tile {
        min-height: 136px !important;
        aspect-ratio: auto !important;
    }

    #svrg-categories .svrg-cat-tile-img {
        height: 86px !important;
        flex-basis: 86px !important;
        background-size: 48px !important;
    }

    #svrg-categories .svrg-cat-tile-label {
        min-height: 48px !important;
        font-size: 12px !important;
    }
}

.mbook-topbar {
    height: 42px !important;
    overflow: hidden !important;
}

.mbook-topbar-inner {
    height: 42px !important;
    min-height: 42px !important;
    line-height: 1.2 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}

.mbook-logo-wrap .custom-logo-link img,
.mbook-logo-wrap .site-logo img,
.mbook-logo-wrap img.custom-logo {
    width: 168px !important;
    max-width: 168px !important;
    max-height: none !important;
    height: auto !important;
}

@media (min-width: 901px) {
    .mbook-header-actions .svrg-hdr-hamburger {
        display: none !important;
    }
}

/* Desktop spacing matched to the supplied Merrysbook reference. */
@media (min-width: 1201px) {
    .mbook-main-nav {
        padding-left: 112px !important;
        padding-right: 0 !important;
    }

    .mbook-nav-menu {
        gap: clamp(92px, 7vw, 140px) !important;
    }

    .mbook-nav-menu > li > a {
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-size: 16px !important;
    }

    .svrg-hero-slider {
        margin-top: 10px !important;
    }
}


.svrg-hero-slider {
    height: 540px !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #fbf2e4 !important;
}

.svrg-slide {
    grid-template-columns: minmax(390px, 0.92fr) minmax(430px, 1fr) !important;
    grid-template-rows: auto auto 1fr !important;
    align-content: center !important;
    padding: 42px 62px 48px !important;
    overflow: hidden !important;
    background-color: #fff8ec !important;
}

.svrg-slide::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.svrg-slide::before {
    background-image: linear-gradient(45deg, transparent 46%, rgba(201, 152, 66, 0.38) 46% 54%, transparent 54%) !important;
    background-size: 156px 156px !important;
    opacity: 0.38 !important;
}

.svrg-slide-badge,
.svrg-slide-badge::before,
.svrg-slide-badge::after {
    clip-path: none !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.svrg-slide-badge::before,
.svrg-slide-badge::after {
    content: none !important;
    display: none !important;
}

.svrg-slide-badge {
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
    align-self: end !important;
}

.svrg-slide-badge span,
.svrg-slide-badge .svrg-badge-line1 {
    color: var(--mbook-gold) !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.08em !important;
    text-shadow: none !important;
}

.svrg-slide-title {
    font-size: clamp(72px, 7.2vw, 112px) !important;
    line-height: 0.92 !important;
    margin-bottom: 22px !important;
    text-shadow: none !important;
}

.svrg-slide-sub {
    max-width: 430px !important;
    font-size: 18px !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-shadow: none !important;
}

.svrg-slide-foot {
    align-self: start !important;
    margin-top: 26px !important;
    z-index: 3 !important;
    flex-wrap: wrap !important;
}

.svrg-slide-cat {
    min-height: 38px !important;
    padding: 0 24px !important;
    font-size: 20px !important;
}

.svrg-slide-btn {
    min-height: 58px !important;
    padding: 0 34px !important;
    box-shadow: 0 10px 22px rgba(0, 97, 96, 0.16) !important;
}

.mbook-hero-art {
    min-height: 385px !important;
    align-self: center !important;
}

.mbook-book-stack {
    top: 44px !important;
    right: 12px !important;
    width: min(100%, 500px) !important;
}

.mbook-book {
    height: 58px !important;
    margin-bottom: 8px !important;
    box-shadow: 18px 7px 0 #f8f4ec, 0 14px 22px rgba(18, 36, 58, 0.14) !important;
}

.mbook-trust-strip {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#svrg-categories {
    padding-top: 0 !important;
}

.svrg-tile-grid,
.svrg-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.svrg-tile,
.svrg-cat-tile {
    min-height: 178px !important;
    aspect-ratio: 4 / 3 !important;
    background: linear-gradient(135deg, #f7f3ea, #ffffff) !important;
    border: 1px solid var(--mbook-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.svrg-tile:not([style])::before,
.svrg-cat-tile-img:empty::before {
    content: '' !important;
    position: absolute !important;
    inset: 36px !important;
    background: url('../images/merrysbook-logo.png') center / contain no-repeat !important;
    opacity: 0.22 !important;
}

.svrg-cat-tile-img {
    position: absolute !important;
    inset: 0 !important;
    background-color: transparent !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.svrg-cat-tile-label,
.svrg-tile-footer {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--mbook-ink) !important;
    border-top: 1px solid var(--mbook-border) !important;
}

@media (max-width: 900px) {
    .mbook-logo-wrap .custom-logo-link img,
    .mbook-logo-wrap .site-logo img,
    .mbook-logo-wrap img.custom-logo {
        width: 120px !important;
        max-width: 120px !important;
    }
    .mbook-header-actions .svrg-hdr-hamburger {
        display: inline-flex !important;
    }
    .svrg-slide {
        padding: 32px 24px 38px !important;
    }
    .svrg-tile-grid,
    .svrg-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .svrg-tile-grid,
    .svrg-cat-grid {
        grid-template-columns: 1fr !important;
    }
}
/* ================================================================
   MERRYSBOOK COMPACT HEADER 2026-07-14
   ================================================================ */
.mbook-topbar {
    height: 32px !important;
    min-height: 32px !important;
}

.mbook-topbar-inner {
    height: 32px !important;
    min-height: 32px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    font-size: 12px !important;
}

.mbook-topbar svg {
    width: 14px !important;
    height: 14px !important;
}

header.site-header .mbook-header-main {
    min-height: 78px !important;
    height: 78px !important;
    padding: 10px 28px 8px !important;
    gap: 22px !important;
}

.mbook-logo-wrap .custom-logo-link img,
.mbook-logo-wrap .site-logo img,
.mbook-logo-wrap img.custom-logo {
    width: 112px !important;
    max-width: 112px !important;
    max-height: 58px !important;
}

.mbook-search-form {
    height: 46px !important;
    grid-template-columns: minmax(180px, 1fr) 170px 52px !important;
}

.mbook-search-form input,
.mbook-search-form select {
    font-size: 14px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.mbook-search-form button svg {
    width: 24px !important;
    height: 24px !important;
}

.mbook-header-actions {
    gap: 20px !important;
}

.mbook-action svg,
.svrg-hdr-icon.mbook-action svg {
    width: 26px !important;
    height: 26px !important;
}

.mbook-action-label {
    font-size: 12px !important;
}

.mbook-main-nav {
    height: 50px !important;
    min-height: 50px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}

.mbook-nav-menu {
    gap: clamp(26px, 4.2vw, 70px) !important;
}

.mbook-nav-menu > li > a {
    height: 50px !important;
    font-size: 14px !important;
}

.mbook-nav-menu > li > a::after {
    bottom: 8px !important;
    height: 3px !important;
}

.svrg-hero-slider {
    margin-top: 10px !important;
}

@media (max-width: 900px) {
    .mbook-topbar,
    .mbook-topbar-inner {
        height: 34px !important;
        min-height: 34px !important;
    }

    header.site-header .mbook-header-main {
        height: auto !important;
        min-height: 64px !important;
        padding: 10px 18px !important;
    }

    .mbook-logo-wrap .custom-logo-link img,
    .mbook-logo-wrap .site-logo img,
    .mbook-logo-wrap img.custom-logo {
        width: 96px !important;
        max-width: 96px !important;
    }

    .mbook-search-form {
        height: 44px !important;
    }
}
/* ================================================================
   MERRYSBOOK HEADER BANNER ALIGNMENT
   ================================================================ */
@media (min-width: 1201px) {
    .mbook-topbar-inner,
    header.site-header .mbook-header-main,
    .mbook-main-nav,
    .svrg-hero-slider,
    .mbook-trust-strip {
        max-width: 1368px !important;
        width: calc(100% - 88px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    header.site-header .mbook-header-main,
    .mbook-main-nav,
    .mbook-topbar-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 1200px) {
    .mbook-topbar-inner,
    header.site-header .mbook-header-main,
    .mbook-main-nav,
    .svrg-hero-slider,
    .mbook-trust-strip {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* ================================================================
   MERRYSBOOK HEADER EDGE ALIGNMENT FINAL
   ================================================================ */
@media (min-width: 1201px) {
    header.site-header .mbook-header-main {
        grid-template-columns: minmax(300px, 360px) minmax(420px, 640px) minmax(260px, 1fr) !important;
        justify-content: stretch !important;
    }

    .mbook-logo-wrap {
        justify-self: start !important;
    }

    .mbook-header-actions {
        justify-self: end !important;
    }
}

@media (min-width: 901px) and (max-width: 1200px) {
    header.site-header .mbook-header-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .mbook-logo-wrap {
        justify-self: start !important;
    }

    .mbook-header-actions {
        justify-self: end !important;
    }
}

/* Wider Merrysbook logo, matching the reference header proportion. */
@media (min-width: 1201px) {
    .mbook-logo-wrap .custom-logo-link img,
    .mbook-logo-wrap .site-logo img,
    .mbook-logo-wrap img.custom-logo {
        width: 330px !important;
        max-width: 330px !important;
        max-height: 78px !important;
    }
}
/* Final small logo enlargement requested after visual review. */
@media (min-width: 901px) {
    header.site-header .mbook-header-main .mbook-logo-wrap .custom-logo-link img.custom-logo,
    header.site-header .mbook-header-main .mbook-logo-wrap img.custom-logo {
        width: 330px !important;
        max-width: 330px !important;
        max-height: 78px !important;
    }
}
/* Final visual size for the square Merrysbook logo in the compact header. */
@media (min-width: 901px) {
    header.site-header .mbook-header-main .mbook-logo-wrap {
        overflow: visible !important;
    }

    header.site-header .mbook-header-main .mbook-logo-wrap .custom-logo-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 124px !important;
        height: 78px !important;
        overflow: visible !important;
    }

    header.site-header .mbook-header-main .mbook-logo-wrap .custom-logo-link img.custom-logo,
    header.site-header .mbook-header-main .mbook-logo-wrap img.custom-logo {
        width: 112px !important;
        max-width: 112px !important;
        height: auto !important;
        max-height: none !important;
        transform: translateY(6px) scale(1.22) !important;
        transform-origin: left center !important;
    }
}

/* Photo-led Merrysbook hero. Copy and destination remain Customizer controlled. */
.svrg-slide {
    background-color: #fbf2e4 !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    grid-template-columns: minmax(390px, 0.9fr) minmax(430px, 1.1fr) !important;
}

.svrg-slide::before {
    display: none !important;
}

.mbook-hero-art {
    display: none !important;
}

/* Recompose the supplied square logo into the horizontal storefront lockup. */
.mbook-horizontal-logo {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    width: 310px;
    color: #4b3028 !important;
    text-decoration: none !important;
}

.mbook-horizontal-logo-icon {
    display: block;
    width: 118px;
    height: 76px;
    background-image: var(--mbook-logo-source);
    background-repeat: no-repeat;
    background-size: 220px 220px;
    background-position: center -40px;
}

.mbook-horizontal-logo-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.mbook-horizontal-logo-copy strong {
    color: #4b3028;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 31px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0 !important;
}

.mbook-horizontal-logo-copy small {
    color: #a07d68;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em !important;
    line-height: 1;
}

/* Horizontal uploads use the supplied file without cropping. */
.mbook-horizontal-logo.mbook-logo-layout-original {
    display: block !important;
    width: 310px;
    height: 82px;
    background-image: var(--mbook-logo-source);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.mbook-horizontal-logo.mbook-logo-layout-original > span {
    display: none !important;
}

/* Tighten the menu's vertical rhythm below the logo/search row. */
@media (min-width: 901px) {
    .mbook-nav-menu {
        transform: translateY(-8px);
    }

    header.site-header .mbook-header-main {
        grid-template-columns: minmax(300px, 360px) minmax(420px, 1fr) max-content !important;
        column-gap: 42px !important;
        justify-content: stretch !important;
    }

    .mbook-search-form,
    .mbook-header-actions {
        align-self: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .mbook-header-actions {
        justify-self: start !important;
    }
}

/* Final navigation scale, spacing, and compact active state. */
.mbook-topbar-left,
.mbook-topbar-right > span,
.mbook-topbar-right > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mbook-topbar-right > a {
    text-decoration: none !important;
}

.mbook-topbar-right > a:hover,
.mbook-topbar-right > a:focus-visible {
    color: #fff !important;
    opacity: 0.82;
}

.mbook-topbar-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
}

/* Keep the first banner close to the navigation row. */
#content.site-content,
#content.site-content > .col-full,
#svrg-homepage {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.svrg-hero-slider {
    margin-top: 10px !important;
}

/* The topbar scrolls away; the main header remains sticky below it. */
.mbook-topbar {
    position: relative !important;
    z-index: 1 !important;
}

/* Topbar starts inside the sticky header, then collapses after scrolling. */
header.site-header,
.site-header {
    top: 0 !important;
}

.admin-bar header.site-header,
.admin-bar .site-header {
    top: 32px !important;
}

header.site-header.mbook-topbar-scrolled .mbook-topbar {
    display: none !important;
}

@media screen and (max-width: 782px) {
    .admin-bar header.site-header,
    .admin-bar .site-header {
        top: 46px !important;
    }
}

header.site-header,
.site-header {
    position: sticky !important;
    top: 40px !important;
    z-index: 1000 !important;
}

.admin-bar header.site-header,
.admin-bar .site-header {
    top: 72px !important;
}

@media screen and (max-width: 782px) {
    header.site-header,
    .site-header {
        top: 40px !important;
    }

    .admin-bar header.site-header,
    .admin-bar .site-header {
        top: 86px !important;
    }
}

@media (min-width: 1201px) {
    .mbook-main-nav {
        padding-left: 112px !important;
        padding-right: 0 !important;
    }

    .mbook-nav-menu {
        gap: clamp(92px, 7vw, 140px) !important;
        transform: translateY(-4px) !important;
    }

    .mbook-nav-menu > li > a {
        height: 60px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-size: 17px !important;
        line-height: 1 !important;
    }

    .mbook-nav-menu > li > a::before,
    .mbook-nav-menu > li::after {
        display: none !important;
    }

    .mbook-nav-menu > li > a::after {
        bottom: 5px !important;
        height: 3px !important;
        border-radius: 2px !important;
    }

    .mbook-nav-menu > li > a,
    .mbook-nav-menu > li.current-menu-item > a,
    .mbook-nav-menu > li.current_page_item > a {
        border-bottom: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }
}

@media (max-width: 900px) {
    .mbook-horizontal-logo {
        grid-template-columns: 80px minmax(0, 1fr);
        column-gap: 6px;
        width: 210px;
    }

    .mbook-horizontal-logo-icon {
        width: 80px;
        height: 54px;
        background-size: 150px 150px;
        background-position: center -27px;
    }

    .mbook-horizontal-logo-copy strong { font-size: 22px; }
    .mbook-horizontal-logo-copy small { font-size: 7px; }
}

/* Mobile header: keep the logo and menu control only. */
@media (max-width: 900px) {
    header.site-header .mbook-topbar,
    header.site-header .mbook-search-form {
        display: none !important;
        visibility: hidden !important;
    }

    header.site-header .mbook-header-main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        min-height: 74px !important;
        height: 74px !important;
        padding: 8px 16px !important;
        column-gap: 12px !important;
    }

    header.site-header .mbook-header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        min-width: 44px !important;
    }

    header.site-header .mbook-header-actions .mbook-action:not(.svrg-hdr-hamburger),
    header.site-header .mbook-header-actions .svrg-hdr-cart {
        display: none !important;
    }

    header.site-header .mbook-header-actions .svrg-hdr-hamburger {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        padding: 8px !important;
        border: 1px solid #d7e2e2 !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        color: #006f6b !important;
        box-shadow: 0 2px 8px rgba(0, 70, 70, 0.12) !important;
    }

    header.site-header .mbook-header-actions .svrg-hdr-hamburger svg {
        display: block !important;
        width: 25px !important;
        height: 25px !important;
        stroke: #006f6b !important;
    }

    header.site-header .mbook-main-nav {
        display: none !important;
    }
}

/* Brand showcase image frame: full image visible, no cover-cropping. */
.svrg-brand-showcase .svrg-bc-img-wrap {
    aspect-ratio: 16 / 7 !important;
    height: auto !important;
    background: #f7f7f5 !important;
}

.svrg-brand-showcase .svrg-bc-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

@media (max-width: 768px) {
    .svrg-brand-showcase .svrg-bc-img-wrap,
    .svrg-bc-count-3 .svrg-bc-card:first-child .svrg-bc-img-wrap {
        aspect-ratio: 16 / 9 !important;
    }
}

/* Mobile hero: show the complete landscape banner below the compact header. */
@media (max-width: 900px) {
    .svrg-hero-slider {
        width: calc(100% - 24px) !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 7 !important;
        margin: 4px auto 0 !important;
        border-radius: 8px !important;
    }

    .svrg-slide,
    .svrg-slide.is-active {
        inset: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        background-size: contain !important;
        background-position: center center !important;
        background-color: #fbf2e4 !important;
    }

    .svrg-slide::after {
        display: none !important;
    }

    .svrg-slide-body,
    .svrg-slide-badge,
    .svrg-slide-foot,
    .mbook-hero-art {
        display: none !important;
    }

    .svrg-hero-arrow {
        width: 34px !important;
        height: 34px !important;
    }
}

/* Merry''s Book footer palette - Project 16 */
.svrg-footer,
.site-footer,
footer.site-footer {
    background-color: #005b5b !important;
    color: rgba(255, 255, 255, 0.88) !important;
}
.svrg-footer a,
.site-footer a,
footer.site-footer a,
.svrg-footer .svrg-footer-heading,
.svrg-footer .svrg-footer-logo-text,
.site-footer .widget-title,
footer.site-footer .widget-title {
    color: #ffffff !important;
}
.svrg-footer a:hover,
.site-footer a:hover,
footer.site-footer a:hover {
    color: #d7ffff !important;
}
.svrg-footer-tagline,
.svrg-footer-card-desc {
    color: rgba(255, 255, 255, 0.82) !important;
}
.svrg-footer-bottom {
    background-color: #005b5b !important;
    border-top-color: rgba(255, 255, 255, 0.18) !important;
}

/* Payment logos: one horizontal row - Project 16 */
.svrg-footer-payments {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
}
.svrg-footer-payments > span {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px 4px !important;
    box-sizing: border-box !important;
}
.svrg-footer-payments img {
    width: 100% !important;
    max-width: 100% !important;
    height: 22px !important;
    object-fit: contain !important;
}

/* Footer reference alignment - Project 16 */
@media (min-width: 1200px) {
    .svrg-footer-payments {
        width: 500px !important;
        max-width: 500px !important;
        transform: translateX(-430px) !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
    .svrg-footer-payments > span {
        flex: 0 0 112px !important;
        width: 112px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 3px 7px !important;
    }
    .svrg-footer-payments img {
        height: 30px !important;
        width: auto !important;
        max-width: 104px !important;
    }
}

.svrg-footer-copy {
    color: rgba(255, 255, 255, 0.72) !important;
}

@media (min-width: 901px) and (max-width: 1199px) {
    .svrg-footer-payments {
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }
    .svrg-footer-payments > span {
        flex: 1 1 0 !important;
        width: auto !important;
    }
}

@media (max-width: 900px) {
    .svrg-footer-payments {
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }
    .svrg-footer-payments > span {
        flex: 1 1 0 !important;
        width: auto !important;
    }
}





/* Payment row clearance - Project 16 */
@media (min-width: 1200px) {
    .svrg-footer-payments {
        margin-top: 48px !important;
    }
}

/* Footer logo and payment sizing - Project 16 */
@media (min-width: 1200px) {
    .svrg-footer .svrg-footer-logo {
        width: 285px !important;
        max-width: 285px !important;
        height: auto !important;
    }
    .svrg-footer-payments {
        margin-top: 88px !important;
        align-items: center !important;
    }
    .svrg-footer-payments > span {
        flex: 0 0 112px !important;
        width: 112px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 3px 6px !important;
        box-sizing: border-box !important;
    }
    .svrg-footer-payments img {
        width: 100% !important;
        max-width: 100% !important;
        height: 28px !important;
        object-fit: contain !important;
    }
}

/* Footer final spacing alignment - Project 16 */
@media (min-width: 1200px) {
    .svrg-footer .svrg-footer-logo {
        width: auto !important;
        max-width: none !important;
        height: 72px !important;
        object-fit: contain !important;
    }
    .svrg-footer-payments {
        transform: translateX(-350px) !important;
        margin-top: 145px !important;
    }
}

/* Footer social icon cleanup - Project 16 */
.svrg-footer-social-link {
    font-size: 0 !important;
    width: 32px !important;
    height: 32px !important;
}
.svrg-footer-social-link::before {
    display: block;
    color: currentColor;
    font-size: 22px;
    line-height: 1;
}
.svrg-footer-social-link.social-instagram::before { content: '◎'; }
.svrg-footer-social-link.social-facebook::before { content: 'f'; font-weight: 700; }
.svrg-footer-social-link.social-youtube::before { content: '▶'; font-size: 17px; }

/* Inline social SVG sizing - Project 16 */
.svrg-footer-social-link::before { display: none !important; }
.svrg-footer-social-link svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

/* Mobile catalog: keep three cards in viewport - Project 16 */
@media (max-width: 900px) {
    .svrg-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .svrg-catalog-grid .svrg-cat-tile {
        min-width: 0 !important;
        width: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    .svrg-catalog-grid .svrg-cat-tile-name {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 10px !important;
    }
}

/* Mobile catalog card collision fix - Project 16 */
@media (max-width: 900px) {
    .svrg-catalog-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        gap: 5px !important;
        overflow: hidden !important;
    }
    .svrg-catalog-grid > .svrg-cat-tile {
        position: relative !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .svrg-catalog-grid > .svrg-cat-tile * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Tablet header: keep cart fully visible - Project 16 */
@media (min-width: 769px) and (max-width: 1199px) {
    header.site-header .mbook-header-main {
        grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) minmax(250px, 286px) !important;
        column-gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    header.site-header .mbook-logo-wrap,
    header.site-header .mbook-search-form,
    header.site-header .mbook-header-actions {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    header.site-header .mbook-logo-wrap .custom-logo-link img,
    header.site-header .mbook-logo-wrap img.custom-logo {
        width: 220px !important;
        max-width: 100% !important;
        height: auto !important;
    }
    header.site-header .mbook-search-form {
        width: 100% !important;
        overflow: hidden !important;
    }
    header.site-header .mbook-search-form input,
    header.site-header .mbook-search-form select {
        min-width: 0 !important;
    }
    header.site-header .mbook-header-actions {
        display: flex !important;
        justify-self: end !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 2px !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }
    header.site-header .mbook-header-actions .mbook-action:not(.svrg-hdr-hamburger) {
        flex: 0 0 78px !important;
        width: 78px !important;
        min-width: 78px !important;
        white-space: nowrap !important;
    }
    header.site-header .mbook-header-actions .svrg-hdr-cart {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Tablet header final fit - Project 16 */
@media (min-width: 769px) and (max-width: 1199px) {
    header.site-header .mbook-header-main {
        grid-template-columns: minmax(180px, 210px) minmax(0, 1fr) 214px !important;
        column-gap: 8px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    header.site-header .mbook-logo-wrap .custom-logo-link img,
    header.site-header .mbook-logo-wrap img.custom-logo {
        width: 205px !important;
        max-width: 100% !important;
    }
    header.site-header .mbook-header-actions {
        width: 214px !important;
        min-width: 214px !important;
        gap: 0 !important;
    }
    header.site-header .mbook-header-actions .mbook-action:not(.svrg-hdr-hamburger) {
        flex: 0 0 70px !important;
        width: 70px !important;
        min-width: 70px !important;
        overflow: visible !important;
    }
    header.site-header .mbook-header-actions .svrg-hdr-cart {
        position: relative !important;
        overflow: visible !important;
    }
    header.site-header .mbook-header-actions .svrg-hdr-cart .mbook-cart-icon-wrap,
    header.site-header .mbook-header-actions .svrg-hdr-cart svg {
        overflow: visible !important;
    }
    header.site-header .mbook-header-actions .svrg-hdr-cart .count,
    header.site-header .mbook-header-actions .svrg-hdr-cart .mbook-cart-count {
        right: 2px !important;
    }
    header.site-header .mbook-topbar-center,
    header.site-header .mbook-topbar-tagline,
    header.site-header .mbook-topbar-middle {
        white-space: nowrap !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
    }
}

/* Tablet topbar single-line fit - Project 16 */
@media (min-width: 769px) and (max-width: 1199px) {
    header.site-header .mbook-topbar-inner {
        display: grid !important;
        grid-template-columns: 260px minmax(0, 1fr) 270px !important;
        align-items: center !important;
        column-gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    header.site-header .mbook-topbar-left,
    header.site-header .mbook-topbar-center,
    header.site-header .mbook-topbar-right {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }
    header.site-header .mbook-topbar-center {
        text-align: center !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }
    header.site-header .mbook-topbar-right {
        justify-content: flex-end !important;
        gap: 12px !important;
    }
}

/* Lihat Semua icon isolation - Project 16 */
.svrg-cat-tile.svrg-cat-all .svrg-cat-all-icon {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: calc(100% - 52px) !important;
    background: transparent !important;
    background-image: none !important;
    transform: none !important;
}
.svrg-cat-tile.svrg-cat-all .svrg-cat-all-icon::before {
    display: none !important;
    content: none !important;
}
.svrg-cat-tile.svrg-cat-all .svrg-cat-all-icon svg {
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    color: var(--mbook-teal, #006160) !important;
    stroke: currentColor !important;
}
@media (max-width: 900px) {
    .svrg-cat-tile.svrg-cat-all .svrg-cat-all-icon {
        height: calc(100% - 46px) !important;
    }
    .svrg-cat-tile.svrg-cat-all .svrg-cat-all-icon svg {
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
    }
}

/* Header hover previews - Project 16 */
.mbook-hover-trigger,
.mbook-header-actions {
    position: relative !important;
}
.mbook-hover-preview {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 10000 !important;
    display: none;
    width: 300px !important;
    padding: 14px !important;
    background: #fff !important;
    color: #12243a !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.16) !important;
    text-align: left !important;
}
.mbook-hover-trigger:hover > .mbook-hover-preview,
.mbook-hover-trigger:focus-within > .mbook-hover-preview,
.svrg-hdr-cart:hover + .mbook-cart-preview,
.mbook-cart-preview:hover {
    display: block !important;
}
.mbook-preview-items {
    display: grid !important;
    gap: 8px !important;
    margin: 10px 0 !important;
    max-height: 250px !important;
    overflow-y: auto !important;
}
.mbook-preview-item {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #12243a !important;
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}
.mbook-preview-item img {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    object-fit: cover !important;
}
.mbook-preview-item span { min-width: 0 !important; }
.mbook-preview-item small {
    display: block !important;
    margin-top: 3px !important;
    color: #667085 !important;
}
.mbook-preview-empty {
    margin: 10px 0 !important;
    color: #667085 !important;
    font-size: 13px !important;
}
.mbook-preview-link {
    display: block !important;
    padding-top: 10px !important;
    border-top: 1px solid #e5e7eb !important;
    color: #006160 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
@media (max-width: 900px) {
    .mbook-hover-preview { display: none !important; }
}

/* Wishlist count and page - Project 16 */
.svrg-wishlist-count {
    position: absolute !important;
    top: 2px !important;
    right: 7px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #006160 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-align: center !important;
}
.mbook-wishlist-page { padding: 48px 20px; }
.mbook-wishlist-page-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mbook-wishlist-page-item { display: flex; flex-direction: column; gap: 10px; color: #12243a; text-decoration: none; }
.mbook-wishlist-page-item img { width: 100%; height: 220px; object-fit: contain; background: #f7f3ea; }
.mbook-wishlist-page-item small { display: block; margin-top: 5px; color: #667085; }
@media (max-width: 700px) { .mbook-wishlist-page-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Wishlist badge position - Project 16 */
.svrg-hdr-icon.mbook-hover-trigger-link {
    overflow: visible !important;
}
.svrg-wishlist-count {
    top: -5px !important;
    right: -6px !important;
    z-index: 5 !important;
}

/* Wishlist remove links - Project 16 */
.mbook-preview-item { position: relative !important; }
.mbook-preview-item > a:first-child { display: flex !important; align-items: center !important; gap: 9px !important; min-width: 0 !important; color: inherit !important; text-decoration: none !important; }
.mbook-preview-remove { margin-left: auto !important; color: #c62828 !important; font-size: 20px !important; text-decoration: none !important; }
.mbook-wishlist-page-item > a:first-child { display: flex !important; flex-direction: column !important; gap: 10px !important; color: inherit !important; text-decoration: none !important; }
.mbook-wishlist-remove { color: #c62828 !important; font-size: 12px !important; font-weight: 700 !important; text-decoration: none !important; }

/* Mobile related product cards - Project 16 */
@media (max-width: 600px) {
    body.single-product .woocommerce div.product .related.products,
    body.single-product .woocommerce div.product .up-sells,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section {
        width: 100% !important;
        max-width: none !important;
        padding: 24px 16px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.single-product .woocommerce div.product .related.products h2,
    body.single-product .woocommerce div.product .up-sells h2,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section h2 {
        font-size: 18px !important;
        line-height: 1.25 !important;
        margin: 0 0 16px !important;
    }

    body.single-product .woocommerce div.product .related.products ul.products,
    body.single-product .woocommerce div.product .up-sells ul.products,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.single-product .woocommerce div.product .related.products ul.products li.product,
    body.single-product .woocommerce div.product .up-sells ul.products li.product,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section ul.products li.product {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.single-product .woocommerce div.product .related.products ul.products li.product img,
    body.single-product .woocommerce div.product .up-sells ul.products li.product img,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section ul.products li.product img {
        width: 100% !important;
        height: 136px !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
    }

    body.single-product .woocommerce div.product .related.products ul.products li.product .woocommerce-loop-product__title,
    body.single-product .woocommerce div.product .up-sells ul.products li.product .woocommerce-loop-product__title,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section ul.products li.product .woocommerce-loop-product__title {
        font-size: 12px !important;
        line-height: 1.35 !important;
        min-height: 32px !important;
        padding: 10px 10px 4px !important;
    }

    body.single-product .woocommerce div.product .related.products ul.products li.product .price,
    body.single-product .woocommerce div.product .up-sells ul.products li.product .price,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section ul.products li.product .price {
        display: flex !important;
        align-items: baseline !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
        padding: 0 10px 8px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    body.single-product .woocommerce div.product .related.products ul.products li.product .price del,
    body.single-product .woocommerce div.product .up-sells ul.products li.product .price del,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section ul.products li.product .price del {
        font-size: 10px !important;
        margin-right: 0 !important;
    }

    body.single-product .woocommerce div.product .related.products ul.products li.product a.button,
    body.single-product .woocommerce div.product .related.products ul.products li.product .add_to_cart_button,
    body.single-product .woocommerce div.product .up-sells ul.products li.product a.button,
    body.single-product .woocommerce div.product .up-sells ul.products li.product .add_to_cart_button,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section ul.products li.product a.button,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section ul.products li.product .add_to_cart_button {
        display: block !important;
        width: calc(100% - 20px) !important;
        margin: auto 10px 10px !important;
        padding: 9px 4px !important;
        box-sizing: border-box !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        text-align: center !important;
    }
}

/* Mobile paradise related cards - Project 16 */
@media (max-width: 600px) {
    body.single-product .woocommerce div.product .related.products ul.products li.paradise-product-card,
    body.single-product .woocommerce div.product .up-sells ul.products li.paradise-product-card,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section ul.products li.paradise-product-card {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    body.single-product .woocommerce div.product .related.products li.paradise-product-card .paradise-card-img-wrap,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .paradise-card-img-wrap,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-img-wrap {
        width: 100% !important;
        aspect-ratio: 1 / 0.72 !important;
        margin: 0 0 8px !important;
    }

    body.single-product .woocommerce div.product .related.products li.paradise-product-card .paradise-card-img-wrap img,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .paradise-card-img-wrap img,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-img-wrap img {
        width: 100% !important;
        height: 100% !important;
        padding: 6px !important;
        object-fit: contain !important;
    }

    body.single-product .woocommerce div.product .related.products li.paradise-product-card .svrg-sale-badge,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .svrg-sale-badge,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .svrg-sale-badge {
        top: 8px !important;
        left: 8px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        padding: 6px 8px !important;
    }

    body.single-product .woocommerce div.product .related.products li.paradise-product-card .svrg-qv-btn,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .svrg-qv-btn,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .svrg-qv-btn {
        display: none !important;
    }

    body.single-product .woocommerce div.product .related.products li.paradise-product-card .paradise-card-title,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .paradise-card-title,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-title {
        font-size: 12px !important;
        line-height: 1.3 !important;
        min-height: 31px !important;
        margin: 0 0 4px !important;
        padding: 0 8px !important;
    }

    body.single-product .woocommerce div.product .related.products li.paradise-product-card .paradise-card-desc,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .paradise-card-desc,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-desc {
        font-size: 11px !important;
        line-height: 1.25 !important;
        min-height: 14px !important;
        margin: 0 0 6px !important;
        padding: 0 8px !important;
    }

    body.single-product .woocommerce div.product .related.products li.paradise-product-card .paradise-card-price,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .paradise-card-price,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-price {
        padding: 0 8px !important;
        margin: 0 0 8px !important;
        min-width: 0 !important;
    }

    body.single-product .woocommerce div.product .related.products li.paradise-product-card .paradise-card-price .price,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .paradise-card-price .price,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-price .price {
        display: flex !important;
        align-items: baseline !important;
        gap: 3px !important;
        flex-wrap: wrap !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    body.single-product .woocommerce div.product .related.products li.paradise-product-card .paradise-card-price .price del,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .paradise-card-price .price del,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-price .price del,
    body.single-product .woocommerce div.product .related.products li.paradise-product-card .paradise-card-price .price .svrg-hemat-text,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .paradise-card-price .price .svrg-hemat-text,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-price .price .svrg-hemat-text,
    body.single-product .woocommerce div.product .related.products li.paradise-product-card .paradise-card-price .price .paradise-price-unit,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .paradise-card-price .price .paradise-price-unit,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-price .price .paradise-price-unit {
        font-size: 10px !important;
    }

    body.single-product .woocommerce div.product .related.products li.paradise-product-card .button.add_to_cart_button,
    body.single-product .woocommerce div.product .related.products li.paradise-product-card .button.product_type_simple,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .button.add_to_cart_button,
    body.single-product .woocommerce div.product .up-sells li.paradise-product-card .button.product_type_simple,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .button.add_to_cart_button,
    body.single-product .woocommerce div.product .svrg-recently-viewed-section li.paradise-product-card .button.product_type_simple {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        margin: auto 8px 8px !important;
        padding: 8px 2px !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}


/* Single product related products fix - Project 16 */
body.single-product .related.products,
body.single-product .up-sells,
body.single-product .svrg-recently-viewed-section {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 48px 40px 0 !important;
    box-sizing: border-box !important;
    clear: both !important;
}

body.single-product .related.products > h2,
body.single-product .up-sells > h2,
body.single-product .svrg-recently-viewed-section > h2 {
    margin: 0 0 22px !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
}

body.single-product .related.products ul.products,
body.single-product .up-sells ul.products,
body.single-product .svrg-recently-viewed-section ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px)) !important;
    justify-content: start !important;
    align-items: stretch !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
}

body.single-product .related.products ul.products::before,
body.single-product .related.products ul.products::after,
body.single-product .up-sells ul.products::before,
body.single-product .up-sells ul.products::after,
body.single-product .svrg-recently-viewed-section ul.products::before,
body.single-product .svrg-recently-viewed-section ul.products::after {
    content: none !important;
    display: none !important;
}

body.single-product .related.products li.paradise-product-card,
body.single-product .up-sells li.paradise-product-card,
body.single-product .svrg-recently-viewed-section li.paradise-product-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
}

body.single-product .related.products li.paradise-product-card .paradise-card-img-wrap,
body.single-product .up-sells li.paradise-product-card .paradise-card-img-wrap,
body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-img-wrap {
    width: 100% !important;
    aspect-ratio: 1 / 0.72 !important;
    margin: 0 0 12px !important;
    background: #f7f4ee !important;
}

body.single-product .related.products li.paradise-product-card .paradise-card-img-wrap img,
body.single-product .up-sells li.paradise-product-card .paradise-card-img-wrap img,
body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    padding: 10px !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
}

body.single-product .related.products li.paradise-product-card .paradise-card-title,
body.single-product .up-sells li.paradise-product-card .paradise-card-title,
body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-title {
    min-height: 36px !important;
    margin: 0 0 6px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

body.single-product .related.products li.paradise-product-card .paradise-card-desc,
body.single-product .up-sells li.paradise-product-card .paradise-card-desc,
body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-desc {
    min-height: 18px !important;
    margin: 0 0 8px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

body.single-product .related.products li.paradise-product-card .paradise-card-price,
body.single-product .up-sells li.paradise-product-card .paradise-card-price,
body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-price {
    min-width: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 12px !important;
}

body.single-product .related.products li.paradise-product-card .paradise-card-price .price,
body.single-product .up-sells li.paradise-product-card .paradise-card-price .price,
body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-price .price {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

body.single-product .related.products li.paradise-product-card .paradise-card-price .price del,
body.single-product .up-sells li.paradise-product-card .paradise-card-price .price del,
body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-price .price del,
body.single-product .related.products li.paradise-product-card .paradise-card-price .price .svrg-hemat-text,
body.single-product .up-sells li.paradise-product-card .paradise-card-price .price .svrg-hemat-text,
body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-price .price .svrg-hemat-text,
body.single-product .related.products li.paradise-product-card .paradise-card-price .price .paradise-price-unit,
body.single-product .up-sells li.paradise-product-card .paradise-card-price .price .paradise-price-unit,
body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-price .price .paradise-price-unit {
    font-size: 11px !important;
}

body.single-product .related.products li.paradise-product-card .button.add_to_cart_button,
body.single-product .related.products li.paradise-product-card .button.product_type_simple,
body.single-product .up-sells li.paradise-product-card .button.add_to_cart_button,
body.single-product .up-sells li.paradise-product-card .button.product_type_simple,
body.single-product .svrg-recently-viewed-section li.paradise-product-card .button.add_to_cart_button,
body.single-product .svrg-recently-viewed-section li.paradise-product-card .button.product_type_simple {
    display: block !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: auto 12px 12px !important;
    padding: 10px 6px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-align: center !important;
}

@media (max-width: 1024px) {
    body.single-product .related.products,
    body.single-product .up-sells,
    body.single-product .svrg-recently-viewed-section {
        padding: 36px 24px 0 !important;
    }
    body.single-product .related.products ul.products,
    body.single-product .up-sells ul.products,
    body.single-product .svrg-recently-viewed-section ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 600px) {
    body.single-product .related.products,
    body.single-product .up-sells,
    body.single-product .svrg-recently-viewed-section {
        padding: 24px 20px 0 !important;
    }
    body.single-product .related.products > h2,
    body.single-product .up-sells > h2,
    body.single-product .svrg-recently-viewed-section > h2 {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }
    body.single-product .related.products ul.products,
    body.single-product .up-sells ul.products,
    body.single-product .svrg-recently-viewed-section ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    body.single-product .related.products li.paradise-product-card .paradise-card-img-wrap,
    body.single-product .up-sells li.paradise-product-card .paradise-card-img-wrap,
    body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-img-wrap {
        aspect-ratio: 1 / 0.68 !important;
        margin-bottom: 8px !important;
    }
    body.single-product .related.products li.paradise-product-card .paradise-card-title,
    body.single-product .up-sells li.paradise-product-card .paradise-card-title,
    body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-title {
        min-height: 32px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
    }
    body.single-product .related.products li.paradise-product-card .paradise-card-desc,
    body.single-product .up-sells li.paradise-product-card .paradise-card-desc,
    body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-desc,
    body.single-product .related.products li.paradise-product-card .paradise-card-price,
    body.single-product .up-sells li.paradise-product-card .paradise-card-price,
    body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-price {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    body.single-product .related.products li.paradise-product-card .paradise-card-price .price,
    body.single-product .up-sells li.paradise-product-card .paradise-card-price .price,
    body.single-product .svrg-recently-viewed-section li.paradise-product-card .paradise-card-price .price {
        font-size: 12px !important;
        gap: 3px !important;
    }
    body.single-product .related.products li.paradise-product-card .button.add_to_cart_button,
    body.single-product .related.products li.paradise-product-card .button.product_type_simple,
    body.single-product .up-sells li.paradise-product-card .button.add_to_cart_button,
    body.single-product .up-sells li.paradise-product-card .button.product_type_simple,
    body.single-product .svrg-recently-viewed-section li.paradise-product-card .button.add_to_cart_button,
    body.single-product .svrg-recently-viewed-section li.paradise-product-card .button.product_type_simple {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        margin: auto 8px 8px !important;
        padding: 8px 2px !important;
        font-size: 8.5px !important;
    }
}

/* Hero spacing and functional card wishlist - Project 16 */
body.home #content.site-content,
body.home #content.site-content > .col-full,
body.home #svrg-homepage {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.home #svrg-homepage > .svrg-hero-slider {
    margin-top: 4px !important;
}

.svrg-hcard,
li.paradise-product-card {
    position: relative !important;
}

.mbook-card-wishlist {
    --add-to-wishlist-icon-color: #006b67;
    --added-to-wishlist-icon-color: #e32636;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 30 !important;
    width: 38px !important;
    height: 38px !important;
}

.mbook-card-wishlist .yith-add-to-wishlist-button-block {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
}

.mbook-card-wishlist .yith-wcwl-add-to-wishlist-button,
.mbook-card-wishlist a.yith-wcwl-add-to-wishlist-button-anchor-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #dce5e5 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #006b67 !important;
    box-shadow: 0 3px 10px rgba(18, 36, 58, 0.12) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.mbook-card-wishlist .yith-wcwl-add-to-wishlist-button__label,
.mbook-card-wishlist .yith-wcwl-add-to-wishlist__counter,
.mbook-card-wishlist .yith-wcwl-add-to-wishlist-tooltip {
    display: none !important;
}

.mbook-card-wishlist .yith-wcwl-icon-svg__wrapper,
.mbook-card-wishlist .yith-wcwl-add-to-wishlist-button-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 23px !important;
    height: 23px !important;
    margin: 0 !important;
}

.mbook-card-wishlist svg.yith-wcwl-icon-svg,
.mbook-card-wishlist svg.yith-wcwl-add-to-wishlist-button-icon {
    width: 23px !important;
    height: 23px !important;
    color: #006b67 !important;
}

.mbook-card-wishlist .yith-wcwl-add-to-wishlist-button--added,
.mbook-card-wishlist .yith-wcwl-add-to-wishlist-button--added:hover,
.mbook-card-wishlist .yith-wcwl-add-to-wishlist-button--added svg,
.mbook-card-wishlist .exists .yith-wcwl-add-to-wishlist-button,
.mbook-card-wishlist .exists svg {
    color: #e32636 !important;
}

.mbook-card-wishlist .yith-wcwl-add-to-wishlist-button--added svg,
.mbook-card-wishlist .exists svg {
    fill: currentColor !important;
}

@media (max-width: 900px) {
    body.home #svrg-homepage > .svrg-hero-slider {
        margin-top: 3px !important;
    }
}

@media (max-width: 600px) {
    .mbook-card-wishlist {
        top: 7px !important;
        right: 7px !important;
        transform: scale(0.9);
        transform-origin: top right;
    }
}
/* Extensible footer layout - Project 16 */
.svrg-footer .svrg-footer-inner {
    grid-template-columns: minmax(360px, 1.15fr) minmax(0, 2.8fr) !important;
    gap: 0 !important;
}

.svrg-footer .svrg-footer-brand {
    min-width: 0 !important;
    padding-right: 36px !important;
}

.svrg-footer .svrg-footer-logo-link {
    display: block !important;
    width: min(300px, 100%) !important;
    margin-bottom: 20px !important;
}

.svrg-footer .svrg-footer-logo {
    display: block !important;
    width: 300px !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.svrg-footer .svrg-footer-links-grid {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 34px !important;
    row-gap: 24px !important;
    padding-left: 36px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.svrg-footer .svrg-footer-payments {
    grid-column: 2 / 4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
}

.svrg-footer .svrg-footer-payments > span {
    flex: 0 1 140px !important;
    width: 140px !important;
    min-width: 112px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 5px 10px !important;
    box-sizing: border-box !important;
}

.svrg-footer .svrg-footer-payments img {
    display: block !important;
    width: 100% !important;
    max-width: 120px !important;
    height: 34px !important;
    object-fit: contain !important;
}

.svrg-footer .svrg-footer-socials {
    gap: 10px !important;
}

.svrg-footer .svrg-footer-social-link {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
}

.svrg-footer .svrg-footer-social-link svg {
    width: 21px !important;
    height: 21px !important;
}

@media (max-width: 1100px) {
    .svrg-footer .svrg-footer-inner {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }

    .svrg-footer .svrg-footer-brand {
        padding: 0 0 26px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
    }

    .svrg-footer .svrg-footer-links-grid {
        grid-column: auto !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        padding-left: 0 !important;
        border-left: 0 !important;
    }

    .svrg-footer .svrg-footer-payments {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 700px) {
    .svrg-footer .svrg-footer-logo-link,
    .svrg-footer .svrg-footer-logo {
        width: min(280px, 100%) !important;
    }

    .svrg-footer .svrg-footer-links-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .svrg-footer .svrg-footer-link-col + .svrg-footer-link-col {
        padding: 24px 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-left: 0 !important;
    }

    .svrg-footer .svrg-footer-payments {
        grid-column: 1 !important;
        gap: 8px !important;
    }

    .svrg-footer .svrg-footer-payments > span {
        flex: 1 1 calc(50% - 4px) !important;
        width: calc(50% - 4px) !important;
        min-width: 0 !important;
    }
}
/* Compact footer height - Project 16 */
.svrg-footer .svrg-footer-inner {
    padding-top: 28px !important;
    padding-bottom: 18px !important;
}

.svrg-footer .svrg-footer-logo-link {
    margin-bottom: 12px !important;
}

.svrg-footer .svrg-footer-tagline {
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
}

.svrg-footer .svrg-footer-heading {
    margin-bottom: 10px !important;
}

.svrg-footer .svrg-footer-links {
    gap: 0 !important;
}

.svrg-footer .svrg-footer-links li {
    margin: 0 0 6px !important;
}

.svrg-footer .svrg-footer-links a,
.svrg-footer .svrg-footer-contact-list {
    line-height: 1.4 !important;
}

.svrg-footer .svrg-footer-contact-list li {
    margin-bottom: 3px !important;
}

.svrg-footer .svrg-footer-links-grid {
    row-gap: 12px !important;
}

.svrg-footer .svrg-footer-payments {
    margin-top: 8px !important;
    gap: 8px !important;
}

.svrg-footer .svrg-footer-payments > span {
    height: 40px !important;
    min-height: 40px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.svrg-footer .svrg-footer-payments img {
    height: 30px !important;
}

.svrg-footer .svrg-footer-bottom {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

@media (max-width: 1100px) {
    .svrg-footer .svrg-footer-inner {
        gap: 18px !important;
        padding: 24px 20px 18px !important;
    }

    .svrg-footer .svrg-footer-brand {
        padding-bottom: 18px !important;
    }
}

@media (max-width: 700px) {
    .svrg-footer .svrg-footer-inner {
        padding: 22px 16px 16px !important;
    }

    .svrg-footer .svrg-footer-links-grid {
        gap: 16px !important;
    }

    .svrg-footer .svrg-footer-link-col + .svrg-footer-link-col {
        padding-top: 16px !important;
    }
}
/* Merrysbook custom 404 page - Project 16 */
body.error404 #content.site-content {
    padding: 0 !important;
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 97, 96, 0.08), transparent 30%),
        radial-gradient(circle at 88% 72%, rgba(201, 152, 66, 0.10), transparent 28%),
        #f7f9f8 !important;
}

body.error404 #content.site-content > .col-full {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.error404 #primary.mbook-404-area,
body.error404 .mbook-404-main {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mbook-404 {
    display: grid !important;
    place-items: center !important;
    min-height: clamp(500px, 64vh, 680px) !important;
    padding: 48px 24px !important;
    box-sizing: border-box !important;
}

.mbook-404-card {
    position: relative !important;
    width: min(900px, 100%) !important;
    padding: 42px 56px 38px !important;
    overflow: hidden !important;
    border: 1px solid #dce6e4 !important;
    border-top: 4px solid var(--mbook-teal, #006160) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 20px 55px rgba(18, 36, 58, 0.10) !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.mbook-404-code {
    position: absolute !important;
    top: -32px !important;
    right: 26px !important;
    z-index: 0 !important;
    color: rgba(0, 97, 96, 0.055) !important;
    font-size: clamp(150px, 18vw, 230px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.08em !important;
    pointer-events: none !important;
    user-select: none !important;
}

.mbook-404-card > *:not(.mbook-404-code) {
    position: relative !important;
    z-index: 1 !important;
}

.mbook-404-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    margin-bottom: 15px !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    background: rgba(0, 97, 96, 0.10) !important;
    color: var(--mbook-teal, #006160) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.mbook-404 h1 {
    max-width: 700px !important;
    margin: 0 auto 13px !important;
    color: #12243a !important;
    font-size: clamp(28px, 3.2vw, 43px) !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.035em !important;
}

.mbook-404-description {
    max-width: 680px !important;
    margin: 0 auto 26px !important;
    color: #617081 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

.mbook-404-search {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: min(690px, 100%) !important;
    height: 54px !important;
    margin: 0 auto 20px !important;
    overflow: hidden !important;
    border: 1px solid #ccd9d7 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(18, 36, 58, 0.07) !important;
}

.mbook-404-search-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #687785 !important;
}

.mbook-404-search-icon svg {
    width: 20px !important;
    height: 20px !important;
}

.mbook-404-search input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 10px 0 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #12243a !important;
    box-shadow: none !important;
    font-size: 14px !important;
}

.mbook-404-search button {
    align-self: stretch !important;
    min-width: 104px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--mbook-teal, #006160) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.mbook-404-search button:hover {
    background: var(--mbook-teal-dark, #004b4a) !important;
}

.mbook-404-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 11px !important;
    margin-bottom: 24px !important;
}

.mbook-404-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 44px !important;
    padding: 10px 20px !important;
    border: 1px solid var(--mbook-teal, #006160) !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

.mbook-404-button svg {
    width: 17px !important;
    height: 17px !important;
}

.mbook-404-button--primary {
    background: var(--mbook-teal, #006160) !important;
    color: #fff !important;
}

.mbook-404-button--primary:hover {
    background: var(--mbook-teal-dark, #004b4a) !important;
    color: #fff !important;
}

.mbook-404-button--secondary {
    background: #fff !important;
    color: var(--mbook-teal, #006160) !important;
}

.mbook-404-button--secondary:hover {
    background: rgba(0, 97, 96, 0.07) !important;
    color: var(--mbook-teal-dark, #004b4a) !important;
}

.mbook-404-categories {
    padding-top: 20px !important;
    border-top: 1px solid #e1e8e7 !important;
}

.mbook-404-categories > span {
    display: block !important;
    margin-bottom: 10px !important;
    color: #74818e !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.mbook-404-category-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
}

.mbook-404-category-list a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    border: 1px solid #d9e3e1 !important;
    border-radius: 999px !important;
    background: #f8faf9 !important;
    color: #425466 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.mbook-404-category-list a:hover {
    border-color: var(--mbook-teal, #006160) !important;
    color: var(--mbook-teal, #006160) !important;
}

body.error404 .svrg-footer {
    margin-top: 0 !important;
}

@media (max-width: 700px) {
    .mbook-404 {
        min-height: 500px !important;
        padding: 28px 14px !important;
    }

    .mbook-404-card {
        padding: 34px 20px 28px !important;
        border-radius: 14px !important;
    }

    .mbook-404-code {
        top: -10px !important;
        right: 15px !important;
        font-size: 120px !important;
    }

    .mbook-404-description {
        margin-bottom: 21px !important;
        font-size: 14px !important;
    }

    .mbook-404-search {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        height: auto !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mbook-404-search-icon,
    .mbook-404-search input[type="search"] {
        height: 48px !important;
        border-top: 1px solid #ccd9d7 !important;
        border-bottom: 1px solid #ccd9d7 !important;
        background: #fff !important;
    }

    .mbook-404-search-icon {
        border-left: 1px solid #ccd9d7 !important;
        border-radius: 9px 0 0 9px !important;
    }

    .mbook-404-search input[type="search"] {
        padding-right: 12px !important;
        border-right: 1px solid #ccd9d7 !important;
        border-radius: 0 9px 9px 0 !important;
    }

    .mbook-404-search button {
        grid-column: 1 / -1 !important;
        min-height: 46px !important;
        margin-top: 8px !important;
        border-radius: 9px !important;
    }

    .mbook-404-actions {
        flex-direction: column !important;
    }

    .mbook-404-button {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ================================================================
   CLIENT CORRECTION 2026-07-16
   Keep three trust items and add category-archive product search.
   ================================================================ */
.mbook-trust-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.mbook-archive-search {
    width: auto;
    max-width: 760px;
    min-width: 280px;
    min-height: 52px;
    margin: 0;
    flex: 1 1 760px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid #d5dee2;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(18, 36, 58, 0.07);
}

.mbook-archive-search input[type="search"] {
    width: 100%;
    min-width: 0;
    height: 52px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mbook-ink, #12243a);
    box-shadow: none;
}

.mbook-archive-search button {
    min-width: 112px;
    height: 52px;
    margin: 0;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0 !important;
    border-radius: 0;
    background: var(--mbook-teal, #006160) !important;
    color: #fff !important;
    font-weight: 700;
    cursor: pointer;
}

.mbook-archive-search button:hover {
    background: var(--mbook-teal-dark, #004b4a) !important;
}

.mbook-archive-search button svg {
    width: 20px;
    height: 20px;
}

.paradise-shopbar.paradise-shopbar--simple {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.paradise-shopbar--simple .paradise-shopbar-right {
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 900px) {
    .mbook-trust-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .mbook-trust-strip {
        grid-template-columns: 1fr !important;
    }

    .mbook-trust-item,
    .mbook-trust-item:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--mbook-border) !important;
    }

    .mbook-trust-item:last-child {
        border-bottom: 0 !important;
    }

    .mbook-archive-search {
        width: auto;
        max-width: none;
        min-width: 0;
        min-height: 46px;
        margin: 0;
        flex: 1 1 auto;
    }

    .mbook-archive-search input[type="search"] {
        height: 46px;
        padding: 0 11px;
        font-size: 13px;
    }

    .mbook-archive-search button {
        min-width: 46px;
        width: 46px;
        height: 46px;
        padding: 0 12px;
    }

    .mbook-archive-search button span {
        display: none;
    }

    .paradise-shopbar.paradise-shopbar--simple {
        gap: 8px !important;
        padding: 12px 14px !important;
    }

    .paradise-shopbar--simple .paradise-shopbar-right {
        min-width: 0;
        flex: 0 0 140px;
    }

    .paradise-shopbar--simple .woocommerce-ordering,
    .paradise-shopbar--simple .woocommerce-ordering select {
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        margin: 0 !important;
    }
}

/* ================================================================
   LOCAL SHOP LAYOUT - category sidebar + products
   ================================================================ */
.mbook-shop-page {
    position: relative;
    left: 50%;
    width: min(1368px, calc(100vw - 56px));
    margin: 34px 0 64px;
    transform: translateX(-50%);
}

.mbook-shop-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: 38px;
}

.mbook-shop-sidebar {
    position: sticky;
    top: 24px;
    min-width: 0;
    padding: 4px 24px 26px 0;
    border-right: 1px solid #e2e7e9;
}

.mbook-shop-sidebar-title {
    margin: 0 0 28px !important;
    color: var(--mbook-ink, #12243a);
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
}

.mbook-shop-category-heading {
    margin: 0 0 10px !important;
    color: var(--mbook-ink, #12243a);
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    line-height: 1.4 !important;
    text-transform: uppercase;
}

.mbook-shop-sidebar-rule {
    width: 34px;
    height: 3px;
    margin: -17px 0 28px;
    border-radius: 999px;
    background: var(--mbook-teal, #006160);
}

.mbook-shop-price-filter {
    margin: 2px 0 30px;
}

.mbook-price-slider {
    position: relative;
    height: 34px;
    margin: 6px 2px 2px;
}

.mbook-price-track {
    position: absolute;
    top: 15px;
    right: 0;
    left: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        #d7dddf 0%,
        #d7dddf var(--price-from),
        var(--mbook-teal, #006160) var(--price-from),
        var(--mbook-teal, #006160) var(--price-to),
        #d7dddf var(--price-to),
        #d7dddf 100%
    );
}

.mbook-price-slider input[type="range"] {
    position: absolute;
    top: 7px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.mbook-price-slider .mbook-price-max {
    z-index: 3;
}

.mbook-price-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
}

.mbook-price-slider input[type="range"]::-moz-range-track {
    height: 4px;
    background: transparent;
}

.mbook-price-slider input[type="range"]::-webkit-slider-thumb {
    width: 17px;
    height: 17px;
    margin-top: -7px;
    pointer-events: auto;
    -webkit-appearance: none;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--mbook-teal, #006160);
    box-shadow: 0 0 0 1px var(--mbook-teal, #006160), 0 2px 5px rgba(18, 36, 58, 0.2);
    cursor: grab;
}

.mbook-price-slider input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    pointer-events: auto;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--mbook-teal, #006160);
    box-shadow: 0 0 0 1px var(--mbook-teal, #006160), 0 2px 5px rgba(18, 36, 58, 0.2);
    cursor: grab;
}

.mbook-price-values {
    margin: 2px 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    color: #4f5965;
    font-size: 11px;
    white-space: nowrap;
}

.mbook-price-values .woocommerce-Price-amount {
    color: inherit;
    font-size: inherit;
    font-weight: 600;
}

.mbook-price-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mbook-price-actions button {
    min-height: 34px;
    padding: 7px 16px;
    border: 0 !important;
    border-radius: 999px;
    background: var(--mbook-ink, #12243a) !important;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.mbook-price-actions a {
    color: var(--mbook-teal, #006160);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
}

.mbook-shop-category-list,
.mbook-shop-category-list .children {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mbook-shop-category-list li {
    margin: 0 !important;
    padding: 0 !important;
}

.mbook-shop-category-list .children {
    padding-left: 14px !important;
}

.mbook-shop-category-list a {
    position: relative;
    padding: 7px 0 7px 14px;
    display: block;
    color: #4f5965;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none !important;
    transition: color 0.18s ease, padding-left 0.18s ease;
}

.mbook-shop-category-list a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c8d0d3;
    transform: translateY(-50%);
}

.mbook-shop-category-list a:hover,
.mbook-shop-category-list .current-cat > a,
.mbook-shop-category-list .current-cat-parent > a {
    padding-left: 18px;
    color: var(--mbook-teal, #006160);
    font-weight: 700;
}

.mbook-shop-category-list a:hover::before,
.mbook-shop-category-list .current-cat > a::before,
.mbook-shop-category-list .current-cat-parent > a::before {
    background: var(--mbook-teal, #006160);
}

.mbook-shop-main {
    min-width: 0;
}

.mbook-shop-toolbar {
    min-height: 50px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    border-bottom: 1px solid #e2e7e9;
}

.mbook-shop-toolbar .woocommerce-result-count,
.mbook-shop-toolbar .woocommerce-ordering {
    margin: 0 !important;
}

.mbook-shop-toolbar .woocommerce-ordering select {
    min-width: 210px;
    height: 44px;
    border: 1px solid #d5dee2;
    border-radius: 7px;
    background-color: #fff;
}

.mbook-shop-mobile-categories {
    display: none;
}

ul.paradise-product-grid.paradise-product-grid.mbook-shop-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.woocommerce-message[data-mbook-dismiss-ready="1"] {
    position: relative;
    padding-right: 58px !important;
    overflow: hidden;
    transition: opacity 0.24s ease, transform 0.24s ease, max-height 0.24s ease, margin 0.24s ease, padding 0.24s ease;
}

.woocommerce-message .mbook-notice-close {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.14);
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    cursor: pointer;
    transform: translateY(-50%);
}

.woocommerce-message.mbook-notice-leaving {
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    opacity: 0;
    transform: translateY(-8px);
}

/* Editable menu pages use the same content width as the main Merrysbook site. */
.page-template-page-about .svrg-fullpage {
    width: min(1368px, calc(100vw - 56px));
    max-width: 1368px;
    margin: 34px auto 64px;
    overflow: visible;
}

.page-template-page-about .svrg-fullpage-header {
    display: none;
}

.page-template-page-about .svrg-fullpage-content > *:not(.alignfull):not(.alignwide):not(.wp-block-cover),
.page-template-page-about .svrg-fullpage-content .alignwide {
    width: 100%;
    max-width: 1368px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.page-template-page-about .svrg-fullpage-content .alignfull,
.page-template-page-about .svrg-fullpage-content .wp-block-cover.alignfull,
.page-template-page-about .svrg-fullpage-content .wp-block-group.alignfull,
.page-template-page-about .svrg-fullpage-content .wp-block-columns.alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.page-template-page-about .mbook-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 330px;
    display: flex;
    align-items: center;
    padding: clamp(48px, 7vw, 92px) clamp(28px, 7vw, 96px) !important;
    border-radius: 28px;
    background: linear-gradient(125deg, #004b4a 0%, #006160 58%, #0b817e 100%);
    color: #fff;
    box-shadow: 0 24px 60px rgba(0, 75, 74, 0.18);
}

.page-template-page-about .mbook-page-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 420px;
    right: -120px;
    top: -180px;
    border: 70px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.page-template-page-about .mbook-page-hero-inner {
    width: min(760px, 100%);
}

.page-template-page-about .mbook-page-eyebrow {
    margin: 0 0 14px !important;
    color: #f0cf8b !important;
    font-size: 13px !important;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.page-template-page-about .mbook-page-hero h2 {
    margin: 0 0 18px !important;
    color: #fff !important;
    font-size: clamp(36px, 5vw, 66px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.045em !important;
}

.page-template-page-about .mbook-page-lead {
    max-width: 680px;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: clamp(16px, 1.8vw, 20px) !important;
    line-height: 1.65 !important;
}

.page-template-page-about .mbook-page-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px !important;
    margin-top: 34px !important;
    margin-bottom: 34px !important;
}

.page-template-page-about .mbook-page-card-grid > .wp-block-column {
    min-width: 0;
}

.page-template-page-about .mbook-page-card {
    height: 100%;
    padding: 30px !important;
    border: 1px solid #e2eceb;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(17, 42, 51, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.page-template-page-about .mbook-page-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 97, 96, 0.32);
    box-shadow: 0 18px 42px rgba(17, 42, 51, 0.12);
}

.page-template-page-about .mbook-page-card-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: #e7f4f2;
    color: #006160;
    font-size: 15px;
    font-weight: 900;
}

.page-template-page-about .mbook-page-card h3 {
    margin: 0 0 10px !important;
    color: #12243a !important;
    font-size: 20px !important;
}

.page-template-page-about .mbook-page-card p {
    margin: 0 !important;
    color: #5d6a73 !important;
    line-height: 1.7 !important;
}

.page-template-page-about .mbook-page-section {
    margin-top: 34px !important;
    margin-bottom: 34px !important;
    padding: clamp(32px, 5vw, 58px) !important;
    border-radius: 24px;
    background: linear-gradient(135deg, #f2f8f7, #f8fbfa);
    border: 1px solid #dcebe8;
}

.page-template-page-about .mbook-page-section h2,
.page-template-page-about .mbook-page-cta h2 {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.page-template-page-about .mbook-page-section p {
    max-width: 900px;
    margin: 0 !important;
}

.page-template-page-about .mbook-page-cta {
    position: relative;
    overflow: hidden;
    margin-top: 40px !important;
    padding: clamp(36px, 6vw, 70px) !important;
    border-radius: 26px;
    background: #12243a;
    color: #fff;
}

.page-template-page-about .mbook-page-cta h2,
.page-template-page-about .mbook-page-cta p {
    max-width: 760px;
    color: #fff !important;
}

.page-template-page-about .mbook-page-cta p {
    color: rgba(255, 255, 255, 0.76) !important;
}

.page-template-page-about .mbook-page-cta .wp-block-button__link {
    margin-top: 10px;
    background: #c99842 !important;
    color: #fff !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.page-template-page-about .svrg-fullpage-content > .woocommerce {
    margin-top: 20px;
    margin-bottom: 36px;
}

@media (max-width: 768px) {
    .page-template-page-about .svrg-fullpage {
        width: calc(100vw - 32px);
        margin-top: 24px;
        margin-bottom: 44px;
    }

    .page-template-page-about .mbook-page-hero {
        min-height: 280px;
        padding: 42px 24px !important;
        border-radius: 20px;
    }

    .page-template-page-about .mbook-page-card-grid {
        grid-template-columns: 1fr;
        gap: 16px !important;
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }

    .page-template-page-about .mbook-page-card {
        padding: 24px !important;
    }

    .page-template-page-about .mbook-page-section,
    .page-template-page-about .mbook-page-cta {
        border-radius: 20px;
        padding: 30px 24px !important;
    }
}

@media (min-width: 769px) and (max-width: 1080px) {
    .page-template-page-about .mbook-page-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .mbook-shop-page {
        width: calc(100vw - 32px);
    }

    .mbook-shop-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .mbook-shop-page {
        width: calc(100vw - 28px);
        margin-top: 20px;
    }

    .mbook-shop-layout {
        display: block;
    }

    .mbook-shop-sidebar {
        display: none;
    }

    .mbook-shop-mobile-categories {
        margin: 0 0 14px;
        display: block;
        overflow: hidden;
        border: 1px solid #d5dee2;
        border-radius: 8px;
        background: #fff;
    }

    .mbook-shop-mobile-categories summary {
        position: relative;
        padding: 14px 46px 14px 16px;
        color: var(--mbook-ink, #12243a);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }

    .mbook-shop-mobile-categories summary::-webkit-details-marker {
        display: none;
    }

    .mbook-shop-mobile-categories summary::after {
        content: '+';
        position: absolute;
        top: 50%;
        right: 16px;
        color: var(--mbook-teal, #006160);
        font-size: 22px;
        transform: translateY(-50%);
    }

    .mbook-shop-mobile-categories[open] summary::after {
        content: '−';
    }

    .mbook-shop-mobile-categories .mbook-shop-category-list {
        max-height: 340px;
        padding: 8px 0 14px !important;
        overflow-y: auto;
    }

    .mbook-shop-mobile-filter-content {
        max-height: 440px;
        padding: 16px;
        overflow-y: auto;
        border-top: 1px solid #e2e7e9;
    }

    .mbook-shop-mobile-filter-content .mbook-shop-price-filter {
        margin-bottom: 24px;
    }

    .mbook-shop-mobile-filter-content .mbook-price-values {
        max-width: 320px;
    }

    .mbook-shop-toolbar {
        min-height: 46px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .mbook-shop-toolbar .woocommerce-result-count {
        margin-right: auto !important;
        font-size: 12px;
    }

    .mbook-shop-toolbar .woocommerce-ordering select {
        min-width: 150px;
        width: 150px;
        height: 42px;
        font-size: 13px;
    }
}

@media (max-width: 680px) {
    .mbook-shop-page {
        width: calc(100vw - 20px);
        margin-top: 12px;
    }

    .mbook-shop-toolbar {
        gap: 8px;
    }

    .mbook-shop-toolbar .woocommerce-result-count {
        display: none;
    }

    .mbook-shop-toolbar .woocommerce-ordering {
        width: 100%;
    }

    .mbook-shop-toolbar .woocommerce-ordering select {
        width: 100%;
        min-width: 0;
    }

    ul.paradise-product-grid.paradise-product-grid.mbook-shop-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}