/* @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 {
    --casablanca-brand: #531628;
    --casablanca-brand-rgb: 83, 22, 40;
    --casablanca-text-primary: #111827;
    --casablanca-text-secondary: #4B5563;
    --casablanca-bg-primary: #FFFFFF;
    --casablanca-bg-secondary: #F9FAFB;
    --casablanca-border: rgba(var(--casablanca-brand-rgb), 0.15);
    --casablanca-shadow-sm: 0 1px 2px rgba(var(--casablanca-brand-rgb), 0.05);
    --casablanca-shadow-md: 0 4px 6px -1px rgba(var(--casablanca-brand-rgb), 0.1);
    --casablanca-space-xs: 4px;
    --casablanca-space-sm: 8px;
    --casablanca-space-md: 16px;
    --casablanca-space-lg: 24px;
    --casablanca-space-xl: 40px;
    /* Max content width shared by .casablanca-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. */
    --casablanca-container: 1200px;
    --casablanca-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(--casablanca-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. */
    --casablanca-radius: 5px;
    /* Size aliases kept so existing consumers resolve to the master value.
       They are intentionally all the same — the scale is deliberately flat. */
    --casablanca-radius-sm: var(--casablanca-radius);
    --casablanca-radius-md: var(--casablanca-radius);
    --casablanca-radius-lg: var(--casablanca-radius);
    /* Escape hatches for the shapes that must NOT be squared off. */
    --casablanca-radius-pill: 999px;
    --casablanca-radius-circle: 50%;
    --casablanca-font-primary: 'IBM Plex Sans Arabic', sans-serif;
    --casablanca-font-secondary: 'IBM Plex Sans Arabic', 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(--casablanca-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. */
    --casablanca-icon-size-xs: 14px;      /* product info toggle, account back-icon */
    --casablanca-icon-size-sm: 15px;      /* cart item remove */
    --casablanca-icon-size-md: 16px;      /* cod form icon, search submit/close */
    --casablanca-icon-size-lg: 17px;      /* account nav icon */
    --casablanca-icon-size-xl: 18px;      /* footer social, confirm button, account logout SVG, sticky ATC */
    --casablanca-icon-size-2xl: 20px;     /* drawer close (menu, categories) */
    --casablanca-icon-size-3xl: 22px;     /* confirm button desktop, rating stars (lg) */
    --casablanca-icon-size-4xl: 24px;     /* search mobile */
    --casablanca-icon-size-5xl: 26px;     /* rating star (reviews) */
    --casablanca-icon-size-6xl: 28px;     /* header action icons (mobile) */
    --casablanca-icon-size-7xl: 30px;     /* header action icons (32px container) */
    --casablanca-icon-size-9xl: 34px;     /* review upload icon */
    --casablanca-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. */
    --casablanca-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. */
    --casablanca-container-width: 1200px;
    --casablanca-container-gutter: clamp(12px, 3.5vw, 24px);

    /* Fluid spacing scale */
    --casablanca-fluid-gap: clamp(10px, 2vw, 24px);
    --casablanca-fluid-padding: clamp(12px, 3vw, 32px);
    --casablanca-fluid-heading: clamp(1.15rem, 0.75rem + 1.25vw, 1.85rem);
    --casablanca-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 casablanca-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(--casablanca-brand);
    --shadow-button: var(--casablanca-shadow-sm);
    --theme-radius: var(--casablanca-radius);
    --transition-fast: 0.2s;
    --color-bg-white: #fff;
    --radius-sm: var(--casablanca-radius);
    --radius-md: var(--casablanca-radius);
    --ostore-primary: var(--casablanca-brand);
    --ostore-primary-hover: color-mix(in srgb, var(--casablanca-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 .casablanca-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,
   .casablanca-qty-btn, .hero-arrow, .carousel-arrow,
   .casablanca-video-play-btn, .drawer-close,
   .cart-item-remove, .header-action-item) and all wp-admin UI, which
   keeps brand color out of the dashboard. */
.casablanca-btn,
.fp-atc-btn:not(.fp-atc-circle),
.btn-voir-tout,
.checkout-button,
.sticky-atc-btn,
.casablanca-confirm-checkout-btn,
.btn-404,
.contact-support-btn,
.submit-review-btn,
.write-review-toggle,
.return-btn,
.casablanca-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;
}

.casablanca-btn svg,
.fp-atc-btn svg,
.btn-voir-tout svg,
.checkout-button svg,
.sticky-atc-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
    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. */
.casablanca-btn:hover,
.fp-atc-btn:not(.fp-atc-circle):hover,
.btn-voir-tout:hover,
.checkout-button:hover,
.sticky-atc-btn:hover,
.casablanca-confirm-checkout-btn:hover,
.contact-support-btn:hover,
.submit-review-btn:hover,
.write-review-toggle:hover,
.casablanca-thankyou-whatsapp-btn:hover {
    background: var(--qt-action-hover) !important;
    border-color: color-mix(in srgb, var(--qt-action-hover) 70%, transparent) !important;
}

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

/* @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(--casablanca-font-primary);
    color: var(--casablanca-text-primary);
    background-color: var(--casablanca-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(--casablanca-font-secondary);
    font-weight: 700;
}

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

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

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

.casablanca-container > article.page,
.casablanca-container > article.post,
.casablanca-container > article.casablanca-page-article,
.casablanca-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(--casablanca-border, #f1f5f9);
}

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

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

.post-thumbnail {
    margin: 24px 0;
    border-radius: var(--casablanca-radius, 5px);
    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(--casablanca-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(--casablanca-text-primary, #1e293b);
    text-align: start;
    font-family: var(--casablanca-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(--casablanca-text-primary, #1e293b);
}

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

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

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

@media (max-width: 767px) {
    .casablanca-container > article.page,
    .casablanca-container > article.post,
    .casablanca-container > article.casablanca-page-article,
    .casablanca-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(--casablanca-radius);
    }
}

@media (max-width: 767px) {
    .casablanca-btn,
    .btn-voir-tout:not(.fp-btn-compact),
    .checkout-button,
    .btn-404,
    .contact-support-btn,
    .submit-review-btn,
    .write-review-toggle,
    .return-btn,
    .casablanca-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(--casablanca-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 {
    --casablanca-admin-bar: 0px;
}

body.admin-bar {
    --casablanca-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 {
        --casablanca-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 casablanca-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(--casablanca-brand, #531628);
    border-radius: var(--casablanca-radius, 5px);
    box-shadow: var(--casablanca-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    outline: 2px solid var(--casablanca-brand, #531628);
    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 (.casablanca-account, .casablanca-or, .casablanca-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(
    .casablanca-header,
    .casablanca-footer,
    .casablanca-drawer,
    .announcement-bar,
    .casablanca-product-single,
    .sticky-checkout-bar,
    .fp-product-card,
    .casablanca-modular-checkout-wrapper,
    .casablanca-cod-modal,
    .casablanca-checkout-cod,
    .casablanca-coupon,
    .casablanca-product-info,
    .casablanca-delivery-timeline,
    .casablanca-reviews,
    .casablanca-services-section,
    .casablanca-categories-section,
    .casablanca-fc,
    .casablanca-shop-sidebar,
    .casablanca-floating-contact
) svg {
    width: var(--casablanca-icon-size-md, 16px);
    height: var(--casablanca-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,
    .casablanca-icon-section,
    .casablanca-confirm-checkout-btn,
    .fp-atc-btn,
    .casablanca-gallery-nav,
    .sticky-atc-btn .icon,
    .casablanca-pi-icon,
    .casablanca-account__back-icon,
    .casablanca-account__logout,
    .casablanca-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,
    .casablanca-dt-icon,
    .service-icon,
    .casablanca-fc-view-all,
    .casablanca-floating-contact,
    .casablanca-rating-star,
    .casablanca-reviews .casablanca-upload-icon,
    .casablanca-co-summary__toggle,
    .casablanca-co-cod__mark,
    .casablanca-or__mark,
    .fly-item-inner,
    .casablanca-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,
    .casablanca-fc-nav,
    /* Contact form */
    .select-chevron,
    .thank-you-icon,
    /* Coupons */
    .casablanca-coupon__ok
) svg {
    width: var(--casablanca-icon-size-md, 16px);
    height: var(--casablanca-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(--casablanca-icon-size-7xl);
    height: var(--casablanca-icon-size-7xl);
}

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

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

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

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

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

:where(.casablanca-confirm-checkout-btn) svg {
    width: var(--casablanca-icon-size-xl);
    height: var(--casablanca-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(.casablanca-gallery-nav) svg {
    width: var(--casablanca-icon-size-2xl, 20px);
    height: var(--casablanca-icon-size-2xl, 20px);
}

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

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

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

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

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

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

/* Carousel navigation — 38x38 buttons (categories + featured carousel). */
:where(.categories-carousel-nav, .casablanca-fc-nav) svg {
    width: var(--casablanca-icon-size-xl);
    height: var(--casablanca-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(--casablanca-icon-size-2xl);
    height: var(--casablanca-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(.casablanca-coupon__ok) svg {
    width: var(--casablanca-icon-size-xs);
    height: var(--casablanca-icon-size-xs);
}

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

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

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

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

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

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

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

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

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

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

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

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

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


/* ── Prices inside the RTL pages ──────────────────────────────────────────
 * The product page, the COD form, the Checkout COD page and My Account are
 * dir="rtl" (see CLAUDE.md). There the bidi algorithm lays "234 LYD" out as
 * two runs, right to left, and the price reads "LYD 234". Each price is kept
 * one left-to-right unit — amount, then symbol, as the %2$s %1$s format
 * writes it — so it reads "234 LYD" (and "234 د.ل"). The discount badge has
 * the same problem ("47%-" instead of "-47%").
 *
 * Every element listed is inline or a shrink-wrapped flex item, so the
 * direction changes the order INSIDE the price only, never where the price
 * sits in its row. .price-main is a flex row of two spans: `direction` is what
 * orders flex items, so it gets the same declaration.
 */
[dir="rtl"] :is(
    .price-main,
    .price-compare,
    .fp-price-new,
    .fp-price-old,
    .casablanca-offer-price,
    .casablanca-offer-compare,
    .casablanca-summary-row > span:last-child,
    .casablanca-upsell-price-val,
    .woocommerce-Price-amount,
    .fp-price-discount
) {
    direction: ltr;
    unicode-bidi: isolate;
}