/* Hygo Child — WooCommerce-scoped CSS */

/* ============================================================
 * TRUST BANNER
 * ============================================================ */
.hygo-trust-banner {
    background: var(--hygo-trust-bg, #0f9d58);
    color: var(--hygo-trust-color, #fff);
    padding: 12px 18px;
    margin: 14px 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
}
.hygo-trust-banner strong { color: inherit; font-weight: 700; }

/* ============================================================
 * PAYMENT ICONS
 * ============================================================ */
.hygo-payment-icons {
    margin: 16px 0;
    padding: 12px 0;
    border-top: 1px solid rgba(0,0,0,.08);
}
.hygo-payment-icons-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin-bottom: 10px;
    text-align: center;
}
.hygo-payment-icons-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.hygo-payment-icons-grid .hygo-payment-icon,
.hygo-payment-icon {
    height: 30px !important;
    width: auto !important;
    max-width: 60px !important;
    min-width: 0 !important;
    filter: none;
    opacity: 0.95;
    transition: opacity 0.2s;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px 6px;
    box-sizing: content-box;
    display: inline-block !important;
    flex: 0 0 auto !important;
    object-fit: contain;
}
.hygo-payment-icon:hover { opacity: 1; }
.hygo-payment-icons-footer-wrap { text-align: center; padding: 20px 0; }

/* ============================================================
 * STICKY ADD TO CART BAR
 * ============================================================ */
.hygo-sticky-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #dcdcde;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    padding: 10px 15px;
}
.hygo-sticky-cart.hygo-visible { transform: translateY(0); }
.hygo-sticky-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
}
.hygo-sticky-thumb img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.hygo-sticky-info { flex: 1; min-width: 0; overflow: hidden; }
.hygo-sticky-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #1a1a1a;
}
.hygo-sticky-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--hygo-primary, #f5891f);
    margin-top: 2px;
}
.hygo-sticky-price del { color: #999; font-weight: 400; margin-right: 6px; }
.hygo-sticky-btn {
    background: var(--hygo-primary, #f5891f) !important;
    color: #fff !important;
    padding: 12px 20px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
}
.hygo-sticky-btn:hover { background: var(--hygo-primary-hover, #d97706) !important; }

/* ---------- Button-only style ---------- */
/* Renders a single full-width CTA at the bottom of the viewport. Colours,
 * padding, font-size, uppercase and icon are all emitted by dynamic-css.php
 * based on the sticky_button_* options — this rule only owns layout basics
 * (block/full-width) so the button occupies the whole bar width. */
.hygo-sticky-cart--button {
    padding: 10px 12px;
}
.hygo-sticky-cart--button .hygo-sticky-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

/* On desktop, hide by default unless the desktop toggle is on. JS adds
   .hygo-desktop-enable to <body> when applicable. */
@media (min-width: 769px) {
    body:not(.hygo-desktop-enable) .hygo-sticky-cart.hygo-mobile-only {
        display: none !important;
    }
}

/* ============================================================
 * FREE SHIPPING PROGRESS BAR
 * ============================================================ */
/* v2.7.80: the bar can be wrapped in .hygo-fs-row alongside a
   "CHOISIR MA LIVRAISON" button on the cart page (matches
   Flash Ventes reference). On the checkout page and older callers
   the wrapper is still present but only contains the bar itself. */
.hygo-fs-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 20px;
}
.hygo-fs-row .hygo-free-shipping-bar {
    flex: 1 1 auto;
    margin-bottom: 0;   /* wrapper handles the outer gap */
    min-width: 0;
}
.hygo-fs-cta {
    /* Inline style on the anchor already covers layout + colour;
       this rule is a safety net for LiteSpeed CSS Combine strips. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 22px !important;
    background: #22c55e !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    text-decoration: none !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    transition: background 0.15s;
}
.hygo-fs-cta:hover {
    background: #16a34a !important;
}

.hygo-free-shipping-bar {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: 6px;
}
.hygo-fs-text {
    font-size: 14px;
    margin-bottom: 10px;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.4;
}
.hygo-fs-track {
    height: 8px;
    background: #e9ecef;
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}
.hygo-fs-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--hygo-accent, #0f9d58), var(--hygo-primary, #f5891f));
    border-radius: 100px;
    transition: width 0.4s ease-out;
}
.hygo-free-shipping-bar.hygo-reached .hygo-fs-fill {
    background: var(--hygo-accent, #0f9d58);
}
.hygo-free-shipping-bar.hygo-reached .hygo-fs-text {
    color: var(--hygo-accent, #0f9d58);
    font-weight: 600;
}

/* v2.7.80: on mobile the top CTA drops below the bar so both stay
   readable at narrow widths — nowrap on a 200px viewport would
   otherwise push text off-screen. */
@media (max-width: 700px) {
    .hygo-fs-row {
        flex-direction: column;
        gap: 12px;
    }
    .hygo-fs-cta {
        width: 100%;
    }
}

/* ============================================================
 * COUNTDOWN TIMER
 * ============================================================ */
.hygo-countdown {
    background: var(--hygo-countdown-bg, #dc3545);
    color: var(--hygo-countdown-color, #fff);
    padding: 14px 16px;
    margin: 14px 0;
    border-radius: 6px;
    text-align: center;
}
.hygo-countdown-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.hygo-countdown-timer {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.hygo-cd-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.2);
    padding: 8px 12px;
    border-radius: 4px;
    min-width: 55px;
}
.hygo-cd-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.hygo-cd-unit {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    opacity: 0.9;
}

/* Add bottom padding to WC body on mobile so sticky cart doesn't cover content */
@media (max-width: 768px) {
    body.single-product { padding-bottom: 80px; }
}

/* ============================================================
 * PRODUCT PAGE LAYOUT — GALLERY (LEFT) / DETAILS + DESCRIPTION (RIGHT)
 *
 * WooCommerce single-product layout uses a two-column flex:
 *   .woocommerce-product-gallery  (left, ~50%)
 *   .summary.entry-summary        (right, ~50%)
 *
 * We keep this two-column split and move the description INSIDE the right
 * column via the hygo_layout_inline_description hook (see product-page-
 * layout.php). The description can be tall; on desktop we make the gallery
 * sticky so it stays visible as the user scrolls the description on the
 * right, matching Amazon/Shopify-style PDP behavior.
 * ============================================================ */

/* Gallery: sticky within its column on desktop so it doesn't scroll away
   when the right column (which now includes the description) is much taller. */
@media (min-width: 900px) {
    /* v2.7.17: minimal flex parent — just enough to give position:sticky
       the layout context it needs. We deliberately do NOT set widths on
       the gallery or summary here; WooCommerce's own float-based widths
       plus the hygo-gallery.js enforcer already handle those, and
       overriding them (as v2.7.16 did) broke both.
       align-items:flex-start is the key property: it prevents flex from
       stretching the gallery to match the summary's height, which would
       defeat the whole point of sticky. */
    .woocommerce div.product,
    .woocommerce-page div.product {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    /* Tabs, related products, upsells, and any other direct child that
       isn't the gallery or summary (Hygo zones, sections injected via
       woocommerce_after_single_product_summary, etc.) — force them onto
       a new full-width row below the gallery+summary flex row.
       v2.7.39 replaced the explicit `.woocommerce-tabs / .related /
       .upsells` list with :not() so custom Hygo wrappers like
       .hygo-after-columns-zone and .hygo-product-reviews get the same
       full-width treatment automatically. */
    .woocommerce div.product > *:not(.woocommerce-product-gallery):not(.summary):not(.entry-summary),
    .woocommerce-page div.product > *:not(.woocommerce-product-gallery):not(.summary):not(.entry-summary) {
        flex: 0 0 100%;
        width: 100%;
        clear: both;
    }

    .woocommerce div.product .woocommerce-product-gallery,
    .woocommerce-page div.product .woocommerce-product-gallery {
        position: sticky;
        top: 20px;
        align-self: flex-start;
        /* max-height + overflow removed in v2.7.17 — they caused the
           gallery to scroll INDEPENDENTLY on its own axis, which combined
           with the main image sizing produced the giant-image bug. Sticky
           alone (without max-height) still keeps it pinned to the viewport
           as the page scrolls; if the gallery is taller than 100vh, the
           user just scrolls past it like any tall sticky element. */
    }
    /* Ensure the summary column doesn't get squeezed too narrow when
       description flows into it — WC's default 48% works but tighten spacing. */
    .woocommerce div.product .summary.entry-summary,
    .woocommerce-page div.product .summary.entry-summary {
        padding-left: 20px;
    }
}

/* Description block appearance when embedded in the summary column. Tighter
   top margin than when it was standalone below the gallery, and a subtle
   separator to visually break it from the price/cart block above. */
.summary .hygo-product-description {
    margin: 28px 0 0 !important;
    padding-top: 24px;
    border-top: 1px solid #eee;
}
.summary .hygo-product-description .hygo-section-title {
    font-size: 20px;
    margin-bottom: 14px;
}
.summary .hygo-product-description-content {
    font-size: 15px;
    line-height: 1.65;
}
.summary .hygo-product-description-content img {
    max-width: 100%;
    height: auto;
    margin: 12px 0;
    border-radius: 4px;
}
.summary .hygo-product-description-content h2,
.summary .hygo-product-description-content h3 {
    font-size: 17px;
    margin: 20px 0 10px;
}
.summary .hygo-product-description-content ul,
.summary .hygo-product-description-content ol {
    padding-left: 20px;
    margin: 10px 0;
}
.summary .hygo-product-description-content li {
    margin-bottom: 6px;
}
.summary .hygo-product-description-content p {
    margin: 0 0 12px;
}

/* Zone 2 (after_description sections) rendered inside summary too — inherit
   the same tight spacing. */
.summary .hygo-sections-zone { margin: 20px 0 0; }

/* Mobile: gallery and summary already stack vertically at WC's default
   breakpoint (768px). Remove the sticky treatment. */
@media (max-width: 899px) {
    /* v2.7.17: reset the flex parent added on desktop so gallery
       and summary revert to WC's default stacked layout. We don't touch
       widths — WC's own responsive rules already handle stacking. */
    .woocommerce div.product,
    .woocommerce-page div.product {
        display: block;
    }
    .woocommerce div.product .woocommerce-product-gallery,
    .woocommerce-page div.product .woocommerce-product-gallery {
        position: static;
    }
    .summary .hygo-product-description {
        padding-top: 20px;
        margin-top: 20px !important;
    }
}


/* ============================================================
 * PRODUCT GALLERY LAYOUTS
 *
 * Four layouts, chosen separately for desktop and mobile via body classes:
 *   hygo-gallery-desktop-{grid|carousel|main_thumbs|stacked}
 *   hygo-gallery-mobile-{grid|carousel|main_thumbs|stacked}
 *
 * The selectors below deliberately mirror WooCommerce's own gallery
 * specificity (5+ classes) so our overrides win the cascade without
 * relying on !important alone — but we use !important too since the
 * WooCommerce JS/flexslider can inject inline styles that outrank any
 * external selector.
 * ============================================================ */

/* ---------- DESKTOP LAYOUTS (min-width: 900px) ---------- */
@media (min-width: 900px) {

    /* ===== GRID: all images tiled in 2 columns, no slider ===== */
    body.hygo-gallery-desktop-grid .woocommerce div.product .woocommerce-product-gallery,
    body.hygo-gallery-desktop-grid .woocommerce-page div.product .woocommerce-product-gallery {
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }
    body.hygo-gallery-desktop-grid .woocommerce div.product .flex-viewport,
    body.hygo-gallery-desktop-grid .woocommerce-page div.product .flex-viewport {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.hygo-gallery-desktop-grid .woocommerce div.product .woocommerce-product-gallery__wrapper,
    body.hygo-gallery-desktop-grid .woocommerce-page div.product .woocommerce-product-gallery__wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        position: static !important;
        height: auto !important;
        transform: none !important;
        width: 100% !important;
    }
    body.hygo-gallery-desktop-grid .woocommerce div.product .woocommerce-product-gallery__image,
    body.hygo-gallery-desktop-grid .woocommerce-page div.product .woocommerce-product-gallery__image {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: block !important;
        float: none !important;
        margin: 0 !important;
    }
    body.hygo-gallery-desktop-grid .woocommerce div.product .woocommerce-product-gallery__image img,
    body.hygo-gallery-desktop-grid .woocommerce-page div.product .woocommerce-product-gallery__image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    body.hygo-gallery-desktop-grid .flex-control-nav,
    body.hygo-gallery-desktop-grid .flex-direction-nav {
        display: none !important;
    }

    /* ===== STACKED: single-column full-width, no slider ===== */
    body.hygo-gallery-desktop-stacked .woocommerce div.product .woocommerce-product-gallery,
    body.hygo-gallery-desktop-stacked .woocommerce-page div.product .woocommerce-product-gallery {
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }
    body.hygo-gallery-desktop-stacked .woocommerce div.product .flex-viewport,
    body.hygo-gallery-desktop-stacked .woocommerce-page div.product .flex-viewport {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.hygo-gallery-desktop-stacked .woocommerce div.product .woocommerce-product-gallery__wrapper,
    body.hygo-gallery-desktop-stacked .woocommerce-page div.product .woocommerce-product-gallery__wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        position: static !important;
        height: auto !important;
        transform: none !important;
        width: 100% !important;
    }
    body.hygo-gallery-desktop-stacked .woocommerce div.product .woocommerce-product-gallery__image,
    body.hygo-gallery-desktop-stacked .woocommerce-page div.product .woocommerce-product-gallery__image {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: block !important;
        float: none !important;
        margin: 0 !important;
    }
    body.hygo-gallery-desktop-stacked .woocommerce div.product .woocommerce-product-gallery__image img,
    body.hygo-gallery-desktop-stacked .woocommerce-page div.product .woocommerce-product-gallery__image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    body.hygo-gallery-desktop-stacked .flex-control-nav,
    body.hygo-gallery-desktop-stacked .flex-direction-nav {
        display: none !important;
    }

    /* ===== CAROUSEL: one image + polished dots + overlay arrows =====
     * Trick for dots: WooCommerce/flexslider renders each thumbnail as
     * <li><img class="flex-active" src="..."></li>. We hide the <img>
     * entirely and style the <li> itself as the visible dot. This gives
     * us pixel-perfect control regardless of what thumbnail image src
     * flexslider assigns. The <img> still needs to receive click events,
     * so we make it 100%×100% of the li and transparent.
     */
    body.hygo-gallery-desktop-carousel .woocommerce-product-gallery {
        position: relative !important;
    }
    body.hygo-gallery-desktop-carousel .flex-control-thumbs {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 16px 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    body.hygo-gallery-desktop-carousel .flex-control-thumbs li {
        width: 8px !important;
        height: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background: #d0d0d0 !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s !important;
        overflow: hidden !important;
        position: relative !important;
    }
    body.hygo-gallery-desktop-carousel .flex-control-thumbs li:hover {
        background: #a0a0a0 !important;
    }
    body.hygo-gallery-desktop-carousel .flex-control-thumbs li:has(img.flex-active) {
        width: 28px !important;
        background: var(--hygo-primary, #f5891f) !important;
    }
    /* Hide the thumbnail image itself but keep it clickable — flexslider
       binds click handlers to the <img>, not the <li>, so we can't just
       display:none it. Make it fill the parent, invisible. */
    body.hygo-gallery-desktop-carousel .flex-control-thumbs img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        cursor: pointer !important;
        border: none !important;
        background: transparent !important;
        display: block !important;
    }

    /* Prev/next arrows overlaid on the main image edges. */
    body.hygo-gallery-desktop-carousel .hygo-carousel-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: none !important;
        color: #333 !important;
        cursor: pointer !important;
        padding: 0 !important;
        border-radius: 50% !important;
        z-index: 5 !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
        transition: background 0.15s, transform 0.15s, opacity 0.2s !important;
        font-family: inherit !important;
        font-size: 24px !important;
        line-height: 1 !important;
        opacity: 0 !important;
    }
    body.hygo-gallery-desktop-carousel .woocommerce-product-gallery:hover .hygo-carousel-arrow {
        opacity: 1 !important;
    }
    body.hygo-gallery-desktop-carousel .hygo-carousel-arrow:hover {
        background: #fff !important;
        color: var(--hygo-primary, #f5891f) !important;
        transform: translateY(-50%) scale(1.08) !important;
    }
    body.hygo-gallery-desktop-carousel .hygo-carousel-arrow-prev { left: 12px !important; }
    body.hygo-gallery-desktop-carousel .hygo-carousel-arrow-next { right: 12px !important; }

    /* ===== MAIN + THUMBS: WC's native default with tuned thumb styling ===== */
    body.hygo-gallery-desktop-main_thumbs .flex-control-thumbs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
    }
    body.hygo-gallery-desktop-main_thumbs .flex-control-thumbs li {
        width: calc((100% - 32px) / 5) !important;
        margin: 0 !important;
        list-style: none !important;
    }
    body.hygo-gallery-desktop-main_thumbs .flex-control-thumbs img {
        width: 100% !important;
        height: auto !important;
        border-radius: 4px !important;
        border: 2px solid transparent !important;
        opacity: 0.6 !important;
        transition: opacity 0.15s, border-color 0.15s !important;
        cursor: pointer !important;
    }
    body.hygo-gallery-desktop-main_thumbs .flex-control-thumbs img:hover { opacity: 0.85 !important; }
    body.hygo-gallery-desktop-main_thumbs .flex-control-thumbs img.flex-active {
        opacity: 1 !important;
        border-color: var(--hygo-primary, #f5891f) !important;
    }
}

/* ---------- MOBILE LAYOUTS (max-width: 899px) ---------- */
@media (max-width: 899px) {

    /* ===== GRID mobile ===== */
    body.hygo-gallery-mobile-grid .woocommerce div.product .woocommerce-product-gallery,
    body.hygo-gallery-mobile-grid .woocommerce-page div.product .woocommerce-product-gallery {
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }
    body.hygo-gallery-mobile-grid .flex-viewport {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.hygo-gallery-mobile-grid .woocommerce div.product .woocommerce-product-gallery__wrapper,
    body.hygo-gallery-mobile-grid .woocommerce-page div.product .woocommerce-product-gallery__wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        position: static !important;
        height: auto !important;
        transform: none !important;
        width: 100% !important;
    }
    body.hygo-gallery-mobile-grid .woocommerce div.product .woocommerce-product-gallery__image,
    body.hygo-gallery-mobile-grid .woocommerce-page div.product .woocommerce-product-gallery__image {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: block !important;
        float: none !important;
        margin: 0 !important;
    }
    body.hygo-gallery-mobile-grid .woocommerce div.product .woocommerce-product-gallery__image img,
    body.hygo-gallery-mobile-grid .woocommerce-page div.product .woocommerce-product-gallery__image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    body.hygo-gallery-mobile-grid .flex-control-nav,
    body.hygo-gallery-mobile-grid .flex-direction-nav {
        display: none !important;
    }

    /* ===== STACKED mobile ===== */
    body.hygo-gallery-mobile-stacked .woocommerce div.product .woocommerce-product-gallery,
    body.hygo-gallery-mobile-stacked .woocommerce-page div.product .woocommerce-product-gallery {
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }
    body.hygo-gallery-mobile-stacked .flex-viewport {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.hygo-gallery-mobile-stacked .woocommerce div.product .woocommerce-product-gallery__wrapper,
    body.hygo-gallery-mobile-stacked .woocommerce-page div.product .woocommerce-product-gallery__wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        position: static !important;
        height: auto !important;
        transform: none !important;
        width: 100% !important;
    }
    body.hygo-gallery-mobile-stacked .woocommerce div.product .woocommerce-product-gallery__image,
    body.hygo-gallery-mobile-stacked .woocommerce-page div.product .woocommerce-product-gallery__image {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: block !important;
        float: none !important;
        margin: 0 !important;
    }
    body.hygo-gallery-mobile-stacked .woocommerce div.product .woocommerce-product-gallery__image img,
    body.hygo-gallery-mobile-stacked .woocommerce-page div.product .woocommerce-product-gallery__image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    body.hygo-gallery-mobile-stacked .flex-control-nav,
    body.hygo-gallery-mobile-stacked .flex-direction-nav {
        display: none !important;
    }

    /* ===== CAROUSEL mobile ===== */
    body.hygo-gallery-mobile-carousel .woocommerce-product-gallery {
        position: relative !important;
    }
    body.hygo-gallery-mobile-carousel .flex-control-thumbs {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    body.hygo-gallery-mobile-carousel .flex-control-thumbs li {
        width: 7px !important;
        height: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background: #d0d0d0 !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s !important;
        overflow: hidden !important;
        position: relative !important;
    }
    body.hygo-gallery-mobile-carousel .flex-control-thumbs li:has(img.flex-active) {
        width: 22px !important;
        background: var(--hygo-primary, #f5891f) !important;
    }
    body.hygo-gallery-mobile-carousel .flex-control-thumbs img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        cursor: pointer !important;
        border: none !important;
        background: transparent !important;
        display: block !important;
    }
    /* Arrows on mobile always visible */
    body.hygo-gallery-mobile-carousel .hygo-carousel-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.85) !important;
        border: none !important;
        color: #333 !important;
        cursor: pointer !important;
        padding: 0 !important;
        border-radius: 50% !important;
        z-index: 5 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        font-family: inherit !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }
    body.hygo-gallery-mobile-carousel .hygo-carousel-arrow-prev { left: 8px !important; }
    body.hygo-gallery-mobile-carousel .hygo-carousel-arrow-next { right: 8px !important; }

    /* ===== MAIN + THUMBS mobile (horizontal scrolling thumb strip) ===== */
    body.hygo-gallery-mobile-main_thumbs .flex-control-thumbs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        margin: 10px 0 0 !important;
        padding: 0 4px 6px !important;
        -webkit-overflow-scrolling: touch;
    }
    body.hygo-gallery-mobile-main_thumbs .flex-control-thumbs li {
        flex: 0 0 60px !important;
        margin: 0 !important;
        list-style: none !important;
    }
    body.hygo-gallery-mobile-main_thumbs .flex-control-thumbs img {
        width: 60px !important;
        height: 60px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
        border: 2px solid transparent !important;
        opacity: 0.6 !important;
        transition: opacity 0.15s, border-color 0.15s !important;
        cursor: pointer !important;
    }
    body.hygo-gallery-mobile-main_thumbs .flex-control-thumbs img.flex-active {
        opacity: 1 !important;
        border-color: var(--hygo-primary, #f5891f) !important;
    }
}

/* Lightbox trigger visibility for slider layouts */
.hygo-gallery-lightbox-on .woocommerce-product-gallery__trigger {
    z-index: 10;
}

/* ============================================================
 * REVIEWS SECTION — FULL-WIDTH BELOW BOTH COLUMNS
 *
 * WooCommerce's div.product uses flexbox on many themes (including
 * GeneratePress) so items placed after .summary become a third flex
 * column rather than clearing below. We force the reviews block to
 * span 100% and break out of any parent flex/grid layout so it
 * always sits below both the gallery and summary columns at full
 * width, regardless of which is taller.
 * ============================================================ */
.woocommerce div.product .hygo-product-reviews,
.woocommerce-page div.product .hygo-product-reviews {
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
    float: none !important;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

/* ============================================================
 * MAIN + THUMBS STRIP LAYOUT
 * Single horizontal row of thumbnails with prev/next arrow buttons
 * for scrolling. Mirrors the Amazon/Shopify PDP pattern.
 *
 * The .hygo-thumb-strip wrapper is injected by gallery.js and wraps
 * both the .flex-control-thumbs list and the two arrow buttons.
 * ============================================================ */
@media (min-width: 900px) {
    /* Wrapper injected by JS around the thumb list. Position: relative
       so the arrow buttons can absolutely-position over its left/right edges. */
    body.hygo-gallery-desktop-main_thumbs_strip .hygo-thumb-strip {
        position: relative !important;
        margin-top: 12px !important;
    }
    body.hygo-gallery-desktop-main_thumbs_strip .hygo-thumb-strip .flex-control-thumbs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 32px 4px !important;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        list-style: none !important;
    }
    body.hygo-gallery-desktop-main_thumbs_strip .hygo-thumb-strip .flex-control-thumbs::-webkit-scrollbar {
        display: none;
    }
    body.hygo-gallery-desktop-main_thumbs_strip .hygo-thumb-strip .flex-control-thumbs li {
        flex: 0 0 64px !important;
        margin: 0 !important;
        list-style: none !important;
    }
    body.hygo-gallery-desktop-main_thumbs_strip .hygo-thumb-strip .flex-control-thumbs img {
        width: 64px !important;
        height: 64px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
        border: 2px solid transparent !important;
        opacity: 0.6 !important;
        transition: opacity 0.15s, border-color 0.15s !important;
        cursor: pointer !important;
    }
    body.hygo-gallery-desktop-main_thumbs_strip .hygo-thumb-strip .flex-control-thumbs img:hover { opacity: 0.9 !important; }
    body.hygo-gallery-desktop-main_thumbs_strip .hygo-thumb-strip .flex-control-thumbs img.flex-active {
        opacity: 1 !important;
        border-color: var(--hygo-primary, #f5891f) !important;
    }

    /* Arrow buttons on left/right edges of the strip */
    body.hygo-gallery-desktop-main_thumbs_strip .hygo-thumb-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 28px !important;
        height: 68px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        color: #333 !important;
        cursor: pointer !important;
        padding: 0 !important;
        border-radius: 4px !important;
        z-index: 2 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
        transition: background 0.15s, transform 0.15s !important;
        font-family: inherit !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }
    body.hygo-gallery-desktop-main_thumbs_strip .hygo-thumb-arrow:hover {
        background: #fff !important;
        color: var(--hygo-primary, #f5891f) !important;
    }
    body.hygo-gallery-desktop-main_thumbs_strip .hygo-thumb-arrow-prev { left: 0 !important; }
    body.hygo-gallery-desktop-main_thumbs_strip .hygo-thumb-arrow-next { right: 0 !important; }
    /* Hide arrow when we're at that edge of the scroll */
    body.hygo-gallery-desktop-main_thumbs_strip .hygo-thumb-arrow.hygo-arrow-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 899px) {
    /* Mobile: same strip behavior, smaller arrows, smaller thumbs */
    body.hygo-gallery-mobile-main_thumbs_strip .hygo-thumb-strip {
        position: relative !important;
        margin-top: 10px !important;
    }
    body.hygo-gallery-mobile-main_thumbs_strip .hygo-thumb-strip .flex-control-thumbs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 26px 4px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    body.hygo-gallery-mobile-main_thumbs_strip .hygo-thumb-strip .flex-control-thumbs::-webkit-scrollbar {
        display: none;
    }
    body.hygo-gallery-mobile-main_thumbs_strip .hygo-thumb-strip .flex-control-thumbs li {
        flex: 0 0 56px !important;
        margin: 0 !important;
        list-style: none !important;
    }
    body.hygo-gallery-mobile-main_thumbs_strip .hygo-thumb-strip .flex-control-thumbs img {
        width: 56px !important;
        height: 56px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
        border: 2px solid transparent !important;
        opacity: 0.6 !important;
        cursor: pointer !important;
    }
    body.hygo-gallery-mobile-main_thumbs_strip .hygo-thumb-strip .flex-control-thumbs img.flex-active {
        opacity: 1 !important;
        border-color: var(--hygo-primary, #f5891f) !important;
    }
    body.hygo-gallery-mobile-main_thumbs_strip .hygo-thumb-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 24px !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        color: #333 !important;
        cursor: pointer !important;
        padding: 0 !important;
        border-radius: 4px !important;
        z-index: 2 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
        font-family: inherit !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }
    body.hygo-gallery-mobile-main_thumbs_strip .hygo-thumb-arrow-prev { left: 0 !important; }
    body.hygo-gallery-mobile-main_thumbs_strip .hygo-thumb-arrow-next { right: 0 !important; }
    body.hygo-gallery-mobile-main_thumbs_strip .hygo-thumb-arrow.hygo-arrow-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ============================================================
 * SALE BADGE (PROMO !)
 * Replaces WooCommerce's default .onsale via woocommerce_sale_flash filter.
 * Colors + shape come from admin options and are applied via inline CSS
 * variables on the element (see dynamic-css.php).
 * ============================================================ */
.hygo-sale-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 9;
    background: var(--hygo-sale-badge-bg, #00a8e1) !important;
    color: var(--hygo-sale-badge-color, #fff) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    padding: 6px 12px !important;
    min-width: auto !important;
    min-height: auto !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.hygo-sale-badge--square  { border-radius: 0 !important; }
.hygo-sale-badge--rounded { border-radius: 4px !important; }
.hygo-sale-badge--pill    { border-radius: 999px !important; }
.hygo-sale-badge--circle {
    border-radius: 50% !important;
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    font-size: 11px !important;
    text-align: center;
    line-height: 1.1 !important;
}

/* ============================================================
 * PRICE BLOCK — 4 preset styles + custom
 * The single container class .hygo-price scopes everything. The variant
 * modifier class picks which layout renders.
 * ============================================================ */
.hygo-price { margin: 12px 0 16px; }
.hygo-price del { text-decoration: line-through; opacity: 0.7; }

/* Hide WC's below-dropdown variation price wrappers — the top .price slot
 * is sync'd via assets/js/price-block.js so a second block is redundant.
 * We keep .woocommerce-variation-availability visible (stock / backorder). */
.single_variation_wrap .woocommerce-variation-price,
.single_variation_wrap .single_variation > .price,
.woocommerce div.product .single_variation .price,
.woocommerce-variation-price { display: none !important; }
/* WC's price template outputs <p class="price">…</p>. Our filter returns a
 * <div class="hygo-price"> which is invalid inside a <p>, so browsers reflow
 * at parse time and leave an empty <p class="price"></p> sibling. Hide it so
 * it doesn't add phantom vertical spacing above the styled block. */
.summary p.price:empty { display: none !important; }

/* ---------- Amazon ---------- */
.hygo-price--amazon .hygo-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.hygo-price--amazon .hygo-price-current {
    font-size: 34px;
    font-weight: 700;
    color: #b12704;
    line-height: 1.1;
}
.hygo-price--amazon .hygo-price-regular {
    font-size: 14px;
    color: #666;
}
.hygo-price--amazon .hygo-price-save {
    margin-top: 6px;
    color: #067d62;
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Discount pill / Custom ---------- */
.hygo-price--pill {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.hygo-price--pill .hygo-price-badge {
    background: var(--hygo-price-current-bg, #dc3545);
    color: var(--hygo-price-current-color, #fff);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}
.hygo-price--pill .hygo-price-badge .woocommerce-Price-amount { color: inherit !important; }
.hygo-price--pill .hygo-price-regular-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hygo-price--pill .hygo-price-regular {
    font-size: var(--hygo-price-regular-size, 15px);
    color: var(--hygo-price-regular-color, #666);
    font-weight: var(--hygo-price-regular-weight, 400);
    font-style: var(--hygo-price-regular-style, normal);
    line-height: 1.2;
}
.hygo-price--pill .hygo-price-regular-label {
    font-size: var(--hygo-price-regular-label-size, 11px);
    color: var(--hygo-price-regular-label-color, #999);
    font-weight: var(--hygo-price-regular-label-weight, 400);
    font-style: var(--hygo-price-regular-label-style, normal);
    letter-spacing: 0.02em;
}
.hygo-price--pill .hygo-price-pill {
    background: var(--hygo-price-pill-bg, #fff0f0);
    color: var(--hygo-price-pill-color, #dc3545);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.hygo-price--pill .hygo-price-info {
    background: transparent;
    border: 1px solid #cfcfcf;
    color: #888;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    font-style: italic;
    font-family: Georgia, serif;
    cursor: help;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    line-height: 1;
}
.hygo-price--pill .hygo-price-info:hover {
    background: #f5f5f5;
    color: #333;
}
.hygo-price--pill .hygo-price-info:hover::after,
.hygo-price--pill .hygo-price-info:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-family: inherit;
    padding: 8px 12px;
    border-radius: 6px;
    width: max-content;
    max-width: 260px;
    line-height: 1.4;
    text-align: center;
    z-index: 100;
    pointer-events: none;
    white-space: normal;
}

/* ---------- Boxed sale ---------- */
.hygo-price--boxed .hygo-price-regular-top {
    font-size: 14px;
    color: #888;
    margin-bottom: 6px;
}
.hygo-price--boxed .hygo-price-box {
    display: inline-block;
    padding: 12px 22px;
    background: #fff;
    border: 2px solid #dc3545;
    color: #dc3545;
    font-size: 30px;
    font-weight: 700;
    border-radius: 8px;
    line-height: 1.1;
}
.hygo-price--boxed .hygo-price-box .woocommerce-Price-amount { color: inherit !important; }
.hygo-price--boxed .hygo-price-save-line {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eafbe7;
    color: #0f7a3d;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    margin-left: 10px;
}

/* Responsive */
@media (max-width: 600px) {
    .hygo-price--amazon .hygo-price-current { font-size: 28px; }
    .hygo-price--pill .hygo-price-badge { font-size: 20px; padding: 7px 12px; }
    .hygo-price--boxed .hygo-price-box { font-size: 26px; padding: 10px 18px; }
}

/* ============================================================
 * FEATURE LIST — icon + title + 1/2-col list with markers
 * Used by section type 'feature_list'.
 * ============================================================ */

/* Shared icon primitive — SVG or emoji, same footprint.
 * SVG variant uses currentColor so `color` on the parent tints it. */
.hygo-si {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
}
.hygo-si--svg svg {
    width: 1.4em;
    height: 1.4em;
    display: block;
}
.hygo-si--emoji {
    font-size: 1.3em;
}
.hygo-si--img {
    width: 1.4em;
    height: 1.4em;
}
.hygo-si--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.hygo-feature-list {
    margin: 16px 0;
    font-family: inherit;
    color: #111;
}
.hygo-fl-card {
    padding: 22px 24px;
    border-radius: 10px;
}
.hygo-feature-list .hygo-fl-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px 4px;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    color: #111;
}
.hygo-feature-list a.hygo-fl-title {
    color: inherit;
    text-decoration: none;
}
.hygo-feature-list a.hygo-fl-title:hover {
    text-decoration: underline;
}
.hygo-feature-list .hygo-fl-icon.hygo-si--svg svg {
    width: 26px;
    height: 26px;
}
.hygo-feature-list .hygo-fl-icon.hygo-si--emoji {
    font-size: 26px;
}
.hygo-feature-list .hygo-fl-title {
    flex: 1 1 auto;
}
.hygo-feature-list .hygo-fl-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 28px;
}
.hygo-feature-list.hygo-fl-cols-2 .hygo-fl-items {
    grid-template-columns: 1fr 1fr;
}
.hygo-feature-list .hygo-fl-items li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 17px;
    line-height: 1.4;
}
.hygo-feature-list .hygo-fl-mark {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    min-width: 1em;
    text-align: center;
}
.hygo-feature-list .hygo-fl-mark.hygo-fl-bullet {
    color: #111;
}
.hygo-feature-list .hygo-fl-text {
    flex: 1 1 auto;
}
.hygo-feature-list a.hygo-fl-text,
.hygo-feature-list button.hygo-fl-text {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: auto;
    display: inline;
}
.hygo-feature-list a.hygo-fl-text:hover,
.hygo-feature-list button.hygo-fl-text:hover {
    text-decoration: underline;
}
@media (max-width: 640px) {
    .hygo-feature-list.hygo-fl-cols-2 .hygo-fl-items {
        grid-template-columns: 1fr;
    }
}

/* Full-width footer row inside feature_list — a single "summary" line that
 * always spans the full width regardless of the 1/2-col layout above. */
.hygo-feature-list .hygo-fl-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.4;
    color: #111;
}
.hygo-feature-list .hygo-fl-footer-icon.hygo-si--svg svg {
    width: 24px;
    height: 24px;
}
.hygo-feature-list .hygo-fl-footer-icon.hygo-si--emoji {
    font-size: 22px;
}
.hygo-feature-list .hygo-fl-footer-text {
    flex: 1 1 auto;
}

/* ============================================================
 * REVIEW LINK — icon + title left, link right
 * Used by section type 'review_link'.
 * ============================================================ */
.hygo-review-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-radius: 10px;
    margin: 12px 0;
    font-family: inherit;
    color: #111;
}
.hygo-review-link .hygo-rl-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
.hygo-review-link .hygo-rl-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: 0 0 auto;
}
.hygo-review-link .hygo-rl-icon.hygo-si--svg svg {
    width: 1em;
    height: 1em;
    display: block;
}
.hygo-review-link .hygo-rl-icon.hygo-si--emoji {
    font-size: 1em;
    line-height: 1;
}
.hygo-review-link .hygo-rl-title {
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hygo-review-link .hygo-rl-link {
    flex: 0 0 auto;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    transition: opacity 0.15s ease;
}
.hygo-review-link .hygo-rl-link:hover {
    opacity: 0.75;
    text-decoration: underline;
}

/* ============================================================
 * feature_list footer variants + popup dialog
 * ============================================================ */

/* Link + popup variants keep the same visual as the plain .hygo-fl-footer
 * but drop button/anchor default styling and add a hover-underline hint. */
.hygo-feature-list a.hygo-fl-footer,
.hygo-feature-list button.hygo-fl-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
    font-size: 16px;
    line-height: 1.4;
}
.hygo-feature-list .hygo-fl-footer--link:hover .hygo-fl-footer-text,
.hygo-feature-list .hygo-fl-footer--popup:hover .hygo-fl-footer-text {
    text-decoration: underline;
}

/* Native <dialog> reset — browsers give it huge default padding/border. */
.hygo-fl-dialog {
    border: 0;
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 560px;
    width: calc(100% - 32px);
    max-height: 82vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    color: #111;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.hygo-fl-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}
.hygo-fl-dialog-closeform {
    display: flex;
    justify-content: flex-end;
    margin: -12px -12px 0 0;
}
.hygo-fl-dialog-close {
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
    color: #6b7280;
    border-radius: 6px;
}
.hygo-fl-dialog-close:hover {
    background: #f3f4f6;
    color: #111;
}
.hygo-fl-dialog-title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: #111;
}
.hygo-fl-dialog-content {
    font-size: 15px;
    line-height: 1.55;
    color: #333;
}
.hygo-fl-dialog-content h2,
.hygo-fl-dialog-content h3,
.hygo-fl-dialog-content h4 {
    color: #16a34a;
    font-size: 17px;
    font-weight: 700;
    margin: 18px 0 8px;
}
.hygo-fl-dialog-content ul,
.hygo-fl-dialog-content ol {
    padding-left: 20px;
    margin: 0 0 12px;
}
.hygo-fl-dialog-content li {
    margin: 0 0 8px;
}
.hygo-fl-dialog-content p {
    margin: 0 0 12px;
}
.hygo-fl-dialog-content a {
    color: #16a34a;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .hygo-fl-dialog {
        padding: 22px 20px;
        border-radius: 12px;
        width: calc(100% - 24px);
        max-height: 78vh;
    }
    .hygo-fl-dialog-title {
        font-size: 19px;
        margin-bottom: 16px;
    }
}

/* ============================================================
 * HTML section — optional header above the raw HTML block.
 * Same visual pattern as feature_list header so both feel like
 * siblings when stacked on the product page.
 * ============================================================ */
.hygo-html-section {
    margin: 16px 0;
    font-family: inherit;
    color: #111;
}
.hygo-html-header,
.hygo-html-section a.hygo-html-header,
.hygo-html-section button.hygo-html-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px 4px;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    padding: 0;
    background: none;
    border: 0;
    text-decoration: none;
    cursor: auto;
    font-family: inherit;
    text-align: left;
    width: auto;
}
.hygo-html-section a.hygo-html-header,
.hygo-html-section button.hygo-html-header {
    cursor: pointer;
}
.hygo-html-header--link:hover .hygo-html-title,
.hygo-html-header--popup:hover .hygo-html-title {
    text-decoration: underline;
}
.hygo-html-icon.hygo-si--svg svg {
    width: 26px;
    height: 26px;
}
.hygo-html-icon.hygo-si--emoji {
    font-size: 26px;
}

/* ==========================================================================
   v2.7.23 — Inline variations style
   ==========================================================================

   Only active when body has .hygo-variations-inline (added by
   module-variations-display.php when the admin picks "En ligne" style).

   Transforms WooCommerce's default per-row variations table:

     [Couleur]  [Bleu ▾]
     [Taille]   [35   ▾]  Effacer

   Into a title + inline row:

     Faites Votre Sélection :
     [Bleu ▾]  [35 ▾]
     Effacer

   Approach: tables don't collapse cleanly to flex layout — we set the
   outer <table> and <tbody> to block/flex, hide the <th class="label">
   entirely, and give each <tr> flex: 1 1 220px so single-attribute
   products span full width and two-attribute products sit side-by-side.
*/

.hygo-variations-inline .variations_form .hygo-variations-select-title {
    font-weight: 600;
    font-size: 15px;
    margin: 0 0 12px 0;
    display: block;
    color: inherit;
}

.hygo-variations-inline .variations_form table.variations {
    display: block;
    width: 100%;
    border: none;
    margin: 0 0 16px 0;
    background: transparent;
}

.hygo-variations-inline .variations_form table.variations tbody {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    width: 100%;
}

.hygo-variations-inline .variations_form table.variations tr {
    display: flex;
    flex: 1 1 220px;
    /* v2.7.25 — cap width so a single-attribute product doesn't stretch
       the dropdown across the full column width, which looks awkward on
       wide screens ("Lumière blanche" spanning 1000px). 340px comfortably
       fits typical French labels ("Petit - Transparent", "Lumière blanche
       chaude"). Multi-attribute rows still sit side-by-side because
       340 + 12 gap + 340 = 692px < typical column width. Wraps to a
       second line if 3+ attributes and the row would overflow. */
    max-width: 340px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

/* Hide the per-attribute label ("Couleur", "Taille") entirely — the
   dropdown text itself communicates what's selected, and the
   Faites Votre Sélection heading above sets context. */
.hygo-variations-inline .variations_form table.variations th.label {
    display: none;
}

.hygo-variations-inline .variations_form table.variations td.value {
    display: block;
    flex: 1;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    position: relative;
}

.hygo-variations-inline .variations_form table.variations td.value select {
    width: 100%;
    display: block;
    margin: 0;
}

/* The "Effacer" reset link — WC inserts it inside the last td.value once
   a variation is chosen. In v2.7.26 we hide it entirely: our variation
   auto-select (variation-defaults.js) fills empty dropdowns on load, so
   the moment the customer clicks Effacer, the value is reset then
   immediately re-selected → visually nothing changes. Pointless UI. */
.hygo-variations-inline .variations_form .reset_variations {
    display: none !important;
}

/* Very narrow screens (< 380px) — force each dropdown onto its own row
   so 40-char option text doesn't get truncated. Kicks in only on
   sub-tablet mobile; ≥ 380 keeps the inline layout even on mobile. */
@media (max-width: 379px) {
    .hygo-variations-inline .variations_form table.variations tr {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   v2.7.24 — Inline variations preview thumbnail
   ==========================================================================

   Only active when body has .hygo-variations-inline AND JS has wrapped
   the preview + variations table in .hygo-variations-inline-row.

   Layout: small circular thumb on the left, dropdowns table on the right.
   Thumb has flex:0 so it stays 60px, table takes flex:1 for the rest.

   Preview stays hidden (display:none inline) until the JS receives a
   found_variation with a real image URL — no broken-image flash on load.
*/

.hygo-variations-inline .variations_form .hygo-variations-inline-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.hygo-variations-inline .hygo-variations-inline-preview {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f5f5;
    /* Slight ring so the preview reads as a distinct element against
       white product-page backgrounds. Subtle, not a heavy border. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.hygo-variations-inline .hygo-variations-inline-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Table inside the row — remove its own bottom margin (the wrapper
   handles spacing) and let it grow into the remaining flex space. */
.hygo-variations-inline .variations_form .hygo-variations-inline-row table.variations {
    flex: 1;
    margin: 0;
    min-width: 0;
}

/* ==========================================================================
   v2.7.27 — Gallery lightbox modal (thumbnail sidebar style)
   ==========================================================================

   Active only on pages where body has .hygo-lightbox-thumbs (set by
   module-gallery-lightbox.php when both gallery_enable_lightbox=on AND
   gallery_lightbox_style=thumbs).

   Layout: fixed overlay + centered white container with the current
   image on the left (flex:1) and a thumbnail grid sidebar on the right
   (fixed 380px). On mobile the sidebar drops below the main image.

   Reveal: modal starts hidden (JS toggles [hidden]). Opacity transitions
   on .is-open for a smooth fade — 200ms matches the timeout in the JS
   close() so the [hidden] attribute is only reset once the fade
   completes and the modal is invisible again.
*/

.hygo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 200ms ease;
    padding: 20px;
    /* Prevent tap-highlight ghosts on iOS when tapping the overlay. */
    -webkit-tap-highlight-color: transparent;
}

.hygo-lightbox.is-open {
    opacity: 1;
}

.hygo-lightbox[hidden] {
    display: none;
}

.hygo-lightbox-overlay {
    position: absolute;
    inset: 0;
    /* v2.7.35: darkness comes from the --hygo-lightbox-overlay root var
       (emitted by dynamic-css.php from the admin setting). Fallback 0.4
       if the var is somehow missing. */
    background: rgba(0, 0, 0, var(--hygo-lightbox-overlay, 0.4));
    cursor: pointer;
}

.hygo-lightbox-inner {
    position: relative;
    background: #fff;
    /* v2.7.34: modal sits inside the viewport with visible margin
       around it, instead of filling edge-to-edge. Uses vw/vh so it
       scales with the window, capped so it never becomes absurdly
       large on 4K screens. */
    width: 86vw;
    max-width: 1300px;
    height: 82vh;
    max-height: 860px;
    border-radius: 12px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.hygo-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #222;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 100ms ease, background 100ms ease;
}
.hygo-lightbox-close:hover,
.hygo-lightbox-close:focus {
    background: #fff;
    transform: scale(1.06);
    outline: none;
}

.hygo-lightbox-main {
    flex: 1;
    position: relative;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px;
    min-width: 0; /* Prevent flex overflow when image is very wide */
}

.hygo-lightbox-current {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.hygo-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #222;
    border: none;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 100ms ease, background 100ms ease;
}
.hygo-lightbox-nav:hover,
.hygo-lightbox-nav:focus {
    background: #fff;
    transform: translateY(-50%) scale(1.06);
    outline: none;
}
.hygo-lightbox-prev { left: 14px; }
.hygo-lightbox-next { right: 14px; }

.hygo-lightbox-side {
    flex: 0 0 380px;
    padding: 24px 20px;
    overflow-y: auto;
    border-left: 1px solid #eee;
    background: #fff;
    /* Thin scrollbar on Firefox and WebKit */
    scrollbar-width: thin;
}
.hygo-lightbox-side::-webkit-scrollbar {
    width: 6px;
}
.hygo-lightbox-side::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.hygo-lightbox-title {
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 16px 0;
    font-weight: 600;
    color: #222;
    padding-right: 40px; /* leave room so the X doesn't overlap the title */
}

.hygo-lightbox .hygo-lightbox-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.hygo-lightbox-thumb {
    padding: 0;
    border: 2px solid transparent;
    background: #f5f5f5;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 1;
    transition: border-color 120ms ease, transform 120ms ease;
}
.hygo-lightbox-thumb:hover {
    transform: scale(1.02);
}
.hygo-lightbox-thumb.is-active {
    border-color: var(--hygo-primary, #f5891f);
    transform: scale(1.02);
}
.hygo-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Prevent body scroll while modal is open */
body.hygo-lightbox-open {
    overflow: hidden;
}

/* Mobile — stack image above thumbnail row, fullscreen modal */
@media (max-width: 900px) {
    .hygo-lightbox {
        padding: 0;
    }
    .hygo-lightbox-inner {
        flex-direction: column;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .hygo-lightbox-main {
        flex: 1 1 auto;
        min-height: 55vh;
        padding: 16px;
    }
    .hygo-lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 26px;
    }
    .hygo-lightbox-side {
        flex: 0 0 auto;
        max-height: 40vh;
        border-left: none;
        border-top: 1px solid #eee;
        padding: 16px;
    }
    .hygo-lightbox-title {
        font-size: 15px;
        margin-bottom: 12px;
    }
    .hygo-lightbox .hygo-lightbox-thumbs {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }
}

/* ==========================================================================
   v2.7.50 — Related products card layout
   ==========================================================================

   On single product pages, restyle each related product tile as a
   proper card: subtle border, generous padding, centered title/price,
   and a full-width ACHETER button at the bottom. Matches the reference
   layout the client shared.

   Scoped to body.single-product so category/shop grids stay untouched.
*/

body.single-product .related.products ul.products,
body.single-product .up-sells ul.products {
    /* Ensure equal-height cards regardless of title length by using
       align-items: stretch on the grid (WC uses CSS grid by default). */
    align-items: stretch;
}

/* ==========================================================================
   v2.7.52 — Related products card layout (reference-matching)
   ==========================================================================

   Target layout (from client reference screenshot):
     - Image with a small red discount badge in bottom-left corner
     - Small diagonal lightning-bolt watermark in bottom-right corner
     - Product name below image: black, bold, left-aligned, plain text
     - Simple price row: old price (gray strikethrough) + new price (red bold)
     - NO card border, NO hygo-price pill styling, NO CTA button
     - Thin vertical separator between cards (border-right on all but last)

   Scoped to body.single-product so category/shop grids stay untouched.
*/

/* ==========================================================================
   v2.7.57 — Product Blocks System (replaces v2.7.53–56 related-products CSS)
   ==========================================================================

   Configurable product sections rendered by module-product-blocks.php.
   Per-block styling flows through CSS variables set inline on the
   .hygo-pb-block element — one section can have blue borders and small
   prices while another has red borders and huge prices, all from one
   rule set. Way cleaner than N per-block <style> tags.
*/

.hygo-product-blocks {
    margin-top: 48px;
}

.hygo-pb-block {
    margin: 0 0 48px;
}

.hygo-pb-heading {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 20px;
    color: #111;
    text-align: left;
}

.hygo-pb-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(var(--pb-cols-desktop, 5), minmax(0, 1fr));
    gap: 20px;
}

.hygo-pb-card {
    position: relative;
    background: var(--pb-card-bg, #fff);
    border-radius: var(--pb-card-radius, 8px);
    padding: 14px;
    margin: 0;
    list-style: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hygo-pb-has-border .hygo-pb-card {
    border: 1px solid var(--pb-card-border, #e5e7eb);
}
.hygo-pb-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.hygo-pb-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.hygo-pb-card-link:hover,
.hygo-pb-card-link:focus {
    text-decoration: none;
    color: inherit;
}

.hygo-pb-card-image {
    position: relative;
    margin: 0 0 12px;
}
.hygo-pb-card-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--pb-card-radius, 8px) - 4px);
}

/* Discount badge — position varies by class on the block */
.hygo-pb-badge {
    position: absolute;
    z-index: 2;
    background: var(--pb-badge-bg, #dc3545);
    color: var(--pb-badge-color, #fff);
    padding: 4px 9px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.hygo-pb-badge-bottom-left  .hygo-pb-badge { left: 8px;  bottom: 8px; }
.hygo-pb-badge-top-left     .hygo-pb-badge { left: 8px;  top: 8px; }
.hygo-pb-badge-top-right    .hygo-pb-badge { right: 8px; top: 8px; }
.hygo-pb-badge-bottom-right .hygo-pb-badge { right: 8px; bottom: 8px; }

/* Product title inside card */
.hygo-pb-card-title {
    font-size: var(--pb-title-size, 16px);
    color: var(--pb-title-color, #111);
    line-height: 1.35;
    margin: 0 0 10px;
    padding: 0;
    font-weight: 400;
}
.hygo-pb-title-bold .hygo-pb-card-title {
    font-weight: 700;
}

/* Prices row — old price (strikethrough) LEFT, new price (bold) RIGHT */
.hygo-pb-card-prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.hygo-pb-price-regular {
    color: var(--pb-reg-color, #9ca3af);
    font-size: var(--pb-reg-size, 15px);
    font-weight: 400;
    text-decoration: line-through;
    order: 1;
}
.hygo-pb-reg-bold .hygo-pb-price-regular {
    font-weight: 700;
}
.hygo-pb-price-regular .amount,
.hygo-pb-price-regular bdi {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.hygo-pb-price-sale {
    color: var(--pb-sale-color, #dc3545);
    font-size: var(--pb-sale-size, 20px);
    font-weight: 400;
    order: 2;
}
.hygo-pb-sale-bold .hygo-pb-price-sale {
    font-weight: 800;
}
.hygo-pb-price-sale .amount,
.hygo-pb-price-sale bdi {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* Mobile — use per-block --pb-cols-mobile variable */
@media (max-width: 700px) {
    .hygo-pb-grid {
        grid-template-columns: repeat(var(--pb-cols-mobile, 2), minmax(0, 1fr));
        gap: 12px;
    }
    .hygo-pb-card {
        padding: 10px;
    }
    .hygo-pb-heading {
        font-size: 20px;
        margin-bottom: 14px;
    }
}