/* @critical box-sizing */
/*
 * THE FIRST RULE IN THE FILE, AND IT MUST STAY INSIDE A @critical BLOCK.
 *
 * base.css is deferred (media="print" until onload), so only the chunks named
 * in critical_css_registry() are present at first paint. Every other rule in
 * this file sits inside a marker — but this one was above the first one, and a
 * marker captures from itself forwards. So the single most layout-defining
 * declaration in the theme was the one thing NOT inlined: the whole page
 * painted in content-box, where padding is added to width instead of taken out
 * of it, and then snapped to border-box when the deferred sheet landed.
 *
 * That is the flash and the jump — the header container (20px padding), every
 * input, every button, every card and every grid cell changed width at once,
 * late, in one frame. Nothing was unstyled; everything was measured wrong.
 */
*, ::before, ::after {
    box-sizing: border-box;
}
/* @critical variables */
:root {
    --codleade-brand: #FFA529;
    --codleade-brand-rgb: 255, 165, 41;
    --codleade-text-primary: #111827;
    --codleade-text-secondary: #4B5563;
    --codleade-bg-primary: #FFFFFF;
    --codleade-bg-secondary: #F9FAFB;
    --codleade-border: rgba(var(--codleade-brand-rgb), 0.15);
    --codleade-shadow-sm: 0 1px 2px rgba(var(--codleade-brand-rgb), 0.05);
    --codleade-shadow-md: 0 4px 6px -1px rgba(var(--codleade-brand-rgb), 0.1);
    --codleade-space-xs: 4px;
    --codleade-space-sm: 8px;
    --codleade-space-md: 16px;
    --codleade-space-lg: 24px;
    --codleade-space-xl: 40px;
    /* Max content width shared by .codleade-container and any future full-width
       section that needs to line up with it. Same 1200px the container has
       always used — this only gives it a name. */
    --codleade-container: 1200px;
    --codleade-border-width: 1px;
    /* ── Border-radius system ─────────────────────────────────────────
       ONE master radius for the whole storefront. It is the subtle corner
       of the product-card image (template-parts/product/product-card.css),
       promoted to the global visual identity: minimal, premium, not heavily
       rounded. Every rectangular UI element — cards, images, inputs,
       selects, textareas, buttons, drawers, popups, filters, badges —
       resolves to this one value, on desktop, tablet and mobile alike.

       Do NOT hardcode a radius in a component stylesheet, and do NOT
       introduce a larger radius for a breakpoint. Use var(--codleade-radius).

       Genuinely round controls are the deliberate exception and keep their
       own value: circular add-to-cart (.fp-atc-circle), icon buttons,
       avatars, count dots, toggle switches — those stay 50% / pill. */
    --codleade-radius: 13px;
    /* Size aliases kept so existing consumers resolve to the master value.
       They are intentionally all the same — the scale is deliberately flat. */
    --codleade-radius-sm: var(--codleade-radius);
    --codleade-radius-md: var(--codleade-radius);
    --codleade-radius-lg: var(--codleade-radius);
    /* Escape hatches for the shapes that must NOT be squared off. */
    --codleade-radius-pill: 999px;
    --codleade-radius-circle: 50%;
    --codleade-font-primary: 'Mulish', sans-serif;
    --codleade-font-secondary: 'Mulish', sans-serif;

    /* ── Icon Sizing System ────────────────────────────────────────────
       Component-scoped icon sizes. Every icon container defines its own
       size via these variables. SVGs inside MUST use width/height: 100%
       (or var(--codleade-icon-size-*)) and flex-shrink: 0 to prevent
       inheritance from parent flex/grid contexts.
       
       Do NOT apply global svg { width/height }. Use component-scoped rules. */
    --codleade-icon-size-xs: 14px;      /* product info toggle, account back-icon */
    --codleade-icon-size-sm: 15px;      /* cart item remove */
    --codleade-icon-size-md: 16px;      /* cod form icon, search submit/close */
    --codleade-icon-size-lg: 17px;      /* account nav icon */
    --codleade-icon-size-xl: 18px;      /* footer social, confirm button, account logout SVG, sticky ATC */
    --codleade-icon-size-2xl: 20px;     /* drawer close (menu, categories) */
    --codleade-icon-size-3xl: 22px;     /* confirm button desktop, rating stars (lg) */
    --codleade-icon-size-4xl: 24px;     /* search mobile */
    --codleade-icon-size-5xl: 26px;     /* rating star (reviews) */
    --codleade-icon-size-6xl: 28px;     /* header action icons (mobile) */
    --codleade-icon-size-7xl: 30px;     /* header action icons (32px container) */
    --codleade-icon-size-9xl: 34px;     /* review upload icon */
    --codleade-icon-size-10xl: 38px;    /* account logout/avatar container */

    /* ── Cross-sheet token: product-card add-to-cart button ──────────────
       Declared here, in the `variables` block, because it is INLINED as
       critical CSS on every page — and the rule that consumes it,
       `:where(.fp-atc-btn) svg` at the end of this file, is inlined with it.

       template-parts/product/product-card.css declares its own value on
       .fp-product-card and wins (same specificity, later in the cascade),
       including its <=767px override. But that sheet is DEFERRED by
       inc/performance/assets.php, and on a product page it is not part of the
       critical CSS either — so until it arrived, `calc(var(--pc-atc-size) *
       0.45)` referenced nothing. An undefined custom property inside calc()
       makes the whole declaration invalid at computed-value time, so width and
       height fell back to `auto`; because Helpers\get_svg() strips width/height
       off every icon, `auto` on a viewBox-only <svg> means 100% of the
       containing block. That is how every product card briefly rendered a
       full-width cart glyph.

       RULE: critical CSS may never reference a custom property that only a
       deferred stylesheet defines. */
    --pc-atc-size: clamp(32px, 2.5vw, 36px);

    /* ── SVG Normalization ──────────────────────────────────────────────
       Prevent SVGs from inheriting unexpected width/height/max-width/min-width/
       flex/font-size from parent elements. Component-scoped rules set explicit
       sizes. These rules ensure SVGs inside icon containers behave predictably. */
    --codleade-svg-normalize: 1; /* Feature flag for SVG normalization */

    /* ── Flexible Responsive Units System ────────────────────────────
       Production-ready fluid sizing tokens for layout, spacing, and typography.
       Scales smoothly across mobile, tablet, and desktop viewports. */
    --codleade-container-width: 1200px;
    --codleade-container-gutter: clamp(12px, 3.5vw, 24px);

    /* Fluid spacing scale */
    --codleade-fluid-gap: clamp(10px, 2vw, 24px);
    --codleade-fluid-padding: clamp(12px, 3vw, 32px);
    --codleade-fluid-heading: clamp(1.15rem, 0.75rem + 1.25vw, 1.85rem);
    --codleade-fluid-body: clamp(12px, 0.25vw + 0.75rem, 14px);

    /* Flowing dashed line. One tile is --dt-dash-step wide and holds one
       --dt-dash-long dash, so the gap needs no variable of its own and the
       tile width doubles as the animation's travel distance: shifting the
       pattern by exactly one tile lands it back on itself, which is what
       makes @keyframes codleade-dt-flow (below) loop seamlessly with nothing
       measured and nothing scripted.

       Declared here, not on a component, because two components run the same
       animation: the delivery timeline's connectors and the upsell offer's
       border. The keyframe resolves --dt-dash-step on the element it is
       animating, so a component outside the timeline's subtree would
       otherwise have no value to travel by. Retune these and both follow. */
    --dt-dash: 3px;
    --dt-dash-step: 8px;
    --dt-flow: 1000ms;

    /* Button design-system aliases, consumed by the button contract below.
       A button with its own color re-points --ostore-button-bg on itself
       (see featured-products.css, whatsapp.css). */
    --color-primary: var(--codleade-brand);
    --shadow-button: var(--codleade-shadow-sm);
    --theme-radius: var(--codleade-radius);
    --transition-fast: 0.2s;
    --color-bg-white: #fff;
    --radius-sm: var(--codleade-radius);
    --radius-md: var(--codleade-radius);
    --ostore-primary: var(--codleade-brand);
    --ostore-primary-hover: color-mix(in srgb, var(--codleade-brand) 85%, #000);
    /* --ostore-button-bg / -hover / -pressed are intentionally NOT defined here.
       Leaving them unset lets the var() fallback chain below resolve to
       --ostore-primary, while any individual button can re-point itself by
       declaring --ostore-button-bg on its own selector. */
}

/* @critical button-contract */
/* ── Button contract ──────────────────────────────────────────────────
   One shared style for every storefront call-to-action. Add .codleade-btn
   to new buttons to opt in; set --ostore-button-bg on a button to give
   it its own color without forking the rest of the style.
   Deliberately excluded: icon/stepper/close/arrow controls (.qty-btn,
   .codleade-qty-btn, .hero-arrow, .carousel-arrow,
   .codleade-video-play-btn, .drawer-close,
   .cart-item-remove, .header-action-item) and all wp-admin UI, which
   keeps brand color out of the dashboard. */
.codleade-btn,
.fp-atc-btn:not(.fp-atc-circle),
.checkout-button,
.sticky-atc-btn,
.codleade-confirm-checkout-btn,
.btn-404,
.contact-support-btn,
.submit-review-btn,
.write-review-toggle,
.return-btn,
.codleade-thankyou-whatsapp-btn {
    --qt-action-bg: var(--ostore-button-bg, var(--ostore-primary));
    --qt-action-hover: var(--ostore-button-bg-hover, var(--ostore-primary-hover));
    --qt-action-pressed: var(--ostore-button-bg-pressed, var(--ostore-primary-hover));
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    color: var(--color-bg-white) !important;
    text-decoration: none !important;
    gap: 8px;
    padding: 10px 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--qt-action-bg) 70%, transparent) !important;
    outline: none !important;
    border-radius: var(--theme-radius, var(--radius-md)) !important;
    background: var(--qt-action-bg) !important;
}

.codleade-btn svg,
.fp-atc-btn svg,
.checkout-button svg,
.sticky-atc-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* --qt-action-hover / --qt-action-pressed are declared above but unused
   without these two rules. Buttons that deliberately suppress hover
   (.btn-404, .return-btn) override these from their own files. */
.codleade-btn:hover,
.fp-atc-btn:not(.fp-atc-circle):hover,
.checkout-button:hover,
.sticky-atc-btn:hover,
.codleade-confirm-checkout-btn:hover,
.contact-support-btn:hover,
.submit-review-btn:hover,
.write-review-toggle:hover,
.codleade-thankyou-whatsapp-btn:hover {
    background: var(--qt-action-hover) !important;
    border-color: color-mix(in srgb, var(--qt-action-hover) 70%, transparent) !important;
}

.codleade-btn:active,
.fp-atc-btn:not(.fp-atc-circle):active,
.checkout-button:active,
.sticky-atc-btn:active,
.codleade-confirm-checkout-btn:active,
.contact-support-btn:active,
.submit-review-btn:active,
.write-review-toggle:active,
.codleade-thankyou-whatsapp-btn:active {
    background: var(--qt-action-pressed) !important;
    border-color: color-mix(in srgb, var(--qt-action-pressed) 70%, transparent) !important;
}

/* ── "Voir tout" pill ─────────────────────────────────────────────────
   One visual treatment for every "Voir tout" control in the theme, whatever
   section renders it. These are quiet outline pills, not brand calls to
   action, so they are deliberately NOT part of the filled button contract
   above. Component stylesheets own placement only; a new view-all link only
   needs .fpc3-view-all to match the rest. */
.fpc3-view-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 18px;
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
    transition: none;
}

/* The reviews control is a <button>, which does not inherit link defaults. */
button.fpc3-view-all {
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

.fpc3-view-all:focus-visible {
    outline: 2px solid var(--codleade-brand, #FFA529);
    outline-offset: 3px;
}

/* @critical post-button-contract */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
@supports (overflow-x: clip) {
    html {
        overflow-x: clip;
    }
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    font-family: var(--codleade-font-primary);
    color: var(--codleade-text-primary);
    background-color: var(--codleade-bg-primary);
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}
@supports (overflow-x: clip) {
    body {
        overflow-x: clip;
    }
}

#page.site {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}
@supports (overflow-x: clip) {
    #page.site {
        overflow-x: clip;
    }
}

.site-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--codleade-font-secondary);
    font-weight: 700;
}

.codleade-container {
    max-width: var(--codleade-container);
    margin: 0 auto;
    padding: 0 var(--codleade-space-md);
}

.codleade-stable-media {
    aspect-ratio: 16 / 9;
    background-color: var(--codleade-bg-secondary);
    overflow: hidden;
}

.codleade-stable-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.codleade-container > article.page,
.codleade-container > article.post,
.codleade-container > article.codleade-page-article,
.codleade-container > article {
    max-width: 820px;
    margin: 0 auto;
    padding: 35px 20px 70px;
    box-sizing: border-box;
}

.entry-header {
    text-align: start;
    padding: 0 0 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--codleade-border, #f1f5f9);
}

.entry-title {
    font-family: var(--codleade-font-secondary, inherit);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0;
    color: var(--codleade-text-primary, #1e293b);
    line-height: 1.35;
    text-align: start;
}

.entry-meta {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--codleade-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: start;
}

.post-thumbnail {
    margin: 24px 0;
    border-radius: var(--codleade-radius, 13px);
    overflow: hidden;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.entry-content {
    max-width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--codleade-text-secondary, #4b5563);
    text-align: start;
    word-break: break-word;
}

.entry-content p {
    font-size: inherit;
    line-height: inherit;
    margin-top: 0;
    margin-bottom: 16px;
    color: inherit;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--codleade-text-primary, #1e293b);
    text-align: start;
    font-family: var(--codleade-font-secondary, inherit);
    line-height: 1.4;
}

.entry-content h1 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 14px;
}

.entry-content h2 {
    font-size: 16.5px;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 12px;
}

.entry-content h3 {
    font-size: 15px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-size: 14px;
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 8px;
}

.entry-content ul,
.entry-content ol {
    margin: 0 0 18px 0;
    padding-inline-start: 20px;
    padding-inline-end: 0;
}

.entry-content li {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 8px;
    color: inherit;
}

.entry-content li:last-child {
    margin-bottom: 0;
}

.entry-content strong,
.entry-content b {
    font-weight: 600;
    color: var(--codleade-text-primary, #1e293b);
}

.entry-content p a,
.entry-content li a,
.entry-content a:not([class]) {
    color: var(--codleade-c-links, var(--codleade-brand, #FFA529));
    text-decoration: underline;
}

.entry-content a.return-btn,
.entry-content a.codleade-thankyou-whatsapp-btn,
.entry-content a.btn,
.entry-content a.button,
.codleade-thank-you-container a,
.codleade-thankyou-whatsapp-btn,
.codleade-thankyou-whatsapp-btn *,
.return-btn,
.return-btn * {
    text-decoration: none !important;
}

.page-thank-you-layout {
    padding-top: 15px !important;
}

@media (max-width: 767px) {
    .codleade-container > article.page,
    .codleade-container > article.post,
    .codleade-container > article.codleade-page-article,
    .codleade-container > article {
        padding: 22px 14px 45px;
    }

    .entry-header {
        padding: 0 0 10px;
        margin-bottom: 16px;
        text-align: start;
    }

    .entry-title {
        font-size: 16px !important;
        font-weight: 700;
        letter-spacing: 0.4px;
        line-height: 1.35;
        text-align: start;
    }

    .entry-content {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    .entry-content p {
        font-size: 13px !important;
        line-height: 1.65 !important;
        margin-bottom: 12px;
    }

    .entry-content h1 {
        font-size: 15.5px !important;
        margin-top: 20px;
        margin-bottom: 8px;
    }

    .entry-content h2 {
        font-size: 14.5px !important;
        margin-top: 18px;
        margin-bottom: 8px;
    }

    .entry-content h3 {
        font-size: 13.5px !important;
        margin-top: 14px;
        margin-bottom: 6px;
    }

    .entry-content ul,
    .entry-content ol {
        padding-inline-start: 16px;
        margin-bottom: 14px;
    }

    .entry-content li {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 6px;
    }

    .post-thumbnail {
        margin: 16px 0;
        border-radius: var(--codleade-radius);
    }
}

@media (max-width: 767px) {
    .codleade-btn,
    .checkout-button,
    .btn-404,
    .contact-support-btn,
    .submit-review-btn,
    .write-review-toggle,
    .return-btn,
    .codleade-thankyou-whatsapp-btn {
        min-height: 38px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        padding: 7px 14px !important;
        border-radius: var(--radius-sm, 5px) !important;
    }
}


/* @critical admin-bar */
/* ── WordPress admin bar offset ──────────────────────────────────────────
 * Single source of truth for how far sticky/fixed chrome must sit from the
 * top of the viewport once #wpadminbar is present. Everything that pins to
 * the top adds var(--codleade-admin-bar) rather than hardcoding 32/46px.
 *
 * Logged-out visitors never get body.admin-bar, so the value stays 0px and
 * the storefront renders byte-identically to before.
 *
 * WordPress declares --wp-admin--admin-bar--height on <html> (32px, and 46px
 * at <=782px), so desktop/mobile heights are read from core rather than
 * duplicated here. The literal 32px is only a fallback for the case where
 * that variable is unavailable.
 */
:root {
    --codleade-admin-bar: 0px;
}

body.admin-bar {
    --codleade-admin-bar: var(--wp-admin--admin-bar--height, 32px);
}

/* Below 600px core switches #wpadminbar to position:absolute, so it scrolls
 * away with the page instead of staying pinned. Reserving space for it there
 * would leave a permanent empty band under a sticky header once scrolled —
 * so the offset goes back to zero. 600px matches core's own breakpoint for
 * that switch (it is NOT the 782px height breakpoint). */
@media screen and (max-width: 600px) {
    body.admin-bar {
        --codleade-admin-bar: 0px;
    }
}

/* @critical keyframes */
/* ═════════════════════════════════════════════════════════════════════
   The theme's one flowing-dash animation.

   Moved here from delivery-timeline.css so it is defined wherever it is
   used: that stylesheet only loads when the timeline is enabled, while
   base.css is a dependency of every enqueue. A keyframe that is not in the
   document simply does nothing — which is how this would have failed on a
   store with the timeline switched off.

   background-position is the only animated property, and the travel
   distance is one tile (--dt-dash-step above), so the loop is seamless by
   construction. Callers decide direction with animation-direction.
   ═════════════════════════════════════════════════════════════════════ */
@keyframes codleade-dt-flow {
    from { background-position-x: 0; }
    to   { background-position-x: var(--dt-dash-step); }
}

/* @critical accessibility */
/* ── Accessibility: visually-hidden utility ──────────────────────
 * header.php prints .skip-link.screen-reader-text on every page. Without a
 * global rule for it the literal "Aller au contenu" text rendered at the top
 * left of every page. Defined here (not beside a component) because base.css
 * is the only sheet loaded on every request — the near-identical rule in
 * shop-sidebar.css is descendant-scoped to .shop-sidebar and only enqueued on
 * shop pages, so it never applied to the skip link.
 */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.screen-reader-text:focus {
    position: fixed;
    top: 8px;
    inset-inline-start: 8px;
    z-index: 100000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    background: #fff;
    color: var(--codleade-brand, #FFA529);
    border-radius: var(--codleade-radius, 13px);
    box-shadow: var(--codleade-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    outline: 2px solid var(--codleade-brand, #FFA529);
    outline-offset: 2px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* @critical icons */
/* ── Icon sizing floor ────────────────────────────────────────────────
   Helpers\get_svg() strips width and height off every inline SVG so the CSS
   owns the size. That makes sizing a CONTRACT, not a nicety: an <svg> with a
   viewBox and no width is a replaced element with a ratio and NO intrinsic
   size, so `width: auto` resolves to 100% of its containing block.

   Below this rule is an allow-list of ~45 icon containers. An allow-list
   fails silently and open: a container nobody remembered to add renders its
   icon at full parent width, and it has happened more than once (the footer
   accordion chevron matched a `.footer-chevron` wrapper that exists in no
   template; the admin shell lost seven at once and had to grow its own floor
   in inc/admin/support/admin-support.css).

   So: a floor first, the allow-list and the per-component rules on top.

   SPECIFICITY — do not reorder. This rule and the allow-list below are both
   (0,0,1), because :where() contributes nothing; the allow-list wins purely
   by coming later in this file, and component sheets (`.footer-social svg`,
   (0,1,1)) win over both. Insert new rules AFTER the allow-list, never
   between it and this block.

   SCOPE — theme-rendered chrome only. Roots that wrap WooCommerce or plugin
   markup are deliberately absent (.codleade-account, .codleade-or, .codleade-shop-page):
   repainting someone else's icon is how this stops being a floor and starts
   being a bug. Every class below was checked against the templates; an entry
   that matches nothing is worse than no entry, because it reads as covered.

   This block is inlined as critical CSS (see critical_css_registry()), and it
   must never reference a custom property that only a DEFERRED stylesheet
   defines — an undefined var() inside calc() makes the whole declaration
   invalid at computed-value time, which lands right back on `auto`. That is
   why --pc-atc-size is declared in the `variables` block at the top of this
   file. */
:where(
    .codleade-header,
    .codleade-footer,
    .codleade-drawer,
    .announcement-bar,
    .codleade-product-single,
    .sticky-checkout-bar,
    .fp-product-card,
    .codleade-modular-checkout-wrapper,
    .codleade-cod-modal,
    .codleade-checkout-cod,
    .codleade-coupon,
    .codleade-product-info,
    .codleade-delivery-timeline,
    .codleade-reviews,
    .codleade-services-section,
    .codleade-categories-section,
    .codleade-fc,
    .codleade-shop-sidebar,
    .codleade-floating-contact
) svg {
    width: var(--codleade-icon-size-md, 16px);
    height: var(--codleade-icon-size-md, 16px);
    flex: none;
}

/* ── SVG Normalization Rules ──────────────────────────────────────────
   These rules prevent SVGs from inheriting unexpected width/height/
   max-width/min-width/flex/font-size from parent elements.
   Component-scoped rules set explicit sizes.
   These rules apply only to SVGs inside known icon containers. */

:where(
    .action-icon,
    .drawer-close,
    .search-submit,
    .search-close,
    .mobile-menu-toggle .action-icon,
    .cart-drawer .drawer-close,
    .cart-drawer .cart-item-remove,
    .cart-drawer .empty-cart-icon,
    .menu-drawer .drawer-close,
    .menu-drawer .drawer-account-icon,
    .categories-drawer .drawer-close,
    .codleade-icon-section,
    .codleade-confirm-checkout-btn,
    .fp-atc-btn,
    .codleade-gallery-nav,
    .sticky-atc-btn .icon,
    .codleade-pi-icon,
    .codleade-account__back-icon,
    .codleade-account__logout,
    .codleade-account__nav-icon,
    .footer-social,
    /* The footer accordion chevron is a DIRECT CHILD of the toggle button.
       The entry here used to name a .footer-chevron wrapper that exists in no
       template, so the chevron matched nothing and rendered at 100%. */
    .footer-toggle,
    .codleade-dt-icon,
    .service-icon,
    .fpc3-view-all,
    .codleade-floating-contact,
    .codleade-rating-star,
    .codleade-reviews .codleade-upload-icon,
    .codleade-co-summary__toggle,
    .codleade-co-cod__mark,
    .codleade-or__mark,
    .fly-item-inner,
    .codleade-cod-modal-close,
    .announcement-nav,
    .announcement-icon,
    .announcement-flag,
    /* Shop sidebar */
    .sidebar-close,
    .sidebar-section-toggle,
    .shop-filter-trigger,
    .shop-chip,
    /* Carousel navigation */
    .categories-carousel-nav,
    .codleade-fc-nav,
    /* Contact form */
    .select-chevron,
    .thank-you-icon,
    /* Coupons */
    .codleade-coupon__ok
) svg {
    width: var(--codleade-icon-size-md, 16px);
    height: var(--codleade-icon-size-md, 16px);
    display: block;
    max-width: none;
    min-width: 0;
    max-height: none;
    min-height: 0;
    /* An icon never participates in its parent's sizing: it cannot grow, cannot
       shrink, and cannot be stretched by align-items on the parent. These were
       a second, identical copy of this list wrapped in :where(); they are here
       now so there is exactly ONE list to keep in step with the markup. */
    flex: none;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    align-self: center;
    justify-self: center;
}

/* Component-specific overrides for containers with non-standard sizes */
:where(.action-icon, .mobile-menu-toggle .action-icon) svg {
    width: var(--codleade-icon-size-7xl);
    height: var(--codleade-icon-size-7xl);
}

:where(.drawer-close, .cart-drawer .drawer-close, .menu-drawer .drawer-close, .categories-drawer .drawer-close) svg {
    width: var(--codleade-icon-size-2xl);
    height: var(--codleade-icon-size-2xl);
}

:where(.search-submit, .search-close, .codleade-icon-section, .fly-item-inner) svg {
    width: var(--codleade-icon-size-md);
    height: var(--codleade-icon-size-md);
}

:where(.cart-drawer .cart-item-remove) svg {
    width: var(--codleade-icon-size-sm);
    height: var(--codleade-icon-size-sm);
}

:where(.cart-drawer .empty-cart-icon) svg {
    width: 100%;
    height: 100%;
}

:where(.menu-drawer .drawer-account-icon) svg {
    width: var(--codleade-icon-size-xl);
    height: var(--codleade-icon-size-xl);
}

:where(.codleade-confirm-checkout-btn) svg {
    width: var(--codleade-icon-size-xl);
    height: var(--codleade-icon-size-xl);
}

:where(.fp-atc-btn) svg {
    width: calc(var(--pc-atc-size) * 0.45);
    height: calc(var(--pc-atc-size) * 0.45);
}

/* Safety net for the gallery arrows; the real value lives with the component
   in single-product.css. Both must name the SAME token — they were both 32px
   and both wrong, and a mismatch here would mean the arrows changed size the
   moment the deferred component sheet arrived. */
:where(.codleade-gallery-nav) svg {
    width: var(--codleade-icon-size-2xl, 20px);
    height: var(--codleade-icon-size-2xl, 20px);
}

:where(.sticky-atc-btn .icon) svg {
    width: var(--codleade-icon-size-xl);
    height: var(--codleade-icon-size-xl);
}

:where(.codleade-pi-icon) svg {
    width: var(--codleade-icon-size-xs);
    height: var(--codleade-icon-size-xs);
}

:where(.codleade-account__back-icon) svg {
    width: 100%;
    height: 100%;
}

:where(.codleade-account__logout) svg {
    width: var(--codleade-icon-size-xl);
    height: var(--codleade-icon-size-xl);
}

:where(.codleade-account__nav-icon) svg {
    width: 100%;
    height: 100%;
}

:where(.footer-social) svg {
    width: var(--codleade-icon-size-xl);
    height: var(--codleade-icon-size-xl);
}

/* Carousel navigation — the featured carousel's 22px arrows take the 18px
   glyph. The categories carousel sets its own, smaller size in
   categories.css (it is a component rule, so it wins over this allow-list). */
:where(.codleade-fc-nav) svg {
    width: var(--codleade-icon-size-xl);
    height: var(--codleade-icon-size-xl);
}

/* Shop archive: the drawer close matches the other drawer closes; the active
   filter chip's remove glyph sits in 4px/8px padding, so it takes the smallest
   step. */
:where(.sidebar-close) svg {
    width: var(--codleade-icon-size-2xl);
    height: var(--codleade-icon-size-2xl);
}

:where(.shop-chip) svg {
    width: 12px;
    height: 12px;
}

/* Contact form success state: a centred confirmation mark above a 22px
   heading, so it reads as an illustration rather than a UI glyph. */
:where(.thank-you-icon) svg {
    width: 48px;
    height: 48px;
}

/* Coupon "code applied" tick, set against 0.7rem text. */
:where(.codleade-coupon__ok) svg {
    width: var(--codleade-icon-size-xs);
    height: var(--codleade-icon-size-xs);
}

:where(.codleade-dt-icon) svg {
    width: var(--dt-glyph);
    height: var(--dt-glyph);
}

:where(.service-icon) svg {
    width: 100%;
    height: 100%;
}

:where(.fpc3-view-all) svg {
    width: var(--codleade-icon-size-xs);
    height: var(--codleade-icon-size-xs);
}

:where(.codleade-floating-contact) svg {
    width: 60%;
    height: 60%;
}

:where(.codleade-rating-star) {
    --codleade-star-size: var(--codleade-icon-size-5xl);
}

:where(.codleade-reviews .codleade-upload-icon) svg {
    width: var(--codleade-icon-size-9xl);
    height: var(--codleade-icon-size-9xl);
}

:where(.codleade-co-summary__toggle) svg {
    width: var(--codleade-icon-size-md);
    height: var(--codleade-icon-size-md);
}

:where(.codleade-co-cod__mark) svg {
    width: var(--codleade-icon-size-xl);
    height: var(--codleade-icon-size-xl);
}

:where(.codleade-or__mark) svg {
    width: var(--codleade-icon-size-sm);
    height: var(--codleade-icon-size-sm);
}

:where(.codleade-cod-modal-close) svg {
    width: var(--codleade-icon-size-xl);
    height: var(--codleade-icon-size-xl);
}

:where(.announcement-nav) svg {
    width: var(--codleade-icon-size-xl);
    height: var(--codleade-icon-size-xl);
}

:where(.announcement-icon, .announcement-flag) svg {
    width: var(--codleade-icon-size-xs);
    height: var(--codleade-icon-size-xs);
}

:where(.announcement-icon--flag, .announcement-flag) svg {
    width: var(--codleade-icon-size-xl);
    height: auto;
    aspect-ratio: 28 / 20;
}