/* Self-hosted DM Sans: one normal variable file covers weights 300–700. */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-italic.woff2') format('woff2');
}

/* ================================================================
   SVRG CHILD THEME — custom.css
   ================================================================
   Table of contents:
    §1   Base reset & typography
    §2   Sticky header
    §3   Buttons (sharp, brand-accent)
    §4   WooCommerce product grid
    §5   Product card image & hover
    §6   Price display & sale badge
    §12  Dark header (SVRG.id style)
    §13  Dark footer
    §14  Homepage — Hero
    §15  Homepage — Category grid
    §16  Homepage — Horizontal product rows
    §17  Homepage — Brand banner
    §18  Homepage responsive
    §7   Loop variation swatches
    §8   Single product summary
    §9   WhatsApp order button
    §10  Trust / shipping accordion
    §11  Mobile bottom navigation bar
    §12  Responsive breakpoints
   ================================================================ */


/* ================================================================
   §1  BASE RESET & TYPOGRAPHY
   ================================================================ */

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

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;
}


/* ================================================================
   §2  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;
}


/* ================================================================
   §3  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;
}


/* ================================================================
   §4  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;
}


/* ================================================================
   §5  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;
}


/* ================================================================
   §6  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;
}


/* ================================================================
   §7  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
   (§ 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;
}


/* ================================================================
   §8  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;
}


/* ================================================================
   §9  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;
}


/* ================================================================
   §10  MOBILE BOTTOM NAVIGATION BAR
   ================================================================ */

.svrg-bottom-nav {
    display: none;  /* Shown only on mobile via §11 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;
}


/* ================================================================
   §11  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%;
    }
}

/* ── 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;
    }
}


/* ================================================================
   §12  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 (§2c 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;
}

/* ================================================================
   §0  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); }
}

/* ================================================================
   §0b  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;
    /* Keep the archive content aligned with the site's bounded desktop
       container. This also lets browser zoom scale product cards instead
       of continuously stretching them back to the full viewport width. */
    width: calc(100vw - 48px);
    max-width: 1440px;
    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: 1px solid #e5e7eb;
    border-radius: 7px;
    margin-bottom: 8px;
    overflow: hidden;
    background: #fff;
}

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

.svrg-filter-heading:hover,
.svrg-filter-heading:focus {
    background: #eef1ed !important;
    color: #111827 !important;
}

.svrg-filter-group[data-open="1"] .svrg-filter-heading {
    background: #e9eee9 !important;
}

.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: 8px 12px 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: 0;
    box-sizing: border-box;
    border-top: 1px solid #e8e8e8;
    margin-top: 16px;
}

.svrg-koleksi-inner {
    width: calc(100% - 48px);
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 40px 64px;
    box-sizing: border-box;
}

.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 (min-width: 769px) and (max-width: 1200px) {
    .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) !important; }
    .svrg-koleksi-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1601px) {
    ul.svrg-product-grid { grid-template-columns: repeat(5, 1fr) !important; }
}

@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-inner { 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;
    }
}


/* ================================================================
   §13  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;
}


/* ================================================================
   §14  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;
}


/* ================================================================
   §15  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; }
}


/* ================================================================
   §16  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;
}


/* ================================================================
   §16b  HOMEPAGE — CATEGORY TILES  (CPT svrg_tile — SVRG.id style)
   ================================================================ */

.svrg-tiles-section {
    padding: 34px 0 24px;
}

.svrg-tiles-section .svrg-container {
    max-width: 1728px;
}

.svrg-tile-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px;
}

.svrg-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    aspect-ratio: 4 / 5;
    min-width: 0;
    padding: 22px 14px 23px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d9e0e5;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.035);
    color: #0b1220;
    text-decoration: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.svrg-tile:hover,
.svrg-tile:focus-visible {
    border-color: var(--tile-accent, var(--color-accent));
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.09);
    color: #0b1220;
    text-decoration: none;
    transform: translateY(-2px);
    outline: none;
}

.svrg-tile-visual {
    position: absolute;
    inset: 22px 22px 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    color: #111;
}

.svrg-tile.has-image .svrg-tile-visual {
    transition: transform 0.25s ease;
}

.svrg-tile.has-image:hover .svrg-tile-visual,
.svrg-tile.has-image:focus-visible .svrg-tile-visual {
    transform: scale(1.04);
}

.svrg-tile-placeholder,
.svrg-tile-more-icon {
    width: clamp(54px, 48%, 98px);
    height: auto;
}

.svrg-tile-name {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    font-family: var(--font-sans);
    font-size: clamp(12px, 0.9vw, 16px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #0b1220;
    text-align: center;
    text-wrap: balance;
}

.svrg-tile--more {
    --tile-accent: var(--color-accent);
}

.svrg-tile--more .svrg-tile-visual {
    color: var(--color-accent);
}

.svrg-tile--more:hover .svrg-tile-more-icon,
.svrg-tile--more:focus-visible .svrg-tile-more-icon {
    transform: scale(1.06);
}


/* ================================================================
   §17  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;
}


/* ================================================================
   §18  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;
}


/* ================================================================
   §19  HOMEPAGE RESPONSIVE
   ================================================================ */

@media (min-width: 1025px) {
    .svrg-cat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .svrg-tile-grid {
        grid-template-columns: repeat(8, minmax(0, 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(4, minmax(0, 1fr));
        gap: 12px;
    }
    .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 {
        padding: 8px 0;
    }

    .svrg-tiles-section {
        padding: 24px 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: 10px;
    }
    .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;
    }
    /* Keep the reference card proportions on narrow screens. */
    .svrg-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .svrg-tile-grid {
        display: flex;
        gap: 10px;
        margin-right: -16px;
        padding: 2px 16px 10px 1px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .svrg-tile-grid::-webkit-scrollbar {
        display: none;
    }
    .svrg-tile {
        flex: 0 0 150px;
        scroll-snap-align: start;
    }
    .svrg-tile-name {
        font-size: 12px;
    }
}


/* ================================================================
   §20  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;
    }
}


/* ================================================================
   §20b  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);
}

/* ================================================================
   §21  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;
}

/* ================================================================
   §22  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;
    }
}

/* ================================================================
   §22b  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;
    }
}

/* ================================================================
   §23  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;
    }
}

/* ================================================================
   §24  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; }
}


/* ================================================================
   §25  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 {
    width: calc(100% - 48px) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 40px;
    box-sizing: border-box;
    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;
    width: calc(100% - 48px) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}

.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;
    }
}

/* ================================================================
   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;
    }
}


/* ================================================================
   §26  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-inner {
        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 §24 */
}

/* ──────────────────────────────────────────────────────────────
   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;
    }
}


/* ═══════════════════════════════════════════════════════════════
   §27  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;
    }
}



/* ═══════════════════════════════════════════════════════════════
   §28  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;
}

/* ================================================================
   §29 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;
}


/* ═══════════════════════════════════════════════════════
   §30  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;
}

/* ================================================================
   §19  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;
}

/* Product archives: Storefront reserves almost 6em below archive titles by
   default. Apply this globally so menu, carousel and direct archive URLs all
   keep the title, controls and products close together. */
.woocommerce-products-header {
    margin: 0 !important;
    padding: 0 0 24px !important;
}

.woocommerce-products-header__title {
    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce .storefront-sorting {
    margin-bottom: 24px !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: 240px;
    background: #1a1a1a;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.paradise-cat-hero.has-img {
    background-size: cover;
    background-position: center top;
    height: 320px;
}
.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 28px 32px;
    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: 180px; }
    .paradise-cat-hero.has-img { height: 220px; }
    .paradise-cat-hero-body { padding: 0 16px 24px; }
    .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;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    margin-bottom: 8px;
}
.paradise-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    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:not([data-type="color"]).is-selected,
.svrg-var-swatch:not([data-type="color"]):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;
    /* Keep the complete uploaded artwork visible. The login/register form can
       change the grid height, so `cover` would crop even a correctly sized
       4:5 image whenever the viewport ratio differs. */
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

@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;
}






/* Product detail: use the available desktop width and prevent cramped cards. */
@media (min-width: 1081px) {
    body.single-product .col-full {
        max-width: 1440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .woocommerce div.product {
        grid-template-columns: minmax(0, 42fr) minmax(0, 58fr) !important;
        gap: 48px !important;
    }
    .woocommerce div.product .summary.entry-summary {
        width: 100% !important;
    }
    .woocommerce div.product .product_title {
        max-width: none !important;
        overflow-wrap: normal;
        word-break: normal;
    }
}

/* Related-product prices must wrap instead of being clipped. */
.woocommerce div.product .related.products ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.woocommerce div.product .related.products ul.products li.product .price,
.woocommerce div.product .related.products .paradise-card-price .price {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35 !important;
}
@media (max-width: 1080px) {
    .woocommerce div.product .related.products ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 768px) {
    .woocommerce div.product .related.products ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Auto-dismiss successful cart notices without hiding errors. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
    transition: opacity .28s ease, transform .28s ease;
}
.woocommerce-notices-wrapper .svrg-notice-leaving {
    opacity: 0;
    transform: translateY(-6px);
}
/* Keep product galleries compact until the shopper asks for all photos. */
.paradise-gallery-item--extra { display: none !important; }
.paradise-product-gallery.is-expanded .paradise-gallery-item--extra,
.woocommerce-product-gallery.is-expanded .paradise-gallery-item--extra { display: block !important; }
.paradise-gallery-show-more { display:flex; width:100%; align-items:center; justify-content:center; min-height:44px; margin-top:12px; padding:10px 16px; border:1px solid #D1D5DB; border-radius:8px; background:#fff; color:#111827; font:600 13px/1.2 'DM Sans','Helvetica Neue',Arial,sans-serif; cursor:pointer; }
.paradise-gallery-show-more:hover { background:#F9FAFB; border-color:#9CA3AF; }

/* Mobile related cards: let variable-product price ranges wrap cleanly. */
@media (max-width: 768px) {
 .woocommerce div.product .related.products ul.products li.product,
 .woocommerce div.product .related.products .paradise-product-card { min-width:0 !important; overflow:visible !important; }
 .woocommerce div.product .related.products ul.products li.product .price,
 .woocommerce div.product .related.products .paradise-card-price .price { display:block !important; min-width:0 !important; overflow:visible !important; white-space:normal !important; overflow-wrap:anywhere !important; word-break:normal !important; font-size:clamp(11px,3.2vw,14px) !important; line-height:1.4 !important; }
 .woocommerce div.product .related.products .price .woocommerce-Price-amount { white-space:nowrap !important; }
}
/* Native gallery toggle: works without JavaScript. */
.paradise-gallery-toggle { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; opacity:0; pointer-events:none; }
.paradise-gallery-toggle:checked ~ .paradise-gallery-grid .paradise-gallery-item--extra { display:block !important; }
.paradise-gallery-toggle:checked ~ .paradise-gallery-show-more { display:none !important; }
.paradise-gallery-show-more { box-sizing:border-box; }

/* Compact marketplace initials for Shopee and Tokopedia social links. */
.svrg-marketplace-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35em;
    height: 1.35em;
    border: 1px solid currentColor;
    border-radius: 50%;
    font: 800 0.75em/1 'DM Sans', Arial, sans-serif;
}
.svrg-footer-social-link .svrg-marketplace-mark { font-size: 14px; }


/* Marketplace logos in the social rows. */
.svrg-marketplace-logo {
    display: block;
    width: 1.25em;
    height: 1.25em;
    overflow: visible;
}
.svrg-footer-social-link .svrg-marketplace-logo {
    width: 20px;
    height: 20px;
}

/* Compensate for the internal padding of marketplace SVG marks. */
.svrg-topbar-icon .svrg-marketplace-logo {
    width: 24px !important;
    height: 24px !important;
}
.svrg-footer-social-link .svrg-marketplace-logo {
    width: 25px !important;
    height: 25px !important;
}
/* Keep both footer markup variants aligned with the bounded site layout.
   This final override intentionally follows the later Cititex footer rules. */
.svrg-footer .svrg-footer-inner,
.svrg-footer .svrg-footer-container {
    width: calc(100% - 48px) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* ================================================================
   HOMEPAGE 2026 — COMPACT CONVERSION LAYOUT
   ================================================================ */
.svrg-product-types-section {
    padding-bottom: 18px;
}

.svrg-design-themes-section {
    padding-top: 18px;
}

.svrg-type-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: var(--type-grid-max, 914px);
    margin: 0 auto;
}

.svrg-type-grid .svrg-tile {
    flex: 0 0 170px;
}

@media (min-width: 769px) {
    .svrg-prod-track {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        padding-right: 28px;
        cursor: grab;
        user-select: none;
    }

    .svrg-hcard {
        flex: 0 0 calc((100% - 60px) / 4);
        width: calc((100% - 60px) / 4);
        min-width: 0;
    }
}

.svrg-brand-benefits {
    padding: 56px 0 28px;
    background: #f7f9f8;
    border-top: 1px solid var(--color-border);
}

.svrg-benefits-head {
    justify-content: center;
    text-align: center;
}

.svrg-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.svrg-benefit-card {
    min-width: 0;
    padding: 30px 28px;
    background: #fff;
    border: 1px solid #dde4e1;
    border-radius: 12px;
    text-align: center;
}

.svrg-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 9%, #fff);
    border-radius: 50%;
}

.svrg-benefit-icon svg {
    width: 28px;
    height: 28px;
}

.svrg-benefit-card h3 {
    margin: 0 0 10px;
    color: var(--color-heading);
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
}

.svrg-benefit-card p {
    margin: 0;
    color: var(--color-text-light);
    font-size: 14px;
    line-height: 1.7;
}

.svrg-brand-benefits + .svrg-wa-cta {
    padding: 30px 0 64px;
    background: #f7f9f8;
    border-top: 0;
}

.svrg-cat-layout--no-filter {
    display: block;
}

.svrg-cat-layout--no-filter .svrg-cat-products-col {
    width: 100%;
    flex: none;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .svrg-type-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .svrg-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 560px;
    }
}

@media (max-width: 768px) {
    .svrg-benefits-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .svrg-brand-benefits {
        padding: 42px 0 22px;
    }

    .svrg-benefit-card {
        padding: 24px 20px;
    }

    .svrg-brand-benefits + .svrg-wa-cta {
        padding: 26px 0 54px;
    }
}

@media (max-width: 480px) {
    .svrg-type-grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .svrg-type-grid .svrg-tile {
        flex-basis: 138px;
    }
}

/* ================================================================
   SHOP BY CATEGORY — image-led cards, editable from Customizer
   ================================================================ */
.svrg-shopcat {
    padding: 58px 0 42px;
    overflow: hidden;
    background: #fbfaf7;
}

.svrg-shopcat .svrg-container {
    max-width: 1728px;
}

.svrg-shopcat-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 30px;
}

.svrg-shopcat-heading {
    min-width: 0;
}

.svrg-shopcat-kicker {
    display: block;
    margin-bottom: 8px;
    color: #a31d25;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.svrg-shopcat-title {
    margin: 0;
    color: #050505;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(28px, 2.2vw, 38px);
    font-weight: 900;
    letter-spacing: 0.015em;
    line-height: 1.05;
    text-transform: uppercase;
}

.svrg-shopcat-title > span {
    color: #a31d25;
}

.svrg-shopcat-subtitle {
    margin: 14px 0 0;
    color: #55514d;
    font-size: 15px;
    line-height: 1.5;
}

.svrg-shopcat-view-all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 6px;
    padding: 8px 0 6px;
    border-bottom: 2px solid #d6d0c9;
    color: #191715 !important;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-decoration: none !important;
    text-transform: uppercase;
}

.svrg-shopcat-view-all svg,
.svrg-shopcat-cta svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #a31d25;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.svrg-shopcat-view-all:hover svg,
.svrg-shopcat-card:hover .svrg-shopcat-cta svg {
    transform: translateX(4px);
}

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

.svrg-shopcat-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 2px 2px 16px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

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

.svrg-shopcat-card {
    display: flex;
    flex: 0 0 calc((100% - 72px) / 5);
    min-width: 220px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e2ded8;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 5px 13px rgba(31, 24, 18, 0.07);
    color: #171513 !important;
    scroll-snap-align: start;
    text-decoration: none !important;
    transition: box-shadow 0.24s ease, transform 0.24s ease;
}

.svrg-shopcat-card:hover {
    box-shadow: 0 12px 26px rgba(31, 24, 18, 0.13);
    transform: translateY(-3px);
}

.svrg-shopcat-media {
    display: block;
    aspect-ratio: 1.07 / 1;
    overflow: hidden;
    background: #ece9e4;
}

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

.svrg-shopcat-card:hover .svrg-shopcat-media img {
    transform: scale(1.045);
}

.svrg-shopcat-media.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a7a19a;
}

.svrg-shopcat-media.is-placeholder svg {
    width: 42%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.svrg-shopcat-body {
    position: relative;
    display: flex;
    min-height: 205px;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 20px 20px;
}

.svrg-shopcat-icon {
    position: absolute;
    top: -38px;
    left: 20px;
    display: flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 7px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgba(31, 24, 18, 0.12);
    color: var(--shopcat-accent, #a31d25);
}

.svrg-shopcat-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.svrg-shopcat-icon svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.svrg-shopcat-name {
    display: block;
    margin-top: 14px;
    color: #0d0c0b;
    font-size: clamp(17px, 1.35vw, 23px);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-transform: uppercase;
}

.svrg-shopcat-desc {
    display: block;
    margin-top: 10px;
    color: #57534e;
    font-size: 13px;
    line-height: 1.45;
}

.svrg-shopcat-cta {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
    color: #181614;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Keep the active/ancestor item readable on the white header. */
body .site-header .svrg-nav-menu > li.current-menu-item > a,
body .site-header .svrg-nav-menu > li.current_page_item > a,
body .site-header .svrg-nav-menu > li.current-menu-ancestor > a,
body .site-header .svrg-nav-menu > li.current-page-ancestor > a {
    border-bottom-color: #111 !important;
    background: transparent !important;
    color: #111 !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

@media (min-width: 769px) and (max-width: 1100px) {
    .svrg-shopcat-card {
        flex-basis: calc((100% - 36px) / 3);
    }
}

@media (max-width: 768px) {
    .svrg-shopcat {
        padding: 38px 0 26px;
    }
    .svrg-shopcat-head {
        align-items: flex-start;
        margin-bottom: 22px;
    }
    .svrg-shopcat-title {
        font-size: 28px;
    }
    .svrg-shopcat-subtitle {
        max-width: 290px;
        margin-top: 10px;
        font-size: 13px;
    }
    .svrg-shopcat-view-all {
        gap: 8px;
        font-size: 10px;
        white-space: nowrap;
    }
    .svrg-shopcat-view-all svg {
        width: 20px;
        height: 20px;
    }
    .svrg-shopcat-track-wrap {
        margin-right: -16px;
    }
    .svrg-shopcat-track {
        gap: 12px;
        padding-right: 16px;
    }
    .svrg-shopcat-card {
        flex-basis: min(78vw, 310px);
        min-width: min(78vw, 310px);
    }
    .svrg-shopcat-body {
        min-height: 190px;
    }
}

@media (max-width: 480px) {
    .svrg-shopcat-head {
        display: block;
    }
    .svrg-shopcat-view-all {
        margin-top: 16px;
    }
}

/* ================================================================
   SHOP BY INTEREST — compact theme grid
   ================================================================ */
.svrg-interest {
    padding: 24px 0 38px;
    background: #f8f7f4;
}

.svrg-interest .svrg-container {
    max-width: 1728px;
}

.svrg-interest-panel {
    padding: 30px;
    border: 1px solid #ece9e4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31, 24, 18, 0.05);
}

.svrg-interest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

.svrg-interest-heading {
    min-width: 0;
}

.svrg-interest-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    color: #c91f2b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.025em;
    line-height: 1.2;
    text-transform: uppercase;
}

.svrg-interest-kicker::after {
    width: 16px;
    height: 2px;
    background: #d6242f;
    content: "";
}

.svrg-interest-title {
    margin: 0;
    color: #111;
    font-size: clamp(28px, 2.2vw, 38px);
    font-weight: 800;
    letter-spacing: 0.015em;
    line-height: 1.05;
    text-transform: uppercase;
}

.svrg-interest-subtitle {
    margin: 8px 0 0;
    color: #55514d;
    font-size: 13px;
    line-height: 1.45;
}

.svrg-interest-view-all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid #bdb8b2;
    border-radius: 4px;
    color: #171513 !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.svrg-interest-view-all:hover {
    border-color: #d6242f;
    background: #fff9f9;
}

.svrg-interest-view-all svg,
.svrg-interest-arrow {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: #e32636;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.svrg-interest-view-all:hover svg,
.svrg-interest-card:hover .svrg-interest-arrow {
    transform: translateX(4px);
}

.svrg-interest-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.svrg-interest-card {
    display: flex;
    min-width: 0;
    min-height: 112px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border: 1px solid #dfdcd7;
    border-radius: 7px;
    background: #fff;
    color: #171513 !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.svrg-interest-card:hover {
    border-color: var(--interest-accent, #d6242f);
    box-shadow: 0 8px 18px rgba(31, 24, 18, 0.08);
    transform: translateY(-2px);
}

.svrg-interest-card-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.svrg-interest-name {
    overflow: hidden;
    max-width: 100%;
    color: #111;
    font-size: clamp(17px, 1.25vw, 22px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.svrg-interest-line {
    width: 22px;
    height: 2px;
    margin: 8px 0 6px;
    background: var(--interest-accent, #d6242f);
}

.svrg-interest-meta {
    color: #514d48;
    font-size: 12px;
    line-height: 1.3;
}

.svrg-interest-arrow {
    flex: 0 0 auto;
}

@media (min-width: 769px) and (max-width: 1100px) {
    .svrg-interest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .svrg-interest {
        padding: 18px 0 30px;
    }
    .svrg-interest-panel {
        padding: 22px 16px;
        border-radius: 12px;
    }
    .svrg-interest-head {
        display: block;
        margin-bottom: 20px;
    }
    .svrg-interest-title {
        font-size: 28px;
    }
    .svrg-interest-view-all {
        margin-top: 16px;
        padding: 10px 12px;
    }
    .svrg-interest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .svrg-interest-card {
        min-height: 102px;
        gap: 8px;
        padding: 16px 13px;
    }
    .svrg-interest-name {
        font-size: 15px;
    }
    .svrg-interest-meta {
        font-size: 10px;
    }
    .svrg-interest-arrow {
        width: 18px;
        height: 18px;
    }
}

/* ================================================================
   VIEW-ALL COLLECTION ARCHIVE — compact 4/2-column catalog
   ================================================================ */
body.svrg-collection-page .site-content > .col-full {
    padding-inline: 28px !important;
}
.svrg-collection-archive {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 30px 0 64px;
}
.svrg-collection-archive-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 0 22px;
    border-bottom: 1px solid #e7e7e7;
}
.svrg-collection-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #c51f2a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}
.svrg-collection-archive-head h1 {
    margin: 0 !important;
    color: #161616;
    font-size: clamp(34px, 3vw, 48px);
    font-weight: 650;
    letter-spacing: -.045em;
    line-height: 1.05;
}
.svrg-collection-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0;
}
.svrg-collection-toolbar .woocommerce-ordering,
.svrg-collection-toolbar .woocommerce-result-count {
    float: none !important;
    margin: 0 !important;
}
.svrg-collection-toolbar .woocommerce-ordering select {
    min-width: 220px;
    height: 42px;
    padding: 0 38px 0 13px;
    border: 1px solid #d7d7d7;
    border-radius: 6px;
    background-color: #fff;
    color: #222;
    font-size: 13px;
}
.svrg-collection-toolbar .woocommerce-result-count {
    color: #777;
    font-size: 13px;
}
ul.svrg-collection-products.svrg-collection-products.svrg-collection-products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 24px 18px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
ul.svrg-collection-products::before,
ul.svrg-collection-products::after {
    content: none !important;
    display: none !important;
}
ul.svrg-collection-products > li.product {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid #e4e4e4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 3px 16px rgba(16, 24, 40, .035);
}
ul.svrg-collection-products .paradise-card-img-wrap {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f7f7;
}
ul.svrg-collection-products .paradise-card-img-wrap > img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
}
ul.svrg-collection-products .paradise-card-title {
    min-height: 42px;
    margin: 7px 14px 5px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
ul.svrg-collection-products .paradise-card-desc {
    display: none !important;
}
ul.svrg-collection-products .paradise-card-meta,
ul.svrg-collection-products .paradise-card-swatches,
ul.svrg-collection-products .paradise-card-price {
    margin-inline: 14px !important;
}
.svrg-collection-pagination {
    display: flex;
    justify-content: center;
    clear: both;
    width: 100%;
    padding-top: 34px;
}
.svrg-collection-pagination .woocommerce-pagination {
    float: none !important;
    margin: 0 !important;
}
.svrg-collection-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.svrg-collection-pagination .page-numbers li {
    margin: 0 !important;
}

/* ================================================================
   HOMEPAGE TRUST BARS
   ================================================================ */
.svrg-home-trust {
    padding: 22px 0;
    background: #f7f7f5;
}
.svrg-home-trust--stats {
    padding: 24px 0;
    background: #f1f0ee;
}
.svrg-home-trust-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #e7e4e1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(35, 30, 28, .045);
}
.svrg-home-trust-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 102px;
    gap: 15px;
    padding: 20px 28px;
    border-right: 1px solid #e8e8e8;
    transition: background-color .2s ease;
}
/* The homepage shell resets padding on every article with !important.
   Restore equal vertical padding so each trust item is genuinely centered. */
body.home article.svrg-home-trust-item {
    padding: 20px 28px !important;
}
.svrg-home-trust-item::before {
    content: none;
}
.svrg-home-trust-item:hover {
    background: #faf9f8;
}
.svrg-home-trust-item:last-child {
    border-right: 0;
}
.svrg-home-trust-icon {
    position: relative;
    display: grid;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #e3dfdc;
    background: #f6f4f2;
    box-shadow: none;
    color: #272727;
}
.svrg-home-trust-icon::after {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border: 2px solid #f6f4f2;
    border-radius: 50%;
    background: #c92531;
    content: '';
}
.svrg-home-trust-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.svrg-home-trust-copy {
    display: flex;
    min-width: 0;
    min-height: 58px;
    flex-direction: column;
    justify-content: center;
}
.svrg-home-trust-value {
    color: #111;
    font-size: clamp(21px, 1.8vw, 28px);
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1;
}
.svrg-home-trust-title {
    margin-top: 4px;
    color: #171717;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .015em;
    line-height: 1.25;
}
.svrg-home-trust-desc {
    margin-top: 5px;
    color: #76716e;
    font-size: 10.5px;
    line-height: 1.45;
}
.svrg-home-trust--service .svrg-home-trust-item {
    min-height: 98px;
}
.svrg-home-trust--service .svrg-home-trust-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
}
.svrg-home-trust--service .svrg-home-trust-icon svg {
    width: 31px;
    height: 31px;
}

/* ================================================================
   CLIENT FOOTER — reference layout from FOOTER BAWAH.docx
   ================================================================ */
.svrg-footer {
    background: #191919 !important;
}
.svrg-footer-top {
    padding: 54px 0 48px !important;
}
.svrg-footer-container {
    display: grid !important;
    grid-template-columns: 1.35fr .85fr 1fr .85fr !important;
    gap: 64px !important;
    width: calc(100% - 56px) !important;
    max-width: 1440px !important;
    padding: 0 !important;
}
.svrg-footer-col--brand {
    max-width: 330px;
    gap: 17px !important;
}
.svrg-footer-logo {
    width: auto;
    max-width: 112px !important;
    max-height: 72px;
    object-fit: contain;
}
.svrg-footer-tagline {
    color: rgba(255,255,255,.67) !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
}
.svrg-footer-heading {
    margin-bottom: 20px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.svrg-footer-links {
    gap: 14px !important;
}
.svrg-footer-links a,
.svrg-footer-links li a {
    color: rgba(255,255,255,.58) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}
.svrg-footer-links a:hover,
.svrg-footer-links li a:hover {
    color: #fff !important;
}
.svrg-footer-socials {
    gap: 10px !important;
}
.svrg-footer-social-link {
    display: grid !important;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.78) !important;
}
.svrg-footer-social-link svg {
    width: 19px;
    height: 19px;
}
.svrg-footer-bottom {
    max-width: 1440px !important;
    padding: 18px 0 !important;
}
.svrg-fullpage-content {
    max-width: 920px;
    margin: 0 auto;
    padding: 42px 28px 72px;
    color: #353535;
    font-size: 15px;
    line-height: 1.75;
}
.svrg-fullpage-content h2,
.svrg-fullpage-content h3 {
    color: #161616;
}
.svrg-fullpage-content h2 { margin: 0 0 18px; font-size: 28px; }
.svrg-fullpage-content h3 { margin: 30px 0 10px; font-size: 18px; }
.svrg-fullpage-content ul,
.svrg-fullpage-content ol { margin-left: 1.25em; }

@media (max-width: 1000px) {
    ul.svrg-collection-products.svrg-collection-products.svrg-collection-products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .svrg-home-trust-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .svrg-home-trust-item:nth-child(2) { border-right: 0; }
    .svrg-home-trust-item:nth-child(-n+2) { border-bottom: 1px solid #e8e8e8; }
    .svrg-footer-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 42px 56px !important;
    }
    .svrg-footer-col--brand {
        grid-column: 1 / -1;
        max-width: 560px;
    }
}

@media (max-width: 768px) {
    body.svrg-collection-page .site-content > .col-full {
        padding-inline: 14px !important;
    }
    .svrg-collection-archive {
        padding: 18px 0 42px;
    }
    .svrg-collection-archive-head {
        padding-bottom: 16px;
    }
    .svrg-collection-archive-head h1 {
        font-size: 31px;
    }
    .svrg-collection-toolbar {
        align-items: stretch;
        padding: 14px 0;
        flex-direction: column;
        gap: 9px;
    }
    .svrg-collection-toolbar .woocommerce-ordering,
    .svrg-collection-toolbar .woocommerce-ordering select {
        width: 100% !important;
        min-width: 0;
    }
    .svrg-collection-toolbar .woocommerce-result-count {
        order: 2;
    }
    ul.svrg-collection-products.svrg-collection-products.svrg-collection-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px !important;
    }
    ul.svrg-collection-products .paradise-card-title {
        min-height: 38px;
        margin: 6px 9px 4px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    ul.svrg-collection-products .paradise-card-desc,
    ul.svrg-collection-products .svrg-qv-btn {
        display: none !important;
    }
    ul.svrg-collection-products .paradise-card-meta,
    ul.svrg-collection-products .paradise-card-swatches,
    ul.svrg-collection-products .paradise-card-price {
        margin-inline: 9px !important;
    }
    ul.svrg-collection-products .button {
        width: calc(100% - 18px) !important;
        margin: 8px 9px 10px !important;
        padding: 10px 7px !important;
        font-size: 10px !important;
    }
    .svrg-home-trust {
        padding: 18px 0;
    }
    .svrg-home-trust--stats {
        padding: 20px 0;
    }
    .svrg-home-trust-item {
        min-height: 106px;
        gap: 11px;
        padding: 16px 13px;
    }
    body.home article.svrg-home-trust-item {
        padding: 16px 13px !important;
    }
    .svrg-home-trust-icon,
    .svrg-home-trust--service .svrg-home-trust-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }
    .svrg-home-trust-icon svg,
    .svrg-home-trust--service .svrg-home-trust-icon svg {
        width: 27px;
        height: 27px;
    }
    .svrg-home-trust-title { font-size: 10px; }
    .svrg-home-trust-desc { font-size: 9px; }
    .svrg-footer-top { padding: 42px 0 34px !important; }
    .svrg-footer-container {
        width: calc(100% - 40px) !important;
        gap: 34px 28px !important;
    }
}

@media (max-width: 520px) {
    .svrg-footer-container {
        grid-template-columns: 1fr !important;
    }
    .svrg-footer-col--brand {
        grid-column: auto;
    }
    .svrg-fullpage-content {
        padding: 30px 18px 56px;
        font-size: 14px;
    }
}

/* Cache revision: 2026-07-20-catalog-trust-footer-v1 */