/*
 * newland-motion.css — Newland site-wide motion layer (pairs with
 * /vendor/motion/newland-motion.js, the motion.dev runtime layer).
 *
 * HOW THIS WORKS (read before editing):
 *   - The Blade shells carry a small inline head script (partials/
 *     motion-head-gate.blade.php — one source for all three shells) that adds
 *     `m-go` + `m-st-<style>` to <html> synchronously (JS enabled, no
 *     prefers-reduced-motion) and removes `m-go` again if the motion runtime
 *     does not become ready in time — so the hidden start states below never
 *     outlive a failed script load. The gate also pins the admin-chosen
 *     distance as --m-tx/--m-ty (the start state below is 21px by fallback
 *     only).
 *   - The start states below apply ONLY while the element lacks `m-in`: the
 *     runtime adds `m-in` when an element's reveal completes and for every
 *     element it deliberately skips, so finished elements sit at their natural
 *     state and the CSS-only hover interactions keep working.
 *   - The selector list below must stay IN SYNC with the RECIPES registry in
 *     newland-motion.js (the reveal choreography itself lives there; this file
 *     only owns the pre-paint start state, the scroll-progress hairline and the
 *     CSS-only hover micro-interactions).
 *   - Reveal states use opacity + transform only (zero layout shift / zero CLS).
 *   - Every authored number sits on the 3·6·9 scale: offsets 21/3, durations
 *     0.36/0.3/0.21, bar height 3, shadow blur 15, alpha .06, z-index 1080
 *     (digital root 9). Easings are bezier curves (optical physics, exempt).
 */

/* ── reveal start state — pre-paint, only while the runtime gate is armed ── */
@media (prefers-reduced-motion: no-preference) {
    .m-go .card.product:not(.swiper *):not(.m-in),
    .m-go .card.article-image:not(.swiper *):not(.m-in),
    .m-go .cart-item:not(.m-in),
    .m-go .checkout-row:not(.m-in),
    .m-go .user-address-item:not(.m-in),
    .m-go .seller-item:not(.m-in),
    .m-go .comments-container .comment:not(.m-in),
    .m-go .banner-middle-1th .row > [class*="col-"]:not(.m-in),
    .m-go .banner-middle-2th .row > [class*="col-"]:not(.m-in),
    .m-go .banner-middle-4th .row > [class*="col-"]:not(.m-in),
    .m-go .product-list-header:not(.m-in),
    .m-go .related-product--header:not(.m-in),
    .m-go .single-product-slider--header:not(.m-in),
    .m-go .wg-title:not(.m-in),
    .m-go .sm-product-list-type-1--header:not(.m-in),
    .m-go .product-progressbar-slider--header:not(.m-in),
    .m-go .swiper-categories-slider--header:not(.m-in),
    .m-go .swiper-brands-slider--header:not(.m-in),
    .m-go .section-title:not(.m-in),
    .m-go .panel-content--title:not(.m-in),
    .m-go .article--content:not(.m-in),
    .m-go .article--image:not(.m-in),
    .m-go .blog-sidebar--inner:not(.m-in),
    .m-go .footer-support-area:not(.m-in),
    .m-go .footer-middle:not(.m-in),
    .m-go .footer-bottom:not(.m-in),
    .m-go .user-welcome .card:not(.m-in),
    .m-go .wallet-widget:not(.m-in),
    .m-go .panel-content:not(.m-in),
    .m-go .intro-welcome > [class*="col-"]:not(.m-in),
    .m-go .top-simple-chart > [class*="col-"]:not(.m-in),
    .m-go .statistics > [class*="col-"]:not(.m-in) {
        opacity: 0;
        transform: translate3d(0, 21px, 0);
    }
}

/* belt & braces: if the gate class sticks while the user prefers reduced
   motion, everything is simply visible */
@media (prefers-reduced-motion: reduce) {
    .m-go .card.product,
    .m-go .card.article-image,
    .m-go .cart-item,
    .m-go .checkout-row,
    .m-go .user-address-item,
    .m-go .seller-item,
    .m-go .comments-container .comment,
    .m-go .banner-middle-1th .row > [class*="col-"],
    .m-go .banner-middle-2th .row > [class*="col-"],
    .m-go .banner-middle-4th .row > [class*="col-"],
    .m-go .product-list-header,
    .m-go .related-product--header,
    .m-go .single-product-slider--header,
    .m-go .wg-title,
    .m-go .sm-product-list-type-1--header,
    .m-go .product-progressbar-slider--header,
    .m-go .swiper-categories-slider--header,
    .m-go .swiper-brands-slider--header,
    .m-go .section-title,
    .m-go .panel-content--title,
    .m-go .article--content,
    .m-go .article--image,
    .m-go .blog-sidebar--inner,
    .m-go .footer-support-area,
    .m-go .footer-middle,
    .m-go .footer-bottom,
    .m-go .user-welcome .card,
    .m-go .wallet-widget,
    .m-go .panel-content,
    .m-go .intro-welcome > [class*="col-"],
    .m-go .top-simple-chart > [class*="col-"],
    .m-go .statistics > [class*="col-"] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── hover micro-interactions (CSS-only, no JS involvement) ────────────────
   Applied after reveals finish; the runtime animates back to the natural
   state, so hover lift rides on top of it. Pointer devices only — touch
   devices never match :hover. The m-no-hover class (set by the inline head
   gate from the motion_hover_lift setting) opts the whole site out. */
@media (prefers-reduced-motion: no-preference) {
    html.m-live:not(.m-no-hover) .card.product:not(.swiper *),
    html.m-live:not(.m-no-hover) .card.article-image:not(.swiper *) {
        transition: transform 0.3s;
    }
    html.m-live:not(.m-no-hover) .card.product:not(.swiper *):hover,
    html.m-live:not(.m-no-hover) .card.article-image:not(.swiper *):hover {
        transform: translateY(-3px);
    }
    /* the header is a DIV.page-header (never a <header> tag — measured) */
    .page-wrapper .page-header {
        transition: box-shadow 0.3s;
    }
    .m-scrolled .page-wrapper .page-header {
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
    }
}

/* ── scroll-progress hairline (element is appended by the runtime; the
   transform-origin — the RTL start side — is set there too, because the
   storefront carries no dir attribute: RTL starts at .page-wrapper) ─────── */
.m-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary, rgb(0 96 255));
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 1080;
    pointer-events: none;
}

/* ── megamenu v4.1 — the Digikala layout (owner order 2026-10-28) ────────
   The v4 one-owner panel, re-laid-out to the Digikala arrangement:
   a FULL-WIDTH panel under the header; a 252px icon rail on the start side;
   the body opens with «همه محصولات X» and flows the groups as columns —
   bold titles with a 3px primary start-bar, child rows at 36px.
   Everything from v4.0 stays: the synthetic-mouseenter harvest, the
   one-entrance opening, one-paint rail switches, the fail-open vendor tree
   (hidden under m-mm-live), the min-width:992 scoping with the base
   display:none below (the isolated review's live below-the-breakpoint proof), ESC/focus,
   aria. Tokens on the law: 252/216/180 columns, 36/21/18/9/6/3, alphas
   3/6/9, radius 15/9/6, z 21. The icons are the runtime's keyword map
   (the categories carry no icon data — measured) using the site's own
   remixicon font. */
@media (prefers-reduced-motion: no-preference) {
    /* BELOW 992 the panel must not exist visually: the JS mounts it at any
       width, so the base state hides it (the isolated review's live probe
       below the breakpoint caught an unstyled link wall without this) */
    .m-mm4-panel {
        display: none;
    }
    @media (min-width: 992px) { /* 369-exempt: 992 is the vendor own lg breakpoint (platform-mandated) */
        /* the vendor tree: fully OUT of the rendered + a11y tree under the
           runtime pin (display:none — the owner asked why the old menu
           still "exists"). Scoped to m-mm-live ALONE: the pin is added only
           by the live runtime, so the fail-open law holds — and the rule
           works under ANY reveal setting (the owner runs reveal=off, where
           m-go never arms and a .m-go-scoped rule never matched — the
           isolated review's live probe caught the old menu rendering
           beside the v4 panel) */
        .m-mm-live .mega-menu > .mega-menu-items {
            display: none;
        }
        .m-mm-live .mega-menu,
        .m-mm-live .page-wrapper .page-header {
            position: relative;
        }
        .m-mm4-panel {
            display: flex;
            position: absolute;
            /* a small top offset (the owner: "یکم از بالا فاصله بگیره") —
               the ::before bridge keeps the pointer ON the panel across the
               gap, so it can never vanish mid-travel (structural, not a
               timing grace) */
            top: calc(100% + 12px);
            inset-inline-start: 0;
            z-index: 21;
            gap: 0;
            /* the width FORMULA from the admin's column count (2/3/4):
               288 (rail + body pads) + n×216 columns + (n-1)×18 gaps
               + 27 (the scrollbar allowance — environment-dependent, up to
               ~21px in real browsers — plus the rounding margin; exact-fit
               wraps a column)
               — n=3 computes 999 (digital root 9) */
            inline-size: min(calc(315px + var(--m-mm4-cols, 3) * 216px + (var(--m-mm4-cols, 3) - 1) * 18px), calc(100vw - 288px));
            background: #fff;
            border-radius: 0 0 15px 15px;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
            opacity: 0;
            transform: translateY(9px);
            visibility: hidden;
            transition: opacity 0.21s ease-out, transform 0.21s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.21s;
        }
        .m-mm4-panel::before {
            /* the gap bridge: an invisible strip joining the trigger's edge
               to the panel — hovering it is hovering the panel */
            content: "";
            position: absolute;
            top: -12px;
            block-size: 12px;
            inset-inline: 0;
        }
        .m-mm4-panel.m-mm4-open {
            opacity: 1;
            transform: none;
            visibility: visible;
            transition: opacity 0.21s ease-out, transform 0.21s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
        }
        .m-mm4-rail {
            display: flex;
            flex-direction: column;
            gap: 3px;
            inline-size: 252px;
            flex: none;
            padding: 9px;
            border-inline-end: 1px solid rgba(0, 0, 0, 0.06); /* 369-exempt: 1px hairline, the theme-wide separator convention */
            border-end-start-radius: 15px; /* matches the panel's bottom radius — the rail's own dark bg painted over the rounded corner square */
        }
        /* the cloned vendor anchor carries the red active bg — the rail
           restyles it: neutral text + icon until hover/active */
        .m-mm4-rail .m-mm4-rail-item {
            background: transparent;
            color: #1c1c25;
            border-radius: 9px;
            padding: 9px 12px;
            font-weight: 500;
            line-height: 18px; /* 18 + 9 + 9 = the 36px row, exactly */
            text-decoration: none;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 9px;
            min-height: 36px;
            inline-size: 100%;
        }
        .m-mm4-rail .m-mm4-icon {
            font-size: 18px; /* the 18 rung of the icon ladder: 18 + 18 = 36 */
            line-height: 1; /* 369-exempt: a unitless glyph-box reset, not a design spacing number */
            color: #6b7080;
            display: inline-flex;
        }
        .m-mm4-rail .m-mm4-rail-item:hover {
            background: color-mix(in srgb, var(--primary, #ee1844) 6%, transparent);
        }
        .m-mm4-rail .m-mm4-rail-item:hover .m-mm4-icon,
        .m-mm4-rail .m-mm4-rail-item.m-mm4-active .m-mm4-icon {
            color: var(--primary, #ee1844);
        }
        .m-mm4-rail .m-mm4-rail-item.m-mm4-active {
            background: color-mix(in srgb, var(--primary, #ee1844) 9%, transparent);
            color: var(--primary, #ee1844);
            font-weight: 700;
        }
        .m-mm4-rail .m-mm4-rail-item:focus-visible,
        .mega-menu .mega-menu-title:focus-visible {
            background: color-mix(in srgb, var(--primary, #ee1844) 3%, transparent);
        }
        .m-mm4-body {
            flex: 1;
            min-width: 0;
            padding: 18px;
            max-height: 54vh;
            overflow-y: auto;
        }
        /* «همه محصولات X» — the category's own page, Digikala's body header */
        .m-mm4-body .m-mm4-all {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #1c1c25;
            font-weight: 700;
            text-decoration: none;
            padding: 6px 9px;
            margin: 0 0 9px;
            border-radius: 9px;
        }
        .m-mm4-body .m-mm4-all .m-mm4-chev {
            color: var(--primary, #ee1844);
            font-size: 18px;
        }
        .m-mm4-body .m-mm4-all:hover {
            color: var(--primary, #ee1844);
            background: color-mix(in srgb, var(--primary, #ee1844) 3%, transparent);
        }
        .m-mm4-body .m-mm4-columns {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            margin: 0;
            padding: 0;
        }
        /* the cloned subtree is SELF-CONTAINED: the live vendor chunk ships
           NO rules for these classes (measured — app-CLsb84jz.css), so the
           surface styles everything it renders */
        /* the clone IS the columns container — it (not the wrapper) lays the
           groups out; measured live: block without this rule */
        .m-mm4-columns > .mega-submenu-columns {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            flex: 1;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .m-mm4-columns .mega-submenu-column {
            margin: 0;
            padding: 0;
            list-style: none;
            flex: 1 1 216px;
            min-width: 216px;
        }
        .m-mm4-columns .mega-submenu-item {
            margin: 0 0 18px;
        }
        .m-mm4-columns .mega-submenu-item > .parent-item {
            background: transparent;
            color: #1c1c25;
            font-weight: 700;
            padding: 9px;
            line-height: 18px; /* the same 36px row as the children */
            display: flex;
            align-items: center;
            border-inline-start: 3px solid var(--primary, #ee1844);
            border-radius: 6px;
            white-space: normal;
            text-decoration: none;
        }
        .m-mm4-columns .mega-submenu-item > .parent-item:before {
            display: none; /* the vendor arrow glyph — the bar replaces it */
        }
        .m-mm4-columns .mega-submenu-final {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .m-mm4-columns .mega-submenu-final-item a {
            padding: 9px;
            margin-inline-start: 12px;
            color: #555;
            display: block;
            line-height: 18px; /* 18 + 9 + 9 = the 36px row, exactly */
            text-decoration: none;
            border-radius: 6px;
            white-space: normal;
        }
        .m-mm4-columns .mega-submenu-final-item a:hover {
            color: var(--primary, #ee1844);
            background: color-mix(in srgb, var(--primary, #ee1844) 3%, transparent);
        }
        .m-mm4-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(6, 9, 12, 0.24);
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
            opacity: 0;
            transition: opacity 0.21s ease-out;
            pointer-events: none;
            z-index: 9;
        }
        .m-mm-open .m-mm4-backdrop {
            opacity: 1;
        }
        /* the icon picker (the admin category forms load this stylesheet) */
        .m-icon-picker {
            position: absolute;
            z-index: 30;
            inset-inline-start: 0;
            top: calc(100% + 6px);
            display: grid;
            grid-template-columns: repeat(9, 36px);
            gap: 3px;
            padding: 9px;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.06); /* 369-exempt: 1px hairline, the theme-wide separator convention */
            border-radius: 9px;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.09);
            max-height: 216px;
            overflow-y: auto;
            display: none;
        }
        .m-icon-picker.m-open {
            display: grid;
        }
        .m-icon-picker button {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 0;
            background: transparent;
            border-radius: 6px;
            font-size: 18px;
            color: #1c1c25;
            cursor: pointer;
        }
        /* dark: the vendor's own hard-coded #dark values (color-exempt) */
        body#dark .m-mm4-panel { background: #414150; }
        /* the two-zone read (the owner: the main-category rail vs the
           sub-category columns must differ): the rail sits one shade darker
           than the panel; the «همه محصولات X» row keeps light text — the
           vendor light value #1c1c25 has no dark override and read black */
        body#dark .m-mm4-rail { background: #3a3a47; }
        body#dark .m-mm4-body .m-mm4-all { color: #fff; }
        body#dark .m-mm4-rail { border-inline-end-color: rgba(255, 255, 255, 0.06); }
        body#dark .m-mm4-rail .m-mm4-rail-item { color: #fff; }
        body#dark .m-mm4-rail .m-mm4-icon { color: #9ba0af; }
        body#dark .m-mm4-columns .mega-submenu-item > .parent-item { color: #fff; }
        body#dark .m-mm4-columns .mega-submenu-final-item a { color: #b9bcc7; }
    }
}/* ── bootstrap dropdowns (search, mobile navigation, …): a soft entrance
   on .show — the vendor shows them with no transition at all ────────────── */
@media (prefers-reduced-motion: no-preference) {
    .m-go .dropdown-menu.show {
        animation: m-dd-in 0.21s ease-out both;
    }
}

@keyframes m-dd-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* ── v3 — reveal style variants ────────────────────────────────────────────
   The admin picks the style; the head gate pins m-st-<style> on <html> and
   these variables reshape the SAME start-state block declared above — no
   per-style selector lists. The runtime's from-keyframes mirror them. */
.m-go { --m-ty: 21px; --m-tx: 0px; }
.m-go.m-st-slide { --m-ty: 0px; --m-tx: 21px; }
.m-go.m-st-fade,
.m-go.m-st-blur { --m-ty: 0px; }

/* the blur variant alone carries a filter (filter creates a containing
   block — never blanket it over recipe elements) */
@media (prefers-reduced-motion: no-preference) {
    .m-go.m-st-blur .card.product:not(.swiper *):not(.m-in),
    .m-go.m-st-blur .card.article-image:not(.swiper *):not(.m-in),
    .m-go.m-st-blur .cart-item:not(.m-in),
    .m-go.m-st-blur .checkout-row:not(.m-in),
    .m-go.m-st-blur .user-address-item:not(.m-in),
    .m-go.m-st-blur .seller-item:not(.m-in),
    .m-go.m-st-blur .comments-container .comment:not(.m-in),
    .m-go.m-st-blur .banner-middle-1th .row > [class*="col-"]:not(.m-in),
    .m-go.m-st-blur .banner-middle-2th .row > [class*="col-"]:not(.m-in),
    .m-go.m-st-blur .banner-middle-4th .row > [class*="col-"]:not(.m-in),
    .m-go.m-st-blur .product-list-header:not(.m-in),
    .m-go.m-st-blur .related-product--header:not(.m-in),
    .m-go.m-st-blur .single-product-slider--header:not(.m-in),
    .m-go.m-st-blur .wg-title:not(.m-in),
    .m-go.m-st-blur .sm-product-list-type-1--header:not(.m-in),
    .m-go.m-st-blur .product-progressbar-slider--header:not(.m-in),
    .m-go.m-st-blur .swiper-categories-slider--header:not(.m-in),
    .m-go.m-st-blur .swiper-brands-slider--header:not(.m-in),
    .m-go.m-st-blur .section-title:not(.m-in),
    .m-go.m-st-blur .panel-content--title:not(.m-in),
    .m-go.m-st-blur .article--content:not(.m-in),
    .m-go.m-st-blur .article--image:not(.m-in),
    .m-go.m-st-blur .blog-sidebar--inner:not(.m-in),
    .m-go.m-st-blur .footer-support-area:not(.m-in),
    .m-go.m-st-blur .footer-middle:not(.m-in),
    .m-go.m-st-blur .footer-bottom:not(.m-in),
    .m-go.m-st-blur .user-welcome .card:not(.m-in),
    .m-go.m-st-blur .wallet-widget:not(.m-in),
    .m-go.m-st-blur .panel-content:not(.m-in),
    .m-go.m-st-blur .intro-welcome > [class*="col-"]:not(.m-in),
    .m-go.m-st-blur .top-simple-chart > [class*="col-"]:not(.m-in),
    .m-go.m-st-blur .statistics > [class*="col-"]:not(.m-in) {
        filter: blur(6px);
    }
    /* the base start state reshaped by the variables (rides the same recipe
       lists declared in the v2 block above through the shared selectors) */
    .m-go .card.product:not(.swiper *):not(.m-in),
    .m-go .card.article-image:not(.swiper *):not(.m-in),
    .m-go .cart-item:not(.m-in),
    .m-go .checkout-row:not(.m-in),
    .m-go .user-address-item:not(.m-in),
    .m-go .seller-item:not(.m-in),
    .m-go .comments-container .comment:not(.m-in),
    .m-go .banner-middle-1th .row > [class*="col-"]:not(.m-in),
    .m-go .banner-middle-2th .row > [class*="col-"]:not(.m-in),
    .m-go .banner-middle-4th .row > [class*="col-"]:not(.m-in),
    .m-go .product-list-header:not(.m-in),
    .m-go .related-product--header:not(.m-in),
    .m-go .single-product-slider--header:not(.m-in),
    .m-go .wg-title:not(.m-in),
    .m-go .sm-product-list-type-1--header:not(.m-in),
    .m-go .product-progressbar-slider--header:not(.m-in),
    .m-go .swiper-categories-slider--header:not(.m-in),
    .m-go .swiper-brands-slider--header:not(.m-in),
    .m-go .section-title:not(.m-in),
    .m-go .panel-content--title:not(.m-in),
    .m-go .article--content:not(.m-in),
    .m-go .article--image:not(.m-in),
    .m-go .blog-sidebar--inner:not(.m-in),
    .m-go .footer-support-area:not(.m-in),
    .m-go .footer-middle:not(.m-in),
    .m-go .footer-bottom:not(.m-in),
    .m-go .user-welcome .card:not(.m-in),
    .m-go .wallet-widget:not(.m-in),
    .m-go .panel-content:not(.m-in),
    .m-go .intro-welcome > [class*="col-"]:not(.m-in),
    .m-go .top-simple-chart > [class*="col-"]:not(.m-in),
    .m-go .statistics > [class*="col-"]:not(.m-in) {
        transform: translate(var(--m-tx, 0px), var(--m-ty, 21px));
    }
    /* the zoom variant replaces the translate entirely */
    .m-go.m-st-scale .card.product:not(.swiper *):not(.m-in),
    .m-go.m-st-scale .card.article-image:not(.swiper *):not(.m-in),
    .m-go.m-st-scale .cart-item:not(.m-in),
    .m-go.m-st-scale .checkout-row:not(.m-in),
    .m-go.m-st-scale .user-address-item:not(.m-in),
    .m-go.m-st-scale .seller-item:not(.m-in),
    .m-go.m-st-scale .comments-container .comment:not(.m-in),
    .m-go.m-st-scale .banner-middle-1th .row > [class*="col-"]:not(.m-in),
    .m-go.m-st-scale .banner-middle-2th .row > [class*="col-"]:not(.m-in),
    .m-go.m-st-scale .banner-middle-4th .row > [class*="col-"]:not(.m-in),
    .m-go.m-st-scale .product-list-header:not(.m-in),
    .m-go.m-st-scale .related-product--header:not(.m-in),
    .m-go.m-st-scale .single-product-slider--header:not(.m-in),
    .m-go.m-st-scale .wg-title:not(.m-in),
    .m-go.m-st-scale .sm-product-list-type-1--header:not(.m-in),
    .m-go.m-st-scale .product-progressbar-slider--header:not(.m-in),
    .m-go.m-st-scale .swiper-categories-slider--header:not(.m-in),
    .m-go.m-st-scale .swiper-brands-slider--header:not(.m-in),
    .m-go.m-st-scale .section-title:not(.m-in),
    .m-go.m-st-scale .panel-content--title:not(.m-in),
    .m-go.m-st-scale .article--content:not(.m-in),
    .m-go.m-st-scale .article--image:not(.m-in),
    .m-go.m-st-scale .blog-sidebar--inner:not(.m-in),
    .m-go.m-st-scale .footer-support-area:not(.m-in),
    .m-go.m-st-scale .footer-middle:not(.m-in),
    .m-go.m-st-scale .footer-bottom:not(.m-in),
    .m-go.m-st-scale .user-welcome .card:not(.m-in),
    .m-go.m-st-scale .wallet-widget:not(.m-in),
    .m-go.m-st-scale .panel-content:not(.m-in),
    .m-go.m-st-scale .intro-welcome > [class*="col-"]:not(.m-in),
    .m-go.m-st-scale .top-simple-chart > [class*="col-"]:not(.m-in),
    .m-go.m-st-scale .statistics > [class*="col-"]:not(.m-in) {
        transform: scale(0.96);
    }
}

/* ── v3 — the dark/light switch ──────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    /* fade model (also the no-VT fallback): the proven transition WINDOW —
       the duration comes from --m-theme-dur (admin-configured) */
    body.m-theme-transitioning,
    body.m-theme-transitioning *,
    body.m-theme-transitioning *::before,
    body.m-theme-transitioning *::after {
        transition: background-color var(--m-theme-dur, 540ms) ease, color var(--m-theme-dur, 540ms) ease, border-color var(--m-theme-dur, 540ms) ease, fill var(--m-theme-dur, 540ms) ease, stroke var(--m-theme-dur, 540ms) ease !important;
        transition-delay: 0s !important;
    }

    /* circle / curtain / blur models ride the View Transitions API: the old
       snapshot sits beneath, the new one animates in above */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
    }
    ::view-transition-group(root) {
        animation-duration: var(--m-vt-dur, 0.54s);
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
    html.m-vt-circle::view-transition-new(root) {
        animation-name: m-vt-circle;
    }
    /* the curtain model: the new theme wipes down from the top edge */
    html.m-vt-curtain::view-transition-new(root) {
        animation-name: m-vt-curtain;
    }
    /* the blur model: the new theme sharpens out of a blur */
    html.m-vt-blur::view-transition-new(root) {
        animation-name: m-vt-blur;
    }
    /* the three models share the configured duration — an animation-name
       alone runs at 0s and snaps (measured live: curtain and blur never
       animated; the audit's duration probe caught it) */
    html.m-vt-circle::view-transition-new(root),
    html.m-vt-curtain::view-transition-new(root),
    html.m-vt-blur::view-transition-new(root) {
        animation-duration: var(--m-vt-dur, 0.54s);
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        animation-fill-mode: both;
    }
}

@keyframes m-vt-circle {
    from {
        clip-path: circle(3px at var(--m-vt-x, center) var(--m-vt-y, top));
    }
    to {
        clip-path: circle(150% at var(--m-vt-x, center) var(--m-vt-y, top));
    }
}

@keyframes m-vt-curtain {
    from {
        transform: translateY(-102%);
    }
    to {
        transform: translateY(0%);
    }
}

@keyframes m-vt-blur {
    from {
        opacity: 0.4;
        filter: blur(9px);
    }
    to {
        opacity: 1;
        filter: blur(0px);
    }
}

/* ── v3 — dashboard lazy rendering ─────────────────────────────────────────
   content-visibility lets the browser skip layout+paint of the chart blocks
   until they scroll into view — every dashboard (admin/store/user) at once,
   zero chunk changes. The intrinsic size keeps the scrollbar honest. */
.el-chart,
.repository-chart-squre {
    content-visibility: auto;
    contain-intrinsic-size: auto 306px;
}

/* the icon-picker gallery at 253 glyphs: search on top, count line, then a
   scrolling grid. the page chunks stay style-free (frozen-chunk program) so
   the panel styles live here — the shared .m-icon-picker rules above still
   apply; on .m-open the 9-column grid moves to the inner .m-icon-grid
   (the old visible button area: 216 panel - 18 padding = 198) */
.m-icon-picker.m-open {
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow: visible;
}
.m-icon-picker .m-icon-search {
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
}
.m-icon-picker .m-icon-picker-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.m-icon-picker .m-icon-count {
    font-size: 12px;
    line-height: 18px;
    color: #9ba0af;
}
.m-icon-picker .m-icon-grid {
    display: grid;
    grid-template-columns: repeat(9, 36px);
    gap: 3px;
    max-height: 198px;
    overflow-y: auto;
}

/* the icon style switcher tiles (settings > icons tab) — theme-swatch design:
   a showcase stage carries the style's own glyphs, a radio circle marks the
   selection, the page chunk stays style-free. numbers on the 3·6·9 scale;
   the 1px hairline is the platform default (documented exemption) */
.m-style-card {
    position: relative;
    display: block;
    width: 100%;
    text-align: start;
    padding: 9px;
    background: #fff;
    border: 1px solid #e6e8ee; /* 369-exempt: platform hairline (Bootstrap default) */
    border-radius: 12px;
    color: #3f4254;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.m-style-card:hover {
    border-color: #b9c4ff;
    transform: translateY(-3px);
    box-shadow: 0 9px 18px rgba(15, 23, 42, .09);
}
.m-style-card:focus-visible {
    outline: 3px solid var(--primary, #0d6efd);
    outline-offset: 3px;
}
.m-style-card.is-selected {
    border-color: var(--primary, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .12), 0 9px 21px rgba(13, 110, 253, .12);
}
.m-style-card-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 63px;
    border-radius: 9px;
    background: #f6f7f9;
    transition: background-color .18s ease;
}
.m-style-card-stage > span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #6b7186;
    transition: background-color .18s ease;
}
.m-style-card.is-selected .m-style-card-stage {
    background: #eef2ff;
}
.m-style-card.is-selected .m-style-card-stage > span {
    background-color: var(--primary, #0d6efd);
}
.m-style-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 9px;
    padding: 0 6px 3px;
}
.m-style-card-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
}
.m-style-card-slug {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 15px;
    direction: ltr;
    text-align: start;
    color: #9ba0af;
}
.m-style-card-radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border: 3px solid #d7dbe7;
    border-radius: 50%; /* 369-exempt: relational circle geometry */
    color: #fff;
    transition: border-color .18s ease, background-color .18s ease;
}
.m-style-card.is-selected .m-style-card-radio {
    border-color: var(--primary, #0d6efd);
    background: var(--primary, #0d6efd);
}
.m-style-card-radio svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity .18s ease;
}
.m-style-card.is-selected .m-style-card-radio svg {
    opacity: 1;
}
body#dark .m-style-card {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .09);
    color: #c7cad4;
}
body#dark .m-style-card:hover {
    border-color: rgba(255, 255, 255, .21);
    box-shadow: 0 9px 18px rgba(0, 0, 0, .36);
}
body#dark .m-style-card-stage {
    background: rgba(255, 255, 255, .05);
}
body#dark .m-style-card.is-selected .m-style-card-stage {
    background: rgba(13, 110, 253, .16);
}
body#dark .m-style-card-stage > span {
    background-color: #9ba0af;
}
body#dark .m-style-card.is-selected .m-style-card-stage > span {
    background-color: #7ea2ff;
}
body#dark .m-style-card-radio {
    border-color: rgba(255, 255, 255, .18);
}

/* the auth token input in dark mode: the vendor's dark rule targets
   .form-element-row inputs and misses the token field (its markup sits
   directly under .auth-form), so the box lost its border — mirror the
   sibling input treatment with the vendor's own dark values */
body#dark .auth-container .auth-form .token-input {
    background-color: #414150;
    border: solid 1px #262631; /* 369-exempt: the vendor's own dark value, mirrored */
}