/* [3.1] Exist Green Layout Modes CSS - Fixed for proper catalog-style wrapping
 * Action-first and Info-first use float-based wrapping for catalog behavior
 * Picture-first uses CSS Grid for two-column layout with sticky gallery
 */

/* [3.2] CSS Custom Properties for consistent theming */
:root {
    /* First-paint fallback for sticky product card positioning. JS
       (eg-layout-modes.js → detectHeaderHeight) overrides this within a
       frame with the real header + top-bar + admin-bar stack. 132px covers
       desktop (107 header + 25 top-bar) without admin bar as a safe floor. */
    --eg-sticky-top: 132px;
    --eg-grid-gap: 2rem; /* Legacy fallback spacing */
    --eg-mobile-gap: 1rem; /* Mobile spacing */
    --eg-brand-color: #a5ccbc;
    --eg-transition: 0.3s ease;

    /* Shared spacing system (matches survey/eg-app design language) */
    --eg-gap: 1rem;
    --eg-gap-lg: 1.25rem;
    --eg-field-gap: .375rem;
    --eg-br: 6px;
    --eg-card-bg: #fafbfb;
    --eg-card-border: 1px solid #eceae6;
    --eg-separator: 1px solid #eceae6;
    --eg-text-primary: #1f1f1f;
    --eg-text-secondary: #555;
    --eg-text-tertiary: #777;
}

@media (min-width: 1024px) {
    :root {
        /* Use header-only height (no admin bar) — body.admin-bar adds admin bar separately */
        --sticky-header-height: var(--eg-header-only-height, 96px);
    }
}

/* [3.2.1] Base gallery variables consumed by wc-swiper-gallery */
body.single-product {
    --eg-layout-max-width: 1200px;
    --eg-layout-padding: clamp(1.5rem, 4vw, 3rem);
    --eg-layout-gap: clamp(2rem, 5vw, 4rem);
    --eg-layout-columns: minmax(0, 1fr) minmax(0, 1fr);

    --eg-gallery-position: relative;
    --eg-gallery-top: auto;
    --eg-gallery-align: flex-start;

    --eg-gallery-margin-inline: 0;
    --eg-gallery-max-width: 100%;
    --eg-gallery-mobile-width: 100%;
    --eg-gallery-max-height: none;
    --eg-gallery-overflow: visible;

    --eg-info-min-height: auto;

    --eg-swiper-container-display: grid;
    --eg-swiper-grid-columns: minmax(0, 1fr) auto;
    --eg-swiper-gap: 1rem;

    --eg-swiper-main-height: auto;
    --eg-swiper-main-max-height: none;
    --eg-swiper-main-object-fit: contain;
    --eg-swiper-main-radius: 6px;

    --eg-thumb-direction: column;
    --eg-thumb-gap: 0.75rem;
    --eg-thumb-justify: flex-start;
    --eg-thumb-overflow-x: hidden;
    --eg-thumb-overflow-y: auto;
    --eg-thumb-width: 72px;
    --eg-thumb-height: 72px;
    --eg-thumb-radius: 4%;
    --eg-thumb-active-background: #cbd8c2;

    --eg-nav-color: #6b8e8c;
    --eg-nav-background: linear-gradient(135deg, #d4e5d3, #d0e8e6);
    --eg-nav-size: 32px;
    --eg-nav-icon-size: 16px;
}

/* Ensure active accordion tab content is always visible */
.eg-accordion-item.active > .panel {
    display: block !important;
}

/* [3.3] Desktop container constraints by layout mode */
@media (min-width: 481px) {
    body.single-product.eg-layout-picture .site-inner,
    body.single-product.eg-layout-picture .content-sidebar-wrap,
    body.single-product.eg-layout-picture .content,
    body.single-product.eg-layout-picture main,
    body.single-product.eg-layout-picture .main-content {
        width: 100%;
        max-width: min(100%, 1680px);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        padding-left: clamp(0.5rem, 1.5vw, 1.25rem);
        padding-right: clamp(0.5rem, 1.5vw, 1.25rem);
        box-sizing: border-box;
    }

    /* Action/info: constrain to readable width for side-by-side card + tabs */
    body.single-product.eg-layout-action .site-inner,
    body.single-product.eg-layout-action .content-sidebar-wrap,
    body.single-product.eg-layout-info .site-inner,
    body.single-product.eg-layout-info .content-sidebar-wrap {
        width: 100%;
        max-width: min(100%, 1400px);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        padding: 0 clamp(1rem, 2.5vw, 2rem);
        box-sizing: border-box;
    }
}

/* [3.3.1] Tablet+: card + accordion tabs side by side for action/info */
@media (min-width: 481px) {
    body.single-product.eg-layout-action div.product,
    body.single-product.eg-layout-info div.product {
        display: grid !important;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: clamp(1.5rem, 3vw, 2.5rem);
        align-items: start;
        max-width: min(100%, 1400px);
        margin-left: auto;
        margin-right: auto;
    }

    /* Any stray children (sale flash, notices) default to column 1 */
    body.single-product.eg-layout-action div.product > *,
    body.single-product.eg-layout-info div.product > * {
        grid-column: 1;
    }

    /* Left card + right tabs share the SAME sticky top so their column
       tops stay visually aligned once both are stuck. Previously the card
       had a +0.5rem buffer that the tabs didn't, causing the tabs to sit
       8px higher than the card in the stuck state. */
    body.single-product.eg-layout-action div.product div.summary,
    body.single-product.eg-layout-info div.product div.summary,
    body.single-product.eg-layout-action .woocommerce-tabs,
    body.single-product.eg-layout-info .woocommerce-tabs {
        position: sticky;
        top: calc(var(--eg-sticky-top, 132px) + 0.5rem);
        align-self: start;
    }

    body.single-product.eg-layout-action div.product div.summary,
    body.single-product.eg-layout-info div.product div.summary {
        grid-column: 1;
        grid-row: 1 / -1;
        overflow: visible !important;
    }

    body.single-product.eg-layout-action .woocommerce-tabs,
    body.single-product.eg-layout-info .woocommerce-tabs {
        grid-column: 2 !important;
        grid-row: 1 / -1;
        clear: none !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Truncate long tab panels in sidebar with line-clamp (no hard horizontal cut) */
    body.single-product.eg-layout-action .woocommerce-tabs .panel.eg-panel-truncated,
    body.single-product.eg-layout-info .woocommerce-tabs .panel.eg-panel-truncated {
        display: -webkit-box;
        -webkit-line-clamp: 12;
        -webkit-box-orient: vertical;
        overflow: hidden;
        position: relative;
    }

    body.single-product.eg-layout-action .woocommerce-tabs .panel.eg-panel-expanded,
    body.single-product.eg-layout-info .woocommerce-tabs .panel.eg-panel-expanded {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }
}

/* Truncation + "show more" toggle — works at ALL screen sizes, all layouts */
.woocommerce-tabs .panel.eg-panel-truncated {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
}

.woocommerce-tabs .panel.eg-panel-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Fewer lines on mobile — get to the next tab faster */
@media (max-width: 600px) {
    .woocommerce-tabs .panel.eg-panel-truncated {
        -webkit-line-clamp: 6;
    }
}

/* Hide toggle on collapsed (inactive) accordion items */
.eg-accordion-item:not(.active) .eg-panel-toggle {
    display: none !important;
}

/* Inline "show more / less" toggle — reads naturally at end of text */
.eg-panel-toggle {
    display: inline;
    font-size: inherit;
    color: var(--eg-accent, #2c5e54);
    cursor: pointer;
    border: 0;
    background: none;
    text-decoration: underline;
    margin-left: 0.25em;
    padding: 0;
}
.eg-panel-toggle:hover {
    color: #1a4a3e;
}

/* [3.4] Picture-first mode: CSS Grid two-column layout with sticky gallery */
body.single-product.eg-layout-picture {
    --eg-gallery-position: sticky;
    --eg-gallery-top: var(--eg-sticky-top, 96px);
    --eg-gallery-max-width: 100%;
    --eg-gallery-max-height: clamp(420px, 72vh, 760px);
    --eg-gallery-overflow: hidden;
    --eg-info-min-height: auto;
    --eg-swiper-container-display: block;
    --eg-swiper-gap: 0.75rem;
    --eg-swiper-main-height: auto;
    --eg-swiper-main-max-height: calc(100vh - var(--eg-sticky-top, 96px) - var(--eg-thumb-height, 72px) - 3rem);
    --eg-swiper-main-object-fit: contain;
    --eg-thumbs-direction: row;
    --eg-thumb-direction: row;
    --eg-thumbs-gap: 0.75rem;
    --eg-thumbs-justify: flex-start;
    --eg-thumbs-overflow-x: hidden;
    --eg-thumbs-overflow-y: hidden;
    --eg-thumb-width: 72px;
    --eg-thumb-height: 72px;
}

/* Picture-first: info-dominant two-column grid (40/60) — keep add-to-cart above fold */
body.single-product.eg-layout-picture .eg-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    align-items: flex-start;
    width: 100%;
    max-width: min(100%, 1680px);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

body.single-product.eg-layout-picture .eg-gallery-column {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

body.single-product.eg-layout-picture .eg-swiper-container {
    width: 100%;
    max-width: 100%;
    display: var(--eg-swiper-container-display, grid);
    grid-template-columns: var(--eg-swiper-grid-columns, minmax(0, 1fr) auto);
    gap: var(--eg-swiper-gap, 0.75rem);
}

body.single-product.eg-layout-picture .eg-swiper-main {
    width: 100%;
    height: auto;
    margin: 0 0 1rem;
}

body.single-product.eg-layout-picture .eg-swiper-thumbs {
    align-items: flex-start;
}

/* Main swiper stretches full width of the gallery column */
body.single-product.eg-layout-picture .swiper-container.eg-swiper-container .swiper-slide {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Thumb container in picture-first: horizontal wrapped grid, not vertical stack */
body.single-product.eg-layout-picture .swiper-container.eg-swiper-container.eg-thumbs-container {
    display: block;
    width: 100%;
    height: auto;
    max-height: 200px;
    overflow: hidden;
}

body.single-product.eg-layout-picture .eg-info-column {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* FORCE non-sticky, non-grid for action/info gallery inside summary card */
body.single-product.eg-layout-action .eg-swiper-container,
body.single-product.eg-layout-info .eg-swiper-container {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    transform: none !important;
    will-change: auto !important;
    display: block !important;
}

body.single-product.eg-layout-action .eg-swiper-main,
body.single-product.eg-layout-info .eg-swiper-main {
    margin: 0 0 0.5rem 0 !important;
}

/* [3.5] Action-first mode: Float-based catalog layout for content wrapping */
body.single-product.eg-layout-action {
    --eg-gallery-width-desktop: clamp(200px, 30%, 280px);
    --eg-gallery-width-tablet: clamp(240px, 45%, 320px);
    --eg-gallery-width-mobile: clamp(140px, 40%, 200px);
    --eg-gallery-max-width: var(--eg-gallery-width-desktop);
    --eg-gallery-overflow: visible;
    --eg-gallery-align: flex-start;
    --eg-gallery-margin-inline: 0;
    --eg-gallery-margin-right: clamp(1rem, 3vw, 1.5rem);
    --eg-gallery-margin-bottom: clamp(0.75rem, 2.5vw, 1.25rem);
    --eg-info-min-height: auto;
    --eg-swiper-grid-columns: 1fr;
    --eg-swiper-gap: 0.5rem;
    --eg-swiper-main-height: auto;
    --eg-swiper-main-max-height: clamp(180px, 35vh, 280px);
    --eg-swiper-main-object-fit: contain;
    --eg-thumb-direction: row;
    --eg-thumb-gap: 0.5rem;
    --eg-thumb-justify: flex-start;
    --eg-thumb-overflow-x: auto;
    --eg-thumb-overflow-y: hidden;
    --eg-thumb-width: 48px;
    --eg-thumb-height: 48px;
}

/* Action-first uses float layout for content wrapping */
body.single-product.eg-layout-action .eg-float-layout-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0.5rem !important; /* Minimal padding */
    box-sizing: border-box !important;
    overflow: visible !important; /* Allow content to flow */
}

body.single-product.eg-layout-action .eg-float-layout-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* Gallery floats inside the summary card (magazine layout) */
body.single-product.eg-layout-action div.product div.summary .woocommerce-product-gallery,
body.single-product.eg-layout-action div.product div.summary .eg-swiper-container {
    float: left !important;
    width: clamp(200px, 35%, 300px) !important;
    margin: 0 1rem 0.75rem 0 !important;
    position: relative !important;
}

/* Allow full image height to show */
body.single-product.eg-layout-action .eg-swiper-main {
    height: auto !important;
    max-height: none !important;
}

/* Hide thumbnails in action/info-first — nav arrows + swipe are enough */
body.single-product.eg-layout-action .eg-swiper-thumbs,
body.single-product.eg-layout-info .eg-swiper-thumbs {
    display: none !important;
}

/* Summary is the card container — gallery floats inside it */
body.single-product.eg-layout-action div.product div.summary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    overflow: visible !important;
}

/* Heart positioned in upper right of card */
body.single-product.eg-layout-action .eg-heart-single {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
}

/* Product title styling */
body.single-product.eg-layout-action .product_title {
    font-size: 1.3rem !important;
    margin-bottom: 10px !important;
}

/* Product brand styling */
body.single-product.eg-layout-action .product-brand {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* Subtotal container alignment */
body.single-product.eg-layout-action .mlvf-subtotal-container {
    text-align: right !important;
}

/* Cart form spacing */
body.single-product.eg-layout-action div.product form.cart {
    margin-bottom: 0 !important;
}

/* Tabs clear the float */
body.single-product.eg-layout-action .woocommerce-tabs {
    clear: both !important;
}

/* Allow subsequent content (tabs, etc.) to share the float space until below the gallery */
body.single-product.eg-layout-action .eg-info-column > * {
    margin-left: 0 !important;
    clear: none !important;
}

body.single-product.eg-layout-action .woocommerce-tabs {
    clear: both !important;
    float: none !important;
    width: 100% !important;
    margin-top: 1rem !important;
}

@supports not (display: contents) {
    body.single-product.eg-layout-action .eg-info-column,
    body.single-product.eg-layout-info .eg-info-column {
        display: block !important;
        width: auto !important;
        overflow: visible !important;
    }
}

/* [3.6] Info-first mode: Float-based catalog layout for content wrapping */
body.single-product.eg-layout-info {
    --eg-gallery-width-desktop: clamp(180px, 28%, 260px);
    --eg-gallery-width-tablet: clamp(220px, 42%, 300px);
    --eg-gallery-width-mobile: clamp(120px, 35%, 180px);
    --eg-gallery-max-width: var(--eg-gallery-width-desktop);
    --eg-gallery-overflow: visible;
    --eg-gallery-align: flex-start;
    --eg-gallery-margin-inline: 0;
    --eg-gallery-margin-right: clamp(0.75rem, 2.5vw, 1.25rem);
    --eg-gallery-margin-bottom: clamp(0.75rem, 2.5vw, 1.25rem);
    --eg-info-min-height: auto;
    --eg-swiper-grid-columns: 1fr;
    --eg-swiper-gap: 0.5rem;
    --eg-swiper-main-max-height: clamp(160px, 32vh, 240px);
    --eg-thumb-direction: row;
    --eg-thumb-gap: 0.5rem;
    --eg-thumb-justify: flex-start;
    --eg-thumb-overflow-x: auto;
    --eg-thumb-overflow-y: hidden;
    --eg-thumb-width: 48px;
    --eg-thumb-height: 48px;
}

/* Info-first uses float layout for content wrapping */
body.single-product.eg-layout-info .eg-float-layout-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0.5rem !important; /* Minimal padding to match action-first */
    box-sizing: border-box !important;
    overflow: visible !important; /* Allow content to flow */
}

body.single-product.eg-layout-info .eg-float-layout-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* Gallery floats inside the summary card (magazine layout) */
body.single-product.eg-layout-info div.product div.summary .woocommerce-product-gallery,
body.single-product.eg-layout-info div.product div.summary .eg-swiper-container {
    float: left !important;
    width: clamp(180px, 32%, 280px) !important;
    margin: 0 1rem 0.75rem 0 !important;
    position: relative !important;
}

/* Allow full image height to show */
body.single-product.eg-layout-info .eg-swiper-main {
    height: auto !important;
    max-height: none !important;
}

/* Summary is the card container — gallery floats inside it */
body.single-product.eg-layout-info div.product div.summary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    overflow: visible !important;
}

/* Heart positioned in upper right of card */
body.single-product.eg-layout-info .eg-heart-single {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
}

/* Product title styling */
body.single-product.eg-layout-info .product_title {
    font-size: 1.3rem !important;
    margin-bottom: 10px !important;
}

/* Product brand styling */
body.single-product.eg-layout-info .product-brand {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* Subtotal container alignment */
body.single-product.eg-layout-info .mlvf-subtotal-container {
    text-align: right !important;
}

/* Cart form spacing */
body.single-product.eg-layout-info div.product form.cart {
    margin-bottom: -40px !important;
}

/* Tabs clear the float */
body.single-product.eg-layout-info .woocommerce-tabs {
    clear: both !important;
}

body.single-product.eg-layout-info .eg-info-column > * {
    margin-left: 0 !important;
    clear: none !important;
}

/* Mobile breadcrumb spacing — .site-inner handles header clearance via
   padding-top: var(--eg-anchor-offset), so no extra margin needed here. */

/* Phone breakpoint single-col stacking handled in [3.7.1] below
   (gallery stacks above summary, no float-inside-card). */

body.single-product.eg-layout-info .woocommerce-tabs {
    clear: both !important;
    float: none !important;
    width: 100% !important;
    margin-top: 1rem !important;
}

/* [3.7] Tablet responsive behavior (481px-1023px) */
@media (max-width: 1023px) and (min-width: 481px) {
    body.single-product {
        --eg-gallery-position: relative;
        --eg-gallery-top: auto;
        --eg-gallery-max-height: none;
        --eg-gallery-overflow: visible;
        --eg-swiper-grid-columns: 1fr;
        --eg-swiper-gap: 0.5rem;
        --eg-thumb-direction: row;
        --eg-thumb-justify: center;
        --eg-thumb-overflow-x: auto;
        --eg-thumb-overflow-y: hidden;
        --eg-swiper-main-height: auto;
        --eg-swiper-main-max-height: clamp(280px, 35vh, 400px);
        --eg-swiper-main-object-fit: contain;
        --eg-thumb-width: 64px;
        --eg-thumb-height: 64px;
    }

    /* Action-first and Info-first maintain float layout on tablet */
    body.single-product.eg-layout-action {
        --eg-gallery-max-width: var(--eg-gallery-width-tablet);
        --eg-swiper-main-max-height: clamp(260px, 38vh, 420px);
    }

    body.single-product.eg-layout-info {
        --eg-gallery-max-width: var(--eg-gallery-width-tablet);
        --eg-swiper-main-max-height: clamp(240px, 36vh, 380px);
    }

    /* Picture-first: use one-column gallery with a wrapped thumb grid under main image */
    body.single-product.eg-layout-picture {
        --eg-gallery-position: relative;
        --eg-gallery-top: auto;
        --eg-gallery-max-height: none;
        --eg-gallery-overflow: hidden;
        --eg-swiper-grid-columns: 1fr;
        --eg-swiper-gap: 0.5rem;
        --eg-thumb-direction: row;
        --eg-thumb-justify: flex-start;
        --eg-thumb-overflow-x: hidden;
        --eg-thumb-overflow-y: hidden;
        --eg-thumb-width: 88px;
        --eg-thumb-height: 88px;
    }

    body.single-product.eg-layout-picture .eg-swiper-container {
        display: block;
    }

    body.single-product.eg-layout-picture .eg-swiper-thumbs {
        margin-top: 0.75rem;
        max-height: none;
        overflow: hidden;
    }

    body.single-product.eg-layout-picture .eg-swiper-thumbs .swiper-wrapper {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.6rem;
    }

    body.single-product.eg-layout-picture .eg-swiper-thumbs .swiper-slide {
        width: calc(25% - 0.45rem);
        height: auto;
        aspect-ratio: 1 / 1;
    }

}

/* 481-1199px: picture-first keeps sticky gallery with wrapped thumbs below image */
@media (max-width: 1199px) and (min-width: 481px) {
    body.single-product.eg-layout-picture {
        --eg-gallery-position: sticky;
        --eg-gallery-top: var(--eg-sticky-top, 96px);
        --eg-gallery-max-height: calc(100vh - var(--eg-sticky-top, 96px) - 1rem);
        --eg-gallery-overflow: hidden;
        --eg-info-min-height: auto;
        --eg-swiper-grid-columns: 1fr;
        --eg-swiper-gap: 0.5rem;
        --eg-thumb-direction: row;
        --eg-thumb-justify: flex-start;
        --eg-thumb-overflow-x: hidden;
        --eg-thumb-overflow-y: hidden;
        --eg-thumb-width: 88px;
        --eg-thumb-height: 88px;
    }

    body.single-product.eg-layout-picture .eg-swiper-container {
        display: block;
    }

    body.single-product.eg-layout-picture .eg-swiper-thumbs {
        margin-top: 0.75rem;
        max-height: none;
        overflow: hidden;
    }

    body.single-product.eg-layout-picture .eg-swiper-thumbs .swiper-wrapper {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.6rem;
    }

    body.single-product.eg-layout-picture .eg-swiper-thumbs .swiper-slide {
        width: calc(25% - 0.45rem);
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* 1200px+: picture-first two-column with sticky gallery */
@media (min-width: 1200px) {
    body.single-product.eg-layout-picture {
        --eg-gallery-position: sticky;
        --eg-gallery-top: var(--eg-sticky-top, 96px);
        --eg-gallery-overflow: hidden;
        --eg-info-min-height: auto;
        --eg-swiper-container-display: block;
        --eg-swiper-grid-columns: 1fr;
        --eg-thumb-direction: row;
        --eg-thumb-justify: flex-start;
        --eg-thumb-overflow-x: hidden;
        --eg-thumb-overflow-y: hidden;
        --eg-thumb-width: 88px;
        --eg-thumb-height: 88px;
    }

    body.single-product.eg-layout-picture .eg-swiper-thumbs .swiper-wrapper {
        flex-wrap: wrap;
    }

    body.single-product.eg-layout-picture .eg-swiper-thumbs .swiper-slide {
        width: calc(25% - 0.45rem);
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* [3.7.1] Phone breakpoint (max-width: 600px): true single-column stacking
   Gallery on top, summary card in the middle, tabs full-width below.
   No float-inside-card "magazine" layout — that read poorly on phone widths. */
@media (max-width: 600px) {
    body.single-product.eg-layout-action div.product,
    body.single-product.eg-layout-info div.product {
        display: block !important;
        max-width: 100% !important;
        grid-template-columns: none !important;
    }

    /* Summary card: full width, no sticky on phones */
    body.single-product.eg-layout-action div.product div.summary,
    body.single-product.eg-layout-info div.product div.summary {
        position: static !important;
        top: auto !important;
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1rem 0 !important;
        padding: 1rem !important;
        display: block !important;
        overflow: visible !important;
    }

    /* Gallery: full width, stacked ABOVE summary content (NOT floated inside) */
    body.single-product.eg-layout-action div.product div.summary .woocommerce-product-gallery,
    body.single-product.eg-layout-action div.product div.summary .eg-swiper-container,
    body.single-product.eg-layout-info div.product div.summary .woocommerce-product-gallery,
    body.single-product.eg-layout-info div.product div.summary .eg-swiper-container {
        float: none !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1rem 0 !important;
    }

    /* Tabs: full width below the summary card */
    body.single-product.eg-layout-action .woocommerce-tabs,
    body.single-product.eg-layout-info .woocommerce-tabs {
        position: static !important;
        top: auto !important;
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        clear: both !important;
        float: none !important;
        width: 100% !important;
        margin: 1rem 0 0 0 !important;
    }
}

@media (max-width: 480px) and (min-width: 481px) { /* INACTIVE — grid now covers 481px+ */
    body.single-product {
        --eg-gallery-position: relative;
        --eg-gallery-top: auto;
        --eg-gallery-max-height: none;
        --eg-gallery-overflow: visible;
        --eg-swiper-grid-columns: 1fr;
        --eg-thumb-direction: row;
        --eg-thumb-justify: center;
        --eg-thumb-overflow-x: auto;
        --eg-thumb-overflow-y: hidden;
        --eg-swiper-main-height: auto;
        --eg-swiper-main-max-height: none;
        --eg-swiper-main-object-fit: contain;
        --eg-thumb-width: 56px;
        --eg-thumb-height: 56px;
        --eg-thumb-gap: 0.5rem;
    }

    /* Action-first and Info-first MAINTAIN float layout on mobile */
    body.single-product.eg-layout-action {
        --eg-gallery-max-width: var(--eg-gallery-width-mobile);
        --eg-swiper-main-max-height: clamp(220px, 45vh, 360px);
    }

    body.single-product.eg-layout-info {
        --eg-gallery-max-width: var(--eg-gallery-width-mobile);
        --eg-swiper-main-max-height: clamp(200px, 42vh, 320px);
    }

    /* Gallery floats inside summary card (magazine layout) — no sticky */
    body.single-product.eg-layout-action div.product div.summary .woocommerce-product-gallery,
    body.single-product.eg-layout-action div.product div.summary .eg-swiper-container,
    body.single-product.eg-layout-info div.product div.summary .woocommerce-product-gallery,
    body.single-product.eg-layout-info div.product div.summary .eg-swiper-container {
        float: left !important;
        position: relative !important;
        width: clamp(160px, 35%, 220px) !important;
        margin: 0 0.75rem 0.5rem 0 !important;
    }

    /* Product card: full-width container, gallery inside */
    body.single-product.eg-layout-action div.product div.summary,
    body.single-product.eg-layout-info div.product div.summary {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: 1.25rem !important;
        overflow: visible !important;
    }

    /* Legacy selectors (no longer used) */
    body.single-product.eg-layout-action .eg-gallery-column,
    body.single-product.eg-layout-info .eg-gallery-column {
        float: left !important;
        width: var(--eg-gallery-max-width) !important;
        margin: 0 var(--eg-gallery-margin-right, 1rem) var(--eg-gallery-margin-bottom, 0.75rem) 0 !important;
    }

    body.single-product.eg-layout-action .eg-info-column,
    body.single-product.eg-layout-info .eg-info-column {
        display: block !important;
        width: auto !important;
        overflow: visible !important;
    }

    body.single-product.eg-layout-action .woocommerce-tabs,
    body.single-product.eg-layout-info .woocommerce-tabs {
        clear: both !important;
        float: none !important;
        width: 100% !important;
        margin-top: 1rem !important;
    }

    /* Picture-first: go full width, disable sticky */
    body.single-product.eg-layout-picture {
        --eg-gallery-position: relative;
        --eg-gallery-top: auto;
    }

    /* Picture-first uses grid layout on mobile too */
    body.single-product.eg-layout-picture .eg-product-layout {
        display: block !important;
        padding: 0 0.5rem !important;
    }

    body.single-product.eg-layout-picture .eg-gallery-column {
        float: none !important; /* Picture-first stacks on mobile */
        width: 100% !important;
        margin: 0 0 0.5rem 0 !important;
    }

    body.single-product.eg-layout-picture .woocommerce div.product div.summary,
    body.single-product.eg-layout-picture .woocommerce-page div.product div.summary {
        float: none !important;
        width: 100% !important;
        clear: both !important;
        margin-top: 0.5rem !important;
    }

    body.single-product.eg-layout-picture .eg-swiper-container {
        position: relative;
        top: auto;
        z-index: 1;
    }
}

/* [3.7.2] Very small mobile - stack everything with minimal padding */
@media (max-width: 480px) {
    body.single-product {
        --eg-gallery-max-width: 100%;
        --eg-swiper-grid-columns: 1fr;
        --eg-thumb-direction: row;
        --eg-thumb-justify: center;
        --eg-thumb-overflow-x: auto;
        --eg-thumb-overflow-y: hidden;
        --eg-thumb-width: 44px;
        --eg-thumb-height: 44px;
        --eg-thumb-gap: 0.375rem;
        --eg-swiper-main-max-height: clamp(200px, 55vw, 300px);
    }

    /* Action/Info: stack with minimal padding */
    body.single-product.eg-layout-action .eg-float-layout-wrapper,
    body.single-product.eg-layout-info .eg-float-layout-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 0.5rem !important;
    }

    /* Picture-first: full-bleed gallery, padded text */
    body.single-product.eg-layout-picture .eg-product-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Gallery stacking handled by ≤600px rule [3.7.1] above — kept here as
       documentation. Previously this floated the gallery left at 45% inside
       the summary card; now phone widths use a true single-column stack. */

    /* Product card is full-width container */
    body.single-product.eg-layout-action div.product div.summary,
    body.single-product.eg-layout-info div.product div.summary {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
    }
    
    /* Gallery columns stack on mobile */
    body.single-product.eg-layout-action .eg-gallery-column,
    body.single-product.eg-layout-info .eg-gallery-column {
        float: none !important;
        width: 100% !important;
        margin: 0 0 1rem 0 !important;
    }

    /* Picture-first: full-bleed gallery (no side margin) */
    body.single-product.eg-layout-picture .eg-gallery-column {
        float: none !important;
        width: 100% !important;
        margin: 0 0 0.5rem 0 !important;
    }

    body.single-product.eg-layout-action .eg-info-column,
    body.single-product.eg-layout-info .eg-info-column {
        display: block !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Picture-first: info column gets side padding for text readability */
    body.single-product.eg-layout-picture .eg-info-column {
        display: block !important;
        margin: 0 !important;
        width: 100% !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    /* Picture-first: zero horizontal padding on all containers for full-bleed gallery */
    body.single-product.eg-layout-picture .site-inner,
    body.single-product.eg-layout-picture .content-sidebar-wrap,
    body.single-product.eg-layout-picture .content,
    body.single-product.eg-layout-picture main,
    body.single-product.eg-layout-picture .main-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Picture-first: zero horizontal padding on product wrapper (overrides inline 3%) */
    body.single-product.eg-layout-picture .eg-product-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* [3.7.3] Extra small mobile - even less padding */
@media (max-width: 360px) {
    body.single-product.eg-layout-action .eg-float-layout-wrapper,
    body.single-product.eg-layout-info .eg-float-layout-wrapper {
        padding: 0 0.5rem !important;
    }

    /* Picture-first stays full-bleed at 360px too */
    body.single-product.eg-layout-picture .eg-product-layout {
        padding: 0 !important;
    }

    body.single-product.eg-layout-picture .site-inner,
    body.single-product.eg-layout-picture .content-sidebar-wrap,
    body.single-product.eg-layout-picture .content,
    body.single-product.eg-layout-picture main,
    body.single-product.eg-layout-picture .main-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* [3.8] Product tip — readable context, survey-style card feel */
.single-product .woocommerce-product-details__short-description {
    font-size: .95rem;
    line-height: 1.5;
    color: var(--eg-text-secondary);
    margin: var(--eg-field-gap) 0 0 0;
    font-weight: 400;
    padding: .625rem .875rem;
    background: #f8fafb;
    border: 1px solid #eceae6;
    border-left: 2px solid #a5ccbc;
    border-radius: var(--eg-br);
}

/* Action/info: tip clears the floated gallery so it sits cleanly below the image */
body.single-product.eg-layout-action .woocommerce-product-details__short-description,
body.single-product.eg-layout-info .woocommerce-product-details__short-description {
    clear: both;
}

/* Product tip inside short description - inherit container styling, no duplicate box */
.single-product .woocommerce-product-details__short-description .product-tip {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

/* [3.9] Add to Cart button positioning */
.single-product .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    float: right !important; /* Float right above subtotal */
    justify-content: center;
    text-align: center;
}

/* [3.10] Variation description below variation buttons – ensure it shows when present */
.single-product .single_variation .woocommerce-variation-description {
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.single-product .single_variation .woocommerce-variation-description:empty {
    display: none;
}

/* [3.11] Product meta suppression for shoppers */
.single-product .product_meta {
    display: none;
}

/* [3.12] Mini info row for refills — helpful anchor shortcuts */
.eg-refill-mini-info-row {
    display: flex;
    gap: .75rem;
    margin: var(--eg-field-gap) 0;
    padding: .5rem .75rem;
    background: #f8fafb;
    border: 1px solid #eceae6;
    border-radius: var(--eg-br);
    font-size: .875rem;
}

.eg-refill-mini-info-row .eg-mini-info-link {
    color: #2c5e54;
    text-decoration: none;
    font-weight: 500;
    transition: color .2s;
}

.eg-refill-mini-info-row .eg-mini-info-link:hover {
    color: var(--eg-text-primary);
    text-decoration: underline;
}

/* [3.13] Organic note styling */
.product-organic-note {
    font-style: italic;
    color: var(--eg-text-secondary);
    font-size: .875rem;
    margin: 0 0 var(--eg-field-gap) 0;
}

/* [3.14] Brand subline styling */
.product-brand-subline {
    font-size: .875rem;
    color: var(--eg-text-secondary);
    font-style: italic;
    margin: 0 0 var(--eg-field-gap) 0;
}

/* [4] Tabs — accordion +/- styles live in customizer-styles.css
   Old pill-tab styles (.eg-enhanced-tabs) removed — accordion takes precedence. */

/* =============================================================================
   [5] INGREDIENTS TAB - Ingredient Links Styling
   ============================================================================= */

/* Ingredients tab container */
#eg-ingredients {
    line-height: 1.6;
}

/* Base ingredients and variation blocks */
.eg-ingredients-base-wrap,
.eg-ingredients-variation {
    margin-bottom: 1rem;
}

/* Variation ingredient blocks: light outline and padding so selected state is clear */
.eg-ingredients-tab .eg-ingredients-variation {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Selected variation: light shaded background and subtle outline */
.eg-ingredients-tab .eg-ingredients-variation.eg-ingredients-variation--selected {
    background-color: rgba(44, 94, 84, 0.08);
    border-color: rgba(44, 94, 84, 0.25);
    box-shadow: 0 0 0 1px rgba(44, 94, 84, 0.08);
}

/* Style links within ingredients (clickable ingredient names from Square) */
#eg-ingredients a,
#tab-eg_ingredients a {
    color: #2C5E54; /* Exist Green brand color */
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

#eg-ingredients a:hover,
#tab-eg_ingredients a:hover {
    color: #1a3d35;
    text-decoration-style: solid;
}

#eg-ingredients a:visited,
#tab-eg_ingredients a:visited {
    color: #4a7c59;
}

/* Make ingredient links slightly smaller to blend with ingredient text */
#eg-ingredients a {
    font-weight: inherit;
}