/* ==================================================
   SINGLE PRODUCT PAGE - CARD STYLING & HEART POSITIONING
   ================================================== */

/* [1] INFO-FIRST & ACTION-FIRST PRODUCTS - Card Wrapper with Rounded Image */
/* Create a visual card wrapper for the product info */
body.single-product.eg-layout-info div.product div.summary,
body.single-product.eg-layout-action div.product div.summary {
    /* position: sticky is set in eg-layout-modes.css (also serves as positioning context for heart) */
    background: var(--eg-card-bg);
    border: var(--eg-card-border);
    border-radius: var(--eg-br);
    padding: .875rem 1rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Gallery inside the card: light background, rounded corners */
body.single-product.eg-layout-info div.product div.summary .eg-swiper-container,
body.single-product.eg-layout-action div.product div.summary .eg-swiper-container {
    padding: 0.5rem;
    background: rgba(245, 247, 250, 0.5);
    border-radius: var(--eg-br);
}

/* Legacy: gallery column outside card (no longer used for action/info) */
body.single-product.eg-layout-info .eg-gallery-column,
body.single-product.eg-layout-action .eg-gallery-column {
    padding: 0.75rem;
    background: rgba(245, 247, 250, 0.5);
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Rounded corners for product images (matching loop) */
body.single-product.eg-layout-info .eg-swiper-main img,
body.single-product.eg-layout-info .woocommerce-product-gallery__image img,
body.single-product.eg-layout-action .eg-swiper-main img,
body.single-product.eg-layout-action .woocommerce-product-gallery__image img {
    border-radius: 8px;
}

/* Heart button positioning — inside the card on single product pages */
body.single-product.eg-layout-info .eg-heart-single,
body.single-product.eg-layout-action .eg-heart-single {
    position: absolute !important;
    top: .5rem !important;
    right: .5rem !important;
    z-index: 30 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

body.single-product.eg-layout-info .eg-heart-single .eg-heart,
body.single-product.eg-layout-action .eg-heart-single .eg-heart {
    position: relative;
    transform: none !important;
    pointer-events: auto !important;
}

/* [2] PICTURE-FIRST PRODUCTS - Heart in Upper Right + Product Info Card */

/* Heart inside the product info card */
body.single-product.eg-layout-picture .eg-heart-single {
    position: absolute !important;
    top: .5rem !important;
    right: .5rem !important;
    z-index: 30 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

body.single-product.eg-layout-picture .eg-heart-single .eg-heart {
    position: relative;
    transform: none !important;
    pointer-events: auto !important;
}

body.single-product.eg-layout-picture .eg-heart-single .eg-heart:hover {
    transform: scale(1.1) !important;
}

body.single-product.eg-layout-info .eg-heart-single .eg-heart:hover,
body.single-product.eg-layout-action .eg-heart-single .eg-heart:hover {
    transform: scale(1.1) !important;
}

/* Product info card wrapper for essential info (everything before tabs) */
body.single-product.eg-layout-picture div.product div.summary {
    position: relative;
    background: var(--eg-card-bg);
    border: var(--eg-card-border);
    border-radius: var(--eg-br);
    padding: .875rem 1rem;
    padding-right: 2.5rem; /* Space for heart button inside card */
    margin-bottom: 2rem;
    /* Override generic WooCommerce constraint (customizer-styles max-width:50%)
       which halves the summary inside its grid cell */
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
}

/* Ensure tabs sit OUTSIDE the card (break out of padding) */
body.single-product.eg-layout-picture .woocommerce-tabs {
    position: relative;
    clear: both;
    margin: 2rem -1.5rem -1.5rem -1.5rem; /* Negative margins to break out */
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Make sure gallery images don't have rounded corners in picture-first */
body.single-product.eg-layout-picture .eg-swiper-main img,
body.single-product.eg-layout-picture .woocommerce-product-gallery__image img {
    border-radius: 0;
}

/* [3] ACTION-FIRST PRODUCTS - Now handled in section [1] above */

/* [4] TABS - Simple styling below the card (info-first & action-first) */
/* No card styling - just clean tabs on site background */
body.single-product.eg-layout-info .woocommerce-tabs,
body.single-product.eg-layout-action .woocommerce-tabs {
    clear: both;
    margin-top: 2rem;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}


/* [5] LOCAL-ONLY NOTICE - Icon-based styling matching loop aesthetic */
body.single-product.eg-layout-info .eg-local-only-notice,
body.single-product.eg-layout-action .eg-local-only-notice,
body.single-product.eg-layout-picture .eg-local-only-notice {
    background: #f8fafb !important;
    border: 1px solid #eceae6 !important;
    border-left: 2px solid #a5ccbc !important;
    color: var(--eg-text-secondary) !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    clear: both !important;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem !important;
    border-radius: var(--eg-br) !important;
    font-weight: 500 !important;
    font-size: .875rem !important;
    line-height: 1.4 !important;
    position: relative !important;
    margin: var(--eg-gap) 0 0 !important;
}

/* Add local-only icon before the text */
body.single-product .eg-local-only-notice::before {
    content: "" !important;
    position: absolute !important;
    left: 0.7rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    background-image: var(--eg-local-only-icon, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M4%209.5%2016%204l12%205.5v13L16%2028l-12-5.5z%27%20fill%3D%27none%27%20stroke%3D%27%2316705f%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M4%209.5%2016%2015l12-5.5%27%20fill%3D%27none%27%20stroke%3D%27%2316705f%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M16%2015v13%27%20fill%3D%27none%27%20stroke%3D%27%2316705f%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2722%27%20cy%3D%2722%27%20r%3D%277%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%2316705f%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27m18%2026%208-8%27%20fill%3D%27none%27%20stroke%3D%27%2316705f%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E")) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Hide the emoji/pin that was in the old notice */
body.single-product .eg-local-only-notice::before {
    content: "" !important;
}

/* [6] MOBILE RESPONSIVE */
@media (max-width: 768px) {
    body.single-product.eg-layout-info div.product div.summary,
    body.single-product.eg-layout-action div.product div.summary {
        padding: 1rem;
        border-radius: 8px;
    }
    
    body.single-product.eg-layout-info .eg-gallery-column,
    body.single-product.eg-layout-action .eg-gallery-column {
        padding: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    /* Heart stays inside card on mobile */
    body.single-product.eg-layout-info .eg-heart-single,
    body.single-product.eg-layout-action .eg-heart-single {
        top: .375rem !important;
        right: .375rem !important;
    }
    
    body.single-product.eg-layout-picture .eg-heart-single .eg-heart {
        width: 38px !important;
        height: 38px !important;
    }
}

/* [7] ENSURE HEART IS ABOVE ALL OTHER ELEMENTS */
.eg-heart-single {
    pointer-events: none;
}

.eg-heart-single .eg-heart {
    pointer-events: auto;
}

/* [8] PREVENT GALLERY FROM PUSHING HEART OUT OF POSITION */
body.single-product.eg-layout-info .eg-float-layout-wrapper,
body.single-product.eg-layout-action .eg-float-layout-wrapper {
    position: relative;
}

/* Ensure summary positioning context for absolute heart.
   NOTE: position: sticky (from eg-layout-modes.css) also creates
   a positioning context, so we only need z-index here. */
body.single-product.eg-layout-info div.product div.summary,
body.single-product.eg-layout-action div.product div.summary {
    z-index: 1;
}

/* ==================================================
   [9] SINGLE PRODUCT - ADD TO CART LAYOUT & UX
   Clear hierarchy, consistent spacing, works at all screen sizes.
   ================================================== */

/* Spacing scale for the form (inherits shared system) */
body.single-product div.product form.cart {
    --eg-atc-gap: .75rem;
    --eg-atc-gap-tight: .375rem;
    margin-top: var(--eg-gap); /* Zone separator: Context → Buy */
    margin-bottom: 0;
}

/* --- Purchase by volume: first-class way to choose amount --- */
/* PBV helps users pick the right weight by entering volume (cups, tbsp, etc.). 
   Present it as a clear alternative path, not fine print. */
body.single-product div.product form.cart .pbv-volume-details {
    margin-bottom: var(--eg-atc-gap-tight);
    font-size: 1em;
}

body.single-product div.product form.cart .pbv-volume-details summary.pbv-volume-toggle {
    padding: 0.5em 1em;
    color: #1e293b;
    font-weight: 500;
    cursor: pointer;
    gap: 0.5em 1em;
}
/* Keep "learn more…" and caret from overlapping: fixed space to the right of the link */
body.single-product div.product form.cart .pbv-volume-details summary.pbv-volume-toggle .pbv-volume-learn-more {
    margin-right: 0.25em;
}
body.single-product div.product form.cart .pbv-volume-details summary.pbv-volume-toggle .pbv-volume-toggle-caret {
    margin-left: 0.25em;
    flex-shrink: 0;
}

/* Short helper so purpose is clear when present */
body.single-product div.product form.cart .pbv-volume-helper {
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.9em;
    font-weight: normal;
    color: #64748b;
}

body.single-product div.product form.cart .pbv-volume-details[open] {
    margin-bottom: var(--eg-atc-gap-tight);
}

/* --- Or enter by weight (oz): quantity + ADD + subtotal --- */
body.single-product div.product form.cart .mlvf-quantity-box {
    display: flex;
    flex-direction: column;
    gap: var(--eg-atc-gap-tight);
    margin-top: 0;
    padding: var(--eg-atc-gap-tight) 0 0;
    border-top: none;
}

body.single-product div.product form.cart .mlvf-quantity-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

body.single-product div.product form.cart .mlvf-quantity-row .quantity {
    flex-shrink: 0;
}

/* oz + lbs on same line; low-stock message on its own line when present */
body.single-product div.product form.cart .mlvf-quantity-row .quantity.per-oz .eg-lbs-conversion {
    flex-basis: auto;
    margin-left: 4px;
    white-space: nowrap;
}

body.single-product div.product form.cart .mlvf-quantity-row .eg-low-stock {
    flex-basis: 100%;
    margin-top: 0.25rem;
    margin-left: 0;
    font-size: 0.9em;
    color: #b45309;
}

/* Action row: button + subtotal on same line */
body.single-product div.product form.cart .mlvf-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: var(--eg-atc-gap-tight);
}

body.single-product div.product form.cart .mlvf-action-row .single_add_to_cart_button,
body.single-product div.product form.cart .mlvf-action-row .add_to_cart_button {
    min-height: 42px;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
}

body.single-product div.product form.cart .mlvf-subtotal-container {
    margin-top: 0;
    margin-left: auto;
    font-size: 1rem;
    font-weight: 600;
    color: var(--eg-text-primary);
    text-align: right;
}

/* --- Disclaimer / small print (after add to cart button) --- */
body.single-product div.product form.cart .density-disclaimer,
body.single-product div.product form.cart #pbv-volume-disclaimer {
    margin-top: .5rem;
    margin-bottom: 0;
    padding: 0;
    font-size: 0.8em;
    color: var(--eg-text-tertiary);
    line-height: 1.4;
}

body.single-product div.product form.cart .density-disclaimer.pbv-volume-disclaimer-holder {
    margin-top: .5rem;
}

/* --- Responsive: small screens --- */
@media (max-width: 480px) {
    body.single-product div.product form.cart {
        --eg-atc-gap: .5rem;
        --eg-atc-gap-tight: .25rem;
    }

    body.single-product div.product form.cart .mlvf-quantity-box {
        padding-top: .375rem;
    }

    body.single-product div.product form.cart .mlvf-action-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    body.single-product div.product form.cart .mlvf-action-row .single_add_to_cart_button,
    body.single-product div.product form.cart .mlvf-action-row .add_to_cart_button {
        min-height: 44px;
        flex: 1;
    }

    body.single-product div.product form.cart .mlvf-subtotal-container {
        text-align: right;
        margin-left: auto;
    }

    /* Optional: allow oz + lbs to wrap on very narrow if needed */
    body.single-product div.product form.cart .mlvf-quantity-row .quantity.per-oz {
        flex-wrap: wrap;
    }
}

/* --- Action/Info-first: tighter spacing inside card --- */
body.single-product.eg-layout-action,
body.single-product.eg-layout-info {
    --eg-gap: .5rem;
    --eg-gap-lg: .75rem;
    --eg-field-gap: .25rem;
}

body.single-product.eg-layout-action .stock.in-stock,
body.single-product.eg-layout-info .stock.in-stock {
    margin-bottom: var(--eg-field-gap);
}

body.single-product.eg-layout-action div.product form.cart,
body.single-product.eg-layout-info div.product form.cart {
    margin-top: .375rem;
    padding-bottom: .25rem; /* breathing room at bottom of card */
}

body.single-product.eg-layout-action div.product form.cart .density-disclaimer.pbv-inline-disclaimer,
body.single-product.eg-layout-info div.product form.cart .density-disclaimer.pbv-inline-disclaimer {
    margin-top: var(--eg-field-gap);
    margin-bottom: var(--eg-field-gap);
}

body.single-product.eg-layout-action .woocommerce-product-details__short-description,
body.single-product.eg-layout-info .woocommerce-product-details__short-description {
    margin-bottom: var(--eg-field-gap);
}

/* --- PBV: hide "learn more..." on narrow screens --- */
@media (max-width: 500px) {
    body.single-product div.product form.cart .pbv-volume-learn-more {
        display: none;
    }
}

/* --- Picture-first layout: compact spacing to keep ATC above fold --- */
body.single-product.eg-layout-picture div.product form.cart {
    margin-top: 0.5rem;
}

/* Tighten vertical spacing in picture-first card */
body.single-product.eg-layout-picture .variation-instruction {
    display: none !important; /* Redundant — buttons are self-explanatory */
}

/* Variation description (shown after selecting a variation) — tighter for picture-first */
body.single-product.eg-layout-picture .single_variation .woocommerce-variation-description {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.35;
}
body.single-product.eg-layout-picture .single_variation .woocommerce-variation-description p {
    margin-bottom: 0.25rem;
    line-height: 1.35;
}

body.single-product.eg-layout-picture .mlvf-attribute-group {
    margin-bottom: 8px !important;
}

body.single-product.eg-layout-picture div.product .product_title {
    margin-bottom: 0.125rem;
}

body.single-product.eg-layout-picture div.product .product-brand {
    margin-bottom: 0.125rem;
}

/* ==================================================
   [10] VISUAL GROUPING — SURVEY-STYLE SPACING
   Zone A: Identity (brand → title → badges)
   Zone B: Context (price → product tip)
   Zone C: Buy (form.cart: PBV → qty → button → subtotal)
   Zones separated by --eg-gap-lg, items within by --eg-field-gap
   ================================================== */

/* --- Zone A: Identity group — tight spacing within --- */
body.single-product div.product .product_title {
    margin-bottom: var(--eg-field-gap);
    color: var(--eg-text-primary);
    font-weight: 600;
}

body.single-product div.product .product-brand {
    font-size: .95rem;
    font-weight: 400;
    font-style: italic;
    color: var(--eg-text-secondary);
    margin-top: 0;
    margin-bottom: var(--eg-field-gap);
    line-height: 1.4;
}
body.single-product div.product .product-brand a {
    color: inherit;
    text-decoration: none;
}
body.single-product div.product .product-brand a:hover {
    text-decoration: underline;
}

body.single-product div.product .product-organic-note {
    font-size: .875rem;
    color: var(--eg-text-secondary);
    font-style: italic;
    margin-top: 0;
    margin-bottom: var(--eg-field-gap);
}

body.single-product div.product .eg-product-badges {
    margin-top: var(--eg-field-gap);
    margin-bottom: 0;
}

/* --- Zone B separator: breathing room before price --- */
/* (margin-top on price is set in customizer-styles.css via --eg-gap-lg) */

/* --- Zone C: Buy zone --- */
body.single-product div.product form.cart .mlvf-quantity-box {
    border-top: none;
}

/* --- Fresh grind option (single product) --- */
body.single-product .eg-fresh-grind-option-single {
    margin-bottom: var(--eg-field-gap);
}
body.single-product .eg-fresh-grind-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    padding: .375rem .5rem;
    background: transparent;
    border: none;
    border-radius: var(--eg-br);
    color: var(--eg-text-secondary);
}
body.single-product .eg-fresh-grind-label:has(input:checked) {
    background: #f0f7f5;
    color: var(--eg-text-primary);
}
body.single-product .eg-fresh-grind-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #2c5e54;
}
body.single-product .eg-fresh-grind-text {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .375rem;
}
body.single-product .eg-badge--fresh-grind-toggle-single {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-left: .125rem;
    transition: opacity 0.2s ease;
}
body.single-product .eg-fresh-grind-icon {
    width: 36px;
    height: 36px;
    display: block;
}
body.single-product .eg-badge-checkmark {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #2c5e54;
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border: 1.5px solid white;
}
body.single-product .eg-fresh-grind-info {
    display: none;
    margin: var(--eg-field-gap) 0 0 0;
    padding: .375rem .625rem;
    font-size: .8rem;
    color: var(--eg-text-secondary);
    background: #f8fafb;
    border-radius: var(--eg-br);
    border-left: 2px solid #a5ccbc;
}

body.single-product div.product form.cart .mlvf-quantity-row label,
body.single-product div.product form.cart .mlvf-quantity-row .eg-qty-label {
    font-size: .875rem;
    font-weight: 500;
    color: var(--eg-text-secondary);
}

body.single-product div.product form.cart .mlvf-subtotal-label {
    font-size: .8rem;
    font-weight: 400;
    color: var(--eg-text-tertiary);
}
body.single-product div.product form.cart .mlvf-subtotal-amount {
    font-size: 1rem;
    font-weight: 600;
    color: var(--eg-text-primary);
}

/* --- PBV toggle: survey-style expandable option --- */
body.single-product div.product form.cart .pbv-volume-details summary.pbv-volume-toggle {
    font-size: .95rem;
    color: var(--eg-text-secondary);
    font-weight: 500;
    border-radius: var(--eg-br);
    padding: .5rem .75rem;
    background: var(--eg-card-bg);
    border: 1px solid #eceae6;
    transition: background .2s, border-color .2s;
}
body.single-product div.product form.cart .pbv-volume-details summary.pbv-volume-toggle:hover {
    border-color: #a5ccbc;
    background: #f0f7f5;
}
/* Open state — matches selected variation card */
body.single-product div.product form.cart .pbv-volume-details[open] summary.pbv-volume-toggle {
    background: linear-gradient(135deg, #e8f5f3 0%, #dce8e4 50%, #e0eef0 100%);
    border-color: #2c5e54;
    color: var(--eg-text-primary);
    box-shadow: 0 0 0 2px #bfe2dc;
}

/* --- Disclaimers: footnote tier --- */
body.single-product div.product form.cart .density-disclaimer,
body.single-product div.product form.cart #pbv-volume-disclaimer {
    font-size: .8rem;
    color: var(--eg-text-tertiary);
    font-style: italic;
}

/* --- Variation instruction --- */
body.single-product .variation-instruction {
    font-size: .875rem !important;
    color: var(--eg-text-secondary) !important;
    font-weight: 400 !important;
    margin-bottom: var(--eg-field-gap) !important;
}

/* ==================================================
   [11] RESPONSIVE — tighten card padding at breakpoints
   ================================================== */

@media (max-width: 768px) {
    body.single-product.eg-layout-info div.product div.summary,
    body.single-product.eg-layout-action div.product div.summary {
        padding: .75rem .875rem;
    }

    body.single-product.eg-layout-picture div.product div.summary {
        padding: .75rem .875rem;
        padding-right: 2.25rem;
    }
}

@media (max-width: 480px) {
    body.single-product.eg-layout-info div.product div.summary,
    body.single-product.eg-layout-action div.product div.summary {
        padding: .625rem .75rem;
    }

    body.single-product.eg-layout-picture div.product div.summary {
        padding: .625rem .75rem;
        padding-right: 2.5rem;
    }

    /* Picture-first mobile: tabs are a sibling of summary inside .eg-info-column
       which has 12px horizontal padding. The desktop rule uses negative margins
       (-1.5rem) to break out of the summary card padding, but on mobile that
       pulls the tabs past the screen edge. Reset horizontal margins so the
       description heading and content respect the info-column's 12px padding. */
    body.single-product.eg-layout-picture .woocommerce-tabs {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
    }

    body.single-product div.product {
        --eg-gap: .75rem;
        --eg-gap-lg: 1rem;
    }
}

/* ============================================================================
   E) BUY ZONE — visual bracket only (existing layout already handles spacing)
   ============================================================================
   The existing `mlvf-quantity-box` / `mlvf-quantity-row` / `mlvf-action-row`
   system above already sizes qty + ADD + subtotal correctly with tight gaps.
   The only thing missing was a "this is the buy step" signal. A single thin
   sage top rule on form.cart brackets the whole zone (PBV toggle + qty + ADD
   + subtotal) without adding ANY new vertical padding — keeps the page short,
   no extra scrolling, and the PBV "Order by volume" toggle still sits inside
   the bracketed area where it belongs.
   =========================================================================== */
body.single-product div.product form.cart {
    padding-top: var(--eg-atc-gap, 0.75rem);
    border-top: 1.5px solid #c8dad2; /* soft sage — matches brand panels */
}

/* ============================================================================
   F) VARIATION ATTRIBUTE LABEL ROW + INLINE RESET LINK
   ============================================================================
   Reset link used to render below the variation chips, detached. Now it sits
   right-aligned in the attribute label row ("variety :        Reset"). Reads
   as a quiet inline action attached to the thing it resets.
   =========================================================================== */
body.single-product .mlvf-attr-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

body.single-product .mlvf-attr-label-row .mlvf-attr-label {
    margin: 0;
}

body.single-product .mlvf-attr-label-row .mlvf-reset-btn {
    font-size: 0.72rem;
    color: #8b9a8f;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s, opacity 0.15s, visibility 0.15s;
}

body.single-product .mlvf-attr-label-row .mlvf-reset-btn:hover {
    color: #2c5e54;
    text-decoration: underline;
}

/* Hide the reset link until the user has selected something — nothing to
   reset on a fresh page load, so the affordance just reads as noise. WC
   shows it dynamically once a value is selected; we start hidden so we
   don't flash on initial paint. */
body.single-product .mlvf-attr-label-row .mlvf-reset-btn {
    visibility: hidden;
    opacity: 0;
}
body.single-product .mlvf-attr-label-row .mlvf-reset-btn[style*="block"],
body.single-product .mlvf-attr-label-row .mlvf-reset-btn[style*="inline"] {
    visibility: visible;
    opacity: 1;
}

/* ==========================================================================
   PRODUCT VALUES CHIPS — auto-extracted from the description's leading
   "Synthetic Free, Vegan, Cruelty Free, ..." line and rendered as a small
   chip strip at the top of the tabs panel.

   Brand alignment (BRAND-AND-STYLE.md):
   • Container uses the "Quiet Info / Notes Pattern" — left-border accent,
     off-white background, lighter text (these are quiet supporting context,
     not a primary surface).
   • Chips use 10px radius per "Small non-interactive status badges may use
     10px" (999px is reserved for kiosk mode-badges).
   • Prefix is lowercase per brand voice rules for short labels.
   ========================================================================== */
.eg-product-values-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0.75rem;
    background: #fafbfa;
    border-left: 2px solid #a5ccbc;
    border-radius: 0 6px 6px 0;
    font-family: brandon-grotesque, sans-serif;
    line-height: 1.3;
}

.eg-product-values-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(44, 94, 84, 0.18);
    color: #2c4d3d;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    /* Long values like "100% Biodegradable (safe in rivers, lakes and oceans)"
       can overflow narrow tab columns. Allow wrapping inside the chip and cap
       max-width so a single chip never escapes its container. The chip will
       grow to two lines when needed; the strip stays within bounds. */
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* The chip strip lives inside .woocommerce-tabs as the first child (rendered
   by the tabs.php template override). No grid positioning needed — it
   inherits the tabs panel's column placement. */

/* ==========================================================================
   INGREDIENTS TAB — variation-aware display polish
   ========================================================================== */
.eg-ingredients-hint {
    color: #5b6770;
    font-style: italic;
    font-size: 0.92em;
    margin: 0.25rem 0 0.75rem 0;
}

.eg-ingredients-tab--has-variations .eg-ingredients-variation {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: rgba(165, 204, 188, 0.08);
    border: 1px solid rgba(165, 204, 188, 0.25);
    margin-bottom: 0.5rem;
}

.eg-ingredients-tab--has-variations .eg-ingredients-variation--selected {
    background: rgba(165, 204, 188, 0.18);
    border-color: rgba(44, 94, 84, 0.35);
}

.eg-ingredients-variation-label {
    color: var(--eg-accent, #2c5e54);
}

/* Neutralize heavy inline emphasis on ingredient text. Square descriptions
   often arrive with <span style="text-decoration:underline"> or <strong>
   wrappers around individual ingredients (and the per-ingredient <a>
   links pick up the theme's link styling — bold + underline). User
   feedback: "the ingredients list is all bold and underline. it makes
   it pretty hard to read it should just be simple."
   The variation label keeps its bold accent (it's the "X includes:"
   prefix); the ingredient body reads as plain text. */
.eg-ingredients-base,
.eg-ingredients-variation > p {
    font-weight: 400;
}
.eg-ingredients-base a,
.eg-ingredients-base span[style*="text-decoration"],
.eg-ingredients-variation > p a,
.eg-ingredients-variation > p span[style*="text-decoration"] {
    font-weight: 400;
    text-decoration: none;
    color: inherit;
}
.eg-ingredients-base a:hover,
.eg-ingredients-variation > p a:hover {
    text-decoration: underline;
    color: var(--eg-accent, #2c5e54);
}
/* Strip any inline <strong>/<b> emphasis within the ingredient body itself.
   Keeps the .eg-ingredients-variation-label's bold prefix (which lives
   directly under <p>, not nested deeper). */
.eg-ingredients-base strong,
.eg-ingredients-base b,
.eg-ingredients-variation > p > strong:not(.eg-ingredients-variation-label),
.eg-ingredients-variation > p > b {
    font-weight: 400;
}