/**
 * zChocolat Theme - Custom CSS
 * Child theme of Hummingbird
 */

/* ─── Default body font: Jost (self-hosted, variable woff2) ───────────── */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/jost-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/jost-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Override Bootstrap primary color - Replace blue with black */
:root,
[data-bs-theme=light] {
    --bs-blue: #000;
    --bs-primary: #000;
    --bs-primary-rgb: 0, 0, 0;
    --bs-primary-text-emphasis: #fff;
    --bs-primary-bg-subtle: #e9ecef;
    --bs-primary-border-subtle: #ced4da;
    --bs-link-color: #000;
    --bs-link-color-rgb: 0, 0, 0;
    --bs-link-hover-color: #333;
    --bs-link-hover-color-rgb: 51, 51, 51;

    /* Default body typography: Jost 15px */
    --bs-body-font-family: 'Jost', 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-size: 15px;

    /* Button primary */
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #333;
    --bs-btn-hover-border-color: #333;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #000;
    --bs-btn-disabled-border-color: #000;
    
    /* Dropdown active link */
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #000;
    
    /* Form check (checkboxes, radios) */
    --bs-form-check-input-checked-bg-color: #000;
    --bs-form-check-input-checked-border-color: #000;
}

/* Default body text: Jost 15px (guarantee even if parent hardcodes body) */
body {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
}

/* Ensure all primary buttons use black */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #333;
    --bs-btn-hover-border-color: #333;
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #000;
    --bs-btn-disabled-border-color: #000;
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #333 !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
    opacity: 0.6;
}

/* Outline primary buttons */
.btn-outline-primary {
    --bs-btn-color: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #000;
}

/* All buttons with black background must have white text */
.btn[style*="background-color: #000"],
.btn[style*="background-color:#000"],
.btn[style*="background-color: black"],
.btn[style*="background: #000"],
.btn[style*="background:#000"],
.btn[style*="background: black"] {
    color: #fff !important;
}

/* Links */
a {
    color: #000;
}

a:hover {
    color: #333;
}

/* Form controls focus */
.form-check-input:focus {
    border-color: #666;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
}

.form-check-input:checked {
    background-color: #000;
    border-color: #000;
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: #000;
    border-color: #000;
}

/* ═══════════════════════════════════════════════════════════════════════
   Product page redesign (.zpp-*) — Claude Design "sapphire" spec
   Tokens: Cormorant Garamond (display) + Jost (sans)
   ink #1A1A1A · stone #2E2E2E · silver #DCDCDC · paper #F6F5F2
   ═══════════════════════════════════════════════════════════════════════ */

.zpp-buy,
.zpp-recipes,
.zpp-crosssell {
    --zpp-ink: #1A1A1A;
    --zpp-stone: #2E2E2E;
    --zpp-silver: #DCDCDC;
    --zpp-paper: #F6F5F2;
    --zpp-white: #FFFFFF;
    --zpp-rule: rgba(26, 26, 26, 0.12);
    --zpp-display: 'Cormorant Garamond', 'AGaramond', Georgia, serif;
    --zpp-sans: 'Jost', 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    color: var(--zpp-ink);
}

/* ── Buy block layout: 62/38, hero + mosaic left, panel right ─────────── */
.product__container.zpp-buy {
    display: grid;
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    grid-template-areas:
        "hero panel"
        "mosaic panel";
    grid-template-rows: auto 1fr;
    gap: 4px 3.5rem;
    align-items: start;
    padding-block: 1rem 3rem;
}

.zpp-hero {
    grid-area: hero;
    position: relative;
}

.zpp-panel {
    grid-area: panel;
    min-width: 0;
}

.zpp-mosaic {
    grid-area: mosaic;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    align-content: start;
}

/* Product photos have heterogeneous (near-white) backgrounds; a shared
   light-grey tile + multiply blending evens them out into the continuous
   mosaic of the prototype. */
.zpp-img {
    display: block;
    width: 100%;
    height: auto;
    background: #ECECEC;
    mix-blend-mode: multiply;
}

@media (max-width: 767.98px) {
    .product__container.zpp-buy {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hero"
            "panel"
            "mosaic";
        grid-template-rows: none;
        gap: 4px;
        padding-block: 0 2rem;
    }

    /* Images stay contiguous; the panel gets its own breathing room */
    .zpp-panel {
        padding-block: 20px 24px;
    }

    .zpp-mosaic {
        gap: 4px;
    }
}

/* ── Panel typography ─────────────────────────────────────────────────── */
.zpp-eyebrow {
    font-family: var(--zpp-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--zpp-stone);
    margin: 0 0 16px;
}

.zpp-title {
    font-family: var(--zpp-display);
    font-size: 52px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: none;
    color: var(--zpp-ink);
    margin: 0 0 12px;
}

.zpp-shortdesc {
    font-family: var(--zpp-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--zpp-ink);
    max-width: 400px;
    margin-bottom: 28px;
}

.zpp-shortdesc p:last-child {
    margin-bottom: 0;
}

/* Price bar: rules above and below, price left / composition right */
.zpp-pricebar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--zpp-rule);
    border-bottom: 1px solid var(--zpp-rule);
    padding: 16px 0;
    margin: 0 0 24px;
}

.zpp-price.product-price {
    font-family: var(--zpp-display);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--zpp-ink);
    margin: 0;
}

.zpp-meta {
    font-family: var(--zpp-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--zpp-stone);
    margin: 0;
    text-align: right;
}

.zpp-meta-sep {
    margin-inline: 0.35em;
}

@media (max-width: 991.98px) {
    .zpp-title {
        font-size: 44px;
    }

    .zpp-price.product-price {
        font-size: 26px;
    }
}

@media (max-width: 767.98px) {
    .zpp-eyebrow {
        font-size: 10px;
    }

    .zpp-title {
        font-size: 36px;
    }

    .zpp-shortdesc {
        font-size: 14px;
        max-width: none;
    }

    .zpp-price.product-price {
        font-size: 24px;
    }
}

/* ── Quantity + Add to basket row ─────────────────────────────────────── */
.zpp-cart-row {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.zpp-quantity .quantity-button__group {
    height: 100%;
    border: 1px solid var(--zpp-silver);
    flex-wrap: nowrap;
}

.zpp-quantity .quantity-button__group .btn {
    background: var(--zpp-white);
    border: none;
    color: var(--zpp-ink);
    padding: 0 0.65rem;
}

.zpp-quantity .quantity-button__group .form-control {
    border: none;
    text-align: center;
    width: 2.5rem;
    flex: 0 0 auto;
    font-family: var(--zpp-sans);
    font-size: 14px;
    padding: 0;
    background: var(--zpp-white);
}

.zpp-add-btn {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background-color: var(--zpp-ink);
    color: var(--zpp-white);
    border: none;
    border-radius: 0;
    padding: 1rem 1.25rem;
    font-family: var(--zpp-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.zpp-add-btn-price {
    font-size: 11px;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.zpp-add-btn:hover:not(:disabled) {
    background-color: var(--zpp-stone);
    color: var(--zpp-white);
}

.zpp-add-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.zpp-availability {
    font-family: var(--zpp-sans);
    font-size: 13px;
    color: var(--zpp-stone);
    margin-bottom: 1rem;
}

/* Narrow screens: the price is already shown above the button */
@media (max-width: 575.98px) {
    .zpp-add-btn-price {
        display: none;
    }

    .zpp-add-btn {
        font-size: 11px;
        letter-spacing: 0.16em;
        padding: 0.9rem 0.75rem;
        /*
         * Not nowrap: the label is the only child left here (the price is hidden just
         * above), so it can safely take a second line. Forcing one line made the button
         * push the page sideways as soon as the label grew — 40px of horizontal overflow
         * measured at 390px with the browser text size doubled, and the same would happen
         * with a longer translation than "Add to cart".
         */
        white-space: normal;
        text-align: center;
    }

    .zpp-quantity .quantity-button__group .form-control {
        width: 2rem;
    }

    .zpp-quantity .quantity-button__group .btn {
        padding: 0 0.5rem;
    }
}

/* ── Long description + read more ─────────────────────────────────────── */
.zpp-longdesc {
    font-family: var(--zpp-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--zpp-ink);
    max-width: 420px;
    margin-top: 28px;
}

/* Clean whole-line cut like the prototype (no fade) */
.zpp-longdesc.is-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zpp-readmore {
    background: none;
    border: none;
    padding: 0;
    margin-top: 14px;
    font-family: var(--zpp-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--zpp-ink);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: rgba(26, 26, 26, 0.4);
}

.zpp-readmore:hover {
    opacity: 0.7;
}

.zpp-readmore .zpp-readmore-less,
.zpp-readmore[aria-expanded="true"] .zpp-readmore-more {
    display: none;
}

.zpp-readmore[aria-expanded="true"] .zpp-readmore-less {
    display: inline;
}

@media (max-width: 767.98px) {
    .zpp-longdesc {
        font-size: 14px;
        max-width: none;
    }
}

/* ── Gifting services (zcustomization) — editorial list restyle ──────────
   Overrides the module front.css card/accordion look: quiet rules,
   uppercase service labels, small sub-text, no icons, no heavy blocks. */
.zpp-panel .zcusto-container {
    margin: 40px 0 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.zpp-panel .zcusto-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 14px;
}

.zpp-panel .zcusto-heading-title {
    font-family: var(--zpp-sans, 'Jost', sans-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #1A1A1A;
    margin: 0;
}

.zpp-panel .zcusto-heading-sub {
    font-family: var(--zpp-sans, 'Jost', sans-serif);
    font-size: 12px;
    line-height: 1.5;
    color: #2E2E2E;
    margin: 0;
    text-align: right;
}

.zpp-panel .zcusto-accordion {
    gap: 0;
    border: 1px solid rgba(26, 26, 26, 0.16);
}

.zpp-panel .zcusto-panel,
.zpp-panel .zcusto-panel:hover,
.zpp-panel .zcusto-panel.active,
.zpp-panel .zcusto-panel.completed {
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.zpp-panel .zcusto-panel + .zcusto-panel {
    border-top: 1px solid rgba(26, 26, 26, 0.12);
}

.zpp-panel .zcusto-panel-header,
.zpp-panel .zcusto-panel-header:hover,
.zpp-panel .zcusto-panel.active .zcusto-panel-header {
    background: transparent;
    color: inherit;
    padding: 15px 16px;
}

.zpp-panel .zcusto-panel-icon {
    display: none;
}

/* Closed state: label + "+" only (description and price appear when open) */
.zpp-panel .zcusto-panel:not(.active) .zcusto-panel-desc,
.zpp-panel .zcusto-panel:not(.active) .zcusto-panel-price,
.zpp-panel .zcusto-panel:not(.active) .zcusto-panel-price-note {
    display: none;
}

.zpp-panel .zcusto-panel-toggle .material-icons {
    display: none;
}

.zpp-panel .zcusto-panel-toggle::after {
    content: '+';
    font-family: var(--zpp-sans, 'Jost', sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: #1A1A1A;
}

.zpp-panel .zcusto-panel.active .zcusto-panel-toggle::after {
    content: '−';
}

.zpp-panel .zcusto-panel-name {
    font-family: var(--zpp-sans, 'Jost', sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #1A1A1A;
}

.zpp-panel .zcusto-panel-desc {
    font-family: var(--zpp-sans, 'Jost', sans-serif);
    font-size: 13px;
    line-height: 1.5;
    color: #2E2E2E;
    margin-top: 4px;
}

/* Editorial order: label, then sub-text, then price */
.zpp-panel .zcusto-panel-name { order: 1; }
.zpp-panel .zcusto-panel-desc { order: 2; }
.zpp-panel .zcusto-panel-price { order: 3; }
.zpp-panel .zcusto-panel-price-note { order: 4; }

.zpp-panel .zcusto-panel-price,
.zpp-panel .zcusto-panel.active .zcusto-panel-price {
    font-family: var(--zpp-sans, 'Jost', sans-serif);
    font-size: 12px;
    color: #2E2E2E;
    margin-top: 2px;
}

.zpp-panel .zcusto-panel-price.zcusto-free,
.zpp-panel .zcusto-panel.active .zcusto-panel-price.zcusto-free {
    color: #2E2E2E;
}

.zpp-panel .zcusto-panel-price-note,
.zpp-panel .zcusto-panel.active .zcusto-panel-price-note {
    font-size: 12px;
    color: #2E2E2E;
    font-style: normal;
}

.zpp-panel .zcusto-panel-toggle {
    color: #2E2E2E;
}

.zpp-panel .zcusto-panel-toggle .material-icons {
    font-size: 18px;
}

.zpp-panel .zcusto-panel-content {
    padding: 4px 16px 20px;
    background: transparent;
    border-top: none;
}

.zpp-panel .zcusto-summary {
    border-radius: 0;
    box-shadow: none;
}

/* ── Cross-sell: quiet vignettes, 4 columns desktop / 2 mobile ────────── */
.zpp-crosssell {
    border-top: 1px solid var(--zpp-rule);
    padding: 56px 0 100px;
}

.zpp-crosssell__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 48px;
}

.zpp-crosssell__title {
    font-family: var(--zpp-display);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.15;
    text-transform: none;
    color: var(--zpp-ink);
    margin: 0;
}

.zpp-crosssell__viewall {
    font-family: var(--zpp-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--zpp-ink);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: rgba(26, 26, 26, 0.4);
    white-space: nowrap;
    flex: 0 0 auto;
}

.zpp-crosssell__viewall:hover {
    color: var(--zpp-ink);
    text-decoration-color: var(--zpp-ink);
}

.zpp-crosssell__grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 32px;
    margin: 0;
    padding: 0;
}

.zpp-vignette__link {
    display: block;
    text-decoration: none;
    color: var(--zpp-ink);
}

.zpp-vignette__link:hover {
    text-decoration: none;
    color: var(--zpp-ink);
}

/* Square media crop: catalog photos frame the product loosely, a slight
   cover zoom brings the vignettes close to the prototype's tight tiles. */
.zpp-vignette__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 14px;
    background: #ECECEC;
}

.zpp-vignette__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.18);
    transform-origin: center 55%;
    background: #ECECEC;
    mix-blend-mode: multiply;
    transition: opacity 0.3s ease;
}

.zpp-vignette__link:hover .zpp-vignette__img {
    opacity: 0.9;
}

.zpp-vignette__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.zpp-vignette__name {
    font-family: var(--zpp-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
    color: var(--zpp-ink);
    min-width: 0;
}

.zpp-vignette__price {
    font-family: var(--zpp-sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--zpp-stone);
    white-space: nowrap;
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .zpp-crosssell__title {
        font-size: 28px;
    }
}

@media (max-width: 767.98px) {
    .zpp-crosssell {
        padding: 40px 0 64px;
    }

    .zpp-crosssell__header {
        margin-bottom: 28px;
        flex-wrap: wrap;
    }

    .zpp-vignette__name {
        font-size: 17px;
    }

    .zpp-crosssell__title {
        font-size: 24px;
    }

    .zpp-crosssell__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 12px;
    }
}

/* Hide tax info */
.product-price .tax-shipping-delivery-label,
.product-tax,
.tax-label {
    display: none !important;
}

/* Footer customizations */
.footer__main {
    background-color: #000 !important;
    color: #fff !important;
}

.footer__main * {
    color: #fff !important;
}

.footer__main a {
    color: #fff !important;
}

.footer__main a:hover {
    color: #ddd !important;
}

.footer-block__title {
    display: none !important;
}

.footer-block__content {
    display: block !important;
}

.copyright {
    color: #fff !important;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
    border-top: 1px solid #333;
}

/* Language selector customization */
.ps-languageselector--simple {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.language-link {
    text-decoration: none;
    color: #000;
    font-size: 0.9rem;
    transition: opacity 0.2s ease;
}

.language-link:hover {
    opacity: 0.7;
    text-decoration: none;
}

.language-link--active {
    font-weight: 700;
    color: #000;
    font-size: 0.9rem;
}

.language-separator {
    color: #666;
    font-size: 0.9rem;
}

/* Hide breadcrumb everywhere (keep in DOM for SEO) */
.breadcrumb,
.breadcrumb-wrapper,
nav[aria-label="Breadcrumb"],
#wrapper .breadcrumb {
    display: none !important;
}

/* The breadcrumb is hidden on every page except the product page, but its
   wrapper keeps a 40px bottom margin (parent theme), leaving dead space
   between the header and the hero. Collapse it so the gap under the logo
   matches the gap above it. The product page keeps its trail spacing below. */
.breadcrumb__wrapper {
    margin-bottom: 0;
}

/* …except on the product page: quiet caps trail framed by two light gray
   rules (top + bottom), matching the prototype. */
#product .breadcrumb__wrapper {
    background-color: transparent;
    border-top: 1px solid rgba(26, 26, 26, 0.09);
    border-bottom: 1px solid rgba(26, 26, 26, 0.09);
    margin-bottom: 32px;
}

#product .breadcrumb {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    padding: 16px 0;
    margin: 0;
    list-style: none;
    font-family: 'Jost', 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6B6B6B;
}

#product .breadcrumb-item {
    display: inline-flex;
    align-items: baseline;
}

#product .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    margin-inline: 0.9em;
    color: rgba(26, 26, 26, 0.28);
    float: none;
    padding: 0;
}

#product .breadcrumb-item a,
#product .breadcrumb-item span {
    color: #6B6B6B;
    text-decoration: none;
}

/* current page (last crumb) sits a touch darker */
#product .breadcrumb-item:last-child span {
    color: #1A1A1A;
}

#product .breadcrumb-item a:hover {
    color: #1A1A1A;
}

/* Product list: two CTA buttons (Quick add | Customize) */
.product-miniature__actions--zchocolat {
    margin-top: auto;
    padding-top: 0.75rem;
}

.product-miniature__cta-row {
    display: flex;
    width: 100%;
    gap: 0.5rem;
    /*
     * On a phone the product grid switches to two columns, which leaves each card about
     * 156px wide while the two nowrap buttons need 166px together. Without wrapping they
     * simply refuse to fit and push the whole page sideways: measured at 360px, the
     * document scrolled 5px wider than the viewport — the very check the guidelines
     * require before delivery. Wrapping lets them stack on a narrow card and keeps them
     * side by side as soon as there is room.
     */
    flex-wrap: wrap;
}

.product-miniature__cta {
    /*
     * flex-basis acts as the wrap threshold: below roughly two of these plus the gap,
     * the second button moves to its own line. min-width is the flexbox counterpart of
     * the minmax(0, 1fr) rule in the guidelines — a flex item defaults to min-width:auto
     * and never shrinks below its own content, which is what caused the overflow.
     */
    flex: 1 1 5.5rem;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    background: #fff;
    border: 1px solid #000;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.product-miniature__cta:hover {
    background-color: #000;
    color: #fff;
    text-decoration: none;
}

.product-miniature__cta--quick-add.is-loading {
    opacity: 0.6;
    cursor: wait;
}

.product-miniature__cta--quick-add:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Elegant CSS tooltips (order history, etc.) */
.z-tooltip {
  position: relative;
}

.z-tooltip__label {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  z-index: 20;
  padding: 0.35rem 0.65rem;
  border-radius: 0.25rem;
  background: #111;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(0.25rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.z-tooltip__label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #111;
}

.z-tooltip:hover .z-tooltip__label,
.z-tooltip:focus-visible .z-tooltip__label {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.order-history__legacy-notice {
  margin-bottom: 1.25rem;
}

.order-history__legacy-notice p:last-of-type {
  margin-bottom: 0.35rem;
}

.order-history__inner {
  display: grid;
}

.order-history__header,
.order-history__row {
  display: contents;
}

.order-history__cell {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}

.order-history__header .order-history__cell {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--bs-secondary-color, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom-width: 2px;
}

/* Allow tooltips to overflow rows/cells */
.order-history,
.order-history__inner,
.order-history__header,
.order-history__row,
.order-history__cell--documents {
  overflow: visible;
}

/* Right-column tooltips: anchor on button, extend leftward (avoid clip) */
.order-history__cell--documents .z-tooltip__label {
  left: auto;
  right: 0;
  transform: translateY(0.25rem);
}

.order-history__cell--documents .z-tooltip:hover .z-tooltip__label,
.order-history__cell--documents .z-tooltip:focus-visible .z-tooltip__label {
  transform: translateY(0);
}

.order-history__cell--documents .z-tooltip__label::after {
  left: auto;
  right: 0.65rem;
  transform: none;
}

/* Documents cell: facture + avoir côte à côte */
.order-history__cell--documents {
  display: flex;
  align-items: center;
}

.order-history__doc-links {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

.order-history__icon-link--avoir {
  color: #5c6bc0;
}

.order-history__icon-link--avoir:hover {
  color: #3949ab;
}

.order-history__icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  flex: 0 0 auto;
}

.order-history__cell--action,
.order-history__cell--actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.order-history__link {
  display: inline;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  white-space: nowrap;
}

.order-history__link:hover {
  color: #111;
  text-decoration-thickness: 2px;
}

.order-history__icon-link .material-icons {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1;
}

.order-history__icon-link {
  color: inherit;
  text-decoration: none;
}

.order-history__icon-link:hover {
  color: #000;
}

.order-history__empty {
  color: var(--bs-secondary-color, #6c757d);
}

.order-history__credit-hint {
  font-size: 0.75rem;
  line-height: 1.2;
}

.order-history__cell--shipments {
  text-align: center;
}

.order-history__credit-links {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

.order-history__more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #f1f3f5;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

.order-history__cell--reference a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.order-history__cell--reference a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .order-history__inner {
    grid-template-columns: minmax(6rem, 1.1fr) minmax(4.5rem, 0.7fr) minmax(4rem, 0.65fr) minmax(5rem, 1fr) minmax(7rem, 1.4fr) 2.5rem 4.5rem;
  }

  /* Unified view : 7 colonnes sans scroll horizontal */
  .order-history--unified .order-history__inner {
    grid-template-columns:
      minmax(7rem, 1fr)      /* référence */
      minmax(5.5rem, 0.7fr)  /* date paiement */
      minmax(5.5rem, 0.7fr)  /* montant payé */
      minmax(5.5rem, 0.7fr)  /* net après avoirs */
      2.5rem                 /* nb envois */
      minmax(8rem, 1.5fr)    /* statut */
      5rem;                  /* documents (facture + avoir) */
  }

  .order-history--unified.order-history--with-actions .order-history__inner {
    grid-template-columns:
      minmax(7rem, 1fr)
      minmax(5.5rem, 0.7fr)
      minmax(5.5rem, 0.7fr)
      minmax(5.5rem, 0.7fr)
      2.5rem
      minmax(7rem, 1.3fr)
      5rem
      auto;                  /* Invoice / Modify + details */
  }

  .order-history__header,
  .order-history__row {
    padding-block: 0.35rem;
  }

  .order-history__cell--documents {
    justify-self: end;
  }

  .order-history__cell--status {
    min-width: 0;
  }

  .order-history__status {
    display: inline-block;
    max-width: 100%;
    font-size: 0.7rem;
    padding: 0.25em 0.45em;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }

  .order-history__cell--date,
  .order-history__cell--payment,
  .order-history__cell--net {
    font-size: 0.8125rem;
  }
}

@media (max-width: 767.98px) {
  .order-history__inner {
    display: block;
  }

  .order-history__header {
    display: none;
  }

  .order-history__row {
    display: block;
    padding: 0.65rem 0.75rem;
    gap: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  }

  .order-history__cell {
    border: none;
    padding: 0.15rem 0;
  }

  .order-history__cell[data-ps-label]::before {
    content: attr(data-ps-label) ' : ';
    font-weight: 600;
    margin-right: 0.25rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8rem;
  }

  .order-history__cell--action,
  .order-history__cell--actions {
    margin-top: 0.4rem;
  }

  .z-tooltip__label {
    bottom: auto;
    top: calc(100% + 0.5rem);
    transform: translateX(-50%) translateY(-0.25rem);
  }

  .z-tooltip__label::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #111;
  }

  .z-tooltip:hover .z-tooltip__label,
  .z-tooltip:focus-visible .z-tooltip__label {
    transform: translateX(-50%) translateY(0);
  }
}

/* ── C.3 — Order group detail ──────────────────────────────────────────── */

/* Header */
.order-group-header.box {
  margin-bottom: 1.25rem;
}

.order-group-header__row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.order-group-header__meta {
  flex: 1 1 20rem;
}

.order-group-header__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem;
  margin: 0;
}

.order-group-header__dl dt {
  font-weight: 600;
  white-space: nowrap;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.8125rem;
}

.order-group-header__dl dd {
  margin: 0;
}

.order-group-header__documents {
  flex: 0 0 auto;
  min-width: 12rem;
}

.order-group-header__documents-label {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--bs-secondary-color, #6c757d);
}

.order-group-header__documents-label .material-icons {
  font-size: 1rem;
}

.order-group-header__doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.order-group-header__doc-list .btn .material-icons {
  font-size: 1rem;
  vertical-align: middle;
  margin-right: 0.2rem;
}

/* Shipments table */
.order-group-shipments.box {
  margin-bottom: 1.25rem;
}

.order-group-shipments__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.order-group-shipments__table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.order-group-shipments__inner {
  display: grid;
}

.order-group-shipments__header,
.order-group-shipments__row {
  display: contents;
}

.order-group-shipments__cell {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}

.order-group-shipments__header .order-group-shipments__cell {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--bs-secondary-color, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom-width: 2px;
}

@media (min-width: 768px) {
  .order-group-shipments__inner {
    grid-template-columns:
      2.5rem          /* # */
      minmax(9rem, 1.5fr)  /* recipient */
      minmax(8rem, 1fr)    /* destination */
      minmax(9rem, 1.4fr)  /* items */
      minmax(8rem, 1.2fr)  /* status */
      minmax(7rem, 1fr)    /* carrier */
      minmax(9rem, 1fr);   /* tracking */
    min-width: 0;
  }
}

.order-group-products {
  list-style: none;
  margin: 0;
  padding: 0;
}

.order-group-products__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.order-group-products__qty {
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}

.order-group-products__ref {
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.75rem;
}

.order-group-shipments__cell--items {
  align-items: flex-start;
  flex-direction: column;
}

.order-group-shipments__street {
  display: block;
  overflow-wrap: anywhere;
}

.order-group-shipments__cell--pos {
  justify-content: center;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.8125rem;
}

.order-group-shipments__cell--tracking a,
.order-group-shipments__tracking-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  text-decoration: none;
}

.order-group-shipments__tracking-link .material-icons {
  font-size: 1rem;
}

.order-group-shipments__tracking-link:hover {
  text-decoration: underline;
}

/* Mobile: stack cells */
@media (max-width: 767.98px) {
  .order-group-shipments__inner {
    display: block;
  }

  .order-group-shipments__header {
    display: none;
  }

  .order-group-shipments__row {
    display: block;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  }

  .order-group-shipments__cell {
    border: none;
    padding: 0.15rem 0;
    font-size: 0.875rem;
  }

  .order-group-shipments__cell[data-ps-label]::before {
    content: attr(data-ps-label) ' : ';
    font-weight: 600;
    margin-right: 0.25rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8rem;
  }

  .order-group-shipments__cell--pos {
    display: none;
  }
}

/* Footer */
.order-group-footer {
  margin-top: 1rem;
}

.order-group-footer .btn .material-icons {
  font-size: 1rem;
  vertical-align: middle;
  margin-right: 0.2rem;
}

/* Hook wrapper */
.order-group-hook.box {
  margin-top: 1.25rem;
}

/* zinvoice : bouton facture fond noir/blanc */
.zinvoice-invoice-row .btn {
  background-color: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

.zinvoice-invoice-row .btn:hover,
.zinvoice-invoice-row .btn:focus {
  background-color: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
}

/* ── C.5 — Mono view + Pagination ─────────────────────────────────────── */

/* Mono : réutilise la grille DL du header */
.order-group-mono.box {
  margin-bottom: 1.25rem;
}

.order-group-mono .order-group-header__dl {
  max-width: 32rem;
}

/* Pagination */
.order-group-pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.order-group-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  text-decoration: none;
  color: inherit;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.order-group-pagination__btn:hover {
  background: #f8f9fa;
}

.order-group-pagination__btn--active {
  background: #111;
  border-color: #111;
  color: #fff;
  font-weight: 600;
  cursor: default;
}

.order-group-pagination__btn--disabled {
  opacity: 0.4;
  cursor: default;
}

.order-group-pagination__btn--ellipsis {
  border: none;
  background: transparent;
  cursor: default;
}

.order-group-pagination__btn .material-icons {
  font-size: 1.1rem;
}

/* ── end C.5 ──────────────────────────────────────────────────────────── */

/* ── end C.3 ──────────────────────────────────────────────────────────── */

/* Hide parent theme quantity selector + add button inside our custom form */
.product-miniature__actions--zchocolat .quantity-button,
.product-miniature__actions--zchocolat .product-miniature__add {
    display: none !important;
}

/* ── Pages CMS Creative Elements — mise en page pleine largeur ─────────────
   Les pages CMS construites avec CE sont enfermées dans .columns-container
   .container (max-width 1320) : leurs sections ne peuvent pas aller bord à bord.
   On sort chaque section top-level en pleine largeur d'écran (fonds edge-to-edge) ;
   la largeur du CONTENU (max-width du conteneur) est, elle, portée par les réglages
   Elementor de chaque section (layout / content_width), compilés par CE.
   N'affecte que les pages CMS ayant du contenu CE (les .elementor-section
   n'existent que là). */
.page-content--cms .elementor-section-wrap > .elementor-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}


/* Header logo swap: at the top of the page the full stacked logo (crest +
   "Chocolat") is shown; once scrolled it collapses to the crest alone on the
   sticky header. The logo box height animates between the two states, so the
   header row keeps the menu vertically centred against whichever logo shows
   (its position therefore shifts a little between states). The two logos are
   both centred on the same axis so the crest stays put horizontally.
   Mobile keeps the crest only (handled at 38px in zmegamenu front.css). */
.logo-swap { position: relative; display: inline-flex; align-items: center; }
.logo-swap .logo { display: block; width: auto; max-width: none; }
.logo-swap .logo--full { display: none; }

@media (min-width: 768px) {
    .logo-swap {
        display: block;
        width: 58px;
        height: 72px;                       /* top: crest + "Chocolat" */
        transition: height .35s ease;
    }
    .logo-swap .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: opacity .35s ease;
    }
    .logo-swap .logo--full  { display: block; height: 72px; opacity: 1; }
    .logo-swap .logo--crest { height: 52px; opacity: 0; }

    .header.is-scrolled .logo-swap { height: 52px; }   /* scrolled: crest only */
    .header.is-scrolled .logo-swap .logo--full  { opacity: 0; }
    .header.is-scrolled .logo-swap .logo--crest { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .logo-swap, .logo-swap .logo { transition: none; }
}

/* CE design-page heroes: trim the oversized banner height by ~1/3.
   The Creative Elements hero is the first full-width section in "min-height"
   mode (min-height was ~80–82vh); 54vh ≈ two-thirds. Scoped to that first
   section so mid-page min-height sections stay untouched. */
.elementor-section-wrap > .elementor-section.elementor-section-height-min-height:first-child > .elementor-container {
    min-height: 54vh;
}