/* ============================================================================
   base-2026.css  —  ksport  ·  NEW design foundation (from-scratch rebuild)
   ----------------------------------------------------------------------------
   Single source of truth for the whole theme's look.
   Change the 6 brand values in ":root  ·  BRAND" and the entire site recolors.
   Presentation only — no Razor / markup / backend touched.
   Loaded LAST so it governs every legacy stylesheet.
   Section styles (header, home, product, cart, ...) live in their own files
   and consume ONLY the tokens declared here.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────── */
:root {
    /* ── BRAND · the only lines you edit to recolor the whole site ────────── */
    /* Full colour system (Color Palette/2.jpg + 3.jpg):                        */
    /*   Primary Blue #337CFD  → interactive: links, buttons, active, hovers    */
    /*   Navy #0C1F3F          → structure: headings, header/footer, dark text  */
    /*   Sage #84AEA7          → accent: CTAs, prices, small highlights         */
    --brand-primary : #0C1F3F;
    --brand-accent  : #84AEA7;   /* Sage — CTAs, prices, accents              */
    --navy          : #0C1F3F;   /* Tertiary navy — headings/header/dark text */
    --ink           : #0C1F3F;   /* alias for headings / primary dark text    */
    --bg            : #F6F8FC;    /* page background (cool near-white)          */
    --surface       : #FFFFFF;    /* cards / panels                            */
    --text          : #0C1F3F;    /* body text (navy)                          */
    --border        : #E1E7F0;    /* hairlines / dividers                      */

    /* ── PRIMARY (navy) scale — derived from --brand-primary (#0C1F3F) ───── */
    --primary-50 : #EDF0F5;
    --primary-100: #D4DBE6;
    --primary-200: #A9B6C9;
    --primary-300: #6F82A0;
    --primary-400: #3D5378;
    --primary     : var(--brand-primary);
    --primary-600: #0A1A35;
    --primary-700: #081428;
    --primary-800: #05101F;
    --primary-900: #000C28;

    /* ── ACCENT (sage) scale — derived from --brand-accent (#84AEA7) ─────── */
    --accent-50 : #EEF5F3;
    --accent-100: #D6E7E3;
    --accent-200: #B5D2CC;
    --accent-300: #9CC1BA;
    --accent     : var(--brand-accent);
    --accent-600: #537D76;
    --accent-700: #476C66;
    --accent-800: #3D5F59;

    /* ── NEUTRALS ─────────────────────────────────────────────────────────── */
    --surface-2 : #F1F5F9;       /* subtle raised / hover surface             */
    --surface-3 : #E9EEF4;       /* deeper fill                               */
    --text-2    : #475467;       /* secondary text                            */
    --muted     : #7A8699;       /* muted / captions                          */
    --border-2  : #C7D0DB;       /* stronger border                          */

    /* ── SEMANTIC STATE ───────────────────────────────────────────────────── */
    --success : #16A34A;
    --warning : #F59E0B;
    --danger  : #DC2626;
    --info    : var(--primary-400);
    --on-brand: #FFFFFF;         /* text on primary/accent fills              */
    --price   : var(--accent-700);

    /* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */
    --ff       : inherit;        /* keep theme's Persian webfont              */
    --fs-body  : 1.4rem;
    --lh-body  : 1.85;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi  : 600;
    --fw-bold  : 700;
    --fw-black : 800;

    /* ── RADII ────────────────────────────────────────────────────────────── */
    --r-xs  : 6px;
    --r-sm  : 10px;
    --r-md  : 14px;
    --r-lg  : 18px;
    --r-xl  : 24px;
    --r-pill: 999px;

    /* ── SHADOWS (soft, navy-tinted) ──────────────────────────────────────── */
    --sh-xs: 0 1px 2px rgba(16,42,89,.05);
    --sh-sm: 0 2px 8px rgba(16,42,89,.06);
    --sh-md: 0 8px 24px rgba(16,42,89,.08);
    --sh-lg: 0 18px 48px rgba(16,42,89,.12);
    --sh-accent : 0 8px 22px rgba(83, 125, 118, .30);
    --sh-primary: 0 8px 22px rgba(0,51,102,.28);

    /* ── MOTION ───────────────────────────────────────────────────────────── */
    --dur : .22s;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* ── LAYOUT ───────────────────────────────────────────────────────────── */
    --container : 1240px;
    --gutter    : 16px;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. RESET / NORMALISE  (light on top of legacy base.css)
   ───────────────────────────────────────────────────────────────────────── */
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }

body {

    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;

    background: var(--bg) !important;
    color: var(--text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--accent-100); color: var(--primary-700); }

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: var(--fw-bold);
    line-height: 1.35;
    letter-spacing: -.02em;
}

a { color: var(--primary); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent-600); }

p { color: var(--text-2); }

img { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2.4rem 0; }

/* Firefox / Chrome scrollbar accent */
* { scrollbar-color: var(--border-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ─────────────────────────────────────────────────────────────────────────
   3. LAYOUT PRIMITIVES
   ───────────────────────────────────────────────────────────────────────── */
/* padding-inline کانتینر باید دستِ‌کم نصفِ gutterِ ردیف باشد. قالب gutter را
   ۲.۴rem کرده ولی padding روی ۰.۷۵remِ پیش‌فرضِ بوت‌استرپ (برای gutter ۱.۵rem)
   مانده بود، پس حاشیهٔ منفیِ هر .row از لبهٔ کانتینر می‌زد بیرون: روی ۷۶۸
   پیکسل یک اسکرولِ افقیِ ۵ پیکسلی در سبد/تسویه/پنل/وبلاگ. */
.container { max-width: var(--container); padding-inline: 1.2rem; }

/* section rhythm helper */
.sec { padding-block: clamp(3.2rem, 5vw, 5.6rem); }
.sec-tight { padding-block: clamp(2rem, 3vw, 3.2rem); }

/* ─────────────────────────────────────────────────────────────────────────
   4. BUTTONS  (generic system — sections extend, never redefine colors)
   ───────────────────────────────────────────────────────────────────────── */
.btn,
button.btn,
input[type="submit"].btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: var(--fw-semi); font-size: 1.4rem; line-height: 1;
    padding: 1.15rem 2.2rem; border-radius: var(--r-md);
    border: 1px solid transparent; cursor: pointer;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                background var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primary (accent) — main call to action */
.btn-primary,
.btn-accent {
    background: var(--accent-600) !important;
    border-color: var(--accent-600) !important;
    color: var(--on-brand) !important;
    box-shadow: var(--sh-accent);
}
.btn-primary:hover,
.btn-accent:hover {
    background: var(--accent-600) !important;
    border-color: var(--accent-600) !important;
    color: var(--on-brand) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(132, 174, 167, .4);
}

/* Navy / secondary solid */
.btn-secondary,
.btn-navy,
.btn-dark {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-brand) !important;
    box-shadow: var(--sh-primary);
}
.btn-secondary:hover,
.btn-navy:hover,
.btn-dark:hover {
    background: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
    color: var(--on-brand) !important;
    transform: translateY(-2px);
}

/* Outline */
.btn-outline,
.btn-outline-primary {
    background: transparent !important;
    border-color: var(--border-2) !important;
    color: var(--primary) !important;
    box-shadow: none;
}
.btn-outline:hover,
.btn-outline-primary:hover {
    border-color: var(--accent) !important;
    color: var(--accent-600) !important;
    background: var(--accent-50) !important;
}

/* Ghost / light */
.btn-light, .btn-ghost {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.btn-light:hover, .btn-ghost:hover { background: var(--surface-3) !important; }

.btn-success { background: var(--success) !important; border-color: var(--success) !important; color:#fff !important; }
.btn-danger  { background: var(--danger)  !important; border-color: var(--danger)  !important; color:#fff !important; }

.btn-block, .btn-lg { width: 100%; }
.btn-lg { padding: 1.4rem 2.6rem; font-size: 1.5rem; }
.btn-sm { padding: .8rem 1.4rem; font-size: 1.3rem; border-radius: var(--r-sm); }
.btn-pill { border-radius: var(--r-pill); }

/* ─────────────────────────────────────────────────────────────────────────
   5. FORM CONTROLS
   ───────────────────────────────────────────────────────────────────────── */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
textarea, select {
    width: 100%;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    padding: 1.15rem 1.4rem;
    font-size: 1.4rem;
    line-height: 1.6;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control::placeholder,
input::placeholder, textarea::placeholder { color: var(--muted); }

.form-control:focus,
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(132, 174, 167, .18);
}
label { color: var(--text); font-weight: var(--fw-medium); font-size: 1.35rem; }

.field-validation-error, .text-danger { color: var(--danger) !important; font-size: 1.25rem; }
.input-validation-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.14) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   6. SURFACES / CARDS  (generic)
   ───────────────────────────────────────────────────────────────────────── */
.card, .panel, .widget, .box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
}

/* ─────────────────────────────────────────────────────────────────────────
   7. BADGES / PILLS / ALERTS
   ───────────────────────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:.4rem .9rem; border-radius: var(--r-pill); font-size:1.15rem; font-weight: var(--fw-semi); }
.badge-accent  { background: var(--accent-600);  color:#fff; }
.badge-primary { background: var(--primary); color:#fff; }
.badge-soft    { background: var(--accent-50); color: var(--accent-700); }

.alert { border-radius: var(--r-md); padding: 1.4rem 1.8rem; border: 1px solid var(--border); font-size: 1.35rem; }
.alert-success { background:#ECFDF3; border-color:#ABEFC6; color:#067647; }
.alert-danger  { background:#FEF3F2; border-color:#FECDCA; color:#B42318; }
.alert-warning { background:#FFFAEB; border-color:#FEDF89; color:#B54708; }
.alert-info    { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary-700); }

/* ─────────────────────────────────────────────────────────────────────────
   8. UTILITIES  (token-mapped versions of common legacy classes)
   ───────────────────────────────────────────────────────────────────────── */
.text-primary  { color: var(--primary) !important; }
.text-accent   { color: var(--accent-600) !important; }
.text-muted    { color: var(--muted) !important; }
.text-price    { color: var(--price) !important; font-weight: var(--fw-bold); }
.bg-surface    { background: var(--surface) !important; }
.bg-soft       { background: var(--surface-2) !important; }
.bg-primary    { background: var(--primary) !important; color:#fff !important; }
.bg-accent     { background: var(--accent-600)  !important; color:#fff !important; }
.rounded-lg    { border-radius: var(--r-lg) !important; }
.shadow-md     { box-shadow: var(--sh-md) !important; }
.divider       { height:1px; background: var(--border); border:0; }

/* ─────────────────────────────────────────────────────────────────────────
   9. LEGACY COLOR NEUTRALISE
   NOTE: intentionally NOT global — the top announcement bar keeps its own
   look. Legacy reds are removed per-section as each section is rebuilt.
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   10. ACCESSIBILITY
   ───────────────────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   11. TOKEN EXTENSION  (2026-08-11)
   Second :root block, intentionally NOT merged into the one above so the
   addition stays a clean, revertable diff. Adds only new token names —
   nothing above is overridden, renamed or removed.
   Base: html { font-size: 62.5% }  =>  1rem = 10px
   ───────────────────────────────────────────────────────────────────────── */
:root {

    /* ══ 1. TYPOGRAPHY ═══════════════════════════════════════════════════ */

    /* Font stacks. IRANYekan (7 weights, already local) is the production
       Persian family; IRANSans is the body fallback already loaded.
       Latin/numeric-only contexts get a system stack — no webfont added. */
    --ff-fa      : "IRANYekanMedium", "iransans-fa", Tahoma, sans-serif;
    --ff-display : var(--ff-fa);
    --ff-body    : var(--ff-fa);
    --ff-num     : "IRANYekanMedium", ui-monospace, "Segoe UI", Roboto, sans-serif;

    /* Modular scale, ratio ~1.2. Fluid where it earns it. */
    --fs-display : clamp(3.2rem, 1.6rem + 3.2vw, 4.8rem);
    --fs-h1      : clamp(2.6rem, 1.6rem + 2.2vw, 3.6rem);
    --fs-h2      : clamp(2.2rem, 1.5rem + 1.6vw, 3.0rem);
    --fs-h3      : clamp(1.9rem, 1.5rem + 0.9vw, 2.4rem);
    --fs-h4      : 2.0rem;
    --fs-h5      : 1.8rem;
    --fs-h6      : 1.6rem;
    --fs-body-lg : 1.6rem;
    /* --fs-body : 1.4rem  ← already defined above, left as-is */
    --fs-body-sm : 1.3rem;
    --fs-caption : 1.2rem;

    /* Line heights — Persian needs more leading than Latin at the same size */
    --lh-display : 1.15;
    --lh-heading : 1.35;
    /* --lh-body : 1.85  ← already defined above, left as-is */
    --lh-snug    : 1.6;
    --lh-none    : 1;

    /* Letter spacing. Persian is cursive: negative tracking degrades the
       joins. Zero for Persian; the negative values stay Latin-only. */
    --ls-fa      : 0;
    --ls-latin   : -.01em;

    /* ══ 2. SPACING — 4px grid ═══════════════════════════════════════════ */
    --space-1 : 0.4rem;   /*  4px */
    --space-2 : 0.8rem;   /*  8px */
    --space-3 : 1.2rem;   /* 12px */
    --space-4 : 1.6rem;   /* 16px */
    --space-5 : 2.4rem;   /* 24px */
    --space-6 : 3.2rem;   /* 32px */
    --space-7 : 4.0rem;   /* 40px */
    --space-8 : 4.8rem;   /* 48px */
    --space-9 : 6.4rem;   /* 64px */
    --space-10: 8.0rem;   /* 80px */
    --space-11: 9.6rem;   /* 96px */
    --space-12: 12.8rem;  /* 128px */

    /* ══ 3. RESPONSIVE LAYOUT ════════════════════════════════════════════ */
    /* --container : 1240px   ← already defined, left as-is */
    /* --gutter    : 16px     ← already defined, left as-is */
    --container-narrow : 880px;   /* checkout, auth, article body */
    --container-wide   : 1400px;  /* full-bleed merchandising rows */

    --gutter-x : var(--space-4);  /* 16px mobile; widened at md below */
    --gutter-y : var(--space-5);

    --sec-y    : var(--space-6);  /* section rhythm, mobile */
    --sec-y-sm : var(--space-5);
    --block-y  : var(--space-5);  /* gap between blocks inside a section */

    --bp-sm : 576px;
    --bp-md : 768px;
    --bp-lg : 992px;
    --bp-xl : 1200px;
    --bp-xxl: 1400px;

    /* ══ 4. COMPONENT SEMANTIC TOKENS ════════════════════════════════════ */

    /* Card */
    --card-bg      : var(--surface);
    --card-border  : var(--border);
    --card-radius  : var(--r-lg);
    --card-pad     : var(--space-5);
    --card-pad-sm  : var(--space-4);
    --card-shadow  : var(--sh-xs);
    --card-shadow-h: var(--sh-md);

    /* Input */
    --input-bg      : var(--surface);
    --input-border  : var(--border-2);
    --input-radius  : var(--r-sm);
    --input-pad-y   : 1.2rem;
    --input-pad-x   : var(--space-4);
    --input-fs      : var(--fs-body);
    --input-h       : 4.4rem;   /* 44px — touch target floor */
    --input-focus   : var(--primary);
    --input-focus-ring : 0 0 0 3px rgba(51,124,253,.20);

    /* Button */
    --btn-radius   : var(--r-md);
    --btn-pad-y    : 1.2rem;
    --btn-pad-x    : var(--space-5);
    --btn-fs       : var(--fs-body);
    --btn-h        : 4.4rem;
    --btn-h-sm     : 3.6rem;
    --btn-gap      : var(--space-2);
    /* Fills that carry white text must use the AA-safe steps, not the raw brand */
    --btn-primary-bg   : var(--primary-600);   /* #1E63E0 — 5.36:1 on white */
    --btn-primary-bg-h : var(--primary-700);
    --btn-accent-bg    : var(--accent);        /* #FF6700 */
    --btn-accent-fg    : var(--navy);          /* navy on orange — 5.60:1 */
    --btn-accent-bg-h  : var(--accent-600);

    /* Navigation */
    --nav-h        : 6.4rem;
    --nav-h-mobile : 5.6rem;
    --nav-bg       : var(--surface);
    --nav-fg       : var(--navy);
    --nav-fg-muted : var(--text-2);
    --nav-active   : var(--primary);
    --nav-border   : var(--border);
    --nav-z        : 1000;

    /* Product */
    --product-radius     : var(--r-lg);
    --product-pad        : var(--space-4);
    --product-gap        : var(--space-4);
    --product-img-ratio  : 1 / 1;
    --product-title-fs   : var(--fs-body);
    --product-price-fs   : var(--fs-body-lg);
    --product-price-fg   : var(--price);        /* accent-700, AA on white */
    --product-was-fg     : var(--muted);
    --product-badge-bg   : var(--accent-50);
    --product-badge-fg   : var(--accent-700);
    --product-oos-fg     : var(--muted);

    /* Checkout */
    --checkout-max     : var(--container-narrow);
    --checkout-gap     : var(--space-6);
    --checkout-step-on : var(--primary);
    --checkout-step-off: var(--border-2);
    --checkout-step-done : var(--success);
    --checkout-summary-bg : var(--surface-2);
    --checkout-cta-bg  : var(--btn-accent-bg);  /* orange = the one paid action */
    --checkout-cta-fg  : var(--btn-accent-fg);

    /* Modal */
    --modal-bg      : var(--surface);
    --modal-radius  : var(--r-xl);
    --modal-pad     : var(--space-5);
    --modal-max     : 56rem;
    --modal-shadow  : var(--sh-lg);
    --modal-overlay : rgba(12,31,63,.48);
    --modal-z       : 1050;

    /* Dropdown */
    --dd-bg      : var(--surface);
    --dd-border  : var(--border);
    --dd-radius  : var(--r-md);
    --dd-pad     : var(--space-2);
    --dd-item-pad: 1.0rem var(--space-3);
    --dd-shadow  : var(--sh-md);
    --dd-hover   : var(--surface-2);
    --dd-z       : 1010;

    /* ══ 5. ACCESSIBILITY ════════════════════════════════════════════════ */
    /* Focus moves to primary blue — it is the interactive colour under the
       agreed semantics, and it reads on both light and accent surfaces. */
    --focus-color   : var(--primary);
    --focus-width   : 2px;
    --focus-offset  : 2px;
    --focus-ring    : 0 0 0 3px rgba(51,124,253,.35);
    --focus-on-dark : #FFFFFF;

    --disabled-bg      : var(--surface-3);
    --disabled-fg      : var(--muted);
    --disabled-border  : var(--border);
    --disabled-opacity : .55;

    /* Contrast-safe pairs. Use these wherever text sits on colour. */
    --on-primary   : #FFFFFF;          /* only over --primary-600 or darker */
    --on-accent    : var(--navy);      /* white on #FF6700 fails AA (2.92:1) */
    --text-link    : var(--primary-600);  /* 5.36:1 — the raw #337CFD is 3.86 */
    --text-success : #0F7A38;
    --text-warning : #8A5300;
    --text-danger  : var(--danger);
    --text-muted-aa: #667085;          /* --muted #7A8699 is 3.69:1, large-only */
    --hit-min      : 4.4rem;           /* 44px minimum touch target */

    /* ══ 6. MOTION — same philosophy, just named ═════════════════════════ */
    /* --dur  : .22s   ← already defined, left as-is (stays the default) */
    /* --ease : cubic-bezier(.4,0,.2,1)  ← already defined, left as-is */
    --dur-fast : .12s;   /* hover, colour, focus ring */
    --dur-slow : .32s;   /* overlays, drawers, accordions */
    --ease-out : cubic-bezier(.16,1,.3,1);
    --lift     : -2px;   /* the single hover translate used across the theme */
}

/* Responsive token shifts — the only media queries this extension adds. */
@media (min-width: 768px) {
    :root {
        --gutter-x : var(--space-5);
        --sec-y    : var(--space-8);
        --block-y  : var(--space-6);
        --card-pad : var(--space-5);
    }
}
@media (min-width: 1200px) {
    :root {
        --gutter-x : var(--space-6);
        --sec-y    : var(--space-9);
        --nav-h    : 7.2rem;
    }
}

/* Hook the tokens into Bootstrap 5.0.2's grid — --bs-gutter-x/y are the two
   spacing vars Bootstrap 5.0.2 actually reads at runtime. */
.row { --bs-gutter-x: var(--gutter-x); --bs-gutter-y: 0; }

.page-shell { flex: 1 0 auto; }

.owl-carousel:not(.owl-loaded) {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: var(--pre-gap, 1.4rem);
    --pre-items: 4;
}
.owl-carousel:not(.owl-loaded) > * {
    flex: 0 0 calc((100% - (var(--pre-items) - 1) * var(--pre-gap, 1.4rem)) / var(--pre-items));
    min-width: 0;
}

/* `--pre-gap` must carry a unit: the flex-basis below is `calc(100% - n * var(--pre-gap))`,
   and subtracting a unitless 0 from a percentage is invalid, which drops the whole
   `flex` declaration back to `0 1 auto` — two slides then sit side by side at half
   width until owl initialises and snaps to one. */
.mainslider-box:not(.owl-loaded) { --pre-items: 1; --pre-gap: 0px; }

.product-block-carousel:not(.owl-loaded) { --pre-items: 2; }
@media (min-width: 576px)  { .product-block-carousel:not(.owl-loaded) { --pre-items: 3; } }
@media (min-width: 992px)  { .product-block-carousel:not(.owl-loaded) { --pre-items: 4; } }
@media (min-width: 1200px) { .product-block-carousel:not(.owl-loaded) { --pre-items: 6; } }

.home-offers-products:not(.owl-loaded) { --pre-items: 1; }
@media (min-width: 576px) { .home-offers-products:not(.owl-loaded) { --pre-items: 2; } }
@media (min-width: 992px) { .home-offers-products:not(.owl-loaded) { --pre-items: 3; } }

.article-list:not(.owl-loaded) { --pre-items: 2; --pre-gap: 3rem; }
@media (min-width: 1000px) { .article-list:not(.owl-loaded) { --pre-items: 3; } }
@media (min-width: 1300px) { .article-list:not(.owl-loaded) { --pre-items: 4; } }

.btn { position: relative; overflow: hidden; }

.tm-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255,255,255,.45);
    pointer-events: none;
    animation: tm-ripple .6s var(--ease, ease);
}
@keyframes tm-ripple { to { transform: scale(2.6); opacity: 0; } }