/* Border-box for the theme's own components (width+padding safety, RTL). */
:where(.alzar-header,.alzar-topbar,.alzar-footer,.alzar-mmenu__brand,.alzar-mmenu__foot,.alzar-home,.alzar-pdp) *,
:where(.alzar-header,.alzar-topbar,.alzar-footer,.alzar-mmenu__brand,.alzar-mmenu__foot) { box-sizing: border-box; }
/* ==========================================================================
   Alzar Pharmacy: theme layer
   Tokens come from theme.json (var(--wp--preset--*)). Never hard-code brand
   colors here: style variations and Global Styles must keep working.
   Sections: 1 base · 2 header · 3 hero/slides · 4 home sections · 5 footer
             6 block styles · 7 WooCommerce · 8 utilities · 9 motion
   ========================================================================== */

:root {
        --az-navy: var(--wp--preset--color--navy, #222D65);
        --az-navy-deep: var(--wp--preset--color--navy-deep, #161D47);
        --az-green: var(--wp--preset--color--green, #1A994A);
        --az-green-deep: var(--wp--preset--color--green-deep, #137A3A);
        --az-mint: var(--wp--preset--color--mint, #E6F4EB);
        --az-mist: var(--wp--preset--color--mist, #EEF0F8);
        --az-canvas: var(--wp--preset--color--canvas, #F5F6FA);
        --az-surface: var(--wp--preset--color--surface, #FFFFFF);
        --az-line: var(--wp--preset--color--line, #E3E6F0);
        --az-muted: var(--wp--preset--color--muted, #5A6187);
        --az-ink: var(--wp--preset--color--ink, #141A3D);
        --az-sale: var(--wp--preset--color--sale, #D93A3A);
        --az-gold: var(--wp--preset--color--gold, #F2B33D);
        --az-r-s: var(--wp--custom--radius--s, 10px);
        --az-r-m: var(--wp--custom--radius--m, 16px);
        --az-r-l: var(--wp--custom--radius--l, 24px);
        --az-r-xl: var(--wp--custom--radius--xl, 32px);
        --az-shadow: var(--wp--preset--shadow--soft);
        --az-shadow-lift: var(--wp--preset--shadow--lift);
        --az-spring: var(--wp--custom--ease--spring, cubic-bezier(.34,1.56,.64,1));
        --az-out: var(--wp--custom--ease--out, cubic-bezier(.22,1,.36,1));
        --az-num: var(--wp--preset--font-family--numerals);
}

/* 1. Base ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { height: auto; max-width: 100%; }
:where(a, button, input, select, textarea, summary):focus-visible {
        outline: 2px solid var(--az-green);
        outline-offset: 3px;
        border-radius: 6px;
}
::selection { background: var(--az-mint); color: var(--az-navy); }
.alzar-num, .price, .amount, .woocommerce-Price-amount { font-family: var(--az-num); font-feature-settings: "tnum"; }
.alzar-eyebrow {
        display: inline-flex; align-items: center; gap: .5rem;
        margin: 0 0 .5rem; padding: .3rem .85rem;
        border-radius: 999px;
        background: color-mix(in srgb, currentColor 14%, transparent);
        font-size: .875rem; font-weight: 500; letter-spacing: .01em;
}
.alzar-eyebrow--gold { background: var(--az-gold); color: var(--az-navy-deep); }

/* 2. Header ---------------------------------------------------------------- */
.alzar-site-header { position: sticky; top: 0; z-index: 50; transition: transform .34s var(--az-out); }
.admin-bar .alzar-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* Smart header: slides away while scrolling down, back the moment you scroll up. */
.az-head-hidden .alzar-site-header { transform: translateY(-115%); }
.has-modal-open .alzar-site-header,
.alzar-site-header:focus-within { transform: none; }
/* Compact once scrolled: the topbar collapses (grid 1fr → 0fr animates any height). */
.alzar-topbar { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--az-out); }
.alzar-topbar > * { overflow: hidden; min-height: 0; margin: 0; }
.is-scrolled .alzar-topbar { grid-template-rows: 0fr; }
.alzar-topbar p { margin: 0; font-size: .875rem; opacity: .92; }
.alzar-header { transition: box-shadow .25s var(--az-out); border-bottom: 1px solid var(--az-line); }
.is-scrolled .alzar-header { box-shadow: 0 10px 30px -18px rgba(20,26,61,.35); border-bottom-color: transparent; }
.alzar-header__row { gap: clamp(.75rem, 2vw, 1.75rem); }
.alzar-brand { flex-shrink: 0; }
.alzar-brand .wp-block-site-title { margin: 0; white-space: nowrap; }
.alzar-brand .wp-block-site-title a { color: var(--az-navy); }
.alzar-header__actions { flex-shrink: 0; }

/* Search: the biggest affordance in the header, like a quick-commerce app. */
.alzar-search { flex: 1 1 auto; max-width: 560px; margin: 0; }
.alzar-search .wp-block-search__inside-wrapper {
        border: 1.5px solid var(--az-line) !important; border-radius: 999px !important;
        background: var(--az-canvas); padding: 4px !important; transition: border-color .2s, background .2s, box-shadow .2s;
}
.alzar-search .wp-block-search__inside-wrapper:focus-within {
        border-color: var(--az-green) !important; background: var(--az-surface);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-green) 16%, transparent);
}
.alzar-search .wp-block-search__input {
        border: 0 !important; background: transparent; min-height: 44px; padding: 0 1rem; font: inherit; font-size: 1rem; color: var(--az-ink);
}
.alzar-search .wp-block-search__input:focus { outline: none; }
.alzar-search .wp-block-search__button {
        margin: 0; width: 44px; height: 44px; padding: 0; border-radius: 999px;
        background: var(--az-green); color: #fff; display: grid; place-items: center; border: 0;
}
.alzar-search .wp-block-search__button svg { fill: currentColor; width: 22px; height: 22px; }
.alzar-search--page { max-width: 560px; margin-inline: auto; }

.alzar-nav .wp-block-navigation-item__content { padding: .5rem .75rem; border-radius: 999px; transition: background .2s, color .2s; color: var(--az-ink); }
.alzar-nav .wp-block-navigation-item__content:hover { background: var(--az-mist); color: var(--az-navy); }
.alzar-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--az-green); }
.alzar-nav__luck > .wp-block-navigation-item__content { background: var(--az-mint); color: var(--az-green-deep) !important; font-weight: 700; }
/* Menu button: only below the collapse width. (v4 forced display:grid on every screen = the ☰ on laptops.) */
.alzar-nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; border-radius: 999px; place-items: center; background: var(--az-mist); color: var(--az-navy); }
.alzar-nav .wp-block-navigation__container { flex-wrap: nowrap; gap: .15rem; }
.alzar-nav .wp-block-navigation-item__content { white-space: nowrap; }
@media (max-width: 1099px) {
        /* Collapse the menu earlier than core's 600px: four links + search + cart don't fit on tablets. */
        .alzar-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid !important; }
        .alzar-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}
@media (min-width: 1100px) {
        /* Desktop overlay look — deliberately scoped to ≥1100px. In v6.1 these
           three rules were global, so `background: var(--az-surface) !important`
           beat the dimmed mobile overlay and its 1.5rem padding re-appeared as a
           white frame around the drawer. */
        .alzar-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none !important; }
        .alzar-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; background: var(--az-surface) !important; }
        .alzar-nav .is-menu-open .wp-block-navigation__container { gap: .25rem; }
        .alzar-nav .is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; padding: .75rem 1rem; }
}

/* Brand: the logo mark is always shown (theme fallback when no logo is set in Site Identity).
   v6.2: no clipping shape and no ring around it in the header — the previous
   12px radius cropped the mark and read as a "circle" that changed its look.
   Size is a live setting (إعدادات الزر ← الهيدر ← حجم اللوجو). */
.alzar-brand .wp-block-site-logo { margin: 0; line-height: 0; flex-shrink: 0; }
.alzar-brand .wp-block-site-logo img {
        width: var(--az-logo, 44px); height: var(--az-logo, 44px);
        object-fit: contain; border-radius: 0; background: transparent;
        box-shadow: none; outline: none; padding: 0;
}
.alzar-brand .wp-block-site-title { font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.alzar-brand .wp-block-site-title a { text-decoration: none; }
.alzar-header__actions { align-items: center; }

@media (max-width: 781px) {
        .alzar-topbar p { font-size: .75rem; line-height: 1.6; }
        .alzar-header { padding-top: .6rem !important; padding-bottom: .6rem !important; }
        .alzar-header__row { flex-wrap: wrap !important; row-gap: .6rem; }
        .alzar-brand { order: 1; }
        .alzar-header__actions { order: 2; gap: .35rem !important; }
        .alzar-search { order: 3; flex-basis: 100%; max-width: none; }
        .alzar-brand .wp-block-site-title { font-size: 1.0625rem; }
        .alzar-brand .wp-block-site-logo img { width: var(--az-logo-sm, 38px); height: var(--az-logo-sm, 38px); }
}
@media (min-width: 782px) and (max-width: 1099px) {
        .alzar-search { max-width: none; }
}

/* 3. Hero / slides --------------------------------------------------------- */
.alzar-hero { --az-slide-radius: var(--az-r-xl); }
.alzar-slide.wp-block-cover { overflow: hidden; isolation: isolate; align-items: center; }
.alzar-slide.wp-block-cover::after {
        /* Signature: the serpent curve from the logo, drawn quietly behind every slide. */
        content: ""; position: absolute; inset: auto auto -18% -6%; width: min(56vw, 640px); aspect-ratio: 1;
        background: url(../images/serpent-curve.svg) no-repeat center / contain;
        z-index: 0; pointer-events: none; opacity: .9;
        transform: rotate(-8deg);
}
.alzar-slide .wp-block-cover__inner-container { z-index: 1; }
.alzar-slide__cols { margin: 0; }
.alzar-slide__title { margin: .25rem 0 .75rem; line-height: 1.12; text-wrap: balance; }
.alzar-slide__lead { margin: 0 0 1.5rem; opacity: .86; max-width: 34ch; text-wrap: pretty; }
.alzar-slide__img { margin: 0; }
.alzar-slide__img img { width: 100%; max-height: 360px; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(6,10,30,.35)); }
.alzar-slide .alzar-eyebrow { color: #fff; }
@media (max-width: 781px) {
        .alzar-slide.wp-block-cover { min-height: 0 !important; padding: 1.75rem 1.25rem 1.25rem !important; border-radius: var(--az-r-l) !important; }
        .alzar-slide__cols { flex-direction: column-reverse; gap: .25rem !important; }
        .alzar-slide__img img { max-height: 190px; }
        .alzar-slide__title { font-size: 1.75rem !important; }
        .alzar-slide__lead { font-size: 1rem !important; margin-bottom: 1rem; }
}

/* 4. Home sections ---------------------------------------------------------- */
.alzar-home > * + * { margin-block-start: clamp(2rem, 5vw, 3.5rem); }

/* Luck banner */
.alzar-luck-banner { position: relative; overflow: hidden; isolation: isolate; }
.alzar-luck-banner::before {
        content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; aspect-ratio: 1; border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%); z-index: -1;
}
.alzar-luck-banner h2 { margin: .25rem 0 .5rem; text-wrap: balance; }
.alzar-luck-banner__lead { opacity: .9; max-width: 44ch; margin: 0 0 1.25rem; }
.alzar-wheel img { animation: alzar-wheel-idle 14s linear infinite; transform-origin: 50% 46.5%; filter: drop-shadow(0 20px 30px rgba(6,40,20,.35)); }
@keyframes alzar-wheel-idle { to { transform: rotate(360deg); } }
@media (max-width: 781px) {
        .alzar-luck-banner { padding: 1.75rem 1.25rem !important; border-radius: var(--az-r-l) !important; }
        .alzar-luck-banner__media { order: -1; }
        .alzar-wheel img { width: 180px !important; }
}

/* Duo cards (prescription / pharmacist) */
.alzar-duo { margin: 0; }
.alzar-duo__card { border-radius: var(--az-r-l); padding: clamp(1.5rem, 3vw, 2.25rem); }
.alzar-duo__card--mist { background: var(--az-mist); }
.alzar-duo__card--mint { background: var(--az-mint); }
.alzar-duo__card h3 { margin: .75rem 0 .25rem; }
.alzar-duo__card p { margin: 0 0 1.25rem; max-width: 40ch; }
.alzar-duo__icon { margin: 0; }

/* Trust strip */
.alzar-trust { gap: 1rem; }
.alzar-trust__item { background: var(--az-surface); border: 1px solid var(--az-line); border-radius: var(--az-r-m); padding: 1rem 1.25rem; }
.alzar-trust__icon { margin: 0; flex-shrink: 0; background: var(--az-mint); border-radius: 14px; padding: 8px; }
.alzar-trust__title { margin: 0; font-weight: 700; color: var(--az-navy); }
.alzar-trust__item p { margin: 0; }

/* 5. Footer ----------------------------------------------------------------- */
.alzar-footer { position: relative; overflow: hidden; }
.alzar-footer__lead { opacity: .8; max-width: 36ch; }
.alzar-footer__h { color: var(--az-surface) !important; margin-bottom: .5rem; font-size: 1rem !important; opacity: .65; }
.alzar-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.alzar-footer__list a, .alzar-footer__contact a { opacity: .92; }
.alzar-footer__list a:hover { color: var(--az-gold) !important; }
.alzar-footer__sep { border-color: rgba(255,255,255,.12) !important; opacity: 1; }
.alzar-footer__pay { opacity: .7; }
/* v7: slogan line under the brand in the footer — mint badge look. */
.alzar-footer__slogan { margin: .1rem 0 .55rem !important; }
.alzar-footer__slogan .alzar-slogan { display: inline-block; font-weight: 800; color: var(--az-gold); letter-spacing: .04em; }
/* v7: the copyright line — a 20px mark + the text on one tidy row. The link
   colour rules (navy on hover → green) are re-pinned to surface so hovering
   never paints the line green on navy. */
.alzar-copyright { display: flex; align-items: center; gap: .5rem; margin: 0; }
.alzar-copyright a { color: var(--az-surface) !important; }
.alzar-copyright__logo { width: 20px; height: 20px; object-fit: contain; background: #fff; padding: 2px; border-radius: 6px; flex-shrink: 0; }
.alzar-copyright__txt { line-height: 1.4; }
/* White plate only (on the navy panel) — no ring and no clipping radius,
   so the mark keeps its own shape everywhere (v6.2). The mark is capped at
   48px tall so a tall custom upload can never balloon the column (v7). */
.alzar-footer .wp-block-site-logo img { background: #fff; border-radius: 0; padding: 4px; box-shadow: none; width: auto; max-width: 44px; max-height: 48px; object-fit: contain; }
/* The footer used to end in a dead navy strip (a fixed 6.5rem bottom padding that
   existed for the sticky cart bar) plus an 84px <body> padding-bottom under it —
   two empty bands at the very bottom of every page. The room the bar needs now
   lives INSIDE the footer, only when the bar is actually on, so the page ends
   flush with the footer and never shows a blank band. */
.alzar-footer { margin-bottom: 0 !important; }
body.az-has-bar .alzar-footer,
body:has(.az-bar:not([hidden])) .alzar-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

/* v7: slogan — small everywhere it is printed. */
.alzar-slogan { font-weight: 800; }
.alzar-slogan--badge { display: inline-block; padding: .18rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--az-gold, #F2B33D) 16%, transparent); color: inherit; }
.alzar-topbar__slogan { font-weight: 800; color: #fff; }
@media (max-width: 600px) { .alzar-topbar__slogan { display: none; } }

/* 6. Block styles ------------------------------------------------------------ */
.is-style-alzar-card { background: var(--az-surface); border: 1px solid var(--az-line); border-radius: var(--az-r-l); padding: 1.25rem; }
.is-style-alzar-panel { background: var(--az-mist); border-radius: var(--az-r-l); padding: clamp(1.25rem, 3vw, 2rem); }
.is-style-alzar-soft img, .is-style-alzar-soft { border-radius: var(--az-r-l); overflow: hidden; }
.wp-block-heading.is-style-alzar-eyebrow { font-size: .875rem !important; letter-spacing: .04em; color: var(--az-green); text-transform: uppercase; }
.is-style-alzar-check { list-style: none; padding: 0; display: grid; gap: .5rem; }
.is-style-alzar-check li { position: relative; padding-inline-start: 1.9rem; }
.is-style-alzar-check li::before {
        content: ""; position: absolute; inset-inline-start: 0; top: .3em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
        background: var(--az-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A994A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.wp-block-button__link { transition: background-color .2s, color .2s, transform .2s var(--az-spring), box-shadow .2s; }
.wp-block-button__link:active { transform: scale(.97); }
.is-style-alzar-ghost .wp-block-button__link { background: transparent !important; color: var(--az-navy) !important; box-shadow: inset 0 0 0 1.5px currentColor; }
.is-style-alzar-ghost .wp-block-button__link:hover { background: var(--az-surface) !important; }
.is-style-alzar-light .wp-block-button__link { background: #fff !important; color: var(--az-navy-deep) !important; }
.is-style-alzar-light .wp-block-button__link:hover { background: var(--az-gold) !important; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); }

/* 7. WooCommerce ------------------------------------------------------------- */
.alzar-shop__head { align-items: end; }
.alzar-shop__head h1 { margin: 0; }
.woocommerce-breadcrumb, .wc-block-breadcrumbs { color: var(--az-muted); }
.alzar-pdp__media .woocommerce-product-gallery { background: var(--az-surface); border-radius: var(--az-r-xl); padding: 1rem; border: 1px solid var(--az-line); }
.alzar-pdp__media .woocommerce-product-gallery__image img { border-radius: var(--az-r-l); }
.alzar-pdp__cat a { background: var(--az-mint); color: var(--az-green-deep); padding: .2rem .75rem; border-radius: 999px; font-size: .875rem; }
.alzar-pdp__info .wc-block-components-product-price, .alzar-pdp__info .price { color: var(--az-navy); font-weight: 800; }
.alzar-pdp__info .price del { color: var(--az-muted); font-weight: 400; font-size: .7em; }
.alzar-pdp__info form.cart { display: flex; gap: .75rem; align-items: stretch; flex-wrap: wrap; }
.alzar-pdp__info .quantity input.qty { height: 52px; width: 84px; border-radius: 999px; border: 1.5px solid var(--az-line); text-align: center; font: 800 1.125rem var(--az-num); }
.alzar-pdp__info .single_add_to_cart_button { height: 52px; padding: 0 2rem !important; border-radius: 999px !important; background: var(--az-green) !important; color: #fff !important; font-weight: 700 !important; flex: 1; }
.alzar-pdp__perks { background: var(--az-surface); border: 1px solid var(--az-line); border-radius: var(--az-r-l); padding: 1.25rem; }
.wp-block-woocommerce-product-details { background: var(--az-surface); border-radius: var(--az-r-l); padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--az-line); }
/* v4 had a box inside a box: the block wraps .woocommerce-tabs, only the outer one is a card now. */
.wp-block-woocommerce-product-details .woocommerce-tabs { background: none; border: 0; padding: 0; margin: 0; }
.woocommerce-tabs .panel > h2:first-child, .woocommerce-Reviews-title { font-size: 1.375rem; color: var(--az-navy); margin: .5rem 0 1rem; }
.wp-block-woocommerce-product-details ul.tabs { padding: 0 !important; display: flex; gap: .5rem; }
.wp-block-woocommerce-product-details ul.tabs li { border: 0 !important; background: var(--az-mist) !important; border-radius: 999px !important; margin: 0 !important; }
.wp-block-woocommerce-product-details ul.tabs li.active { background: var(--az-navy) !important; }
.wp-block-woocommerce-product-details ul.tabs li.active a { color: #fff !important; }
.wp-block-woocommerce-product-details ul.tabs::before, .wp-block-woocommerce-product-details ul.tabs li::before, .wp-block-woocommerce-product-details ul.tabs li::after { display: none !important; }
.onsale, .alzar-sale { background: var(--az-sale) !important; color: #fff; border-radius: 999px !important; font: 800 .8125rem/1 var(--az-num) !important; padding: .4rem .6rem !important; min-height: 0 !important; min-width: 0 !important; }

/* Shop head: title + sort on one line, sort as a pill (v4: unstyled browser select). */
.alzar-shop__head { gap: .75rem 1rem; }
.alzar-shop__head .wp-block-query-title { margin: 0; color: var(--az-navy); }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select.orderby, .alzar-select {
        appearance: none; -webkit-appearance: none; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--az-ink);
        min-height: 44px; padding-block: 0; padding-inline: 1rem 2.5rem; border-radius: 999px; border: 1.5px solid var(--az-line); background-color: var(--az-surface);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222D65' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-size: 16px; background-position: left .9rem center; cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
[dir="ltr"] .woocommerce-ordering select.orderby { background-position: right .9rem center; }
.woocommerce-ordering select.orderby:hover { border-color: color-mix(in srgb, var(--az-green) 45%, var(--az-line)); }
.woocommerce-ordering select.orderby:focus { outline: none; border-color: var(--az-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-green) 16%, transparent); }
.alzar-shop .wp-block-term-description { color: var(--az-muted); max-width: 70ch; }
@media (max-width: 599px) { .alzar-shop__head { align-items: center; } .alzar-shop__head .wp-block-query-title { font-size: 1.625rem !important; } }

/* Pagination under the shop grid.
   ⚠ The <ul> itself carries the class "page-numbers" (paginate_links), so capsule
   styles must target a/span only — otherwise the ul turns into a 44px-tall grid
   and the numbers stack vertically. */
.alzar-pager { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.alzar-pager ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.alzar-pager li { display: flex; }
.alzar-pager a.page-numbers, .alzar-pager span.page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .9rem; box-sizing: border-box; border-radius: 999px; background: var(--az-surface); border: 1px solid var(--az-line); color: var(--az-ink); text-decoration: none; font: 600 .9375rem/1 var(--az-num); transition: background .2s, border-color .2s; }
.alzar-pager a.page-numbers:hover { border-color: var(--az-green); background: var(--az-mint); }
.alzar-pager span.page-numbers.current { background: var(--az-navy); border-color: var(--az-navy); color: #fff; }

/* Product page: price, gallery, related */
.alzar-pdp__info .wp-block-post-title { color: var(--az-navy); line-height: 1.25; text-wrap: balance; margin: 0; }
.alzar-pdp__info .wc-block-components-product-price { font-size: clamp(1.5rem, 3vw, 1.875rem) !important; }
.alzar-pdp__info .stock { color: var(--az-green-deep); font-weight: 600; margin: 0 0 .25rem; }
.alzar-pdp__info .stock.out-of-stock { color: var(--az-sale); }
.alzar-pdp__info .product_meta, .alzar-pdp__info .wp-block-woocommerce-product-sku { color: var(--az-muted); font-size: .875rem; }
.alzar-pdp__media .woocommerce-product-gallery__trigger { background: var(--az-surface) !important; border-radius: 999px !important; box-shadow: var(--az-shadow); }
@media (max-width: 781px) {
        .alzar-pdp__main { gap: 1.25rem !important; }
        .alzar-pdp__info form.cart { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 20; background: var(--az-surface); padding: .5rem; border-radius: 999px; box-shadow: 0 16px 40px -14px rgba(20,26,61,.45); border: 1px solid var(--az-line); flex-wrap: nowrap; }
        .alzar-pdp__info .quantity input.qty { height: 48px; width: 64px; }
        .alzar-pdp__info .single_add_to_cart_button { height: 48px; }
}

/* Reviews: tidy form (v4: raw browser inputs) */
#reviews .commentlist { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1rem; }
#reviews .commentlist li .comment_container { display: flex; gap: .75rem; padding: 1rem; border-radius: var(--az-r-m); background: var(--az-canvas); }
#reviews .commentlist img.avatar { width: 44px; height: 44px; border-radius: 50%; }
#review_form_wrapper { margin-top: 1rem; }
#review_form .comment-reply-title, .alzar-review__title { display: block; font-size: 1.125rem; font-weight: 700; color: var(--az-navy); margin: 0 0 .25rem; }
#review_form .comment-notes { color: var(--az-muted); font-size: .875rem; margin: 0 0 1rem; }
#review_form .comment-form { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { #review_form .comment-form { grid-template-columns: 1fr 1fr; } #review_form .comment-form > :not(.comment-form-author):not(.comment-form-email) { grid-column: 1 / -1; } }
#review_form .comment-form p { margin: 0; }
#review_form label { display: block; font-weight: 600; font-size: .9375rem; color: var(--az-ink); margin-bottom: .4rem; }
#review_form input[type="text"], #review_form input[type="email"], #review_form textarea {
        width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--az-ink); background: var(--az-canvas);
        border: 1.5px solid var(--az-line); border-radius: 14px; padding: .75rem 1rem; min-height: 48px; transition: border-color .2s, background .2s, box-shadow .2s;
}
#review_form textarea { min-height: 120px; resize: vertical; }
#review_form input:focus, #review_form textarea:focus { outline: none; background: var(--az-surface); border-color: var(--az-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-green) 16%, transparent); }
#review_form .comment-form-cookies-consent { display: flex; gap: .5rem; align-items: center; color: var(--az-muted); font-size: .875rem; }
#review_form .comment-form-cookies-consent label { margin: 0; font-weight: 400; color: inherit; }
#review_form .comment-form-cookies-consent input { width: 18px; height: 18px; accent-color: var(--az-green); }
#review_form .form-submit input[type="submit"], #review_form .form-submit .submit {
        min-height: 48px; padding: 0 2rem; border: 0; border-radius: 999px; background: var(--az-green); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background .2s;
}
#review_form .form-submit .submit:hover { background: var(--az-green-deep); }
.comment-form-rating p.stars { margin: 0; }
.comment-form-rating p.stars a { font-size: 0; width: 34px; height: 34px; display: inline-block; position: relative; text-decoration: none; }
.comment-form-rating p.stars a::before { content: "★"; position: absolute; inset: 0; font-size: 30px; line-height: 34px; text-align: center; color: var(--az-line); transition: color .15s, transform .15s var(--az-spring); }
.comment-form-rating p.stars:hover a::before, .comment-form-rating p.stars.selected a::before { color: var(--az-gold); }
.comment-form-rating p.stars a:hover ~ a::before, .comment-form-rating p.stars.selected a.active ~ a::before { color: var(--az-line); }
.comment-form-rating p.stars a:hover::before { transform: scale(1.12); }
.comment-form-rating select#rating { display: none; }
.star-rating { color: var(--az-gold); }

/* Cart / checkout pages: title on the same width as the content (v4 title sat on a narrower column). */
.alzar-wcpage__title { color: var(--az-navy); margin-block-end: 0; }
.wc-block-cart__empty-cart__title, .wp-block-woocommerce-empty-cart-block > .wp-block-heading:first-of-type { color: var(--az-navy); font-size: clamp(1.375rem, 3vw, 1.75rem) !important; margin-top: 1rem; }
.alzar-empty-cart__lead { text-align: center; color: var(--az-muted); margin: .25rem auto 1rem; max-width: 40ch; }
.alzar-empty-cart__cta { justify-content: center; margin-bottom: 2rem; }
.wp-block-woocommerce-empty-cart-block .wp-block-separator { opacity: .4; }
.wp-block-woocommerce-empty-cart-block .alzar-products { text-align: start; margin-top: 1rem; }

/* Cart & checkout blocks */
.wc-block-cart, .wc-block-checkout { --az-card: var(--az-surface); }
.wc-block-cart .wc-block-cart__main, .wc-block-checkout__main, .wc-block-cart__sidebar .wc-block-components-sidebar, .wc-block-checkout__sidebar {
        background: var(--az-surface); border-radius: var(--az-r-l); padding: clamp(1rem, 2.5vw, 1.75rem) !important; border: 1px solid var(--az-line);
}
.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
        background: var(--az-green) !important; color: #fff !important; border-radius: 999px !important; min-height: 54px; font-weight: 700 !important; border: 0 !important;
}
.wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control input, .wc-blocks-components-select select {
        border-radius: 14px !important; border-color: var(--az-line) !important;
}
.wc-block-components-text-input.is-active input:focus { border-color: var(--az-green) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--az-green) 18%, transparent) !important; }
.wc-block-components-quantity-selector { border-radius: 999px !important; }
.wc-block-components-quantity-selector::after { border-radius: 999px !important; }
.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner { border-radius: var(--az-r-m) !important; }

/* 7b. My Account (session 7, task #3) --------------------------------------
   /my-account/ is the classic [woocommerce_my_account] shortcode, so its markup
   is WooCommerce's (woocommerce-MyAccount-*, woocommerce-form-login...). Mobile
   first: the account menu is a swipeable row of pills, the orders table turns
   into cards; on desktop the menu becomes a side column. */
.alzar-account .woocommerce { display: block; }
.alzar-account .woocommerce-notices-wrapper:empty { display: none; }
.alzar-account .woocommerce-error, .alzar-account .woocommerce-message, .alzar-account .woocommerce-info {
        border: 1px solid var(--az-line); border-top: 0; border-inline-start: 4px solid var(--az-green); background: var(--az-surface); color: var(--az-ink); border-radius: var(--az-r-m); padding: 1rem 1.25rem; margin: 0 0 1.25rem;
}
.alzar-account .woocommerce-error { border-inline-start-color: var(--az-sale); }
.alzar-account .woocommerce-error::before, .alzar-account .woocommerce-message::before, .alzar-account .woocommerce-info::before { display: none; }

/* Login / register: two cards side by side on desktop. */
.alzar-account .u-columns { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .alzar-account .u-columns { grid-template-columns: 1fr 1fr; } }
.alzar-account .u-column1, .alzar-account .u-column2 { width: auto !important; float: none !important; max-width: none; }
.alzar-account .u-columns > div > h2, .alzar-account .woocommerce-MyAccount-content h2, .alzar-account .woocommerce-MyAccount-content h3 { font-size: 1.25rem; color: var(--az-navy); margin: 0 0 1rem; }
.alzar-account form.login, .alzar-account form.register, .alzar-account form.woocommerce-ResetPassword, .alzar-account form.woocommerce-EditAccountForm, .alzar-account form.edit-account, .alzar-account .woocommerce-address-fields {
        background: var(--az-surface); border: 1px solid var(--az-line); border-radius: var(--az-r-l); padding: clamp(1.25rem, 3vw, 2rem); margin: 0;
}
.alzar-account form.login { position: relative; }
.alzar-account .woocommerce-form-row, .alzar-account .form-row { margin: 0 0 1rem; padding: 0; width: 100%; float: none; }
.alzar-account .form-row-first, .alzar-account .form-row-last { width: 100%; }
@media (min-width: 600px) { .alzar-account .woocommerce-address-fields__field-wrapper, .alzar-account fieldset { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; } .alzar-account .woocommerce-address-fields__field-wrapper > .form-row:not(.form-row-first):not(.form-row-last), .alzar-account fieldset > .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; } .alzar-account fieldset legend { grid-column: 1 / -1; } }
.alzar-account fieldset { border: 0; padding: 0; margin: 1.5rem 0 0; }
.alzar-account fieldset legend { font-weight: 700; color: var(--az-navy); margin-bottom: .75rem; padding: 0; }
.alzar-account label { display: block; font-weight: 600; font-size: .9375rem; color: var(--az-ink); margin-bottom: .4rem; }
.alzar-account label .required { color: var(--az-sale); text-decoration: none; }
.alzar-account .woocommerce-Input, .alzar-account input.input-text, .alzar-account select, .alzar-account textarea, .alzar-account .select2-container .select2-selection--single {
        width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--az-ink); background: var(--az-canvas);
        border: 1.5px solid var(--az-line); border-radius: 14px; padding: .75rem 1rem; min-height: 48px; height: auto; transition: border-color .2s, background .2s, box-shadow .2s;
}
.alzar-account .select2-container .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: inherit; }
.alzar-account .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; inset-inline-end: .75rem; }
.alzar-account input:focus, .alzar-account select:focus, .alzar-account textarea:focus { outline: none; background: var(--az-surface); border-color: var(--az-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-green) 16%, transparent); }
.alzar-account .password-input { display: block; position: relative; }
.alzar-account .show-password-input { inset-inline-end: 1rem; top: 50%; transform: translateY(-50%); color: var(--az-muted); }
.alzar-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-weight: 500; color: var(--az-muted); }
.alzar-account .woocommerce-form__input-checkbox { width: 18px; height: 18px; accent-color: var(--az-green); }
.alzar-account .woocommerce-privacy-policy-text { color: var(--az-muted); font-size: .875rem; }
.alzar-account .woocommerce-LostPassword { margin: .75rem 0 0; font-size: .9375rem; }
.alzar-account .woocommerce-LostPassword a { color: var(--az-green-deep); font-weight: 600; }
.alzar-account .button, .alzar-account button[type="submit"], .alzar-account .woocommerce-Button {
        display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.75rem; border: 0; border-radius: 999px;
        background: var(--az-green); color: #fff; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none; transition: background .2s, box-shadow .25s var(--az-out);
        box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--az-green) 75%, transparent);
}
.alzar-account .button:hover, .alzar-account button[type="submit"]:hover { background: var(--az-green-deep); color: #fff; }
.alzar-account form.login .button, .alzar-account form.register .button, .alzar-account form.woocommerce-ResetPassword .button { width: 100%; }
.alzar-account .button.view, .alzar-account .edit, .alzar-account .woocommerce-button--pay, .alzar-account .woocommerce-button--cancel { background: var(--az-mist); color: var(--az-navy); min-height: 40px; padding: 0 1.1rem; font-size: .9375rem; box-shadow: none; }
.alzar-account .button.view:hover, .alzar-account .edit:hover { background: var(--az-navy); color: #fff; }
.alzar-account .woocommerce-button--pay { background: var(--az-green); color: #fff; }
.alzar-account .woocommerce-button--cancel { background: color-mix(in srgb, var(--az-sale) 12%, var(--az-surface)); color: var(--az-sale); }

/* Logged in: menu + content. */
.alzar-account .woocommerce:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .alzar-account .woocommerce { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
/* min-width:0 = the pill row scrolls instead of stretching the page (grid items default to min-width:auto). */
.alzar-account .woocommerce-MyAccount-navigation { min-width: 0; max-width: 100%; }
/* v7.1 fix: WooCommerce's RTL sheet flips the account block, which reversed the
   auto placement (menu landed in the wide column on the left, content squeezed
   into 260px on the right). Pinning the columns explicitly is immune to that. */
.alzar-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.alzar-account .woocommerce-MyAccount-content { grid-column: 1; grid-row: 2; }
@media (min-width: 900px) {
        .alzar-account .woocommerce:has(.woocommerce-MyAccount-navigation),
        .woocommerce-account .alzar-account .woocommerce { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 1.5rem; }
        .alzar-account .woocommerce-MyAccount-navigation { position: sticky; top: 110px; grid-column: 1; grid-row: 1; }
        .alzar-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; }
}
.alzar-account .woocommerce-MyAccount-navigation, .alzar-account .woocommerce-MyAccount-content { width: auto !important; float: none !important; }
.alzar-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: .35rem; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; background: var(--az-surface); border: 1px solid var(--az-line); border-radius: 999px; -webkit-overflow-scrolling: touch; }
.alzar-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .alzar-account .woocommerce-MyAccount-navigation ul { flex-direction: column; overflow: visible; border-radius: var(--az-r-l); padding: .5rem; } }
.alzar-account .woocommerce-MyAccount-navigation li { margin: 0; flex-shrink: 0; }
.alzar-account .woocommerce-MyAccount-navigation a { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-radius: 999px; color: var(--az-ink); font-weight: 600; white-space: nowrap; text-decoration: none; transition: background .2s, color .2s; }
.alzar-account .woocommerce-MyAccount-navigation a:hover { background: var(--az-mist); color: var(--az-navy); }
.alzar-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--az-navy); color: #fff; }
.alzar-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--az-sale); }
@media (min-width: 900px) { .alzar-account .woocommerce-MyAccount-navigation a { border-radius: 14px; } .alzar-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: .5rem; border-top: 1px solid var(--az-line); padding-top: .5rem; } }
.alzar-account .woocommerce-MyAccount-content { background: var(--az-surface); border: 1px solid var(--az-line); border-radius: var(--az-r-l); padding: clamp(1.25rem, 3vw, 2rem); min-width: 0; }
.alzar-account .woocommerce-MyAccount-content > p:first-child { color: var(--az-muted); margin-top: 0; }
.alzar-account .woocommerce-MyAccount-content > p:first-child strong { color: var(--az-navy); }
.alzar-account .woocommerce-MyAccount-content form.edit-account, .alzar-account .woocommerce-MyAccount-content .woocommerce-address-fields { border: 0; padding: 0; background: none; }

/* Dashboard welcome line: "مرحبا hoda (لست hoda؟ تسجيل الخروج)" — turn the raw
   Woo paragraph into a proper greeting row instead of a run-on link line. */
.woocommerce-account .alzar-account .woocommerce-MyAccount-content > p:first-child:has(a) {
        display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem;
        padding: .9rem 1.1rem; margin: 0 0 1.25rem;
        background: color-mix(in srgb, var(--az-mint) 55%, var(--az-surface));
        border: 1px solid color-mix(in srgb, var(--az-green) 25%, var(--az-line));
        border-radius: var(--az-r-m); color: var(--az-muted);
}
.woocommerce-account .alzar-account .woocommerce-MyAccount-content > p:first-child:has(a) strong { color: var(--az-navy); margin-inline-end: .15rem; }
.woocommerce-account .alzar-account .woocommerce-MyAccount-content > p:first-child:has(a) a {
        display: inline-flex; align-items: center; gap: .3rem;
        padding: .3rem .8rem; border-radius: 999px; text-decoration: none;
        background: var(--az-surface); border: 1px solid var(--az-line);
        color: var(--az-sale); font-weight: 700; font-size: .875rem;
}
.woocommerce-account .alzar-account .woocommerce-MyAccount-content > p:first-child:has(a) a:hover { background: color-mix(in srgb, var(--az-sale) 10%, var(--az-surface)); border-color: var(--az-sale); }

/* Mobile: breathing room above the fixed cart bar so the last button in any
   account tab (upload, save address, save details) is never covered by it. */
@media (max-width: 781px) {
        body.az-has-bar .alzar-account .woocommerce-MyAccount-content { padding-bottom: calc(clamp(1.25rem, 3vw, 2rem) + 92px + env(safe-area-inset-bottom, 0px)); }
}

/* Dashboard shortcuts & addresses */
.alzar-account .woocommerce-Addresses { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .alzar-account .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
.alzar-account .woocommerce-Address { width: auto !important; float: none !important; background: var(--az-canvas); border: 1px solid var(--az-line); border-radius: var(--az-r-m); padding: 1.25rem; }
.alzar-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.alzar-account .woocommerce-Address-title h2, .alzar-account .woocommerce-Address-title h3 { margin: 0; font-size: 1.0625rem; }
.alzar-account .woocommerce-Address address { font-style: normal; color: var(--az-muted); line-height: 1.7; }
.alzar-account .woocommerce-Address address:empty::before, .alzar-account .woocommerce-Address address.is-empty { color: var(--az-muted); }

/* Orders: a table on desktop, cards on mobile. */
.alzar-account table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; border: 0; margin: 0; font-size: .9375rem; }
.alzar-account table.shop_table th, .alzar-account table.shop_table td { border: 0; border-bottom: 1px solid var(--az-line); padding: .9rem .75rem; text-align: start; vertical-align: middle; }
.alzar-account table.shop_table thead th { color: var(--az-muted); font-weight: 600; font-size: .8125rem; letter-spacing: .02em; background: var(--az-canvas); }
.alzar-account table.shop_table thead th:first-child { border-start-start-radius: 12px; }
.alzar-account table.shop_table thead th:last-child { border-start-end-radius: 12px; }
.alzar-account table.shop_table tbody tr:last-child td { border-bottom: 0; }
.alzar-account table.shop_table .woocommerce-orders-table__cell-order-number a { font: 700 1rem var(--az-num); color: var(--az-navy); }
.alzar-account table.shop_table .woocommerce-orders-table__cell-order-status { font-weight: 600; color: var(--az-green-deep); }
.alzar-account table.shop_table .woocommerce-orders-table__cell-order-actions { text-align: end; }
.alzar-account table.shop_table .woocommerce-orders-table__cell-order-actions .button + .button { margin-inline-start: .35rem; }
@media (max-width: 767px) {
        .alzar-account table.shop_table, .alzar-account table.shop_table tbody, .alzar-account table.shop_table tr, .alzar-account table.shop_table td { display: block; }
        .alzar-account table.shop_table thead { display: none; }
        .alzar-account table.shop_table tr { background: var(--az-canvas); border: 1px solid var(--az-line); border-radius: var(--az-r-m); padding: .5rem .25rem; margin-bottom: .75rem; }
        .alzar-account table.shop_table td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem .9rem; border-bottom: 1px dashed var(--az-line); }
        .alzar-account table.shop_table td::before { content: attr(data-title); color: var(--az-muted); font-size: .8125rem; font-weight: 600; }
        .alzar-account table.shop_table td:last-child { border-bottom: 0; }
        .alzar-account table.shop_table .woocommerce-orders-table__cell-order-actions { justify-content: flex-end; }
        .alzar-account table.shop_table .woocommerce-orders-table__cell-order-actions::before { display: none; }
}
.alzar-account .woocommerce-pagination, .alzar-account .woocommerce-Pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 1.25rem; }
.alzar-account .woocommerce-Pagination .button { background: var(--az-mist); color: var(--az-navy); box-shadow: none; }
.alzar-account .woocommerce-info .button { margin-inline-start: .75rem; min-height: 40px; padding: 0 1.1rem; font-size: .9375rem; }

/* Order details (view-order) */
.alzar-account .woocommerce-order-details, .alzar-account .woocommerce-customer-details { margin-top: 1.5rem; }
.alzar-account .woocommerce-order-details__title, .alzar-account .woocommerce-column__title { font-size: 1.125rem; color: var(--az-navy); margin: 0 0 .75rem; }
.alzar-account table.shop_table tfoot th, .alzar-account table.shop_table tfoot td { background: var(--az-canvas); font-weight: 600; }
.alzar-account table.shop_table tfoot tr:last-child th, .alzar-account table.shop_table tfoot tr:last-child td { color: var(--az-navy); font-weight: 800; }
.alzar-account .woocommerce-column--billing-address address, .alzar-account .woocommerce-column--shipping-address address { font-style: normal; background: var(--az-canvas); border-radius: var(--az-r-m); padding: 1rem 1.25rem; color: var(--az-muted); line-height: 1.7; }

/* 404 */
.alzar-404__code { font: 800 clamp(5rem, 18vw, 9rem)/1 var(--az-num); color: var(--az-mint); -webkit-text-stroke: 2px var(--az-green); margin: 0; }

/* 8. Utilities --------------------------------------------------------------- */
.alzar-hide-mobile { }
@media (max-width: 781px) { .alzar-hide-mobile { display: none !important; } }
.screen-reader-text:focus { background: var(--az-surface); color: var(--az-navy); padding: .75rem 1rem; border-radius: 10px; z-index: 100000; }

/* 9. Motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Top bar support line (session 5, #13): number + WhatsApp always visible. */
.alzar-topbar__link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.alzar-topbar__link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.alzar-pdp__help { align-items: center; gap: .75rem; margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--line, #E3E6F0); }
.alzar-pdp__help p { margin: 0; }

/* 10. Brand touch (session 7, task #9) -----------------------------------------
   A light layer of the identity colours on top of the flat UI. Tokens only, so
   the night/mint variations and Global Styles keep working. Everything here is
   decorative: removing this whole section changes nothing functionally. */

/* Page: a quiet mist-to-canvas wash behind the top of every page. */
body { background-image: linear-gradient(180deg, var(--az-mist) 0, var(--az-canvas) 420px); background-repeat: no-repeat; }
.editor-styles-wrapper { background-image: none; }

/* Top bar: deep navy → navy with a hint of green at the end (symmetric, RTL-safe). */
.alzar-topbar { background-image: linear-gradient(90deg, var(--az-navy-deep), var(--az-navy) 50%, color-mix(in srgb, var(--az-navy) 78%, var(--az-green))); }

/* Header: a 2px identity ribbon under the white bar (green → navy → green). */
.alzar-header { position: relative; }
.alzar-header::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
        background: linear-gradient(90deg, transparent, var(--az-green) 18%, var(--az-navy) 50%, var(--az-green) 82%, transparent);
        opacity: .9;
}
.is-scrolled .alzar-header::after { opacity: 1; }

/* Primary buttons: a soft green glow and a 1px lift on hover (not for ghost/light styles). */
:where(.wp-block-button:not(.is-style-alzar-ghost):not(.is-style-alzar-light):not(.is-style-outline)) .wp-block-button__link,
:where(.alzar-search) .wp-block-search__button {
        box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--az-green) 75%, transparent);
        transition: background .2s, box-shadow .25s var(--az-out), transform .25s var(--az-out);
}
:where(.wp-block-button:not(.is-style-alzar-ghost):not(.is-style-alzar-light):not(.is-style-outline)) .wp-block-button__link:hover {
        box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--az-green) 85%, transparent);
        transform: translateY(-1px);
}

/* Cards on the home page: a whisper of green on the border + mint→green icon tiles. */
.alzar-trust__item { border-color: color-mix(in srgb, var(--az-green) 12%, var(--az-line)); transition: border-color .2s, box-shadow .25s var(--az-out); }
.alzar-trust__item:hover { border-color: color-mix(in srgb, var(--az-green) 35%, var(--az-line)); box-shadow: var(--az-shadow); }
.alzar-trust__icon { background: linear-gradient(135deg, var(--az-mint), color-mix(in srgb, var(--az-green) 22%, var(--az-mint))); }
.alzar-duo__card { border: 1px solid transparent; }
.alzar-duo__card--mist { border-color: color-mix(in srgb, var(--az-navy) 10%, transparent); }
.alzar-duo__card--mint { border-color: color-mix(in srgb, var(--az-green) 16%, transparent); }
.is-style-alzar-card { transition: border-color .2s; }
.is-style-alzar-card:hover { border-color: color-mix(in srgb, var(--az-green) 30%, var(--az-line)); }

/* Footer: a green glow in one corner and the serpent curve from the logo as a watermark. */
.alzar-footer { isolation: isolate; }
.alzar-footer > * { position: relative; z-index: 1; }
.alzar-footer::before {
        content: ""; position: absolute; z-index: 0; pointer-events: none;
        inset: -35% -12% auto auto; width: min(70vw, 620px); aspect-ratio: 1; border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--az-green) 30%, transparent), transparent 66%);
}
.alzar-footer::after {
        content: ""; position: absolute; z-index: 0; pointer-events: none;
        inset: auto auto -28% -8%; width: min(60vw, 560px); aspect-ratio: 1;
        background: url(../images/serpent-curve.svg) no-repeat center / contain;
        opacity: .55; transform: rotate(12deg);
}
.alzar-footer .wp-block-site-logo img { box-shadow: 0 0 0 3px color-mix(in srgb, var(--az-green) 35%, transparent); }

/* Headings on tinted/dark panels keep their own colour (the glow must never change text). */
.alzar-footer__h { position: relative; }

/* 12. Accessibility, reveal, print (v6 merge from the v10 review) --------------
   Focus: one clear ring everywhere. Reveal: only elements below the fold at
   load (theme.js), so first paint / LCP never waits for an animation. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 3px solid var(--az-green, #1A994A);
        outline-offset: 3px;
        border-radius: 6px;
}
.alzar-footer :where(a, button):focus-visible { outline-color: var(--az-gold, #F2B33D); }
::selection { background: color-mix(in srgb, var(--az-green) 24%, transparent); }

/* Reveal on scroll: JS adds .alzar-reveal only below the fold. */
@media (prefers-reduced-motion: no-preference) {
        html { scroll-behavior: smooth; }
        .alzar-reveal {
                opacity: 0; transform: translate3d(0, 18px, 0);
                transition: opacity .6s cubic-bezier(.2, .7, .2, 1) var(--alzar-d, 0s), transform .6s cubic-bezier(.2, .7, .2, 1) var(--alzar-d, 0s);
        }
        .alzar-reveal.is-in { opacity: 1; transform: none; }
}

/* Typography: balanced headings, tabular figures for prices and stats. */
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
:where(.price, .amount, .woocommerce-Price-amount, table, .alzar-stats) { font-variant-numeric: tabular-nums; }

/* Tables (order pages, account): readable on tinted panels. */
:where(input, select, textarea):focus-visible { background: var(--az-surface, #fff); }
table { width: 100%; border-collapse: collapse; }
table th, table td { padding: .75rem 1rem; border-bottom: 1px solid var(--az-line, #E3E6F0); text-align: start; }
table th { font-size: .8125rem; letter-spacing: .04em; color: var(--az-muted); }

/* Print: a clean white sheet — the shop UI is not part of the document. */
@media print {
        .alzar-header, .alzar-topbar, .alzar-footer, .az-drawer, .az-bar, nav, .wp-block-site-logo, button, form, .skip-link { display: none !important; }
        html, body { background: #fff !important; color: #000 !important; }
        a { color: #000 !important; text-decoration: underline; }
        .alzar-reveal { opacity: 1 !important; transform: none !important; }
}

/* Reduced motion: everything settles immediately. */
@media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
                animation-duration: .001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .001ms !important;
                scroll-behavior: auto !important;
        }
        .alzar-reveal { opacity: 1 !important; transform: none !important; }
}

/* 13. Mobile menu drawer (requests #7 → v6.1 → v6.2).

   WHAT WAS ACTUALLY BROKEN (v6.2 root cause of "اللينكات مش عارضة"):
   core's responsive menu NEVER adds an `.is-mobile-open` class — the open state
   is `.is-menu-open` on `.wp-block-navigation__responsive-container`. The v6.1
   rule
        .wp-block-navigation__container:where(:not(.is-mobile-open)) { display:none }
   therefore matched at ALL times, including while the drawer was open, so the
   <ul> stayed display:none and the drawer opened empty. The list is now keyed on
   the container's real state, which cannot hide an open menu.

   Also fixed here:
   · the drawer styling used to stop at 899.98px while the hamburger already
     appeared at ≤1099px → on a 900–1099px window the menu opened as an
     unstyled core dialog with no brand and no links. One breakpoint now.
   · the open container is a real flex column: close button → brand →
     scrollable links → pinned service/delivery card (100dvh, safe-area aware).
   · core's `overflow:auto` + `animation` on the container are neutralised so
     the inner list is the only scrolling surface (no double scrollbars).
   · body scroll is locked while it is open, Escape still closes it.
   · every injected chrome row is display:none until the drawer is genuinely
     open, so nothing can leak into the desktop header again. */

.alzar-nav .alzar-mmenu__brand,
.alzar-nav .alzar-mmenu__foot { display: none; }

@media (max-width: 1099px) {
        /* 13a. Hamburger + hidden inline list ------------------------------- */
        .alzar-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 44px;
                height: 44px;
                border-radius: 999px;
                background: var(--az-mist, #EEF0F8);
                color: var(--az-navy, #222D65);
        }
        /* The inline list only exists while the overlay is closed. */
        .alzar-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { display: none; }

        /* 13b. Open state: dim the page, drawer fills the screen ------------ */
        .alzar-nav .wp-block-navigation__responsive-container.is-menu-open {
                position: fixed !important;
                inset: 0 !important;
                display: flex !important;
                flex-direction: column;
                width: 100% !important;
                max-width: 100%;
                height: 100%;
                height: 100dvh;
                margin: 0;
                padding: 0 !important;
                background: rgba(16, 20, 48, .58) !important;
                overflow: hidden !important;
                animation: none !important;
                z-index: 100000;
        }
        .has-modal-open { overflow: hidden; }

        .alzar-nav .wp-block-navigation__responsive-close {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: 480px;
                height: 100%;
                /* v1.9.8 (owner request — supersedes v1.9.7): the drawer must GLUE
                   to the physical RIGHT edge of the screen (an RTL drawer slides
                   in from the reading side). WP core's `margin: 0 auto` was
                   overriding the theme longhand and left the drawer floating in
                   the middle with space on BOTH sides. Shorthand first (kills the
                   auto on every side), then the logical longhand: RTL inline-end
                   = LEFT, so auto there pushes the panel hard against the RIGHT
                   edge. */
                margin: 0 !important;
                margin-inline-end: auto !important;
                background: var(--az-surface, #fff);
                box-shadow: -18px 0 60px -24px rgba(20, 26, 61, .5);
                overflow: hidden;
        }

        /* 13c. Close button (v7.1): floats on the brand row — X pins to the
           drawer's physical LEFT corner, the brand (logo + slogan) reads from
           the right: two sides of ONE header row, exactly as requested.
           NOTE: never declare inset-inline-end here — in RTL it maps to
           physical LEFT and (declared after `left`) it overrode it, dropping
           the button to its flex static position on the right. */
        .alzar-nav .wp-block-navigation__responsive-close { position: relative; }
        .alzar-nav .wp-block-navigation__responsive-container-close {
                position: absolute !important;
                top: .55rem !important;
                left: 1rem !important;
                right: auto !important;
                order: 0;
                flex: 0 0 auto;
                margin: 0 !important;
                width: 40px;
                height: 40px;
                padding: 0;
                border-radius: 12px;
                background: var(--az-mint, #E6F4EB);
                border: 1.5px solid color-mix(in srgb, var(--az-green, #1E9E50) 45%, transparent);
                color: var(--az-green-deep, #137A3A);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                z-index: 3;
        }
        .alzar-nav .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }
        .alzar-nav .wp-block-navigation__responsive-container-close:hover,
        .alzar-nav .wp-block-navigation__responsive-container-close:focus-visible {
                background: var(--az-mint, #E6F4EB);
                border-color: var(--az-green, #1E9E50);
                outline: none;
                box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-green, #1E9E50) 18%, transparent);
        }

        /* 13d. Dialog = a plain column ------------------------------------- */
        .alzar-nav .wp-block-navigation__responsive-dialog {
                order: 1;
                position: static;
                margin-top: 0 !important; /* WP reserves 46px for its default floating close — ours rides the brand row. */
                width: 100%;
                height: auto;
                min-height: 0;
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                padding: 0;
                margin: 0;
                background: transparent;
                box-shadow: none;
                overflow: visible;
        }

        /* 13e. Content column: brand → links → pinned card ----------------- */
        .alzar-nav .wp-block-navigation__responsive-container-content {
                flex: 1 1 auto;
                min-height: 0;
                display: flex;
                flex-direction: column;
                padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
                padding-top: 0 !important; /* WP core reserves 56px for the default close — ours shares the brand row. */
                overflow: hidden;
        }
        /* v6.2: the links list is shown whenever the drawer is open. */
        .alzar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
        .alzar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > ul {
                display: flex !important;
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch;
                flex-direction: column;
                gap: 0;
                width: 100%;
                margin: 0;
                padding: 0 0 .35rem;
                list-style: none;
                visibility: visible;
                opacity: 1;
        }
        .alzar-nav .wp-block-navigation__responsive-container-content > ul > li,
        .alzar-nav .wp-block-navigation__container > li { width: 100%; flex: 0 0 auto; }
        .alzar-nav .is-menu-open .wp-block-navigation-item { width: 100%; margin: 0; display: block; }
        .alzar-nav .is-menu-open .wp-block-navigation-item__content {
                font-size: 1.0625rem; padding: .8rem .4rem; min-height: 52px;
        }

        /* 13f. Brand row (v7): compact — smaller mark, tight paddings; the whole
           header of the drawer (close + brand) now takes ~64px instead of ~140px,
           so the links start almost at the top of the screen. */
        .alzar-nav .wp-block-navigation__responsive-container.is-menu-open .alzar-mmenu__brand { display: flex; }
        .alzar-mmenu__brand {
                align-items: center;
                gap: .6rem;
                width: 100%;
                padding: .45rem .8rem .5rem 3.2rem;
                margin: 0 0 .45rem;
                border-bottom: 1px solid var(--az-line, #E3E6F0);
        }
        .alzar-mmenu__brand img {
                width: 36px; height: 36px;
                object-fit: contain; border-radius: 0; box-shadow: none; background: transparent; flex-shrink: 0;
        }
        .alzar-mmenu__brand-txt { display: grid; gap: .1rem; }
        .alzar-mmenu__brand-txt strong { font-size: .95rem; line-height: 1.25; color: var(--az-navy, #222D65); }
        /* v7.1: the UNIFIED slogan — gold dots + green text, the same voice as the
           topbar/hero/footer. Reads as a brand line, not a filler sentence. */
        .alzar-mmenu__slogan { display: inline-flex; align-items: center; gap: .38rem; font-size: .74rem; font-weight: 800; color: var(--az-green-deep, #137A3A); line-height: 1.3; }
        .alzar-mmenu__slogan::before,
        .alzar-mmenu__slogan::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--az-gold, #F2B33D); flex: 0 0 auto; }
        /* No brand row (setting off): keep the clear space the absolute close
           button needs so it never sits on top of the first link. */
        .alzar-nav .wp-block-navigation__responsive-container-content:not(:has(.alzar-mmenu__brand)) > ul { padding-top: 3.4rem; }

        /* 13g. Links: airy rows with dividers ------------------------------ */
        .alzar-nav .wp-block-navigation__container .wp-block-navigation-item__content {
                display: flex;
                align-items: center;
                width: 100%;
                min-height: 52px;
                text-align: start;
                direction: rtl;
                padding: .8rem .4rem;
                font-size: 1.0625rem;
                font-weight: 600;
                border-bottom: 1px solid var(--az-line, #E3E6F0);
                border-radius: 0;
                text-decoration: none;
                color: var(--az-ink, #141A3D);
                white-space: normal;
                transition: background .18s, color .18s;
        }
        .alzar-nav .wp-block-navigation__container .wp-block-navigation-item__content:hover,
        .alzar-nav .wp-block-navigation__container .wp-block-navigation-item__content:focus-visible {
                background: color-mix(in srgb, var(--az-mint, #E6F4EB) 65%, transparent);
                color: var(--az-green-deep, #137A3A);
        }
        .alzar-nav__luck .wp-block-navigation-item__content { color: var(--az-green-deep, #137A3A); font-weight: 800; }

        /* 13h. Service & delivery pinned to the bottom (v7.1: COMPACT — the user
           asked for the card to shrink so the links get the space). One tight
           card: small title, phone + WhatsApp side by side, tiny eta line. */
        .alzar-nav .wp-block-navigation__responsive-container.is-menu-open .alzar-mmenu__foot { display: grid; }
        .alzar-mmenu__foot {
                flex: 0 0 auto;
                width: 100%;
                margin-top: .6rem;
                gap: .3rem;
                grid-template-columns: 1fr auto; /* v1.9.8: tel | WhatsApp — the rotating social pill moved ABOVE the card (see .alzar-mmenu__social) */
                align-items: center;
                justify-items: start;
                column-gap: .6rem;
                padding: .62rem .78rem;
                border-radius: 16px;
                background: linear-gradient(140deg, var(--az-navy, #222D65), color-mix(in srgb, var(--az-navy, #222D65) 78%, var(--az-green-deep, #137A3A)));
                color: #fff;
        }
        .alzar-mmenu__foot-t { grid-column: 1 / -1; margin: 0; font-size: .68rem; font-weight: 700; color: color-mix(in srgb, #fff 78%, transparent); line-height: 1; }
        .alzar-mmenu__tel { font: 800 1.05rem/1.1 var(--az-num, inherit); color: #F2B33D; text-decoration: none; direction: ltr; text-align: start; align-self: center; }
        .alzar-mmenu__wa {
                grid-column: 2; grid-row: 2;
                display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: 0 .85rem;
                border-radius: 999px; background: #25D366; color: #fff; font-weight: 700; font-size: .82rem;
                text-decoration: none; box-shadow: 0 8px 16px -8px rgba(37, 211, 102, .7);
                justify-self: end;
        }
        .alzar-mmenu__wa:hover { filter: brightness(1.05); }
        .alzar-mmenu__eta { grid-column: 1 / -1; margin: 0; font-size: .68rem; color: color-mix(in srgb, #fff 72%, transparent); line-height: 1.45; }
}

/* Small phones: keep the pinned card reachable, the list takes what is left. */
@media (max-width: 380px) {
        .alzar-nav .wp-block-navigation__container .wp-block-navigation-item__content { min-height: 46px; font-size: 1rem; }
        .alzar-mmenu__foot { padding: .55rem .68rem; }
        .alzar-mmenu__tel { font-size: .95rem; }
        .alzar-mmenu__wa { min-height: 32px; padding: 0 .7rem; font-size: .78rem; }
}

/* v8.0: the live "Try your luck" banner (rendered by Alzar Luck's [alzar_luck_banner]).
   The wheel/banner own their layout; the theme only gives the section its breathing room. */
.alzar-luck-banner-wrap { margin-block: clamp(1.5rem, 4vw, 3rem); }
.alzar-luck-live { display: block; }
/* The game page (/luck/) uses templates/page-luck.html: no duplicate <h1>, full-width hero. */
body.page-template-page-luck .alzl, body.page-luck .alzl { padding-top: 4px; }

/* ── v1.9 (session 5) Hero slider: critical, loaded in <head> ───────────────
   Root cause of the "all slides stacked while loading" flash: the slider track
   was built by JS and core.css is printed late (block enqueue → footer). The
   track is now rendered server-side and these rules live in the head, so only
   the first slide is ever visible until the user (or autoplay) asks for another. */
[data-az-slider] { position: relative; overflow: hidden; border-radius: 32px; }
[data-az-slider] > .alzar-slider__track { display: flex; flex-wrap: nowrap; }
[data-az-slider] > .alzar-slider__track > * { flex: 0 0 100%; min-width: 0; }
[data-az-slider]:not(.is-ready) > .alzar-slider__track > :not(:first-child),
[data-az-slider]:not(.is-ready) > .alzar-slide ~ .alzar-slide,
[data-az-slider]:not(.is-ready) > .wp-block-cover ~ .wp-block-cover { visibility: hidden; }
[data-az-slider]:not(.is-ready) > .alzar-slide ~ .alzar-slide,
[data-az-slider]:not(.is-ready) > .wp-block-cover ~ .wp-block-cover { display: none; }
[data-az-slider]:not(.is-ready) .alzar-slider__nav { opacity: 0; }
/* Image slides (uploaded banner) */
.alzar-slide--image { position: relative; border-radius: 32px; overflow: hidden; background: var(--wp--preset--color--primary, #222D65); aspect-ratio: 1180 / 440; }
.alzar-slide--image .alzar-slide__link { display: block; width: 100%; height: 100%; color: #fff; text-decoration: none; }
.alzar-slide--image picture, .alzar-slide--image .alzar-slide__bg { display: block; width: 100%; height: 100%; object-fit: cover; }
.alzar-slide--image.has-caption::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(10,16,48,.72) 0%, rgba(10,16,48,.25) 55%, rgba(10,16,48,0) 80%); pointer-events: none; }
.alzar-slide__caption { position: absolute; z-index: 1; inset-block: 0; inset-inline-start: 0; width: min(560px, 62%); display: flex; flex-direction: column; justify-content: center; gap: .5rem; padding: 2rem 3rem; }
.alzar-slide__caption .alzar-slide__title { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.75rem); margin: 0; }
.alzar-slide__cta { align-self: flex-start; background: #fff; color: var(--wp--preset--color--primary, #222D65); font-weight: 700; border-radius: 999px; padding: .65rem 1.4rem; margin-top: .5rem; }
@media (max-width: 781px) {
        [data-az-slider], .alzar-slide--image { border-radius: var(--az-r-l, 20px); }
        .alzar-slide--image { aspect-ratio: 4 / 3; }
        .alzar-slide__caption { width: 100%; padding: 1.25rem; justify-content: flex-end; }
        .alzar-slide--image.has-caption::after { background: linear-gradient(0deg, rgba(10,16,48,.78) 0%, rgba(10,16,48,0) 65%); }
}

/* ── v1.9 (session 5) Social icons ([alzar_social]) ──
   v1.9.7 (owner request): WHITE ONLY, ZERO chrome everywhere — the dark
   backgrounds carry them, no boxes, no frames, just small white glyphs. */
.alzar-footer__social:empty { display: none; }
.az-social { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.az-social__a { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: none; transition: transform .2s, opacity .2s; }
.az-social__a svg { width: 20px; height: 20px; }
.az-social__a:hover, .az-social__a:focus-visible { background: none; opacity: .68; transform: translateY(-2px); color: #fff; }

/* Rotating slot (v1.9.7): ONE icon at a time, cross-fading — a chic way to
   show every network without spending space. The <ul> ships hidden; the
   rotator script arranges + unhides it (no-JS = nothing flashes). */
.az-social[data-az-rotate] { flex-wrap: nowrap; } /* positioning context comes from the placement rule (topbar: absolute, drawer foot: relative) */
.az-social[data-az-rotate] > li { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility 0s .55s; pointer-events: none; }
.az-social[data-az-rotate] > li.is-live { opacity: 1; visibility: visible; transition: opacity .55s ease, visibility 0s 0s; pointer-events: auto; }
.az-social[data-az-rotate] > li .az-social__a { width: 100%; height: 100%; display: grid; place-items: center; }

/* v1.9.8 — top bar: the rotating slot (ONE frameless white icon at a time)
   now carries the word «تابعنا» INSIDE the same link — the word fades out with
   the icon and comes back with the next one (owner request). The slot grew
   from a 26px square into a compact icon+word chip, still pinned to the LEFT
   of the navy strip. On mobile (<782px) the slot hides — the icons live inside
   the mobile menu's navy pill instead. */
.alzar-topbar { position: relative; }
.alzar-topbar .alzar-topbar__txt { padding-inline-end: 108px; } /* reserve the icon+تابعنا chip so the announcement text never underlaps it */
.az-social--topbar { position: absolute; inset-inline-end: 12px; inset-inline-start: auto; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; width: 86px; height: 26px; display: block; }
.az-social--topbar .az-social__a { width: 100%; height: 26px; background: none; color: #fff; transform: none; border-radius: 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.az-social--topbar .az-social__a svg { width: 17px; height: 17px; flex: 0 0 auto; }
.az-social__t { color: #fff; font-size: .78rem; font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: .01em; }
.az-social--topbar .az-social__a:hover, .az-social--topbar .az-social__a:focus-visible { background: none; color: #fff; opacity: .75; transform: none; }
@media (max-width: 781.98px) {
        .az-social--topbar { display: none; }
        .alzar-topbar .alzar-topbar__txt { padding-inline-end: 0; } /* chip hidden on mobile → give the announcement text its full width back */
}

/* v1.9.8 (owner request — supersedes v1.9.7) — mobile drawer: the rotating
   slot is NO LONGER inside the contact card. v1.9.9 (owner request): NAVY
   ONLY with NO background — the word «تابعنا» rides beside the white-turned-
   navy icon and both cross-fade in place, sitting DIRECTLY ABOVE the
   customer-service card, aligned to the LEFT. The pill is injected by the
   rotator script in alzar-core/includes/social-links.php. */
/* v1.9.10 CRITICAL FIX (owner bug: «انت شلت المنيو كلها من الديسك توب»):
   the v1.9.9 leak-lock hid the ENTIRE .wp-block-navigation__responsive-
   container on ≥1100px — but that container is not "drawer chrome": with
   overlayMenu:mobile it is the SAME element that renders the HORIZONTAL
   desktop menu links (WP core keeps it display:block / in-flow at ≥600px),
   so the lock erased the whole desktop nav and left only logo + cart.
   The lock is now scoped to the only thing that actually leaked: the
   drawer chrome rows, and it is declared LAST so it wins the !important
   cascade tie against the open-state rule below. Three independent locks,
   menu intact:
     · JS (social-links.php put()): zero injection at ≥1100px;
     · base lock: every .alzar-mmenu__* row is display:none by default;
     · desktop lock (last rule of this section): even a stale .is-menu-open
       left by a mobile→desktop resize cannot surface them on desktop. */
.alzar-mmenu__social { display: none !important; }
.alzar-nav .wp-block-navigation__responsive-container.is-menu-open .alzar-mmenu__social { display: flex !important; margin: -6px 0 -20px; width: 100%; justify-content: flex-end; } /* RTL flex-end = physical LEFT (owner: علي اليسار) · -20px kills WP core's column gap(20px) so the pill sits DIRECTLY above the service card */
/* v1.9.10 desktop lock — declared AFTER the open-state rule (same 0,4,0
   specificity, both !important → source order decides) so it reliably wins
   on ≥1100px: the drawer chrome rows can never render on the desktop
   header, not even under a stale .is-menu-open from a resize. The menu
   container itself stays visible — this is what restores the desktop menu. */
@media (min-width: 1100px) {
        .alzar-nav .wp-block-navigation__responsive-container.is-menu-open .alzar-mmenu__social,
        .alzar-nav .wp-block-navigation__responsive-container.is-menu-open .alzar-mmenu__brand,
        .alzar-nav .wp-block-navigation__responsive-container.is-menu-open .alzar-mmenu__foot { display: none !important; }
}
.alzar-mmenu__social .az-social--drawer { position: relative; display: block; width: 96px; height: 32px; margin: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; } /* v1.9.9: كحلي بدون خلفية — no pill box at all */
.az-social--drawer .az-social__a { width: 100%; height: 100%; color: var(--az-navy, #222D65); background: none; border-radius: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.az-social--drawer .az-social__a svg { width: 16px; height: 16px; flex: 0 0 auto; }
.az-social--drawer .az-social__t { font-size: .74rem; color: var(--az-navy, #222D65); }
.az-social--drawer .az-social__a:hover, .az-social--drawer .az-social__a:focus-visible { background: none; color: var(--az-navy, #222D65); opacity: .75; }
/* Legacy v1.9.7 rule (slot INSIDE the card) — neutralised, the pill is a sibling now. */
.alzar-mmenu__foot .az-social--drawer { grid-column: auto; grid-row: auto; }
/* v1.9.8 — footer: «تابعنا» caption right before the icon row (owner request). */
.az-social__cap { list-style: none; display: inline-flex; align-items: center; color: #fff; font-size: .85rem; font-weight: 800; line-height: 1; margin-inline-end: .35rem; }
.az-social--inline { justify-content: center; padding: 1rem; }
.az-social--inline .az-social__a { color: var(--wp--preset--color--primary, #222D65); background: none; }

/* ===== v7.2.1 — إصلاحات الهيدر (لاب توب + موبايل) ===== */
/* المشكلة: صف الهيدر الواحد (لوجو + بحث + قائمة 8 روابط + حساب + سلة) أعرض من
   الحاوية 1280px في أي شاشة → زر «دخول/تسجيل» والسلة يخرجون عن الشاشة
   ويصنعون اسكرول جانبي. الحل: على الديسكتوب القائمة تنزل لسطر مستقل تحت
   صف (اللوجو + البحث + الحساب + السلة) — إيقاع المتاجر الكبرى. */
@media (min-width: 1100px) {
        .alzar-header__row { flex-wrap: wrap !important; row-gap: .55rem; align-items: center; }
        .alzar-header__actions { display: contents !important; }
        .alzar-header__actions > .alzar-nav { order: 9; flex-basis: 100%; }
        /* v7.2.4 — طلب المالك: القائمة على الديسكتوب تتوسط الصفحة تمامًا
           (كانت flex-end فتلتصق شمالًا في RTL) */
        .alzar-header__actions > .alzar-nav,
        .alzar-header__actions > .alzar-nav .wp-block-navigation__container { justify-content: center !important; }
        .alzar-header__row > .alzar-search { flex: 1 1 auto; max-width: none; }
}
/* الموبايل (≤781px): زر الباركود يقف في صف البحث نفسه (بجانب صندوق البحث
   وتحت الشعار) — ليس قبل اللوجو أبدًا. عند وجود الزر يتراجع عرض البحث
   بمقدار الزر ليتشاركا السطر. */
@media (max-width: 781px) {
        .azux-scanfab--inline { order: 3; }
        .alzar-header__row:has(.azux-scanfab--inline:not([hidden])) .alzar-search { flex: 0 1 calc(100% - 62px) !important; max-width: calc(100% - 62px) !important; }
}