/* ============================================================
   NEOYADAK — Premium Theme Layer (2026)
   Standalone stylesheet, loaded after main/styles/custom.
   Prefix: .ny-*  to avoid clashing with existing theme classes.
   ============================================================ */

/* ---------- Yekan Bakh FaNum (self-hosted, woff2 + woff) ----------
   Paths are relative to this file (assets/css/neoyadak.css).
   File casing matches the actual files on disk so this works on
   case-sensitive filesystems (Linux production). */
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('../fonts/yekanbakh/Webfonts/fonts/woff2/YekanBakhFaNum-Thin.woff2') format('woff2'),
         url('../fonts/yekanbakh/Webfonts/fonts/woff/YekanBakhFaNum-Thin.woff') format('woff');
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/yekanbakh/Webfonts/fonts/woff2/YekanBakhFaNum-Light.woff2') format('woff2'),
         url('../fonts/yekanbakh/Webfonts/fonts/woff/YekanBakhFaNum-Light.woff') format('woff');
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/yekanbakh/Webfonts/fonts/woff2/YekanBakhFaNum-Regular.woff2') format('woff2'),
         url('../fonts/yekanbakh/Webfonts/fonts/woff/YekanBakhFaNum-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/yekanbakh/Webfonts/fonts/woff2/YekanBakhFaNum-SemiBold.woff2') format('woff2'),
         url('../fonts/yekanbakh/Webfonts/fonts/woff/YekanBakhFaNum-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/yekanbakh/Webfonts/fonts/woff2/YekanBakhFaNum-SemiBold.woff2') format('woff2'),
         url('../fonts/yekanbakh/Webfonts/fonts/woff/YekanBakhFaNum-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/yekanbakh/Webfonts/fonts/woff2/YekanBakhFaNum-Bold.woff2') format('woff2'),
         url('../fonts/yekanbakh/Webfonts/fonts/woff/YekanBakhFaNum-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/yekanbakh/Webfonts/fonts/woff2/YekanBakhFaNum-ExtraBold.woff2') format('woff2'),
         url('../fonts/yekanbakh/Webfonts/fonts/woff/YekanBakhFaNum-ExtraBold.woff') format('woff');
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/yekanbakh/Webfonts/fonts/woff2/YekanBakhFaNum-Black.woff2') format('woff2'),
         url('../fonts/yekanbakh/Webfonts/fonts/woff/YekanBakhFaNum-Black.woff') format('woff');
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 950;
    font-display: swap;
    src: url('../fonts/yekanbakh/Webfonts/fonts/woff2/YekanBakhFaNum-ExtraBlack.woff2') format('woff2'),
         url('../fonts/yekanbakh/Webfonts/fonts/woff/YekanBakhFaNum-ExtraBlack.woff') format('woff');
}

/* ---------- Design tokens ---------- */
:root {
    /* Brand palette */
    --ny-red: #E30613;
    --ny-red-dark: #B0040F;
    --ny-red-glow: rgba(227, 6, 19, 0.18);
    --ny-charcoal: #1C1C1E;
    --ny-graphite: #2A2A2C;
    --ny-onyx: #0F0F10;
    --ny-steel: #8C8C8E;
    --ny-silver: #E5E5E7;
    --ny-fog: #F5F5F7;
    --ny-white: #FFFFFF;

    /* Functional */
    --ny-success: #16A34A;
    --ny-warning: #F59E0B;
    --ny-info: #0EA5E9;

    /* Surface levels */
    --ny-surface-0: #FFFFFF;
    --ny-surface-1: #FAFAFB;
    --ny-surface-2: #F5F5F7;
    --ny-surface-dark-0: #0F0F10;
    --ny-surface-dark-1: #18181B;
    --ny-surface-dark-2: #27272A;

    /* Border */
    --ny-border-soft: rgba(15, 15, 16, 0.08);
    --ny-border-mid: rgba(15, 15, 16, 0.14);
    --ny-border-on-dark: rgba(255, 255, 255, 0.10);

    /* Spacing scale */
    --ny-sp-1: 4px;
    --ny-sp-2: 8px;
    --ny-sp-3: 12px;
    --ny-sp-4: 16px;
    --ny-sp-5: 24px;
    --ny-sp-6: 32px;
    --ny-sp-7: 48px;
    --ny-sp-8: 64px;
    --ny-sp-9: 96px;

    /* Radius */
    --ny-r-sm: 6px;
    --ny-r-md: 10px;
    --ny-r-lg: 16px;
    --ny-r-xl: 24px;
    --ny-r-pill: 999px;

    /* Shadow */
    --ny-shadow-sm: 0 1px 2px rgba(15, 15, 16, 0.04), 0 1px 1px rgba(15, 15, 16, 0.02);
    --ny-shadow-md: 0 4px 12px rgba(15, 15, 16, 0.06), 0 2px 4px rgba(15, 15, 16, 0.04);
    --ny-shadow-lg: 0 16px 40px rgba(15, 15, 16, 0.10), 0 4px 12px rgba(15, 15, 16, 0.06);
    --ny-shadow-red: 0 10px 30px rgba(227, 6, 19, 0.22);

    /* Type */
    --ny-font: 'Yekan Bakh FaNum', 'Vazirmatn', 'Dana FaNum', 'IRANSansX', 'Tahoma', sans-serif;
    --ny-font-num: 'Yekan Bakh FaNum', 'Vazirmatn', sans-serif;

    /* Motion */
    --ny-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ny-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ny-dur-fast: 160ms;
    --ny-dur: 240ms;
    --ny-dur-slow: 480ms;
}

/* ---------- Global typography upgrade ----------
   Force Yekan Bakh FaNum on EVERY element so legacy inline font
   declarations (font-family: iranyekan, etc.) don't bleed through. */
html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, div, label, em, strong, small,
.product-title,
.product-card .product-title a,
.section-title h2,
.section-title h3,
.section-title h4,
.menu li a,
.main-menu .menu li a,
.btn, button, input, select, textarea, optgroup,
.dropdown-menu .dropdown-item,
.modal-content, .modal-title, .modal-body,
.toast, .toast-message,
.swal2-popup, .swal2-title, .swal2-content,
.owl-carousel,
.nav-link, .nav-item,
.list-item, .list-item a,
.post-title a, .post-date,
.ny-fa-num {
    font-family: var(--ny-font) !important;
}

/* Numeric clusters (prices, timers, codes) use the same family +
   tabular numerals so digits never shift width. */
.product-price, .product-price-del,
.discount, .discount span,
.discount-timer .timer,
.ny-bento__count,
.promotion-category-quantity,
.ny-fa-num {
    font-family: var(--ny-font-num) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--ny-charcoal);
}

.ny-fa-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ============================================================
   1) TOP STRIP
   ============================================================ */
.ny-topstrip {
    display: block;
    width: 100%;
    background: var(--ny-charcoal);
    color: var(--ny-silver);
    font-size: 13px;
    line-height: 1.4;
    border-bottom: 1px solid var(--ny-border-on-dark);
    box-sizing: border-box;
}

.ny-topstrip__wrap {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 16px;
    box-sizing: border-box;
}

.ny-topstrip__inner {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ny-topstrip__item {
    display: inline-flex;
    align-items: center;
    gap: var(--ny-sp-2);
    color: var(--ny-silver);
    opacity: 0.9;
    padding: 0 var(--ny-sp-5);
    position: relative;
    white-space: nowrap;
    flex: 0 0 auto;
}

.ny-topstrip__item > span {
    white-space: nowrap;
}

.ny-topstrip__item + .ny-topstrip__item::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: var(--ny-border-on-dark);
}

[dir="ltr"] .ny-topstrip__item + .ny-topstrip__item::before {
    right: auto;
    left: 0;
}

.ny-topstrip__item i {
    color: var(--ny-red);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .ny-topstrip {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ny-topstrip::-webkit-scrollbar {
        display: none;
    }

    .ny-topstrip__wrap {
        max-width: none;
        width: max-content;
        min-width: 100%;
        padding: 10px 0;
    }

    .ny-topstrip__inner {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: max-content;
    }

    .ny-topstrip__item {
        padding: 0 var(--ny-sp-4);
    }
}

/* ============================================================
   2) GARAGE CHIP (header)
   ============================================================ */
.ny-garage-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ny-sp-2);
    background: var(--ny-charcoal);
    color: var(--ny-white);
    padding: 8px 14px 8px 12px;
    border-radius: var(--ny-r-pill);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--ny-charcoal);
    cursor: pointer;
    transition: all var(--ny-dur) var(--ny-ease);
    text-decoration: none;
    line-height: 1;
}

.ny-garage-chip:hover {
    background: var(--ny-graphite);
    color: var(--ny-white);
    transform: translateY(-1px);
    box-shadow: var(--ny-shadow-md);
    text-decoration: none;
}

.ny-garage-chip i {
    font-size: 18px;
    color: var(--ny-red);
}

.ny-garage-chip--empty {
    background: transparent;
    color: var(--ny-charcoal);
    border-color: var(--ny-border-mid);
}

.ny-garage-chip--empty:hover {
    background: var(--ny-charcoal);
    color: var(--ny-white);
}

.ny-garage-chip__edit {
    margin-right: 6px;
    opacity: 0.6;
    font-size: 14px;
}

/* Sticky persistent bar (used on all pages after vehicle selected) */
.ny-active-vehicle-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--ny-charcoal);
    color: var(--ny-white);
    padding: 8px 0;
    font-size: 13px;
    border-top: 2px solid var(--ny-red);
    display: none;
}

.ny-active-vehicle-bar.is-active {
    display: block;
}

.ny-active-vehicle-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ny-sp-3);
}

.ny-active-vehicle-bar__label {
    display: inline-flex;
    align-items: center;
    gap: var(--ny-sp-2);
}

.ny-active-vehicle-bar__label i {
    color: var(--ny-red);
    font-size: 18px;
}

.ny-active-vehicle-bar__actions a {
    color: var(--ny-silver);
    text-decoration: none;
    font-size: 12px;
    margin-right: var(--ny-sp-3);
}

.ny-active-vehicle-bar__actions a:hover {
    color: var(--ny-white);
}

/* ============================================================
   3) HERO — editorial dark with selector
   ============================================================ */
.ny-hero {
    position: relative;
    background: var(--ny-onyx);
    color: var(--ny-white);
    border-radius: var(--ny-r-xl);
    margin: var(--ny-sp-5) 0 var(--ny-sp-7);
    padding: var(--ny-sp-8) var(--ny-sp-7);
    overflow: hidden;
    isolation: isolate;
}

.ny-hero::before {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(60% 60% at 25% 30%, rgba(227, 6, 19, 0.22) 0%, transparent 60%),
        radial-gradient(50% 50% at 80% 80%, rgba(140, 140, 142, 0.10) 0%, transparent 60%);
    z-index: -2;
    pointer-events: none;
}

.ny-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.5;
    z-index: -1;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.ny-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ny-sp-7);
    align-items: center;
    position: relative;
}

.ny-hero__content {
    max-width: 460px;
}

.ny-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--ny-sp-2);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ny-red);
    background: rgba(227, 6, 19, 0.10);
    padding: 6px 12px;
    border-radius: var(--ny-r-pill);
    margin-bottom: var(--ny-sp-4);
    border: 1px solid rgba(227, 6, 19, 0.25);
}

.ny-hero__eyebrow i {
    font-size: 14px;
}

.ny-hero__title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 var(--ny-sp-4) 0;
    letter-spacing: -0.01em;
}

.ny-hero__title em {
    color: var(--ny-red);
    font-style: normal;
}

.ny-hero__lede {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ny-silver);
    opacity: 0.85;
    margin: 0 0 var(--ny-sp-5) 0;
}

.ny-hero__usp {
    display: flex;
    flex-direction: column;
    gap: var(--ny-sp-3);
    margin-top: var(--ny-sp-5);
}

.ny-hero__usp-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ny-sp-3);
    color: var(--ny-silver);
    font-size: 14px;
}

.ny-hero__usp-item i {
    color: var(--ny-red);
    font-size: 20px;
    width: 28px;
    text-align: center;
}

/* Hero visual side */
.ny-hero__visual {
    position: relative;
    text-align: center;
}

.ny-hero__visual img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
}

/* ============================================================
   4) VEHICLE SELECTOR CARD
   ============================================================ */
.ny-vselector {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-5);
    color: var(--ny-white);
}

.ny-vselector__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ny-sp-4);
}

.ny-vselector__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--ny-sp-2);
}

.ny-vselector__title i {
    color: var(--ny-red);
    font-size: 20px;
}

.ny-vselector__steps {
    display: flex;
    gap: 6px;
}

.ny-vselector__step-dot {
    width: 22px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    transition: background var(--ny-dur) var(--ny-ease);
}

.ny-vselector__step-dot.is-done {
    background: var(--ny-red);
}

.ny-vselector__step-dot.is-active {
    background: var(--ny-white);
}

.ny-vselector__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ny-sp-2);
    margin-bottom: var(--ny-sp-4);
    font-size: 12px;
    color: var(--ny-silver);
    min-height: 18px;
}

.ny-vselector__breadcrumb span {
    color: var(--ny-white);
    font-weight: 500;
}

.ny-vselector__breadcrumb .sep {
    color: rgba(255, 255, 255, 0.3);
}

/* Brand grid (step 1) */
.ny-brand-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--ny-sp-2);
}

.ny-brand-tile {
    aspect-ratio: 1 / 1;
    /* Soft silver-to-white gradient — keeps the unified theme even when logos are colorful */
    background: linear-gradient(160deg, #ffffff 0%, #f3f5f8 45%, #e3e7ed 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--ny-r-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ny-charcoal);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ny-dur) var(--ny-ease);
    padding: var(--ny-sp-2);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 15, 16, 0.18);
    overflow: hidden;
    position: relative;
}

.ny-brand-tile::after {
    /* Subtle highlight sheen on the top half */
    content: '';
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.ny-brand-tile:hover {
    background: linear-gradient(160deg, #ffffff 0%, #ffffff 50%, #e7ecf2 100%);
    border-color: var(--ny-red);
    color: var(--ny-charcoal);
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 16px rgba(227, 6, 19, 0.18);
}

.ny-brand-tile.is-active {
    background: linear-gradient(160deg, #ffffff 0%, #ffe9eb 100%);
    border-color: var(--ny-red);
    color: var(--ny-charcoal);
}

.ny-brand-tile.is-active::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ny-red);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.18);
}

.ny-brand-tile__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px;
}

.ny-brand-tile__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Slight grayscale flatten so the row reads as one family rather than ten clashing palettes */
    filter: grayscale(0.15) contrast(1.02);
    transition: filter var(--ny-dur) var(--ny-ease), transform var(--ny-dur) var(--ny-ease);
}

.ny-brand-tile:hover .ny-brand-tile__logo img,
.ny-brand-tile.is-active .ny-brand-tile__logo img {
    filter: grayscale(0) contrast(1.05);
    transform: scale(1.04);
}

.ny-brand-tile.is-broken .ny-brand-tile__logo {
    /* If the remote image fails to load, JS strips the <img>; show the brand name only. */
    display: none;
}

.ny-brand-tile__mark {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ny-charcoal);
    line-height: 1;
    /* Silver chrome effect for tiles without a logo */
    background: linear-gradient(180deg, #4a4a4d 0%, #1c1c1e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.ny-brand-tile__name {
    font-size: 11px;
    font-weight: 600;
    color: var(--ny-charcoal);
    line-height: 1.2;
    /* Keep the name from pushing the logo around on long Persian names */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ny-brand-tile.has-logo .ny-brand-tile__name {
    font-size: 10px;
    color: var(--ny-steel);
    font-weight: 500;
}

/* Generic step list (for model / year / engine) */
.ny-vselector__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ny-sp-2);
    max-height: 280px;
    overflow-y: auto;
    padding: 2px;
}

.ny-vselector__list-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ny-r-md);
    padding: 10px 12px;
    color: var(--ny-white);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--ny-dur) var(--ny-ease);
    text-align: center;
}

.ny-vselector__list-item:hover {
    background: rgba(227, 6, 19, 0.12);
    border-color: var(--ny-red);
}

/* Foot links (VIN, skip) */
.ny-vselector__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--ny-sp-4);
    padding-top: var(--ny-sp-4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
}

.ny-vselector__foot a {
    color: var(--ny-silver);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--ny-dur) var(--ny-ease);
}

.ny-vselector__foot a:hover {
    color: var(--ny-red);
}

.ny-vselector__back {
    background: none;
    border: none;
    color: var(--ny-silver);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.ny-vselector__back:hover {
    color: var(--ny-red);
}

.ny-vselector__back[hidden] {
    display: none;
}

/* Hero responsive */
@media (max-width: 991px) {
    .ny-hero {
        padding: var(--ny-sp-6) var(--ny-sp-5);
    }

    .ny-hero__grid {
        grid-template-columns: 1fr;
        gap: var(--ny-sp-6);
    }

    .ny-hero__visual {
        order: -1;
        max-height: 200px;
        overflow: hidden;
    }
}

@media (max-width: 575px) {
    .ny-brand-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .ny-vselector__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   5) BENTO CATEGORY GRID
   ============================================================ */
.ny-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px);
    gap: var(--ny-sp-3);
    margin-bottom: var(--ny-sp-7);
}

.ny-bento__tile {
    position: relative;
    background: var(--ny-surface-2);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-5);
    overflow: hidden;
    text-decoration: none;
    color: var(--ny-charcoal);
    transition: all var(--ny-dur) var(--ny-ease-out);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    isolation: isolate;
}

.ny-bento__tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--ny-shadow-lg);
    border-color: var(--ny-charcoal);
    color: var(--ny-charcoal);
    text-decoration: none;
}

.ny-bento__tile--big {
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(135deg, var(--ny-charcoal) 0%, var(--ny-onyx) 100%);
    color: var(--ny-white);
    border-color: transparent;
}

.ny-bento__tile--big:hover {
    color: var(--ny-white);
    border-color: var(--ny-red);
}

.ny-bento__tile--big::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(227, 6, 19, 0.25), transparent 50%);
    z-index: -1;
}

.ny-bento__tile--accent {
    background: var(--ny-red);
    color: var(--ny-white);
}

.ny-bento__tile--accent:hover {
    color: var(--ny-white);
    background: var(--ny-red-dark);
}

.ny-bento__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ny-bento__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.ny-bento__tile--big .ny-bento__title {
    font-size: 28px;
}

.ny-bento__count {
    font-size: 12px;
    opacity: 0.65;
    margin-top: var(--ny-sp-1);
}

.ny-bento__icon {
    font-size: 36px;
    opacity: 0.4;
    transition: all var(--ny-dur) var(--ny-ease);
}

.ny-bento__tile--big .ny-bento__icon {
    font-size: 64px;
    opacity: 0.25;
}

.ny-bento__tile:hover .ny-bento__icon {
    opacity: 0.8;
    transform: scale(1.05) rotate(-3deg);
    color: var(--ny-red);
}

.ny-bento__tile--big:hover .ny-bento__icon,
.ny-bento__tile--accent:hover .ny-bento__icon {
    color: var(--ny-white);
}

.ny-bento__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transform: translateX(8px);
    transition: all var(--ny-dur) var(--ny-ease);
}

.ny-bento__tile:hover .ny-bento__cta {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 991px) {
    .ny-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 180px);
    }

    .ny-bento__tile--big {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 575px) {
    .ny-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: 140px;
    }

    .ny-bento__tile--big {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* ============================================================
   6) AUTHENTICITY PILLAR
   ============================================================ */
.ny-authenticity {
    background: linear-gradient(135deg, var(--ny-charcoal) 0%, var(--ny-onyx) 100%);
    color: var(--ny-white);
    border-radius: var(--ny-r-xl);
    padding: var(--ny-sp-8) var(--ny-sp-7);
    margin-bottom: var(--ny-sp-7);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ny-authenticity::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40% 50% at 90% 10%, rgba(227, 6, 19, 0.18), transparent 60%),
        radial-gradient(30% 40% at 10% 90%, rgba(140, 140, 142, 0.10), transparent 60%);
    z-index: -1;
}

.ny-authenticity__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ny-sp-7);
    align-items: center;
}

.ny-authenticity__copy h2 {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 var(--ny-sp-3) 0;
}

.ny-authenticity__copy h2 em {
    color: var(--ny-red);
    font-style: normal;
}

.ny-authenticity__copy p {
    color: var(--ny-silver);
    line-height: 1.8;
    font-size: 15px;
    margin: 0 0 var(--ny-sp-5) 0;
}

.ny-authenticity__points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ny-sp-3);
}

.ny-authenticity__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--ny-sp-3);
    color: var(--ny-silver);
    font-size: 14px;
    line-height: 1.6;
}

.ny-authenticity__points li i {
    color: var(--ny-red);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Verify card */
.ny-verify {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-6);
}

.ny-verify__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ny-sp-2);
    margin-bottom: var(--ny-sp-5);
    background: rgba(0, 0, 0, 0.3);
    padding: 4px;
    border-radius: var(--ny-r-pill);
}

.ny-verify__tab {
    padding: 10px;
    border-radius: var(--ny-r-pill);
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--ny-silver);
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    transition: all var(--ny-dur) var(--ny-ease);
}

.ny-verify__tab.is-active {
    background: var(--ny-red);
    color: var(--ny-white);
}

.ny-verify__scan {
    aspect-ratio: 4 / 3;
    border: 2px dashed rgba(255, 255, 255, 0.20);
    border-radius: var(--ny-r-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ny-sp-2);
    color: var(--ny-silver);
}

.ny-verify__scan i {
    font-size: 56px;
    color: var(--ny-red);
}

.ny-verify__scan p {
    margin: 0;
    font-size: 14px;
}

.ny-verify__form {
    display: flex;
    flex-direction: column;
    gap: var(--ny-sp-3);
}

.ny-verify__label {
    font-size: 13px;
    color: var(--ny-silver);
    margin-bottom: 0;
}

.ny-verify__input {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ny-r-md);
    padding: 14px 16px;
    color: var(--ny-white);
    font-family: var(--ny-font);
    font-size: 16px;
    letter-spacing: 0.06em;
    text-align: center;
    transition: border-color var(--ny-dur) var(--ny-ease);
}

.ny-verify__input::placeholder {
    color: rgba(255, 255, 255, 0.30);
    letter-spacing: 0.04em;
}

.ny-verify__input:focus {
    outline: none;
    border-color: var(--ny-red);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.15);
}

.ny-btn-primary {
    background: var(--ny-red);
    color: var(--ny-white);
    border: none;
    padding: 14px 24px;
    border-radius: var(--ny-r-md);
    font-family: var(--ny-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ny-dur) var(--ny-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ny-sp-2);
    text-decoration: none;
    line-height: 1.2;
}

.ny-btn-primary:hover {
    background: var(--ny-red-dark);
    color: var(--ny-white);
    transform: translateY(-1px);
    box-shadow: var(--ny-shadow-red);
    text-decoration: none;
}

.ny-btn-ghost {
    background: transparent;
    color: var(--ny-white);
    border: 1px solid rgba(255, 255, 255, 0.20);
    padding: 14px 24px;
    border-radius: var(--ny-r-md);
    font-family: var(--ny-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ny-dur) var(--ny-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ny-sp-2);
    text-decoration: none;
}

.ny-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--ny-white);
    color: var(--ny-white);
    text-decoration: none;
}

@media (max-width: 991px) {
    .ny-authenticity {
        padding: var(--ny-sp-6) var(--ny-sp-5);
    }

    .ny-authenticity__grid {
        grid-template-columns: 1fr;
        gap: var(--ny-sp-5);
    }
}

/* ============================================================
   7) USP STRIP
   ============================================================ */
.ny-usp {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ny-sp-4);
    background: var(--ny-fog);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-5);
    margin-bottom: var(--ny-sp-7);
}

.ny-usp__item {
    display: flex;
    align-items: center;
    gap: var(--ny-sp-3);
    padding: var(--ny-sp-2) 0;
}

.ny-usp__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ny-r-md);
    background: var(--ny-white);
    color: var(--ny-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: var(--ny-shadow-sm);
}

.ny-usp__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ny-charcoal);
    margin: 0;
    line-height: 1.3;
}

.ny-usp__desc {
    font-size: 12px;
    color: var(--ny-steel);
    margin: 2px 0 0 0;
    line-height: 1.4;
}

@media (max-width: 991px) {
    .ny-usp {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .ny-usp {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   8) BRAND STRIP (car brands row)
   ============================================================ */
.ny-brandstrip {
    background: var(--ny-white);
    border-top: 1px solid var(--ny-border-soft);
    border-bottom: 1px solid var(--ny-border-soft);
    padding: var(--ny-sp-4) 0;
    margin-bottom: var(--ny-sp-7);
}

.ny-brandstrip__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ny-sp-5);
    align-items: center;
    justify-content: center;
}

.ny-brandstrip__item {
    color: var(--ny-steel);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--ny-r-pill);
    text-decoration: none;
    transition: all var(--ny-dur) var(--ny-ease);
    opacity: 0.7;
    filter: grayscale(1);
}

.ny-brandstrip__item:hover {
    color: var(--ny-charcoal);
    opacity: 1;
    filter: grayscale(0);
    background: var(--ny-fog);
    text-decoration: none;
}

/* ============================================================
   9) SECTION TITLES (override existing)
   ============================================================ */
.ny-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ny-sp-5);
    padding-bottom: var(--ny-sp-3);
    border-bottom: 1px solid var(--ny-border-soft);
}

.ny-section-title h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--ny-charcoal);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--ny-sp-2);
}

.ny-section-title h2 i {
    color: var(--ny-red);
}

.ny-section-title__link {
    font-size: 13px;
    color: var(--ny-steel);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--ny-dur) var(--ny-ease);
}

.ny-section-title__link:hover {
    color: var(--ny-red);
    text-decoration: none;
}

/* ============================================================
   10) PRODUCT CARD UPGRADE (additive over existing .product-card)
   ============================================================ */
.product-carousel .product-card,
.product-card {
    border-radius: var(--ny-r-md) !important;
    border: 1px solid var(--ny-border-soft) !important;
    transition: all var(--ny-dur) var(--ny-ease) !important;
    background: var(--ny-white);
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ny-shadow-lg);
    border-color: var(--ny-charcoal) !important;
}

.product-card .discount,
.product-card .discount span {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
    border-radius: var(--ny-r-sm) !important;
    font-weight: 600;
    font-size: 11px;
}

.product-card .product-price {
    color: var(--ny-charcoal) !important;
    font-weight: 700 !important;
    font-size: 15px;
}

.product-card .product-price-del {
    color: var(--ny-steel) !important;
    font-size: 12px;
}

.product-card .product-title a {
    color: var(--ny-charcoal) !important;
    font-weight: 500;
}

.product-card .product-title a:hover {
    color: var(--ny-red) !important;
}

/* ============================================================
   11) TIMER (discount countdown)
   ============================================================ */
.ny-timer-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ny-sp-3) var(--ny-sp-4);
    background: linear-gradient(90deg, var(--ny-charcoal), var(--ny-graphite));
    color: var(--ny-white);
    border-radius: var(--ny-r-md);
    margin-bottom: var(--ny-sp-4);
}

.ny-timer-wrap__label {
    display: inline-flex;
    align-items: center;
    gap: var(--ny-sp-2);
    font-size: 14px;
    font-weight: 500;
}

.ny-timer-wrap__label i {
    color: var(--ny-red);
    font-size: 18px;
}

.ny-timer-wrap__counter {
    font-family: var(--ny-font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
}

/* ============================================================
   12) FOOTER TWEAKS (additive)
   ============================================================ */
.main-footer {
    background: var(--ny-charcoal) !important;
    color: var(--ny-silver);
}

.main-footer .card-title,
.main-footer h3 {
    color: var(--ny-white) !important;
    font-weight: 600;
}

.main-footer .footer-menu li a {
    color: var(--ny-silver) !important;
    transition: color var(--ny-dur) var(--ny-ease);
}

.main-footer .footer-menu li a:hover {
    color: var(--ny-red) !important;
}

.main-footer .copyright {
    background: var(--ny-onyx);
    color: var(--ny-steel);
    border-top: 1px solid var(--ny-border-on-dark);
}

/* ============================================================
   12.5) FITMENT BADGE on product cards
   ============================================================ */
.ny-fitment-badge {
    position: absolute;
    top: var(--ny-sp-3);
    inset-inline-start: var(--ny-sp-3);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: var(--ny-r-pill);
    font-size: 11px;
    font-weight: 600;
    background: var(--ny-success);
    color: var(--ny-white);
    box-shadow: var(--ny-shadow-sm);
}

.ny-fitment-badge--maybe {
    background: var(--ny-warning);
}

.ny-fitment-badge--no {
    background: var(--ny-steel);
}

.ny-fitment-badge i {
    font-size: 13px;
}

/* ============================================================
   14) PRODUCT DETAIL PAGE — restyle existing classes
   ============================================================ */
.title-breadcrumb-special .breadcrumb {
    background: var(--ny-surface-1) !important;
    border-radius: var(--ny-r-md) !important;
    padding: var(--ny-sp-3) var(--ny-sp-4) !important;
    border: 1px solid var(--ny-border-soft);
    font-size: 13px;
}

.title-breadcrumb-special .breadcrumb a,
.title-breadcrumb-special .breadcrumb span {
    color: var(--ny-steel) !important;
}

.title-breadcrumb-special .breadcrumb a:hover {
    color: var(--ny-red) !important;
    text-decoration: none;
}

.title-breadcrumb-special .breadcrumb > *:last-child {
    color: var(--ny-charcoal) !important;
    font-weight: 500;
}

/* Product main info wrapper */
.dt-sn {
    background: var(--ny-white) !important;
    border: 1px solid var(--ny-border-soft) !important;
    border-radius: var(--ny-r-lg) !important;
    padding: var(--ny-sp-5) !important;
    box-shadow: var(--ny-shadow-sm);
}

/* Gallery side */
.gallery-options li button.add-favorites {
    background: var(--ny-white) !important;
    border: 1px solid var(--ny-border-soft) !important;
    color: var(--ny-steel) !important;
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    transition: all var(--ny-dur) var(--ny-ease);
}

.gallery-options li button.add-favorites:hover,
.gallery-options li button.favorites {
    color: var(--ny-red) !important;
    border-color: var(--ny-red) !important;
    background: rgba(227, 6, 19, 0.05) !important;
}

/* Special / promotion badge */
.promotion-badge {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
    border-radius: var(--ny-r-md) !important;
    padding: 8px 14px !important;
    font-weight: 600 !important;
    font-size: 12px;
}

.promotion-badge.not-available {
    background: var(--ny-steel) !important;
}

/* Countdown timer */
.countdown-timer {
    background: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
    border-radius: var(--ny-r-md) !important;
    padding: var(--ny-sp-3) var(--ny-sp-4) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.countdown-timer span {
    background: var(--ny-red);
    color: var(--ny-white);
    border-radius: var(--ny-r-sm);
    padding: 4px 8px;
    font-weight: 700;
    font-size: 14px;
    min-width: 32px;
    text-align: center;
}

/* Product title */
.product-info-name,
h1.product-title-detail,
.dt-sn h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--ny-charcoal) !important;
    line-height: 1.4 !important;
    margin-bottom: var(--ny-sp-3) !important;
}

/* Price block */
.product-info-price,
.price-tag,
.product-prices-div {
    background: linear-gradient(135deg, var(--ny-fog) 0%, var(--ny-white) 100%);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-4) !important;
    margin-bottom: var(--ny-sp-4);
}

.product-info-price .price,
.product-info-price strong,
.dt-sn .product-price {
    color: var(--ny-charcoal) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2;
}

.dt-sn .product-price-del,
.product-info-price del {
    color: var(--ny-steel) !important;
    font-size: 14px !important;
}

/* Add-to-cart buttons */
.dt-sn .add-to-cart,
.add-to-cart-single,
.add-to-cart-product,
.product-info-action .btn-primary,
.dt-sn .btn-primary {
    background: var(--ny-red) !important;
    border-color: var(--ny-red) !important;
    color: var(--ny-white) !important;
    font-weight: 600 !important;
    border-radius: var(--ny-r-md) !important;
    padding: 12px 24px !important;
    transition: all var(--ny-dur) var(--ny-ease) !important;
}

.dt-sn .add-to-cart:hover,
.add-to-cart-single:hover,
.add-to-cart-product:hover,
.product-info-action .btn-primary:hover,
.dt-sn .btn-primary:hover {
    background: var(--ny-red-dark) !important;
    border-color: var(--ny-red-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--ny-shadow-red);
}

/* "Will it fit?" hero strip injected by JS on product page */
.ny-fitment-strip {
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-4);
    margin-bottom: var(--ny-sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ny-sp-3);
    font-size: 14px;
}

.ny-fitment-strip--ok {
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.25);
    color: #0F6B33;
}

.ny-fitment-strip--unknown {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #92400E;
}

.ny-fitment-strip--empty {
    background: var(--ny-surface-2);
    border: 1px solid var(--ny-border-soft);
    color: var(--ny-charcoal);
}

.ny-fitment-strip i {
    font-size: 22px;
    flex-shrink: 0;
}

.ny-fitment-strip__cta {
    background: var(--ny-charcoal);
    color: var(--ny-white);
    padding: 6px 14px;
    border-radius: var(--ny-r-pill);
    font-size: 12px;
    text-decoration: none;
    transition: all var(--ny-dur) var(--ny-ease);
}

.ny-fitment-strip__cta:hover {
    background: var(--ny-red);
    color: var(--ny-white);
    text-decoration: none;
}

/* Spec / tabs section */
.spec-tabs,
.product-tabs .nav-tabs {
    border-bottom: 1px solid var(--ny-border-soft) !important;
    margin-bottom: var(--ny-sp-4);
}

.product-tabs .nav-tabs .nav-link,
.spec-tabs a {
    color: var(--ny-steel) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: none !important;
    padding: 12px 18px !important;
    font-weight: 500;
    transition: all var(--ny-dur) var(--ny-ease);
}

.product-tabs .nav-tabs .nav-link.active,
.spec-tabs a.active {
    color: var(--ny-charcoal) !important;
    border-bottom-color: var(--ny-red) !important;
    background: none !important;
    font-weight: 600;
}

.product-tabs .nav-tabs .nav-link:hover,
.spec-tabs a:hover {
    color: var(--ny-charcoal) !important;
    border-bottom-color: var(--ny-silver) !important;
}

/* Specs list */
.specifications-list,
.product-specs-list {
    background: var(--ny-surface-1);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-4);
}

.specifications-list li,
.product-specs-list li {
    border-bottom: 1px dashed var(--ny-border-soft);
    padding: 10px 0;
    font-size: 14px;
}

.specifications-list li:last-child,
.product-specs-list li:last-child {
    border-bottom: none;
}

/* Reviews */
.reviews-section .review-item,
.comment-item {
    background: var(--ny-surface-1);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-4);
    margin-bottom: var(--ny-sp-3);
}

.rating-stars .mdi-star.active,
.product-card .rating-stars .mdi-star.active {
    color: var(--ny-warning) !important;
}

/* Similar products section title */
.dt-sn .section-title h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--ny-charcoal) !important;
}

/* ============================================================
   15) CATEGORY / LISTING PAGE — restyle
   ============================================================ */
/* Filters sidebar */
.category-filters,
.filters-sidebar,
.dt-sl > aside,
.category-page aside {
    background: var(--ny-white);
}

.filter-card,
.filter-block {
    background: var(--ny-white) !important;
    border: 1px solid var(--ny-border-soft) !important;
    border-radius: var(--ny-r-md) !important;
    margin-bottom: var(--ny-sp-3) !important;
    overflow: hidden;
}

.filter-card .filter-title,
.filter-block-title,
.filter-card-header {
    background: var(--ny-surface-1) !important;
    color: var(--ny-charcoal) !important;
    padding: var(--ny-sp-3) var(--ny-sp-4) !important;
    font-weight: 600 !important;
    font-size: 14px;
    border-bottom: 1px solid var(--ny-border-soft);
    margin: 0 !important;
}

.filter-card-body,
.filter-block-body {
    padding: var(--ny-sp-3) var(--ny-sp-4);
    font-size: 13px;
}

.filter-card-body label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ny-charcoal);
    padding: 6px 0;
    cursor: pointer;
    transition: color var(--ny-dur) var(--ny-ease);
}

.filter-card-body label:hover {
    color: var(--ny-red);
}

/* Category header bar (title + sort + count) */
.category-header,
.products-header,
.sort-bar {
    background: var(--ny-white);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-3) var(--ny-sp-4);
    margin-bottom: var(--ny-sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ny-sp-3);
}

.category-header h1,
.products-header h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--ny-charcoal) !important;
    margin: 0 !important;
}

/* Category card grid container — ensure breathing room */
.products-grid,
.category-products-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ny-sp-3);
}

/* Pagination */
.pagination-wrapper,
.pagination {
    margin-top: var(--ny-sp-5);
    display: flex;
    justify-content: center;
    gap: 4px;
}

.pagination .page-item .page-link {
    border: 1px solid var(--ny-border-soft) !important;
    color: var(--ny-charcoal) !important;
    background: var(--ny-white) !important;
    border-radius: var(--ny-r-sm) !important;
    margin: 0 2px;
    transition: all var(--ny-dur) var(--ny-ease);
}

.pagination .page-item .page-link:hover {
    background: var(--ny-fog) !important;
    border-color: var(--ny-charcoal) !important;
}

.pagination .page-item.active .page-link {
    background: var(--ny-red) !important;
    border-color: var(--ny-red) !important;
    color: var(--ny-white) !important;
}

/* "No products found" empty state */
.empty-state,
.no-products,
.partials-empty {
    text-align: center;
    padding: var(--ny-sp-8) var(--ny-sp-5);
    background: var(--ny-surface-1);
    border-radius: var(--ny-r-md);
    border: 1px dashed var(--ny-border-mid);
    color: var(--ny-steel);
}

/* ============================================================
   16) CART PAGE — restyle existing classes
   ============================================================ */
.cart-page,
body.cart-page,
.cart-items-list {
    background: var(--ny-fog);
}

.cart-row,
.cart-product,
.cart-item,
.cart-table tbody tr {
    background: var(--ny-white) !important;
    border: 1px solid var(--ny-border-soft) !important;
    border-radius: var(--ny-r-md) !important;
    margin-bottom: var(--ny-sp-3) !important;
    padding: var(--ny-sp-4) !important;
    transition: all var(--ny-dur) var(--ny-ease);
}

.cart-row:hover,
.cart-product:hover,
.cart-item:hover {
    box-shadow: var(--ny-shadow-sm);
    border-color: var(--ny-border-mid) !important;
}

.cart-product-image,
.cart-item-image,
.cart-table img {
    border-radius: var(--ny-r-sm) !important;
    border: 1px solid var(--ny-border-soft);
    object-fit: cover;
}

.cart-product-title,
.cart-item-title a {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ny-charcoal) !important;
}

.cart-product-title:hover,
.cart-item-title a:hover {
    color: var(--ny-red) !important;
    text-decoration: none;
}

.cart-product-price,
.cart-item-price {
    color: var(--ny-charcoal) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

.cart-quantity,
.qty-selector,
.qty-counter {
    display: inline-flex;
    align-items: center;
    background: var(--ny-fog);
    border-radius: var(--ny-r-pill);
    padding: 2px;
    border: 1px solid var(--ny-border-soft);
}

.cart-quantity button,
.qty-selector button,
.qty-counter button,
.qty-minus,
.qty-plus {
    background: var(--ny-white) !important;
    border: none !important;
    color: var(--ny-charcoal) !important;
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    font-weight: 700;
    transition: all var(--ny-dur) var(--ny-ease);
}

.cart-quantity button:hover,
.qty-selector button:hover {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
}

.cart-remove,
.btn-remove-cart,
.remove-cart-item {
    background: transparent !important;
    border: 1px solid var(--ny-border-soft) !important;
    color: var(--ny-steel) !important;
    border-radius: 50% !important;
    width: 32px;
    height: 32px;
    transition: all var(--ny-dur) var(--ny-ease) !important;
}

.cart-remove:hover,
.btn-remove-cart:hover,
.remove-cart-item:hover {
    background: var(--ny-red) !important;
    border-color: var(--ny-red) !important;
    color: var(--ny-white) !important;
}

.cart-summary,
.cart-total-box,
.order-summary,
.cart-sidebar {
    background: var(--ny-white);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-5);
    box-shadow: var(--ny-shadow-sm);
    position: sticky;
    top: var(--ny-sp-4);
}

.cart-summary h3,
.cart-summary h4,
.order-summary h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--ny-charcoal) !important;
    margin-bottom: var(--ny-sp-4) !important;
    padding-bottom: var(--ny-sp-3);
    border-bottom: 1px solid var(--ny-border-soft);
}

.cart-summary-row,
.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--ny-steel);
}

.cart-summary-row strong,
.cart-total-amount {
    color: var(--ny-charcoal) !important;
    font-weight: 700;
}

.cart-total-row {
    border-top: 1px solid var(--ny-border-soft);
    margin-top: var(--ny-sp-3);
    padding-top: var(--ny-sp-3) !important;
    font-size: 16px !important;
}

.cart-total-row strong {
    font-size: 18px;
    color: var(--ny-red) !important;
}

.checkout-btn,
.btn-checkout,
.cart-summary .btn-primary,
.go-to-checkout {
    background: var(--ny-red) !important;
    border: none !important;
    color: var(--ny-white) !important;
    width: 100% !important;
    padding: 14px !important;
    border-radius: var(--ny-r-md) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-top: var(--ny-sp-4);
    transition: all var(--ny-dur) var(--ny-ease) !important;
}

.checkout-btn:hover,
.btn-checkout:hover,
.go-to-checkout:hover {
    background: var(--ny-red-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--ny-shadow-red);
}

.discount-form,
.coupon-form {
    background: var(--ny-fog);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-3);
    margin-top: var(--ny-sp-4);
}

.discount-form input,
.coupon-form input {
    background: var(--ny-white) !important;
    border: 1px solid var(--ny-border-soft) !important;
    border-radius: var(--ny-r-sm) !important;
    padding: 10px 12px !important;
    font-size: 13px;
}

.discount-form button,
.coupon-form button {
    background: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
    border: none !important;
    border-radius: var(--ny-r-sm) !important;
    padding: 10px 16px !important;
    font-size: 13px;
    font-weight: 500;
}

.cart-empty,
.empty-cart {
    text-align: center;
    padding: var(--ny-sp-8) var(--ny-sp-5);
    background: var(--ny-white);
    border-radius: var(--ny-r-lg);
    border: 1px solid var(--ny-border-soft);
}

.cart-empty i,
.empty-cart i {
    font-size: 64px;
    color: var(--ny-silver);
    margin-bottom: var(--ny-sp-4);
}

/* ============================================================
   17) CHECKOUT PAGE — restyle existing classes
   ============================================================ */
.checkout-page,
.checkout-container {
    background: var(--ny-fog);
    counter-reset: checkout-step;
}

.checkout-step,
.checkout-section,
.checkout-card {
    background: var(--ny-white) !important;
    border: 1px solid var(--ny-border-soft) !important;
    border-radius: var(--ny-r-lg) !important;
    padding: var(--ny-sp-5) !important;
    margin-bottom: var(--ny-sp-4);
    box-shadow: var(--ny-shadow-sm);
}

.checkout-step-title,
.checkout-section-title {
    display: flex !important;
    align-items: center;
    gap: var(--ny-sp-3);
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--ny-charcoal) !important;
    margin-bottom: var(--ny-sp-4) !important;
    padding-bottom: var(--ny-sp-3);
    border-bottom: 1px solid var(--ny-border-soft);
}

.checkout-step-title::before,
.checkout-section-title::before {
    content: counter(checkout-step);
    counter-increment: checkout-step;
    width: 28px;
    height: 28px;
    background: var(--ny-red);
    color: var(--ny-white);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.address-card,
.checkout-address {
    background: var(--ny-fog);
    border: 2px solid transparent;
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-4);
    cursor: pointer;
    transition: all var(--ny-dur) var(--ny-ease);
    margin-bottom: var(--ny-sp-3);
}

.address-card:hover,
.checkout-address:hover {
    border-color: var(--ny-border-mid);
    background: var(--ny-white);
}

.address-card.selected,
.address-card.active,
.checkout-address.selected {
    background: var(--ny-white);
    border-color: var(--ny-red);
    box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.08);
}

.carrier-option,
.shipping-method-card {
    background: var(--ny-white);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-3) var(--ny-sp-4);
    cursor: pointer;
    transition: all var(--ny-dur) var(--ny-ease);
    margin-bottom: var(--ny-sp-2);
    display: flex;
    align-items: center;
    gap: var(--ny-sp-3);
}

.carrier-option:hover,
.shipping-method-card:hover { border-color: var(--ny-charcoal); }

.carrier-option.selected,
.carrier-option.active,
.shipping-method-card.selected {
    border-color: var(--ny-red);
    background: rgba(227, 6, 19, 0.04);
}

.gateway-option,
.payment-method-card {
    background: var(--ny-white);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-3);
    cursor: pointer;
    transition: all var(--ny-dur) var(--ny-ease);
    display: flex;
    align-items: center;
    gap: var(--ny-sp-3);
    margin-bottom: var(--ny-sp-2);
}

.gateway-option:hover,
.payment-method-card:hover {
    border-color: var(--ny-charcoal);
    background: var(--ny-fog);
}

.gateway-option.selected,
.gateway-option.active {
    border-color: var(--ny-red);
    background: rgba(227, 6, 19, 0.04);
}

.gateway-option img,
.payment-method-card img {
    max-height: 32px;
    max-width: 80px;
    object-fit: contain;
}

.checkout-step select,
.checkout-section select,
select.form-control {
    border: 1px solid var(--ny-border-soft) !important;
    border-radius: var(--ny-r-sm) !important;
    padding: 10px 12px !important;
    font-family: var(--ny-font) !important;
    color: var(--ny-charcoal) !important;
    background: var(--ny-white) !important;
}

.checkout-step input[type="text"],
.checkout-step input[type="tel"],
.checkout-section input {
    border: 1px solid var(--ny-border-soft) !important;
    border-radius: var(--ny-r-sm) !important;
    padding: 10px 12px !important;
    font-family: var(--ny-font) !important;
}

.checkout-step input:focus,
.checkout-section input:focus,
.checkout-step select:focus {
    border-color: var(--ny-red) !important;
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.10) !important;
    outline: none !important;
}

.checkout-sidebar,
.checkout-summary {
    background: var(--ny-white);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-5);
    position: sticky;
    top: var(--ny-sp-4);
    box-shadow: var(--ny-shadow-md);
}

.checkout-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--ny-steel);
}

.checkout-summary-total {
    border-top: 2px solid var(--ny-charcoal);
    margin-top: var(--ny-sp-3);
    padding-top: var(--ny-sp-3) !important;
    font-size: 17px !important;
    font-weight: 700;
}

.checkout-summary-total .price {
    color: var(--ny-red) !important;
    font-size: 20px;
}

.btn-place-order,
.checkout-submit,
.btn-checkout-submit {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
    border: none !important;
    width: 100% !important;
    padding: 16px !important;
    border-radius: var(--ny-r-md) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: var(--ny-sp-4);
    transition: all var(--ny-dur) var(--ny-ease) !important;
}

.btn-place-order:hover,
.checkout-submit:hover {
    background: var(--ny-red-dark) !important;
    box-shadow: var(--ny-shadow-red);
    transform: translateY(-1px);
}

.checkout-trust-strip {
    background: var(--ny-fog);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-3);
    margin-top: var(--ny-sp-4);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ny-sp-2);
    font-size: 11px;
    color: var(--ny-steel);
    text-align: center;
}

.checkout-trust-strip i {
    display: block;
    font-size: 22px;
    color: var(--ny-red);
    margin-bottom: 4px;
}

/* ============================================================
   13) UTILITIES
   ============================================================ */
.ny-mt-0 { margin-top: 0 !important; }
.ny-mb-0 { margin-bottom: 0 !important; }
.ny-mb-5 { margin-bottom: var(--ny-sp-5); }
.ny-mb-7 { margin-bottom: var(--ny-sp-7); }

.ny-text-red { color: var(--ny-red); }
.ny-text-charcoal { color: var(--ny-charcoal); }
.ny-text-steel { color: var(--ny-steel); }

/* Hide the existing top-of-page sliders if we use new hero */
.ny-hide-legacy-slider .index-main-slider {
    display: none !important;
}

/* ============================================================
   ============================================================
   INDEX PAGE UNIFICATION LAYER (added)
   Bridges legacy widget classes to the ny-* design language.
   Loaded last; uses !important only where needed to defeat
   widget inline styles & legacy CSS specificity.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   A) Global accessibility & motion (focus-visible, reduced motion)
   ------------------------------------------------------------ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
    border-radius: var(--ny-r-sm);
}

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

/* Tabular numerals for prices, timer, discount badges */
.product-price,
.product-price-del,
.discount span,
.amazing-section .product-price,
.amazing-section .product-price-del,
.discount-timer .timer {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ------------------------------------------------------------
   B) Widget band wrapper — consistent rhythm between blocks
   ------------------------------------------------------------ */
.ny-widget-band {
    margin: var(--ny-sp-7) 0;
}

.ny-widget-band > .slider-section,
.ny-widget-band > .row,
.ny-widget-band .slider-section.dt-sl,
.ny-widget-band .slider-section.mb-3 {
    margin-bottom: 0 !important;
}

.ny-widget-band--banners {
    margin-top: var(--ny-sp-6);
    margin-bottom: var(--ny-sp-6);
}

@media (max-width: 991px) {
    .ny-widget-band { margin: var(--ny-sp-6) 0; }
}

@media (max-width: 575px) {
    .ny-widget-band { margin: var(--ny-sp-5) 0; }
}

/* ------------------------------------------------------------
   C) Legacy .section-title → look like .ny-section-title
   ------------------------------------------------------------ */
.ny-widget-band .section-title,
.section-title.title-wide-custom,
.section-title.title-wide {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 var(--ny-sp-5) 0 !important;
    padding: 0 0 var(--ny-sp-3) 0 !important;
    border-bottom: 1px solid var(--ny-border-soft) !important;
    background: none !important;
    box-shadow: none !important;
}

.ny-widget-band .section-title::before,
.ny-widget-band .section-title::after,
.section-title.title-wide::before,
.section-title.title-wide::after,
.section-title.title-wide-custom::before,
.section-title.title-wide-custom::after {
    display: none !important;
    content: none !important;
}

.ny-widget-band .section-title h2,
.section-title.title-wide h2,
.section-title.title-wide-custom h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--ny-charcoal) !important;
    margin: 0 !important;
    padding: 0 14px 0 0 !important;
    background: none !important;
    line-height: 1.4 !important;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: var(--ny-sp-2);
    border: none !important;
}

[dir="ltr"] .ny-widget-band .section-title h2,
[dir="ltr"] .section-title.title-wide h2,
[dir="ltr"] .section-title.title-wide-custom h2 {
    padding: 0 0 0 14px !important;
}

.ny-widget-band .section-title h2::before,
.section-title.title-wide h2::before,
.section-title.title-wide-custom h2::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: var(--ny-red);
    border-radius: 2px;
    display: block !important;
}

.ny-widget-band .section-title a,
.section-title.title-wide > a,
.section-title.title-wide-custom > a {
    font-size: 13px !important;
    color: var(--ny-steel) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    transition: color var(--ny-dur) var(--ny-ease) !important;
    background: none !important;
}

.ny-widget-band .section-title a:hover,
.section-title.title-wide > a:hover,
.section-title.title-wide-custom > a:hover {
    color: var(--ny-red) !important;
}

/* ------------------------------------------------------------
   D) Colorful / amazing-section block → on-brand dark editorial
   ------------------------------------------------------------ */
.ny-widget-band--colorful .amazing-section,
.amazing-section {
    background: linear-gradient(135deg, var(--ny-charcoal) 0%, var(--ny-onyx) 100%) !important;
    border-radius: var(--ny-r-xl) !important;
    padding: var(--ny-sp-6) 0 !important;
    margin: 0 !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.amazing-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(50% 50% at 90% 20%, rgba(227, 6, 19, 0.20), transparent 60%),
        radial-gradient(40% 40% at 10% 90%, rgba(140, 140, 142, 0.08), transparent 60%);
    z-index: -1;
    pointer-events: none;
}

.amazing-section .amazing-product {
    padding: var(--ny-sp-5) var(--ny-sp-4) !important;
    color: var(--ny-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ny-sp-4);
    height: 100%;
}

.amazing-section .amazing-product img {
    max-width: 80%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.4));
}

.amazing-section .view-all-amazing-btn {
    display: inline-flex !important;
    align-items: center;
    gap: var(--ny-sp-2);
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
    border-radius: var(--ny-r-pill) !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease) !important;
    border: none !important;
    box-shadow: var(--ny-shadow-red);
}

.amazing-section .view-all-amazing-btn:hover {
    background: var(--ny-red-dark) !important;
    transform: translateY(-1px);
}

.amazing-section .product-card {
    background: var(--ny-white) !important;
    color: var(--ny-charcoal) !important;
}

/* ------------------------------------------------------------
   E) Discount timer
   ------------------------------------------------------------ */
.discount-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    background: linear-gradient(90deg, var(--ny-charcoal), var(--ny-graphite));
    color: var(--ny-white);
    border-radius: var(--ny-r-md);
    margin: 0 0 var(--ny-sp-4) 0;
    box-shadow: var(--ny-shadow-md);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.discount-timer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(50% 100% at 0% 50%, rgba(227, 6, 19, 0.25), transparent 60%);
    z-index: -1;
    pointer-events: none;
}

.discount-timer .timer {
    font-family: var(--ny-font-num);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--ny-white);
    display: inline-flex;
    align-items: center;
    gap: var(--ny-sp-2);
}

.discount-timer .timer::before {
    content: '\F0150';
    font-family: 'Material Design Icons';
    color: var(--ny-red);
    font-size: 18px;
    line-height: 1;
}

/* ------------------------------------------------------------
   F) Middle banners — proper card surface
   ------------------------------------------------------------ */
.widget-banner {
    border-radius: var(--ny-r-lg);
    overflow: hidden;
    background: var(--ny-surface-2);
    box-shadow: var(--ny-shadow-sm);
    border: 1px solid var(--ny-border-soft);
    transition: transform var(--ny-dur) var(--ny-ease-out),
                box-shadow var(--ny-dur) var(--ny-ease-out),
                border-color var(--ny-dur) var(--ny-ease-out);
}

.widget-banner:hover {
    transform: translateY(-3px);
    box-shadow: var(--ny-shadow-lg);
    border-color: var(--ny-charcoal);
}

.widget-banner a {
    display: block;
    overflow: hidden;
    line-height: 0;
}

.widget-banner img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--ny-dur-slow) var(--ny-ease);
}

.widget-banner:hover img {
    transform: scale(1.04);
}

/* ------------------------------------------------------------
   G) Posts widget — editorial post cards
   ------------------------------------------------------------ */
.post-card {
    background: var(--ny-white);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    overflow: hidden;
    transition: transform var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease);
    height: 100%;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ny-shadow-lg);
    border-color: var(--ny-charcoal);
}

.post-card .post-thumbnail {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--ny-surface-2);
}

.post-card .post-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

.post-card .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ny-dur-slow) var(--ny-ease);
}

.post-card:hover .post-thumbnail img {
    transform: scale(1.05);
}

.post-card .post-tag {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    background: var(--ny-red);
    color: var(--ny-white);
    padding: 5px 10px;
    border-radius: var(--ny-r-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    box-shadow: var(--ny-shadow-sm);
}

.post-card .post-title {
    padding: var(--ny-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--ny-sp-2);
}

.post-card .post-title a {
    color: var(--ny-charcoal) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--ny-dur) var(--ny-ease);
}

.post-card .post-title a:hover {
    color: var(--ny-red) !important;
}

.post-card .post-date {
    font-size: 12px;
    color: var(--ny-steel);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.post-card .post-date::before {
    content: '\F150';
    font-family: 'Material Design Icons';
    color: var(--ny-steel);
    opacity: 0.7;
}

/* ------------------------------------------------------------
   G2) Posts widget — full-image overlay card variant
   ------------------------------------------------------------ */
.post-card--overlay {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--ny-r-md);
    overflow: hidden;
    background: var(--ny-charcoal);
    box-shadow: var(--ny-shadow-sm);
    text-decoration: none !important;
    isolation: isolate;
    transition: transform var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease);
}

.post-card--overlay:hover {
    transform: translateY(-4px);
    box-shadow: var(--ny-shadow-lg);
}

.post-card--overlay .post-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform var(--ny-dur-slow) var(--ny-ease);
}

.post-card--overlay:hover .post-card__image {
    transform: scale(1.06);
}

.post-card--overlay .post-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg,
                rgba(0, 0, 0, 0) 35%,
                rgba(0, 0, 0, 0.55) 70%,
                rgba(0, 0, 0, 0.88) 100%);
    pointer-events: none;
}

.post-card--overlay .post-tag {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 3;
    background: var(--ny-red);
    color: var(--ny-white);
    padding: 5px 12px;
    border-radius: var(--ny-r-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    box-shadow: var(--ny-shadow-sm);
}

.post-card--overlay .post-card__body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 3;
    padding: var(--ny-sp-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ny-white);
}

.post-card--overlay .post-card__title {
    color: var(--ny-white) !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.post-card--overlay:hover .post-card__title {
    color: var(--ny-white) !important;
}

.post-card--overlay .post-card__date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.post-card--overlay .post-card__date::before {
    content: '\F150';
    font-family: 'Material Design Icons';
    color: rgba(255, 255, 255, 0.85);
}

.post-card--overlay:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .post-card--overlay {
        aspect-ratio: 5 / 6;
    }

    .post-card--overlay .post-card__title {
        font-size: 14px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* ------------------------------------------------------------
   G3) Posts widget — carousel bleed (next card peeks past container end)
   Mirrors the bleed pattern used by --products / --discount bands so the
   slider's end edge runs into the page, no gap inside the container.
   ------------------------------------------------------------ */
.ny-widget-band--posts {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: visible;
    position: relative;
}

.ny-widget-band--posts .slider-section {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ny-widget-band--posts .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.ny-widget-band--posts .col-12.px-res-0,
.ny-widget-band--posts .col-12 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.ny-widget-band--posts .owl-stage-outer {
    overflow: visible !important;
    margin: 0;
    padding: 8px 0;
}

.ny-widget-band--posts .owl-carousel {
    overflow: visible !important;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
}

@media (min-width: 576px) {
    .ny-widget-band--posts .owl-carousel {
        padding-inline-start: 16px !important;
    }
}

.ny-widget-band--posts .owl-item {
    padding: 0 6px;
}

/* ------------------------------------------------------------
   H) Coworker / brand slider — grayscale strip
   ------------------------------------------------------------ */
.ny-widget-band--partners .brand-slider {
    padding: var(--ny-sp-4) 0;
}

.brand-slider .item {
    padding: 0 var(--ny-sp-3);
    text-align: center;
}

.brand-slider .item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    padding: var(--ny-sp-2);
}

.brand-slider .item img {
    max-height: 60px;
    max-width: 100%;
    width: auto;
    margin: 0 auto;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter var(--ny-dur) var(--ny-ease),
                opacity var(--ny-dur) var(--ny-ease);
}

.brand-slider .item:hover img,
.brand-slider .item a:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* ------------------------------------------------------------
   I) Custom-page text-box
   ------------------------------------------------------------ */
.ny-widget-band--custom .text-box,
.text-box {
    border-radius: var(--ny-r-lg) !important;
    padding: var(--ny-sp-6) !important;
    box-shadow: var(--ny-shadow-sm);
    border: 1px solid var(--ny-border-soft);
    margin: 0 !important;
}

/* ------------------------------------------------------------
   J) Owl carousel — brand-aligned nav & dots
   ------------------------------------------------------------ */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    background: var(--ny-white) !important;
    border: 1px solid var(--ny-border-soft) !important;
    box-shadow: var(--ny-shadow-md) !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    color: var(--ny-charcoal) !important;
    transition: background var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
    background: var(--ny-red) !important;
    border-color: var(--ny-red) !important;
    color: var(--ny-white) !important;
    transform: scale(1.06);
}

.owl-carousel .owl-nav button.owl-prev.disabled,
.owl-carousel .owl-nav button.owl-next.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.owl-carousel .owl-dots {
    margin-top: var(--ny-sp-4) !important;
}

.owl-carousel .owl-dots .owl-dot span {
    background: var(--ny-border-mid) !important;
    width: 8px !important;
    height: 8px !important;
    margin: 4px !important;
    border-radius: 50% !important;
    transition: background var(--ny-dur) var(--ny-ease),
                width var(--ny-dur) var(--ny-ease) !important;
}

.owl-carousel .owl-dots .owl-dot.active span {
    background: var(--ny-red) !important;
    width: 22px !important;
    border-radius: 4px !important;
}

.owl-carousel .owl-dots .owl-dot:hover span {
    background: var(--ny-red) !important;
}

/* ------------------------------------------------------------
   K) Header — search input & topbar polish
   ------------------------------------------------------------ */
.main-header .topbar {
    padding: var(--ny-sp-4) 0 !important;
}

.logo-area img {
    max-height: 56px;
    width: auto;
    display: block;
}

.search-area #search-form,
.search-area .search {
    border: 1px solid var(--ny-border-mid);
    border-radius: var(--ny-r-pill);
    background: var(--ny-surface-1);
    transition: border-color var(--ny-dur) var(--ny-ease),
                background var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease);
    overflow: hidden;
    position: relative;
}

.search-area #search-form:focus-within {
    border-color: var(--ny-red);
    background: var(--ny-white);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.10);
}

.search-area #search-input {
    background: transparent !important;
    border: none !important;
    padding: 12px 20px !important;
    font-family: var(--ny-font) !important;
    font-size: 14px;
    color: var(--ny-charcoal);
    width: 100%;
}

.search-area #search-input::placeholder {
    color: var(--ny-steel);
    opacity: 0.8;
}

/* ------------------------------------------------------------
   L) Main menu — bottom header navigation polish
   ------------------------------------------------------------ */
.bottom-header {
    background: var(--ny-white) !important;
    border-top: 1px solid var(--ny-border-soft) !important;
    border-bottom: 1px solid var(--ny-border-soft) !important;
    box-shadow: var(--ny-shadow-sm);
}

.main-menu .menu li > a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ny-charcoal) !important;
    transition: color var(--ny-dur) var(--ny-ease) !important;
}

.main-menu .menu li > a:hover {
    color: var(--ny-red) !important;
    background: transparent !important;
}

/* ------------------------------------------------------------
   M) Product card — image fit, body rhythm, cart button on-brand
   ------------------------------------------------------------ */
.product-card {
    position: relative;
}

.product-card .product-head {
    position: absolute;
    top: var(--ny-sp-3);
    inset-inline-end: var(--ny-sp-3);
    inset-inline-start: var(--ny-sp-3);
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}

.product-card .product-head > * {
    pointer-events: auto;
}

.product-card .product-thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
    background: var(--ny-surface-2);
    position: relative;
}

.product-card .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--ny-sp-3);
    transition: transform var(--ny-dur-slow) var(--ny-ease);
}

.product-card:hover .product-thumb img {
    transform: scale(1.05);
}

.product-card .product-card-body {
    padding: var(--ny-sp-3) var(--ny-sp-4) var(--ny-sp-4) !important;
    display: flex;
    flex-direction: column;
    gap: var(--ny-sp-2);
}

.product-card .product-title {
    min-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.product-card .rating-stars {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ny-steel);
}

.product-card .rating-stars .product-meta {
    color: var(--ny-steel) !important;
    text-decoration: none;
    font-size: 12px;
}

.product-card .rating-stars .product-meta:hover {
    color: var(--ny-red) !important;
}

.product-card .rating-stars .mdi-star.active {
    color: var(--ny-warning);
}

.product-card .price-index-h {
    margin-top: var(--ny-sp-2);
}

.product-card .product-prices-div {
    display: flex;
    align-items: baseline;
    gap: var(--ny-sp-2);
    flex-wrap: wrap;
}

.product-card .product-price-del {
    text-decoration: line-through;
    opacity: 0.7;
}

.product-card .cart .add-to-cart-single {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
    padding: 9px 12px !important;
    border-radius: var(--ny-r-md) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-top: var(--ny-sp-3);
    text-decoration: none !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease) !important;
    min-height: 40px;
    line-height: 1.2;
}

.product-card .cart .add-to-cart-single:hover {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
    transform: translateY(-1px);
}

.product-card .cart .add-to-cart-single i {
    margin: 0 !important;
    font-size: 16px;
    padding: 0 !important;
}

.product-card .fild_products {
    display: inline-block;
}

.product-card .fild_products span {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--ny-r-sm);
    background: rgba(28, 28, 30, 0.85);
    color: var(--ny-white);
    line-height: 1.3;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.product-card .discount {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
    border-radius: var(--ny-r-sm) !important;
    padding: 3px 7px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    box-shadow: var(--ny-shadow-sm);
}

/* ------------------------------------------------------------
   N) Modal polish (popup on index)
   ------------------------------------------------------------ */
.modal-content {
    border-radius: var(--ny-r-lg) !important;
    border: none !important;
    box-shadow: var(--ny-shadow-lg) !important;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--ny-border-soft) !important;
    padding: var(--ny-sp-4) var(--ny-sp-5) !important;
}

.modal-header .close {
    color: var(--ny-charcoal);
    opacity: 0.7;
    text-shadow: none;
    transition: opacity var(--ny-dur) var(--ny-ease);
}

.modal-header .close:hover {
    opacity: 1;
    color: var(--ny-red);
}

.modal-body {
    padding: var(--ny-sp-5) !important;
}

/* ------------------------------------------------------------
   O) Active vehicle bar — fine-tune
   ------------------------------------------------------------ */
.ny-active-vehicle-bar strong {
    color: var(--ny-white);
    font-weight: 600;
    margin: 0 4px;
}

/* ------------------------------------------------------------
   P) Responsive fine-tunes for hero & section titles
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    .ny-widget-band .section-title h2,
    .section-title.title-wide h2,
    .section-title.title-wide-custom h2,
    .ny-section-title h2 {
        font-size: 18px !important;
    }
}

@media (max-width: 575px) {
    .ny-hero {
        margin: var(--ny-sp-4) 0 var(--ny-sp-6);
        border-radius: var(--ny-r-lg);
    }

    .ny-hero__title {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }

    .ny-authenticity {
        padding: var(--ny-sp-6) var(--ny-sp-4);
        border-radius: var(--ny-r-lg);
    }

    .ny-authenticity__copy h2 {
        font-size: 22px !important;
    }

    .ny-widget-band .section-title h2,
    .section-title.title-wide h2,
    .section-title.title-wide-custom h2,
    .ny-section-title h2 {
        font-size: 16px !important;
    }

    .post-card .post-thumbnail {
        aspect-ratio: 16 / 9;
    }

    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
    .product-card .product-thumb{
        margin-top: -15px;
    }
}

/* ============================================================
   ============================================================
   DESIGN.MD SYNC LAYER — index page tokens
   Every rule below maps 1:1 to a DESIGN.md component token.
   Reference: /DESIGN.md (root of repo). Do not edit values
   without first updating DESIGN.md and `npm run design:lint`.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   Token aliases — surface helpers used below
   ------------------------------------------------------------ */
:root {
    --ny-focus-ring: 0 0 0 3px rgba(227, 6, 19, 0.20);
}

/* ------------------------------------------------------------
   button-primary  (DESIGN.md → components.button-primary)
   bg=primary  text=on-dark  rounded=md  padding=14 24  typo=button-text
   ------------------------------------------------------------ */
.ny-btn-primary {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 14px 24px !important;
    border-radius: var(--ny-r-md) !important;
}

.ny-btn-primary:focus-visible {
    box-shadow: var(--ny-focus-ring);
}

/* button-primary-disabled */
.ny-btn-primary:disabled,
.ny-btn-primary[disabled],
.ny-btn-primary.is-disabled {
    background: var(--ny-silver) !important;
    color: var(--ny-charcoal) !important;
    cursor: not-allowed;
    box-shadow: none;
    transform: none !important;
}

/* ------------------------------------------------------------
   button-ghost  (DESIGN.md → components.button-ghost)
   bg=surface-dark  text=on-dark  rounded=md  padding=14 24  typo=button-text
   ------------------------------------------------------------ */
.ny-btn-ghost {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 14px 24px !important;
    border-radius: var(--ny-r-md) !important;
}

.ny-btn-ghost:hover {
    background: var(--ny-graphite) !important;
    border-color: var(--ny-graphite) !important;
}

.ny-btn-ghost:active {
    background: var(--ny-onyx) !important;
}

/* ------------------------------------------------------------
   button-action  (DESIGN.md → components.button-action)
   bg=secondary  text=on-dark  rounded=md  padding=9 12  typo=label-md (13/500)
   Already implemented on .add-to-cart-single — re-assert exact tokens.
   ------------------------------------------------------------ */
.product-card .cart .add-to-cart-single {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    padding: 9px 12px !important;
    border-radius: var(--ny-r-md) !important;
}

/* ------------------------------------------------------------
   chip  (DESIGN.md → components.chip)
   bg=secondary  text=on-dark  rounded=full  padding=8 14  typo=label-md
   ------------------------------------------------------------ */
.ny-garage-chip {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    padding: 8px 14px;
    border-radius: var(--ny-r-pill);
}

.ny-garage-chip:focus-visible {
    box-shadow: var(--ny-focus-ring);
}

/* chip-brand (partner strip items) */
.ny-brandstrip__item {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    border-radius: var(--ny-r-pill) !important;
}

/* ------------------------------------------------------------
   section-title  (DESIGN.md → components.section-title)
   text=on-surface  typo=headline-sm (22/700/1.4)  padding-bottom=12
   ------------------------------------------------------------ */
.ny-section-title h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

/* ------------------------------------------------------------
   top-strip  (DESIGN.md → components.top-strip)
   bg=secondary  text=neutral-soft  padding=10 24  typo=label-sm (12/500/1.3)
   ------------------------------------------------------------ */
.ny-topstrip {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.ny-topstrip .main-container {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ------------------------------------------------------------
   usp-strip  (DESIGN.md → components.usp-strip)
   bg=neutral-fog  rounded=lg  padding=24
   ------------------------------------------------------------ */
.ny-usp {
    padding: var(--ny-sp-5);          /* 24 */
    border-radius: var(--ny-r-lg);    /* 16 */
}

.ny-usp__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.ny-usp__desc {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   card-bento / card-bento-big / card-bento-accent
   (DESIGN.md → components.card-bento*)
   Small tile padding=24, rounded=lg(16)
   Big tile  inherits same padding/radius, dark surface
   Accent    primary surface
   ------------------------------------------------------------ */
.ny-bento__tile {
    padding: var(--ny-sp-5);          /* 24 */
    border-radius: var(--ny-r-lg);    /* 16 */
}

.ny-bento__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.ny-bento__tile--big .ny-bento__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
}

.ny-bento__cta {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

/* ------------------------------------------------------------
   card-dark  (DESIGN.md → components.card-dark)
   bg=secondary  text=on-dark  rounded=xl  padding=32
   Used by .ny-hero (editorial dark) and .ny-authenticity (pillar)
   ------------------------------------------------------------ */
.ny-hero {
    border-radius: var(--ny-r-xl);    /* 24 */
}

.ny-authenticity {
    border-radius: var(--ny-r-xl);    /* 24 */
    padding: var(--ny-sp-6) var(--ny-sp-7);  /* 32 / 48 — editorial block */
}

/* ------------------------------------------------------------
   card-dark-elevated  (DESIGN.md → components.card-dark-elevated)
   Used by .ny-vselector (glass selector) and .ny-verify (verify card)
   rounded=lg  padding=16 → bumped to 24 visually for glass cards
   ------------------------------------------------------------ */
.ny-vselector {
    border-radius: var(--ny-r-lg);    /* 16 */
    padding: var(--ny-sp-5);          /* 24 */
}

.ny-vselector__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.ny-verify {
    border-radius: var(--ny-r-lg);    /* 16 */
}

/* verify-tab (segmented control inside verify card) */
.ny-verify__tab {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    padding: 10px;
    border-radius: var(--ny-r-pill);
}

.ny-verify__tab:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------
   input-dark  (DESIGN.md → components.input-dark)
   bg=surface-dark-raised  text=on-dark  rounded=md  padding=14 16
   ------------------------------------------------------------ */
.ny-verify__input {
    border-radius: var(--ny-r-md);    /* 10 */
    padding: 14px 16px;
    font-size: 14px;                  /* body-md */
    line-height: 1.6;
}

.ny-verify__label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

/* ------------------------------------------------------------
   input  (DESIGN.md → components.input)
   Header search field — bg=surface  rounded=md  padding=12 16  typo=body-md
   ------------------------------------------------------------ */
.search-area #search-input {
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 12px 16px !important;
}

/* ------------------------------------------------------------
   badge-discount  (DESIGN.md → components.badge-discount)
   bg=primary  text=on-dark  rounded=sm (6)  padding=3 7  typo=caption (11/600/1.3 +0.04em)
   ------------------------------------------------------------ */
.product-card .discount,
.product-card .discount span {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
    padding: 3px 7px !important;
    border-radius: var(--ny-r-sm) !important;
}

/* ------------------------------------------------------------
   badge-fitment-yes / maybe / no  (DESIGN.md → components.badge-fitment-*)
   rounded=full  padding=4 9  typo=caption
   AA contrast: dark text on success/warning; on-surface on neutral-fog
   ------------------------------------------------------------ */
.ny-fitment-badge {
    color: var(--ny-onyx);            /* secondary-strong for AA */
    background: var(--ny-success);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.04em;
    padding: 4px 9px;
    border-radius: var(--ny-r-pill);
}

.ny-fitment-badge--maybe {
    background: var(--ny-warning);
    color: var(--ny-onyx);
}

.ny-fitment-badge--no {
    background: var(--ny-fog);
    color: var(--ny-charcoal);
}

/* New utility badges from DESIGN.md */
.ny-badge-info,
.ny-badge-error {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.04em;
    padding: 4px 9px;
    border-radius: var(--ny-r-pill);
}

.ny-badge-info {
    background: var(--ny-info);
    color: var(--ny-onyx);
}

.ny-badge-error {
    background: var(--ny-red);
    color: var(--ny-white);
}

/* ------------------------------------------------------------
   caption-text / caption-text-strong / caption-text-dark
   (DESIGN.md → components.caption-text*)
   typo=body-sm (13/400/1.5)
   Active vehicle bar links use caption-text-dark (on-dark-muted).
   ------------------------------------------------------------ */
.ny-active-vehicle-bar__actions a {
    color: var(--ny-silver);          /* on-dark-muted */
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.ny-active-vehicle-bar__actions a:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
    color: var(--ny-white);
}

/* ------------------------------------------------------------
   chip / chip-active (brand grid inside vehicle selector)
   Small tile chips: padding match brand-tile (already compact);
   re-assert focus ring + active red.
   ------------------------------------------------------------ */
.ny-brand-tile {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    border-radius: var(--ny-r-md);    /* 10 */
}

.ny-brand-tile:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

.ny-vselector__list-item {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    padding: 10px 12px;
    border-radius: var(--ny-r-md);
}

.ny-vselector__list-item:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Hero typography lock-in
   eyebrow=caption  title=display (44/800)  lede=body-lg (16/400/1.7)
   usp-item=body-md (14/400/1.6)
   ------------------------------------------------------------ */
.ny-hero__eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.ny-hero__lede {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}

.ny-hero__usp-item {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

/* ------------------------------------------------------------
   Authenticity pillar typography lock-in
   h2=headline-lg (36/800/1.25)  copy=body-lg (16/400/1.7)
   point=body-md (14/400/1.6)
   ------------------------------------------------------------ */
.ny-authenticity__copy h2 {
    font-weight: 800;
    line-height: 1.25;
}

.ny-authenticity__copy p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}

.ny-authenticity__points li {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

/* ------------------------------------------------------------
   Numeric typography lock-in (timer, prices, codes)
   typo=numeric (15/700/1.2 +0.04em, tnum on)
   ------------------------------------------------------------ */
.discount-timer .timer,
.ny-timer-wrap__counter,
.product-card .product-price {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.discount-timer .timer {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   Focus-visible global lock-in (color=primary, 2px, 2px offset)
   ------------------------------------------------------------ */
.ny-bento__tile:focus-visible,
.ny-section-title__link:focus-visible,
.ny-verify__tab:focus-visible,
.ny-brand-tile:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

/* ============================================================
   ============================================================
   PASS 2 — HEADER CHROME + REMAINING FOCUS STATES
   Maps every interactive element in the header (search, user-menu,
   logo, close buttons) and the missed focus states to DESIGN.md.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   Search submit button  (DESIGN.md → components.button-action)
   The submit lives inside .search-area form, formerly an <img>-only
   button. Style it as a 40x40 round icon button on primary surface.
   ------------------------------------------------------------ */
.search-area #search-form button[type="submit"],
.search-area .search button[type="submit"] {
    background: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
    border: none !important;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--ny-r-pill) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    cursor: pointer;
    transition: background var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease);
    flex-shrink: 0;
}

.search-area #search-form button[type="submit"]:hover {
    background: var(--ny-red) !important;
    transform: scale(1.04);
}

.search-area #search-form button[type="submit"]:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

.search-area #search-form button[type="submit"] img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

/* ------------------------------------------------------------
   Close-search-result button  (DESIGN.md → icon button on light)
   ------------------------------------------------------------ */
.search-area #close-search-result,
.search-area .close-search-result {
    background: transparent !important;
    color: var(--ny-steel) !important;
    border: none !important;
    width: 32px;
    height: 32px;
    border-radius: var(--ny-r-pill) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    cursor: pointer;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

.search-area #close-search-result:hover {
    background: var(--ny-fog) !important;
    color: var(--ny-red) !important;
}

.search-area #close-search-result:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   User-menu dropdown trigger (.nav-link with .label-dropdown)
   (DESIGN.md → components.chip-brand style — text + icon, no fill)
   ------------------------------------------------------------ */
.topbar .nav-item.account .nav-link,
.topbar .nav .nav-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--ny-charcoal) !important;
    font-family: var(--ny-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    padding: 8px 12px !important;
    border-radius: var(--ny-r-pill) !important;
    text-decoration: none !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

.topbar .nav-item.account .nav-link:hover,
.topbar .nav .nav-link:hover {
    background: var(--ny-fog) !important;
    color: var(--ny-charcoal) !important;
}

.topbar .nav-item.account .nav-link:focus-visible,
.topbar .nav .nav-link:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

.topbar .nav-item.account .nav-link i,
.topbar .nav .nav-link i {
    font-size: 18px;
    color: var(--ny-red);
}

.topbar .nav-item.account .nav-link .label-dropdown {
    font-size: 13px;
    color: var(--ny-charcoal);
}

/* ------------------------------------------------------------
   Dropdown menu container (DESIGN.md → components.card)
   bg=surface  rounded=md  shadow=lg
   ------------------------------------------------------------ */
.topbar .dropdown-menu {
    background: var(--ny-white) !important;
    border: 1px solid var(--ny-border-soft) !important;
    border-radius: var(--ny-r-md) !important;
    box-shadow: var(--ny-shadow-lg) !important;
    padding: 6px !important;
    margin-top: 8px !important;
    font-family: var(--ny-font) !important;
    min-width: 200px;
}

/* Dropdown items (DESIGN.md → caption-text + chip-brand-hover) */
.topbar .dropdown-menu .dropdown-item {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--ny-charcoal) !important;
    font-family: var(--ny-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    padding: 9px 12px !important;
    border-radius: var(--ny-r-sm) !important;
    text-decoration: none !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

.topbar .dropdown-menu .dropdown-item:hover {
    background: var(--ny-fog) !important;
    color: var(--ny-red) !important;
}

.topbar .dropdown-menu .dropdown-item:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: -2px;
}

.topbar .dropdown-menu .dropdown-item i {
    font-size: 16px;
    color: var(--ny-steel);
    transition: color var(--ny-dur) var(--ny-ease);
}

.topbar .dropdown-menu .dropdown-item:hover i {
    color: var(--ny-red);
}

.topbar .dropdown-menu .dropdown-divider {
    border-top: 1px solid var(--ny-border-soft);
    margin: 4px 0;
}

/* ------------------------------------------------------------
   Logo link  (focus state only — visual style is image-driven)
   ------------------------------------------------------------ */
.logo-area a {
    display: inline-block;
    border-radius: var(--ny-r-sm);
    transition: opacity var(--ny-dur) var(--ny-ease);
}

.logo-area a:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 4px;
}

.logo-area a:hover {
    opacity: 0.85;
}

/* ------------------------------------------------------------
   Vehicle selector — back button + foot link focus states
   (DESIGN.md → text button on dark surface)
   ------------------------------------------------------------ */
.ny-vselector__back {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    padding: 6px 10px;
    border-radius: var(--ny-r-sm);
}

.ny-vselector__back:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

.ny-vselector__foot a {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    padding: 6px 8px;
    border-radius: var(--ny-r-sm);
}

.ny-vselector__foot a:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Section title CTA + bento link focus  (re-asserted, just in case)
   ------------------------------------------------------------ */
.ny-section-title__link {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    padding: 4px 6px;
    border-radius: var(--ny-r-sm);
}

.ny-section-title__link:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Bento CTA text link inside tile — already styled; lock font.
   ------------------------------------------------------------ */
.ny-bento__cta {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

/* ------------------------------------------------------------
   Product card — entire thumb link focus + title link focus
   (DESIGN.md → no native button style; outline-only focus ring)
   ------------------------------------------------------------ */
.product-card .product-thumb:focus-visible,
.product-card .product-title a:focus-visible,
.product-card .product-meta:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
    border-radius: var(--ny-r-sm);
}

.product-card .cart .add-to-cart-single:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Post card thumbnail & title link focus states
   ------------------------------------------------------------ */
.post-card .post-thumbnail a:focus-visible,
.post-card .post-title a:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
    border-radius: var(--ny-r-sm);
}

/* ------------------------------------------------------------
   Widget banner & coworker link focus
   ------------------------------------------------------------ */
.widget-banner a:focus-visible,
.brand-slider .item a:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
    border-radius: var(--ny-r-md);
}

/* ------------------------------------------------------------
   Brand strip item focus
   ------------------------------------------------------------ */
.ny-brandstrip__item:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Modal close (already styled — assert focus ring)
   ------------------------------------------------------------ */
.modal-header .close:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
    border-radius: var(--ny-r-sm);
}

/* ------------------------------------------------------------
   Main-menu nav links focus (bottom-header)
   ------------------------------------------------------------ */
.main-menu .menu li > a:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
    border-radius: var(--ny-r-sm);
}

/* ------------------------------------------------------------
   Owl carousel nav focus
   ------------------------------------------------------------ */
.owl-carousel .owl-nav button.owl-prev:focus-visible,
.owl-carousel .owl-nav button.owl-next:focus-visible {
    outline: 2px solid var(--ny-red) !important;
    outline-offset: 2px;
}

/* ============================================================
   ============================================================
   PASS 3 — HEADER LAYOUT FIX
   The user reported "styles merged with old ones, design is broken."
   Root cause: bottom-header had no vertical rhythm, dropdown menu
   z-index conflicted with header chrome, and the topbar/menu lacked
   clear separation. This pass locks the header layout.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   Wrapper / page chrome
   ------------------------------------------------------------ */
.wrapper {
    background: var(--ny-white);
    min-height: 100vh;
}

/* ------------------------------------------------------------
   Main header — single container, no shadow, sits flush
   ------------------------------------------------------------ */
.main-header {
    background: var(--ny-white) !important;
    position: relative;
    z-index: 50;
}

.main-header .topbar {
    padding: 16px 0 !important;
    background: var(--ny-white);
}

/* (Removed clearfix ::after — was creating phantom flex items
   inside flex containers, shifting children by ~507px.
   Flex layout doesn't need clearfix.) */

/* ------------------------------------------------------------
   Bottom-header — explicit padding + clearfix for floated menu
   ------------------------------------------------------------ */
.bottom-header {
    background: var(--ny-white) !important;
    border-top: 1px solid var(--ny-border-soft) !important;
    border-bottom: 1px solid var(--ny-border-soft) !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
    position: relative;
    z-index: 40;
}

.bottom-header .main-menu {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.bottom-header .main-menu .list,
.bottom-header .main-menu .nav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    float: none !important;
}

.bottom-header .main-menu .menu li,
.bottom-header .main-menu .list > li {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.bottom-header .main-menu .menu li > a,
.bottom-header .main-menu .list > li > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px !important;
    border-radius: var(--ny-r-sm) !important;
    color: var(--ny-charcoal) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
    text-decoration: none !important;
}

.bottom-header .main-menu .menu li > a:hover,
.bottom-header .main-menu .list > li > a:hover {
    background: var(--ny-fog) !important;
    color: var(--ny-red) !important;
}

/* ------------------------------------------------------------
   Topbar — flex layout, gap, vertical centering
   ------------------------------------------------------------ */
.main-header .topbar .row {
    align-items: center;
}

.main-header .topbar .topbar-left,
.main-header .topbar [class*="col-"]:has(.topbar-left) {
    display: flex;
    align-items: center;
}

/* Search input wrapper — proper height + alignment */
.search-area {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.search-area #search-form,
.search-area .search {
    display: flex !important;
    align-items: center !important;
    padding: 4px !important;
    background: var(--ny-surface-1) !important;
    border: 1px solid var(--ny-border-mid);
    border-radius: var(--ny-r-pill);
    min-height: 48px;
    position: relative;
}

.search-area #search-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    padding: 8px 16px !important;
    min-height: 40px;
    font-size: 14px !important;
    color: var(--ny-charcoal);
    outline: none;
}

.search-area #search-form button[type="submit"] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.search-area #close-search-result,
.search-area .close-search-result {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: transparent !important;
    color: var(--ny-steel) !important;
    border: none !important;
    border-radius: var(--ny-r-pill) !important;
    display: none !important;
    align-items: center;
    justify-content: center;
}

.search-area #search-form.has-results .close-search-result {
    display: inline-flex !important;
}

/* ------------------------------------------------------------
   Dropdown stacking — sit ABOVE bottom-header
   ------------------------------------------------------------ */
.topbar .nav-item.account {
    position: relative;
    z-index: 60;
}

.topbar .nav-item.account .dropdown-menu,
.topbar .dropdown-menu {
    z-index: 80 !important;
    position: absolute !important;
}

/* ------------------------------------------------------------
   Topbar layout safety — prevent float collisions
   ------------------------------------------------------------ */
.topbar .logo-area {
    float: none !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

[dir="rtl"] .topbar .logo-area {
    justify-content: flex-end;
}

.topbar .topbar-left > .d-flex {
    gap: 12px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Mobile responsive header
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    .main-header .topbar {
        padding: 12px 0 !important;
    }

    .search-area #search-form {
        min-height: 44px;
    }

    .bottom-header {
        padding: 4px 0 !important;
    }

    .bottom-header .main-menu .menu li > a,
    .bottom-header .main-menu .list > li > a {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 575px) {
    .topbar .logo-area img {
        max-height: 40px;
    }

    .ny-garage-chip span {
        display: none;
    }

    .ny-garage-chip {
        padding: 8px;
    }
}

/* ============================================================
   ============================================================
   PASS 4 — TOPBAR ALIGNMENT LOCK
   All interactive elements inside the topbar share an identical
   height (44px), a pill radius, and consistent inner padding so
   they visually align as a single row.
   ============================================================
   ============================================================ */

/* Topbar interactive elements share one height */
.main-header .topbar .ny-garage-chip,
.main-header .topbar .topbar .nav-item.account .nav-link,
.main-header .topbar .nav .nav-link,
.main-header .topbar .nav-item .nav-link,
.main-header .topbar .search-area #search-form,
.main-header .topbar .search-area .search {
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
}

/* ---- Garage chip ---- */
.main-header .topbar .ny-garage-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 0 16px !important;
    border-radius: var(--ny-r-pill) !important;
    border: 1px solid var(--ny-border-mid);
    background: var(--ny-white);
    color: var(--ny-charcoal);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease);
}

.main-header .topbar .ny-garage-chip:hover {
    background: var(--ny-charcoal);
    color: var(--ny-white);
    border-color: var(--ny-charcoal);
    transform: none;
}

.main-header .topbar .ny-garage-chip i {
    font-size: 18px;
    color: var(--ny-red);
    line-height: 1;
}

.main-header .topbar .ny-garage-chip:hover i {
    color: var(--ny-white);
}

/* ---- Account dropdown trigger ---- */
.main-header .topbar .nav-item.account .nav-link,
.main-header .topbar .nav .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 0 16px !important;
    border-radius: var(--ny-r-pill) !important;
    border: 1px solid var(--ny-border-mid);
    background: var(--ny-white);
    color: var(--ny-charcoal) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.main-header .topbar .nav-item.account .nav-link:hover,
.main-header .topbar .nav .nav-link:hover {
    background: var(--ny-charcoal) !important;
    border-color: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
}

.main-header .topbar .nav-item.account .nav-link:hover i,
.main-header .topbar .nav .nav-link:hover i {
    color: var(--ny-white);
}

.main-header .topbar .nav-item.account .nav-link i,
.main-header .topbar .nav .nav-link i {
    font-size: 18px;
    color: var(--ny-red);
    line-height: 1;
}

/* Hide ugly Bootstrap dropdown caret if present */
.main-header .topbar .dropdown-toggle::after {
    display: none !important;
}

/* ---- Search bar — same 44px height ---- */
.main-header .topbar .search-area #search-form,
.main-header .topbar .search-area .search {
    padding: 2px !important;
    background: var(--ny-surface-1) !important;
    border: 1px solid var(--ny-border-mid);
    border-radius: var(--ny-r-pill);
    display: flex !important;
    align-items: center !important;
    overflow: visible;
}

.main-header .topbar .search-area #search-input {
    flex: 1;
    height: 38px;
    min-height: 38px;
    padding: 0 18px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    color: var(--ny-charcoal);
    line-height: 1 !important;
}

.main-header .topbar .search-area #search-form button[type="submit"] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex-shrink: 0;
    background: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
    border-radius: var(--ny-r-pill) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    transition: background var(--ny-dur) var(--ny-ease);
}

.main-header .topbar .search-area #search-form button[type="submit"]:hover {
    background: var(--ny-red) !important;
    transform: none;
}

.main-header .topbar .search-area #search-form button[type="submit"] img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

/* ---- Row layout: garage + account aligned on same baseline ---- */
.main-header .topbar .topbar-left > .d-flex {
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.main-header .topbar .topbar-left .nav {
    margin: 0;
}

/* Ensure the dropdown still anchors correctly under the chip */
.main-header .topbar .nav-item.account {
    list-style: none;
}

/* ============================================================
   BOTTOM-HEADER — center menu vertical alignment + visual rhythm
   ============================================================ */
.bottom-header {
    padding: 4px 0 !important;
}

.bottom-header .main-menu {
    min-height: 48px;
}

.bottom-header .main-menu .menu li > a,
.bottom-header .main-menu .list > li > a {
    height: 40px;
    display: inline-flex;
    align-items: center;
}

/* ============================================================
   RESPONSIVE — keep alignment intact on mobile
   ============================================================ */
@media (max-width: 991px) {
    .main-header .topbar .ny-garage-chip,
    .main-header .topbar .nav-item.account .nav-link,
    .main-header .topbar .nav .nav-link,
    .main-header .topbar .search-area #search-form,
    .main-header .topbar .search-area .search {
        height: 40px;
        min-height: 40px;
    }

    .main-header .topbar .search-area #search-input {
        height: 34px;
        min-height: 34px;
    }

    .main-header .topbar .search-area #search-form button[type="submit"] {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

/* ============================================================
   ============================================================
   PASS 5 — SPACE-BETWEEN + LEGACY OVERRIDES
   Forces .topbar-left and .main-menu to space-between layout and
   defeats main.css legacy rules (header.main-header .nav-item.account
   / .nav-link / .main-menu .list-item > a) using same specificity.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   1) Topbar-left container — space-between its children
   (chip on one side, account dropdown on the other)
   ------------------------------------------------------------ */
header.main-header .topbar-left {
    margin-top: 0 !important;
}

header.main-header .topbar-left > .d-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
}

/* The chip and the user-menu UL become siblings inside the flex */
header.main-header .topbar-left > .d-flex > .ny-garage-chip {
    flex: 0 0 auto;
    order: 1;
}

header.main-header .topbar-left > .d-flex > .nav,
header.main-header .topbar-left > .d-flex > ul.nav {
    flex: 0 0 auto;
    order: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ------------------------------------------------------------
   2) Override legacy .nav-item.account chip — defeat main.css:547
   ------------------------------------------------------------ */
header.main-header .nav-item,
header.main-header .nav-item.account {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    list-style: none;
    position: relative;
}

/* ------------------------------------------------------------
   3) Override legacy .nav-link styles — defeat main.css:553
   Re-apply the chip look (pill, 44px, white, charcoal text).
   ------------------------------------------------------------ */
header.main-header .nav-link,
header.main-header .nav-item.account .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: var(--ny-r-pill) !important;
    border: 1px solid var(--ny-border-mid) !important;
    background: var(--ny-white) !important;
    color: var(--ny-charcoal) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--ny-font) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease) !important;
}

header.main-header .nav-link:hover,
header.main-header .nav-item.account .nav-link:hover {
    background: var(--ny-charcoal) !important;
    border-color: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
}

header.main-header .nav-link i {
    font-size: 18px !important;
    color: var(--ny-red) !important;
    line-height: 1;
    margin: 0 !important;
}

header.main-header .nav-link:hover i {
    color: var(--ny-white) !important;
}

/* Restore proper label position (defeat float: right; margin: 1px 0 0 10px) */
header.main-header .nav-link span.label-dropdown {
    float: none !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: inherit !important;
    line-height: 1 !important;
}

/* Cart count badge — keep visible above the icon */
header.main-header .nav-link span.count {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 10px !important;
    font-weight: 700;
    top: -2px !important;
    left: 6px !important;
}

/* ------------------------------------------------------------
   4) Main-menu container — flex + space-between
   Defeat main.css:761 `width:100%; float:right;`
   ------------------------------------------------------------ */
header.main-header .main-menu {
    width: 100% !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    position: relative;
    min-height: 48px;
}

header.main-header .main-menu .list,
header.main-header .main-menu > ul.list {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    float: none !important;
}

header.main-header .main-menu > ul.nav {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    list-style: none;
}

header.main-header .main-menu .list .list-item {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    position: relative;
}

header.main-header .main-menu .list .list-item:not(:last-child) {
    margin: 0 !important;
}

/* ------------------------------------------------------------
   5) Menu item links — defeat main.css:814 weird padding/border
   ------------------------------------------------------------ */
header.main-header .main-menu .list > .list-item > a,
header.main-header .main-menu .list > .list-item > span {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    height: 40px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: var(--ny-r-sm) !important;
    position: static !important;
    top: 0 !important;
    color: var(--ny-charcoal) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease) !important;
}

header.main-header .main-menu .list > .list-item > a:hover,
header.main-header .main-menu .list > .list-item:hover > a {
    background: var(--ny-fog) !important;
    color: var(--ny-red) !important;
}

/* Defeat the pink underline pseudo */
header.main-header .main-menu .list > .list-item > a::before,
header.main-header .main-menu .list > .list-item:hover > a::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Defeat dropdown caret styling — replace with chevron */
header.main-header .main-menu .list > .list-item-has-children > a::after {
    color: var(--ny-steel) !important;
    margin: 0 !important;
    font-size: 14px !important;
}

/* ------------------------------------------------------------
   6) Dropdown menu (account & cart) — modern surface
   Defeat main.css:592 (top:50px, padding:0.35rem 0, border-radius:8px)
   ------------------------------------------------------------ */
header.main-header .dropdown-menu {
    top: calc(100% + 6px) !important;
    margin: 0 !important;
    padding: 6px !important;
    background: var(--ny-white) !important;
    border: 1px solid var(--ny-border-soft) !important;
    border-radius: var(--ny-r-md) !important;
    box-shadow: var(--ny-shadow-lg) !important;
    color: var(--ny-charcoal) !important;
    min-width: 220px !important;
    z-index: 80 !important;
}

header.main-header .dropdown-menu .dropdown-item {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--ny-charcoal) !important;
    font-family: var(--ny-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    padding: 9px 12px !important;
    border-radius: var(--ny-r-sm) !important;
    text-decoration: none !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease) !important;
}

header.main-header .dropdown-menu .dropdown-item:hover {
    background: var(--ny-fog) !important;
    color: var(--ny-red) !important;
}

header.main-header .dropdown-menu .dropdown-item i {
    font-size: 16px !important;
    color: var(--ny-steel) !important;
}

header.main-header .dropdown-menu .dropdown-item:hover i {
    color: var(--ny-red) !important;
}

/* ------------------------------------------------------------
   7) Responsive — keep alignment intact at small widths
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    header.main-header .nav-link,
    header.main-header .nav-item.account .nav-link {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    header.main-header .main-menu .list > .list-item > a,
    header.main-header .main-menu .list > .list-item > span {
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 575px) {
    header.main-header .topbar-left > .d-flex {
        gap: 8px;
    }

    header.main-header .nav-link span.label-dropdown {
        display: none !important;
    }
}

/* ============================================================
   ============================================================
   PASS 6 — SEARCH FORM POSITION RESET + MENU LAYOUT
   1) Defeats main.css absolute positioning on submit/close buttons
      that caused the search bar to overlap the logo column.
   2) Hides mobile-menu chrome on desktop so main-menu's
      space-between can place "menu items" vs "cart" at the edges
      without an empty middle.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   Search form — clean flex layout, no absolute positioning
   ------------------------------------------------------------ */
header.main-header .search-area {
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    position: relative;
}

header.main-header .search-area form.search,
header.main-header .search-area #search-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    margin: 0;
}

/* Input fills remaining horizontal space — no fixed widths */
header.main-header .search-area form.search input,
header.main-header .search-area #search-input {
    position: static;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    line-height: 1;
    padding: 0 18px;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--ny-charcoal);
    font-size: 14px;
    font-family: var(--ny-font);
    border-radius: 0;
}

/* Submit button — static flex item, NOT absolute */
header.main-header .search-area form.search button,
header.main-header .search-area form.search button[type="submit"],
header.main-header .search-area #search-form button[type="submit"] {
    position: static;
    inset: auto;
    top: auto;
    bottom: auto;

    width: 38px;
    height: 38px;
    min-width: 38px;
    flex: 0 0 38px;
    border-radius: var(--ny-r-pill);
    background: var(--ny-charcoal);
    color: var(--ny-white);
    border: 0;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--ny-dur) var(--ny-ease);
}

header.main-header .search-area form.search button:hover {
    background: var(--ny-red);
}

header.main-header .search-area form.search button img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

/* Close-search-result — keep absolute for overlay over input,
   but constrain to inside the form (not floating onto logo) */
header.main-header .search-area form.search .close-search-result,
header.main-header .search-area .close-search-result {
    position: absolute;
    inset-inline-start: 48px;
    top: 50%;
    transform: translateY(-50%);
    left: auto;
    right: auto;
    width: 28px;
    height: 28px;
    background: transparent;
    color: var(--ny-steel);
    border: 0;
    border-radius: var(--ny-r-pill);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

header.main-header .search-area form.search .close-search-result.show {
    display: inline-flex;
}

/* Search-result dropdown — anchored to form, not floating loose */
header.main-header .search-area form.search .search-result {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    left: 0;
    right: 0;
    background: var(--ny-white);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    box-shadow: var(--ny-shadow-lg);
    z-index: 70;
    max-height: 480px;
    overflow-y: auto;
}

/* ------------------------------------------------------------
   Form wrapper visual style (re-asserted)
   ------------------------------------------------------------ */
header.main-header .search-area form.search,
header.main-header .search-area #search-form {
    background: var(--ny-surface-1);
    border: 1px solid var(--ny-border-mid);
    border-radius: var(--ny-r-pill);
    padding: 2px;
    height: 44px;
    min-height: 44px;
}

header.main-header .search-area form.search:focus-within {
    border-color: var(--ny-red);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.10);
}

/* ------------------------------------------------------------
   Logo column — see PASS 7 block below for the final rule.
   This older block was clipping the logo via height + overflow.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Topbar row — make sure columns don't overflow each other
   ------------------------------------------------------------ */
header.main-header .topbar .row {
    align-items: center;
    flex-wrap: nowrap;
    margin-right: -8px;
    margin-left: -8px;
}

header.main-header .topbar .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    min-width: 0;
}

/* ------------------------------------------------------------
   Main-menu — hide mobile chrome on desktop so space-between
   distributes ONLY .list (menu items) and .nav (cart) at edges.
   ------------------------------------------------------------ */
@media (min-width: 992px) {
    header.main-header .main-menu .btn-menu,
    header.main-header .main-menu .side-menu,
    header.main-header .main-menu .overlay-side-menu {
        display: none !important;
    }
}

header.main-header .main-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 48px;
    flex-wrap: wrap;
}

header.main-header .main-menu > .list,
header.main-header .main-menu > ul.list {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    float: none;
    order: 1;
}

header.main-header .main-menu > ul.nav,
header.main-header .main-menu > .nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    float: none;
    order: 2;
}

/* Cart link inside the cart nav */
header.main-header .main-menu > ul.nav > li > a,
header.main-header .main-menu > .nav > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--ny-r-sm);
    color: var(--ny-charcoal);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    border: 0;
    background: transparent;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

header.main-header .main-menu > ul.nav > li > a:hover,
header.main-header .main-menu > .nav > .nav-item > .nav-link:hover {
    background: var(--ny-fog);
    color: var(--ny-red);
}

header.main-header .main-menu > ul.nav > li > a i,
header.main-header .main-menu > .nav > .nav-item > .nav-link i {
    color: var(--ny-red);
    font-size: 18px;
}

/* ------------------------------------------------------------
   Responsive — keep menu working on tablet/mobile
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    header.main-header .main-menu {
        justify-content: space-between;
        min-height: 44px;
    }

    header.main-header .main-menu > ul.list.hidden-md {
        display: none;
    }

    header.main-header .main-menu .btn-menu {
        order: 0;
        background: transparent;
        border: 0;
        padding: 6px;
        cursor: pointer;
    }
}

/* ============================================================
   ============================================================
   PASS 7 — TOPBAR / BOTTOM-HEADER GUTTER ALIGNMENT
   Restore Bootstrap's default 15px gutter on the topbar row so
   it matches the bottom-header's container padding, then add
   extra inline-start padding on the search column to space it
   from the logo, and zero out the first menu item's inline-start
   padding so it sits flush with the logo's column edge.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   1) Topbar row → default Bootstrap gutter (15px) so it aligns
      with the bottom-header's container content edge.
   ------------------------------------------------------------ */
header.main-header .topbar .row {
    margin-right: -15px;
    margin-left: -15px;
}

header.main-header .topbar .row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
    min-width: 0;
}

/* ------------------------------------------------------------
   2) Search column — add inline-start padding (= right padding
      in RTL) so the search bar visibly steps away from the logo
      and sits closer to the button cluster.
   ------------------------------------------------------------ */
header.main-header .topbar .row > .col-lg-6,
header.main-header .topbar .row > .col-md-5 {
    padding-inline-start: 40px;
}

@media (max-width: 1199px) {
    header.main-header .topbar .row > .col-lg-6,
    header.main-header .topbar .row > .col-md-5 {
        padding-inline-start: 24px;
    }
}

@media (max-width: 991px) {
    header.main-header .topbar .row > .col-lg-6,
    header.main-header .topbar .row > .col-md-5 {
        padding-inline-start: 15px;
    }
}

/* ------------------------------------------------------------
   3) Bottom-header container — same gutter as topbar
   ------------------------------------------------------------ */
.bottom-header > .container.main-container,
.bottom-header > .main-container {
    padding-left: 15px;
    padding-right: 15px;
}

/* ------------------------------------------------------------
   4) Main-menu list → flush to its parent's inline-start
      (= right edge in RTL) so the first item visually aligns
      with the logo's column edge.
   ------------------------------------------------------------ */
header.main-header .main-menu > .list,
header.main-header .main-menu > ul.list {
    padding: 0;
    margin: 0;
}

/* Zero out the leading inline padding of the FIRST menu link so
   its text starts exactly at the parent's right edge (RTL). */
header.main-header .main-menu > .list > .list-item:first-child > a,
header.main-header .main-menu > .list > .list-item:first-child > span {
    padding-inline-start: 0;
}

/* Match: zero out trailing inline padding of the LAST cart item
   on the opposite edge so left edge sits flush too. */
header.main-header .main-menu > ul.nav > li:last-child > a,
header.main-header .main-menu > .nav > .nav-item:last-child > .nav-link {
    padding-inline-end: 0;
}

/* ------------------------------------------------------------
   5) Logo column — let legacy `float: right` and Bootstrap-RTL
      handle positioning. Only constrain the image height.
   ------------------------------------------------------------ */
header.main-header .logo-area {
    margin: 0;
}

header.main-header .logo-area img {
    max-height: 56px;
    width: auto;
    height: auto;
    display: block;
}

/* ============================================================
   ============================================================
   PASS 8 — FINAL MAIN-MENU OVERRIDE (definitive)
   The user reports legacy `float` / `.dt-sl { float: right }` /
   Bootstrap `.float-right !important` are still bleeding through.
   This block consolidates the menu rules with maximum specificity
   and relies on brand-override layer (declared in legacy-bundle)
   to win the !important cascade vs Bootstrap utilities.
   ============================================================
   ============================================================ */

/* Lock the menu container as a flex row with two flex items
   (list + cart nav), edges flush to container content edges. */
header.main-header nav.main-menu,
header.main-header .main-menu.dt-sl {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    min-height: 48px !important;
    position: relative !important;
}

/* List (menu items) — first flex item, flush to inline-start
   edge of the parent (right edge in RTL). No padding/margin. */
header.main-header nav.main-menu > ul.list,
header.main-header nav.main-menu > ul.list.float-right,
header.main-header nav.main-menu > ul.list.hidden-md {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    width: auto !important;
    order: 1 !important;
    flex: 0 0 auto !important;
}

/* Cart nav — second flex item, flush to inline-end edge. */
header.main-header nav.main-menu > ul.nav,
header.main-header nav.main-menu > ul.nav.float-left {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    width: auto !important;
    order: 2 !important;
    flex: 0 0 auto !important;
}

/* Each list-item is a clean inline-flex unit, no float. */
header.main-header nav.main-menu > ul.list > .list-item,
header.main-header nav.main-menu > ul.list > li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: relative !important;
}

/* First menu link: zero inline-start padding so text aligns
   with the parent edge (and therefore with the logo's edge). */
header.main-header nav.main-menu > ul.list > .list-item:first-child > a,
header.main-header nav.main-menu > ul.list > li:first-child > a {
    padding-inline-start: 0 !important;
    padding-right: 0 !important;  /* RTL physical fallback */
}

/* Last cart link: zero inline-end padding so it aligns with the
   left edge of container in RTL. */
header.main-header nav.main-menu > ul.nav > li:last-child > a,
header.main-header nav.main-menu > ul.nav > .nav-item:last-child > .nav-link {
    padding-inline-end: 0 !important;
    padding: 8px 17px !important;  /* RTL physical fallback */
}

/* Bottom-header — explicit container padding match (15px both sides)
   so menu content edges align with topbar's col content edges. */
.bottom-header > .container.main-container,
.bottom-header > .main-container,
header.main-header .bottom-header > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Mobile-menu chrome inside main-menu is hidden on desktop so
   it doesn't add a 3rd flex item that disrupts space-between. */
@media (min-width: 992px) {
    header.main-header nav.main-menu .btn-menu,
    header.main-header nav.main-menu .side-menu,
    header.main-header nav.main-menu .overlay-side-menu {
        display: none !important;
    }
}

/* Defeat .dt-sl float utility on the menu / its parent */
header.main-header .bottom-header,
header.main-header .bottom-header.dt-sl,
header.main-header .main-menu.dt-sl {
    float: none !important;
}

/* ============================================================
   ============================================================
   PASS 9 — HARD RESET (final, minimal)
   The previous passes added too many topbar/search overrides
   that clipped the logo, broke the search bar layout, and made
   the page unusable. This block:
     1. UN-clips the logo (no height + overflow rules)
     2. Restores the search form to its legacy positioned layout
        so the input + buttons render correctly
     3. Keeps ONLY the menu space-between behavior the user asked
        for, with first menu item aligned to logo's edge.
   Everything else falls back to legacy theme defaults.
   ============================================================
   ============================================================ */

/* ---- Logo: let the image render naturally, no clipping ---- */
header.main-header .logo-area,
header.main-header .logo-area a,
header.main-header .logo-area img {
    overflow: visible !important;
    height: auto !important;
    max-height: 56px;
    width: auto;
}

header.main-header .logo-area {
    margin: 8px 0 !important;
    display: block !important;
}

header.main-header .logo-area a {
    display: inline-block !important;
}

header.main-header .logo-area img {
    display: block !important;
    max-width: 100%;
}

/* ---- Search: keep legacy positioning (input full-width with
        absolute submit button on left edge), but restyle.
        IMPORTANT: width must be 100% (NOT auto) — with float:right
        from .dt-sl and absolute-positioned children, width:auto
        causes the search-area to shrink to ~6px. ---- */
header.main-header .search-area {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
}

header.main-header .search-area form.search,
header.main-header .search-area #search-form {
    position: relative !important;
    display: block !important;
    height: 44px !important;
    min-height: 44px !important;
    background: var(--ny-surface-1) !important;
    border: 1px solid var(--ny-border-mid) !important;
    border-radius: var(--ny-r-pill) !important;
    padding: 0 !important;
    overflow: visible !important;
}

header.main-header .search-area #search-form:focus-within {
    border-color: var(--ny-red) !important;
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.10) !important;
}

header.main-header .search-area form.search input,
header.main-header .search-area #search-input {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    inset-inline-start: 48px !important;
    inset-inline-end: 16px !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ny-charcoal) !important;
    font-size: 14px !important;
    font-family: var(--ny-font) !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

header.main-header .search-area form.search button[type="submit"],
header.main-header .search-area #search-form button[type="submit"] {
    position: absolute !important;
    top: 50% !important;
    /* end = visual left in RTL, visual right in LTR — the natural
       "end of input" placement in both directions. */
    inset-inline-end: 4px !important;
    inset-inline-start: auto !important;

    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: var(--ny-r-pill) !important;
    background: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

header.main-header .search-area form.search button[type="submit"]:hover,
header.main-header .search-area #search-form button[type="submit"]:hover {
    background: var(--ny-red) !important;
}

header.main-header .search-area form.search button img {
    width: 18px !important;
    height: 18px !important;
    filter: brightness(0) invert(1) !important;
}

/* Close-search-result — small, near the submit button */
header.main-header .search-area form.search .close-search-result,
header.main-header .search-area .close-search-result {
    position: absolute !important;
    top: 50% !important;
    inset-inline-end: 44px !important;
    inset-inline-start: auto !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--ny-r-pill) !important;
    background: transparent !important;
    color: var(--ny-steel) !important;
    border: 0 !important;
    padding: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

header.main-header .search-area form.search .close-search-result.show {
    display: inline-flex !important;
}

/* ---- Topbar row: use Bootstrap defaults, no exotic gutters ---- */
header.main-header .topbar .row {
    margin-right: -15px !important;
    margin-left: -15px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

header.main-header .topbar .row > [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
    min-width: 0 !important;
}

/* Don't add extra padding on the search column — let it use full
   col-lg-6 width so the input has room to breathe. */
header.main-header .topbar .row > .col-lg-6,
header.main-header .topbar .row > .col-md-5 {
    padding-inline-start: 15px !important;
}

/* ---- Topbar-left chips group: keep them right-aligned to be
        visually close to the search bar, with proper gap. ---- */
header.main-header .topbar-left > .d-flex {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* ---- Bottom-header: keep menu working with space-between ---- */
.bottom-header > .container.main-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Hide mobile-menu chrome on desktop so .main-menu has only 2
   flex children (list + nav) for clean space-between. */
@media (min-width: 992px) {
    header.main-header .main-menu .btn-menu,
    header.main-header .main-menu .side-menu,
    header.main-header .main-menu .overlay-side-menu {
        display: none !important;
    }
}

/* ============================================================
   ============================================================
   PASS 10 — KILL .dt-sl FLOAT ON HEADER CONTAINERS
   The legacy `.dt-sl { width: 100%; float: right }` utility was
   floating the topbar, removing it from vertical flow so the
   bottom-header overlapped it (covering logo + search + chip).
   Verified via Playwright: topbar.top=40, bottom-header.top=40,
   both stacked at the same y position.
   ============================================================
   ============================================================ */

header.main-header.dt-sl,
header.main-header .topbar.dt-sl,
header.main-header .bottom-header.dt-sl,
header.main-header .logo-area.float-right,
.search-area.dt-sl,
.ny-topstrip {
    float: none !important;
}

/* Logo-area is a block child of col-lg-2 in topbar. Keep it
   simply right-aligned in RTL via text-align (no float needed). */
header.main-header .logo-area {
    width: auto !important;
    text-align: end !important;
}

[dir="rtl"] header.main-header .logo-area,
body header.main-header .logo-area {
    text-align: right !important;
}

header.main-header .logo-area a {
    display: inline-block !important;
}

header.main-header .logo-area img {
    display: inline-block !important;
    max-height: 56px !important;
    width: auto !important;
    height: auto !important;
}

/* ============================================================
   ============================================================
   CATEGORIES WIDGET — promotion-category cards
   DESIGN.md tokens used:
     • card        → backgroundColor: surface, rounded.md
     • title-md    → 16px / 600 / 1.4  (category name)
     • body-sm     → 13px / 400 / 1.5  (count)
     • shadow-md / shadow-lg
     • motion: dur 240ms ease-out
   UI-UX rules honored:
     • aspect-ratio on img (no CLS)
     • min touch target 44pt
     • visible focus ring
     • aria-friendly markup (semantic h4/h6)
     • reduced-motion respected via global block
   ============================================================
   ============================================================ */

/* ---- Section band ---- */
.category-section {
    margin: var(--ny-sp-7) 0;
}

.ny-widget-band--categories .category-section {
    margin: 0;
}

/* ---- Section title (match .ny-section-title visual rhythm) ---- */
.category-section .category-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--ny-sp-5) 0;
    padding: 0 0 var(--ny-sp-3) 0;
    border-bottom: 1px solid var(--ny-border-soft);
}

.category-section .category-section-title h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ny-charcoal);
    margin: 0;
    padding-inline-start: 14px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ny-sp-2);
}

.category-section .category-section-title h3::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: var(--ny-red);
    border-radius: 2px;
}

/* ---- Carousel item gap ---- */
.category-section .category-slider .item {
    padding: 0 var(--ny-sp-2);
}

/* ---- Card (anchor) ---- */
.promotion-category {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ny-white);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-4);
    text-align: center;
    color: var(--ny-charcoal);
    text-decoration: none;
    transition: transform var(--ny-dur) var(--ny-ease-out),
                box-shadow var(--ny-dur) var(--ny-ease-out),
                border-color var(--ny-dur) var(--ny-ease-out);
    height: 100%;
    min-height: 240px;
    isolation: isolate;
    overflow: hidden;
}

/* Subtle red accent bar on top, revealed on hover (editorial signature) */
.promotion-category::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 3px;
    background: var(--ny-red);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--ny-dur) var(--ny-ease-out);
    z-index: 2;
}

.promotion-category:hover {
    transform: translateY(-4px);
    box-shadow: var(--ny-shadow-lg);
    border-color: var(--ny-charcoal);
    text-decoration: none;
    color: var(--ny-charcoal);
}

.promotion-category:hover::before {
    transform: scaleX(1);
}

.promotion-category:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 2px;
}

/* ---- Image with aspect-ratio (prevents CLS) ---- */
.promotion-category img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--ny-surface-2);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-3);
    margin: 0 auto var(--ny-sp-3) auto;
    max-width: 180px;
    transition: transform var(--ny-dur-slow) var(--ny-ease);
}

.promotion-category:hover img {
    transform: scale(1.04);
}

/* ---- Category name (title-md token: 16/600/1.4) ---- */
.promotion-category .promotion-category-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ny-charcoal);
    margin: 0 0 var(--ny-sp-1) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 44px;
    transition: color var(--ny-dur) var(--ny-ease);
}

.promotion-category:hover .promotion-category-name {
    color: var(--ny-red);
}

/* ---- Count (body-sm + steel) ---- */
.promotion-category .promotion-category-quantity {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ny-steel);
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.promotion-category .promotion-category-quantity::before {
    content: '\F0900';
    font-family: 'Material Design Icons';
    color: var(--ny-red);
    opacity: 0.7;
    font-size: 14px;
    line-height: 1;
}

/* ---- Owl-carousel inheriting brand polish (already in PASS K) ---- */

/* ---- Responsive: smaller padding on small screens ---- */
@media (max-width: 991px) {
    .promotion-category {
        min-height: 220px;
        padding: var(--ny-sp-3);
    }
    .promotion-category .promotion-category-name {
        font-size: 14px;
        min-height: 40px;
    }
    .promotion-category .promotion-category-quantity {
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .promotion-category {
        min-height: 200px;
    }
    .promotion-category img {
        max-width: 140px;
    }
    .category-section .category-section-title h3 {
        font-size: 18px;
    }
}

/* ============================================================
   ============================================================
   NY-BENTO-CATEGORIES — visual upgrade
   Goals (per ui-ux-pro-max audit):
     1. Larger, image-as-feature (not corner-icon-style)
     2. Always-visible CTA arrow (discoverable; not hover-only)
     3. Pill-style count with icon (visible metadata)
     4. Big tile gets a hero image area + gradient mask
     5. Accent tile keeps red but with stronger text shadow
     6. Subtle red corner accent on default tiles for editorial signature
   Uses DESIGN.md tokens: card-bento, card-bento-big, card-bento-accent
   ============================================================
   ============================================================ */

/* ── Tile baseline upgrade ───────────────────────────────────── */
.ny-bento__tile {
    padding: var(--ny-sp-5) var(--ny-sp-5) var(--ny-sp-4) var(--ny-sp-5);
    background: var(--ny-white);
    border: 1px solid var(--ny-border-soft);
    box-shadow: var(--ny-shadow-sm);
    transition: transform var(--ny-dur) var(--ny-ease-out),
                box-shadow var(--ny-dur) var(--ny-ease-out),
                border-color var(--ny-dur) var(--ny-ease-out);
}

/* RE-ASSERT big / accent bg AFTER baseline (same specificity,
   needs to come later to win) */
.ny-bento__tile.ny-bento__tile--big {
    background: linear-gradient(135deg, var(--ny-charcoal) 0%, var(--ny-onyx) 100%);
    color: var(--ny-white);
    border-color: transparent;
    box-shadow: var(--ny-shadow-md);
}

.ny-bento__tile.ny-bento__tile--accent {
    background: var(--ny-red);
    color: var(--ny-white);
    border-color: transparent;
    box-shadow: var(--ny-shadow-md);
}

/* Default (small) tile: red corner accent on hover */
.ny-bento__tile:not(.ny-bento__tile--big):not(.ny-bento__tile--accent)::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(225deg, var(--ny-red) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--ny-dur) var(--ny-ease);
    pointer-events: none;
    z-index: 1;
}

.ny-bento__tile:not(.ny-bento__tile--big):not(.ny-bento__tile--accent):hover::before {
    opacity: 0.18;
}

.ny-bento__tile:hover {
    box-shadow: var(--ny-shadow-lg);
}

/* ── Head row (title + image/icon) ───────────────────────────── */
.ny-bento__head {
    align-items: flex-start;
    gap: var(--ny-sp-3);
    flex: 1;
}

.ny-bento__head > div:first-child {
    flex: 1;
    min-width: 0;
}

/* ── Title ──────────────────────────────────────────────────── */
.ny-bento__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: inherit;
    letter-spacing: -0.005em;
    margin-bottom: var(--ny-sp-2);
}

.ny-bento__tile--big .ny-bento__title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 70%;
}

/* ── Count (pill style with icon) ────────────────────────────── */
.ny-bento__count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    padding: 4px 10px;
    border-radius: var(--ny-r-pill);
    background: rgba(15, 15, 16, 0.06);
    color: var(--ny-charcoal);
    opacity: 1;
    margin-top: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    width: max-content;
}

.ny-bento__count::before {
    content: '\F11AE';                /* mdi-package-variant-closed */
    font-family: 'Material Design Icons';
    font-size: 13px;
    color: var(--ny-red);
    line-height: 1;
}

/* On dark / accent tiles, count pill becomes light-on-overlay */
.ny-bento__tile--big .ny-bento__count,
.ny-bento__tile--accent .ny-bento__count {
    background: rgba(255, 255, 255, 0.14);
    color: var(--ny-white);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ny-bento__tile--big .ny-bento__count::before,
.ny-bento__tile--accent .ny-bento__count::before {
    color: var(--ny-white);
    opacity: 0.9;
}

/* ── Icon / category image ───────────────────────────────────── */
.ny-bento__icon {
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform var(--ny-dur) var(--ny-ease),
                opacity var(--ny-dur) var(--ny-ease);
}

/* When icon is an actual <img> (uploaded category image) */
img.ny-bento__icon {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain;
    background: rgba(15, 15, 16, 0.04);
    border-radius: var(--ny-r-md);
    padding: 8px;
    opacity: 1;
}

.ny-bento__tile--big img.ny-bento__icon {
    width: 112px !important;
    height: 112px !important;
    padding: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.ny-bento__tile--accent img.ny-bento__icon {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* When icon is an <i> mdi font glyph (fallback) */
i.ny-bento__icon {
    font-size: 40px;
    opacity: 0.4;
}

.ny-bento__tile--big i.ny-bento__icon {
    font-size: 84px;
    opacity: 0.22;
}

.ny-bento__tile:hover img.ny-bento__icon {
    transform: scale(1.05) rotate(-2deg);
}

.ny-bento__tile:hover i.ny-bento__icon {
    opacity: 0.85;
    color: var(--ny-red);
    transform: scale(1.05) rotate(-3deg);
}

.ny-bento__tile--big:hover i.ny-bento__icon,
.ny-bento__tile--accent:hover i.ny-bento__icon {
    color: var(--ny-white);
}

/* ── CTA (always-visible arrow chip + hover-expand label) ───── */
.ny-bento__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 12px;
    border-radius: var(--ny-r-pill);
    background: rgba(15, 15, 16, 0.06);
    color: var(--ny-charcoal);
    opacity: 1;
    transform: none;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                gap var(--ny-dur) var(--ny-ease);
    width: max-content;
    align-self: flex-start;
}

.ny-bento__cta i {
    font-size: 16px;
    line-height: 1;
    color: var(--ny-red);
    transition: transform var(--ny-dur) var(--ny-ease);
}

.ny-bento__tile:hover .ny-bento__cta {
    background: var(--ny-red);
    color: var(--ny-white);
    gap: 10px;
}

.ny-bento__tile:hover .ny-bento__cta i {
    color: var(--ny-white);
    transform: translateX(-3px);
}

/* Big tile CTA: more prominent */
.ny-bento__tile--big .ny-bento__cta {
    background: rgba(255, 255, 255, 0.12);
    color: var(--ny-white);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 16px;
    font-size: 14px;
}

.ny-bento__tile--big .ny-bento__cta i {
    color: var(--ny-white);
}

.ny-bento__tile--big:hover .ny-bento__cta {
    background: var(--ny-red);
}

/* Accent (red) tile CTA: white pill */
.ny-bento__tile--accent .ny-bento__cta {
    background: rgba(255, 255, 255, 0.18);
    color: var(--ny-white);
}

.ny-bento__tile--accent .ny-bento__cta i {
    color: var(--ny-white);
}

.ny-bento__tile--accent:hover .ny-bento__cta {
    background: var(--ny-white);
    color: var(--ny-red);
}

.ny-bento__tile--accent:hover .ny-bento__cta i {
    color: var(--ny-red);
}

/* ── Accent (red) tile: text shadow for legibility on red ──── */
.ny-bento__tile--accent .ny-bento__title,
.ny-bento__tile--accent .ny-bento__count {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* ── Big tile: ensure it has a stronger glow + ring on hover ── */
.ny-bento__tile--big:hover {
    box-shadow: var(--ny-shadow-lg), 0 0 0 1px var(--ny-red);
}

.ny-bento__tile--accent:hover {
    background: var(--ny-red-dark);
}

/* ── Focus state — keep accessibility ───────────────────────── */
.ny-bento__tile:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 3px;
}

/* ── Mobile fine-tunes ──────────────────────────────────────── */
@media (max-width: 991px) {
    .ny-bento__tile {
        padding: var(--ny-sp-4);
    }
    .ny-bento__title {
        font-size: 16px;
    }
    .ny-bento__tile--big .ny-bento__title {
        font-size: 24px;
    }
    img.ny-bento__icon {
        width: 56px !important;
        height: 56px !important;
    }
    .ny-bento__tile--big img.ny-bento__icon {
        width: 80px !important;
        height: 80px !important;
    }
}

@media (max-width: 575px) {
    .ny-bento {
        grid-auto-rows: 160px;
    }
    .ny-bento__tile {
        padding: var(--ny-sp-3);
    }
    img.ny-bento__icon {
        width: 48px !important;
        height: 48px !important;
        padding: 6px;
    }
    .ny-bento__cta {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* ============================================================
   ============================================================
   PASS — BENTO REFINEMENT (user feedback)
     • Image bigger and more prominent (was 64 → now ~104)
     • Soft white wash on card bg (subtle radial highlight)
     • Hover accent switched from charcoal to BRAND RED
       (border, ring, shadow tint, image frame)
   ============================================================
   ============================================================ */

/* Soft white-on-white wash (subtle radial highlight from top-end) */
.ny-bento__tile:not(.ny-bento__tile--big):not(.ny-bento__tile--accent) {
    background:
        radial-gradient(120% 100% at 90% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6) 50%, transparent 75%),
        linear-gradient(180deg, rgba(15, 15, 16, 0.018) 0%, rgba(15, 15, 16, 0) 100%),
        var(--ny-white);
}

/* Big tile: ALSO get a subtle white highlight at top */
.ny-bento__tile.ny-bento__tile--big {
    background:
        radial-gradient(60% 80% at 10% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
        linear-gradient(135deg, var(--ny-charcoal) 0%, var(--ny-onyx) 100%);
}

/* Accent (red) tile: subtle white highlight too */
.ny-bento__tile.ny-bento__tile--accent {
    background:
        radial-gradient(60% 80% at 10% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
        var(--ny-red);
}

/* ── BIGGER IMAGE — default tiles ──────────────────────────── */
img.ny-bento__icon {
    width: 104px !important;
    height: 104px !important;
    padding: 10px;
    background: rgba(15, 15, 16, 0.04);
    border-radius: var(--ny-r-lg);
    border: 1px solid rgba(15, 15, 16, 0.06);
    transition: transform var(--ny-dur) var(--ny-ease),
                background var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease);
}

.ny-bento__tile--big img.ny-bento__icon {
    width: 140px !important;
    height: 140px !important;
    padding: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ny-r-lg);
}

.ny-bento__tile--accent img.ny-bento__icon {
    width: 104px !important;
    height: 104px !important;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.26);
}

/* ── RED hover (replaces charcoal) ─────────────────────────── */
.ny-bento__tile:hover {
    border-color: var(--ny-red) !important;
    box-shadow:
        0 16px 40px rgba(227, 6, 19, 0.18),
        0 4px 12px rgba(227, 6, 19, 0.10) !important;
}

/* Default tiles: image frame highlights red on hover */
.ny-bento__tile:not(.ny-bento__tile--big):not(.ny-bento__tile--accent):hover img.ny-bento__icon {
    background: rgba(227, 6, 19, 0.08);
    border-color: rgba(227, 6, 19, 0.30);
    transform: scale(1.06) rotate(-2deg);
}

/* Default tile title goes red on hover */
.ny-bento__tile:not(.ny-bento__tile--big):not(.ny-bento__tile--accent):hover .ny-bento__title {
    color: var(--ny-red);
}

/* Big tile: keep dark, but stronger red ring on hover */
.ny-bento__tile--big:hover {
    border-color: var(--ny-red) !important;
    box-shadow:
        0 16px 40px rgba(227, 6, 19, 0.30),
        0 0 0 1px var(--ny-red) inset !important;
}

.ny-bento__tile--big:hover img.ny-bento__icon {
    border-color: rgba(227, 6, 19, 0.4);
    background: rgba(227, 6, 19, 0.12);
}

/* Accent (red) hover: deepen + crimson glow */
.ny-bento__tile--accent:hover {
    background:
        radial-gradient(60% 80% at 10% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
        var(--ny-red-dark) !important;
    border-color: var(--ny-red) !important;
    box-shadow:
        0 16px 40px rgba(176, 4, 15, 0.36) !important;
}

/* Replace the previous charcoal corner accent with a red one (default tile) */
.ny-bento__tile:not(.ny-bento__tile--big):not(.ny-bento__tile--accent)::before {
    background: linear-gradient(225deg, var(--ny-red) 0%, transparent 60%);
}

.ny-bento__tile:not(.ny-bento__tile--big):not(.ny-bento__tile--accent):hover::before {
    opacity: 0.22;
}

/* Mobile: adjust new larger images */
@media (max-width: 991px) {
    img.ny-bento__icon {
        width: 80px !important;
        height: 80px !important;
    }
    .ny-bento__tile--big img.ny-bento__icon {
        width: 110px !important;
        height: 110px !important;
    }
}

@media (max-width: 575px) {
    img.ny-bento__icon {
        width: 64px !important;
        height: 64px !important;
        padding: 8px;
    }
}

/* ============================================================
   ============================================================
   PRODUCT CARDS + COLORFUL SECTION — visual + bug fixes
   Bugs found via Playwright:
     1. .product-prices-div had padding 16px + radius 10px
        (looked like a phantom "pill" with no bg)
     2. .product-card padding was "12px 0px 16px" (sides=0)
     3. .amazing-section root had color charcoal on dark gradient
        (text would be invisible)
     4. Product images miss aspect-ratio enforcement → 168×210
        instead of 168×168
     5. Hover state used charcoal — not consistent with new bento
        (which uses brand red)
     6. No skeleton/shimmer while data-src lazy-load is pending
     7. price-del was bold → confusing visual hierarchy
     8. amazing-section view-all item shows broken alt text
        "pecial products" when image option is empty
   ============================================================
   ============================================================ */

/* ── Card container: clean padding, soft surface tint ───────── */
.product-card,
.product-carousel .product-card {
    padding: 0 !important;
    background: var(--ny-white) !important;
    border: 1px solid var(--ny-border-soft) !important;
    border-radius: var(--ny-r-lg) !important;
    box-shadow: var(--ny-shadow-sm) !important;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--ny-dur) var(--ny-ease-out),
                box-shadow var(--ny-dur) var(--ny-ease-out),
                border-color var(--ny-dur) var(--ny-ease-out) !important;
}

/* RED hover (consistent with bento + DESIGN.md shadow-red) */
.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--ny-red) !important;
    box-shadow:
        0 16px 40px rgba(227, 6, 19, 0.18),
        0 4px 12px rgba(227, 6, 19, 0.08) !important;
}

/* ── Thumb: enforce 1:1 + soft surface bg + skeleton shimmer ── */
.product-card .product-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    background:
        linear-gradient(90deg,
            rgba(15,15,16,0.02) 0%,
            rgba(15,15,16,0.05) 50%,
            rgba(15,15,16,0.02) 100%),
        var(--ny-surface-2);
    background-size: 200% 100%;
    overflow: hidden;
    position: relative;
}

.product-card .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--ny-sp-4);
    transition: transform var(--ny-dur-slow) var(--ny-ease);
    background: transparent;
}

.product-card:hover .product-thumb img {
    transform: scale(1.06);
}

/* ── Card body ──────────────────────────────────────────────── */
.product-card .product-card-body {
    padding: var(--ny-sp-4) !important;
    display: flex;
    flex-direction: column;
    gap: var(--ny-sp-2);
}

/* ── Title: proper brand color (not pure black) ─────────────── */
.product-card .product-title {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card .product-title a {
    color: var(--ny-charcoal) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color var(--ny-dur) var(--ny-ease);
}

.product-card .product-title a:hover {
    color: var(--ny-red) !important;
}

/* ── Rating / category meta: refined typography ─────────────── */
.product-card .rating-stars {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: var(--ny-steel) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ny-sp-2);
}

.product-card .product-meta {
    color: var(--ny-steel) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.product-card .product-meta:hover {
    color: var(--ny-red) !important;
}

.product-card .rating-stars .mdi-star.active {
    color: var(--ny-warning) !important;
}

/* ── Price block — KILL the legacy 16px padding + 10px radius ── */
.product-card .price-index-h {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-card .product-prices-div {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex;
    align-items: baseline;
    gap: var(--ny-sp-2);
    flex-wrap: wrap;
}

/* Primary price: prominent, brand color */
.product-card .product-price {
    text-align: start !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--ny-charcoal) !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Currency unit (تومان) becomes muted; visual focus on the number */
.product-card .product-price::after {
    content: '';
}

/* Struck price: NOT bold, lighter, smaller */
.product-card .product-price-del,
.product-card .price-index-h .product-price-del {
    text-align: start !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--ny-steel) !important;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

/* ── Discount badge (already styled, re-assert position) ────── */
.product-card .product-head {
    position: absolute;
    top: var(--ny-sp-3);
    inset-inline-start: var(--ny-sp-3);
    inset-inline-end: var(--ny-sp-3);
    padding: 0 !important;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}

.product-card .product-head > * { pointer-events: auto; }

.product-card .discount {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
    border-radius: var(--ny-r-sm) !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-shadow: var(--ny-shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.product-card .discount span {
    background: transparent !important;
    color: var(--ny-white) !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

/* fild_products label chip (when present) */
.product-card .fild_products {
    display: inline-block;
}

.product-card .fild_products span {
    display: inline-block;
    background: rgba(28, 28, 30, 0.85);
    color: var(--ny-white);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    padding: 3px 8px;
    border-radius: var(--ny-r-sm);
    backdrop-filter: blur(8px);
}

/* ── Add-to-cart button (single-price products) ─────────────── */
.product-card .cart {
    margin-top: auto;
    padding-top: var(--ny-sp-2);
}

.product-card .cart .add-to-cart-single {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
    padding: 10px 12px !important;
    border-radius: var(--ny-r-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease) !important;
}

.product-card .cart .add-to-cart-single:hover {
    background: var(--ny-red) !important;
    transform: translateY(-1px);
}

.product-card .cart .add-to-cart-single i {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px;
}

/* ============================================================
   AMAZING-SECTION (colorful block) — FIX contrast bug
   Section root had color charcoal on dark bg → invisible.
   ============================================================ */
.amazing-section,
.ny-widget-band--colorful .amazing-section {
    color: var(--ny-white) !important;
}

.amazing-section .amazing-product {
    color: var(--ny-white) !important;
    padding: var(--ny-sp-4) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ny-sp-3);
    min-height: 280px;
}

/* View-all card: hide broken alt text when image is missing */
.amazing-section .amazing-product img {
    max-width: 80%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.4));
}

.amazing-section .amazing-product img:not([src]),
.amazing-section .amazing-product img[src=""],
.amazing-section .amazing-product img[src*="undefined"] {
    /* Hide when src is empty — prevents "pecial products" alt-text glitch */
    display: none !important;
}

.amazing-section .amazing-product img[alt="pecial products"] {
    /* Even if browser tries to render alt text, suppress it visually */
    text-indent: -9999px;
    overflow: hidden;
}

/* If the image is empty, the amazing-product block needs a fallback
   visual — a stylized "all products" tile with brand icon. */
.amazing-section .amazing-product:has(img:not([src])),
.amazing-section .amazing-product:has(img[src=""]) {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ny-r-lg);
    backdrop-filter: blur(8px);
}

.amazing-section .amazing-product:has(img:not([src]))::before,
.amazing-section .amazing-product:has(img[src=""])::before {
    content: '\F0900';                /* mdi-package-variant-closed */
    font-family: 'Material Design Icons';
    font-size: 64px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
}

.amazing-section .amazing-product:has(img:not([src]))::after,
.amazing-section .amazing-product:has(img[src=""])::after {
    content: 'محصولات ویژه';
    font-size: 18px;
    font-weight: 700;
    color: var(--ny-white);
    margin-bottom: var(--ny-sp-3);
}

.amazing-section .view-all-amazing-btn {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
    padding: 10px 20px !important;
    border-radius: var(--ny-r-pill) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    transition: background var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease);
    box-shadow: var(--ny-shadow-red);
}

.amazing-section .view-all-amazing-btn:hover {
    background: var(--ny-red-dark) !important;
    transform: translateY(-1px);
    color: var(--ny-white) !important;
}

/* Product cards INSIDE amazing-section keep white surface */
.amazing-section .product-card {
    background: var(--ny-white) !important;
    color: var(--ny-charcoal) !important;
}

.amazing-section .product-card .product-title a,
.amazing-section .product-card .product-price {
    color: var(--ny-charcoal) !important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 575px) {
    .product-card .product-card-body {
        padding: var(--ny-sp-3) !important;
    }
    .product-card .product-title {
        font-size: 13px !important;
    }
    .product-card .product-price {
        font-size: 14px !important;
    }
    .amazing-section .amazing-product {
        min-height: 220px;
    }
}

/* ============================================================
   ============================================================
   PRODUCTS SECTION — slider polish, title-bar gap, dead-frame
     1. Kill legacy `border: 1px solid` on .product-prices-div
        and .price-index-h (was creating phantom card-frame around price)
     2. Section title — pull the red leading bar OUTSIDE the text
        with extra padding + a gap so it breathes
     3. Owl carousel — show prev/next nav buttons as floating chips,
        enable peek bleed via stage-outer padding, smooth scroll
     4. Remove redundant bg/shadow on .ny-widget-band--products band
   ============================================================
   ============================================================ */

/* ── 1) PRICE FRAME — defeat legacy border ──────────────────── */
.product-card .product-prices-div,
.product-card .price-index-h,
.product-card .product-prices-div *,
.product-card .price-index-h * {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Re-assert price typography cleanly (no borders, just text) */
.product-card .price-index-h {
    margin-top: var(--ny-sp-2) !important;
}

.product-card .product-prices-div {
    padding: 0 !important;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--ny-sp-2);
}

/* ── 2) SECTION TITLE — breathing room around the red bar ───── */
.ny-widget-band .section-title h2,
.section-title.title-wide h2,
.section-title.title-wide-custom h2 {
    padding-inline-start: 16px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

[dir="rtl"] .ny-widget-band .section-title h2,
body .ny-widget-band .section-title h2 {
    padding-right: 16px !important;
}

.ny-widget-band .section-title h2::before,
.section-title.title-wide h2::before,
.section-title.title-wide-custom h2::before {
    width: 5px !important;
    height: 24px !important;
    border-radius: 3px !important;
    inset-inline-start: 0 !important;
    background: var(--ny-red) !important;
}

/* Same treatment for the new ny-section-title used by bento + posts */
.ny-section-title h2 {
    padding-inline-start: 16px !important;
    position: relative;
}

.ny-section-title h2::before {
    content: '';
    position: absolute;
    inset-inline-start: 0 !important;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 24px;
    background: var(--ny-red);
    border-radius: 3px;
}

/* Remove bottom horizontal line from section titles — cleaner look */
.ny-widget-band .section-title,
.section-title.title-wide,
.section-title.title-wide-custom,
.ny-section-title {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: var(--ny-sp-4) !important;
}

/* ── 3) WIDGET BAND — remove bg + shadow ─────────────────────── */
.ny-widget-band--products,
.ny-widget-band--discount,
.ny-widget-band--colorful {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.ny-widget-band--products .slider-section,
.ny-widget-band--discount .slider-section {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── 4) OWL CAROUSEL — visible nav, peek bleed ──────────────── */

/* Stage outer: clip the peek to the band (END side bleeds outside container) */
.ny-widget-band--products .owl-stage-outer,
.ny-widget-band--discount .owl-stage-outer {
    overflow: visible !important;
    margin: 0;
    padding: 8px 0;
}

/* Carousel container — match the title col's `.px-sm-3` padding-inline-start
   so the first card's start edge aligns with the section title's start edge
   in RTL (both at container.right - 16px). */
.ny-widget-band--products .owl-carousel,
.ny-widget-band--discount .owl-carousel {
    overflow: visible !important;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
}

@media (min-width: 576px) {
    .ny-widget-band--products .owl-carousel,
    .ny-widget-band--discount .owl-carousel {
        padding-inline-start: 16px !important;     /* RTL: padding-right */
    }
}

/* The carousel parent row was wrapping the carousel in a Bootstrap col with
   default px padding. Tighten so the carousel right edge sits at the same X
   as the section title's right edge (in RTL). */
.ny-widget-band--products .row,
.ny-widget-band--discount .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.ny-widget-band--products .col-12.px-res-0,
.ny-widget-band--discount .col-12.px-res-0,
.ny-widget-band--products .col-12,
.ny-widget-band--discount .col-12 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Let nav buttons bleed beyond container edges — don't clip them.
   The container's own width already constrains how far things bleed. */
.ny-widget-band--products,
.ny-widget-band--discount {
    overflow: visible;
    position: relative;
}

/* Owl item — uniform gap */
.ny-widget-band--products .owl-item,
.ny-widget-band--discount .owl-item {
    padding: 0 6px;
}

/* PREV/NEXT BUTTONS — each positioned independently at carousel edges,
   vertically centered on the cards. prev (chevron-right) at the right
   END (in RTL = start side) overlapping the first card edge.
   next (chevron-left) at the left END (in RTL = peek side). */
.ny-widget-band--products .owl-nav,
.ny-widget-band--discount .owl-nav {
    position: static;
    pointer-events: none;
    margin: 0 !important;
    height: 0;
    display: block !important;
}

.ny-widget-band--products .owl-prev,
.ny-widget-band--discount .owl-prev,
.ny-widget-band--products .owl-next,
.ny-widget-band--discount .owl-next {
    position: absolute !important;
    top: 38% !important;
    transform: translateY(-50%);
    pointer-events: auto;
    z-index: 5;
}

/* prev = chevron-right (goes backward in RTL) → at RIGHT (start side) */
.ny-widget-band--products .owl-prev,
.ny-widget-band--discount .owl-prev {
    inset-inline-start: -56px !important;   /* RTL: right */
    inset-inline-end: auto !important;
}

/* next = chevron-left (goes forward in RTL) → at LEFT (end side, peek) */
.ny-widget-band--products .owl-next,
.ny-widget-band--discount .owl-next {
    inset-inline-end: -56px !important;     /* RTL: left */
    inset-inline-start: auto !important;
}

@media (max-width: 991px) {
    .ny-widget-band--products .owl-prev,
    .ny-widget-band--discount .owl-prev {
        inset-inline-start: -8px !important;
    }
    .ny-widget-band--products .owl-next,
    .ny-widget-band--discount .owl-next {
        inset-inline-end: -8px !important;
    }
}

@media (max-width: 575px) {
    .ny-widget-band--products .owl-prev,
    .ny-widget-band--discount .owl-prev,
    .ny-widget-band--products .owl-next,
    .ny-widget-band--discount .owl-next {
        top: 30% !important;
    }
}

/* ============================================================
   ============================================================
   HERO — full-bleed (edge-to-edge, flush against menu, radius 0)
   ============================================================
   ============================================================ */

/* Remove top spacing on main so hero touches the bottom-header */
.main-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}

.bottom-header {
    margin-bottom: 0 !important;
}

/* Hero band breaks out of .container.main-container to full viewport width.
   "Full bleed" technique: position-relative + negative margin to 50vw. */
.ny-widget-band--hero {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 0 !important;
    margin-bottom: var(--ny-sp-7) !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Hero itself: no radius, no margin, fill the band */
.ny-widget-band--hero .ny-hero,
.ny-hero {
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    padding: var(--ny-sp-7) var(--ny-sp-7) !important;
}

/* Inner grid stays contained — keep readable line length */
.ny-widget-band--hero .ny-hero__grid,
.ny-hero__grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--ny-sp-4);
}

/* Smaller screens: reduce padding so content has more room */
@media (max-width: 991px) {
    .ny-widget-band--hero .ny-hero,
    .ny-hero {
        padding: var(--ny-sp-6) var(--ny-sp-4) !important;
    }
}

@media (max-width: 575px) {
    .ny-widget-band--hero .ny-hero,
    .ny-hero {
        padding: var(--ny-sp-5) var(--ny-sp-3) !important;
    }
}

/* ============================================================
   ============================================================
   VEHICLE SELECTOR — scrollable brand grid + search input
   Supports 50+ brands with a search input + max-height scroll.
   ============================================================
   ============================================================ */

/* Brand search input (added by JS via .ny-brand-search wrapper) */
.ny-vselector__search {
    position: relative;
    margin-bottom: var(--ny-sp-3);
}

.ny-vselector__search input {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--ny-r-md);
    background: rgba(0, 0, 0, 0.30);
    color: var(--ny-white);
    font-family: var(--ny-font);
    font-size: 13px;
    line-height: 1;
    outline: none;
    transition: border-color var(--ny-dur) var(--ny-ease),
                background var(--ny-dur) var(--ny-ease);
}

.ny-vselector__search input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.ny-vselector__search input:focus {
    border-color: var(--ny-red);
    background: rgba(0, 0, 0, 0.45);
}

.ny-vselector__search::before {
    content: '\F0349';            /* mdi-magnify */
    font-family: 'Material Design Icons';
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}

.ny-vselector__search input:focus + .ny-vselector__search__clear,
.ny-vselector__search input:not(:placeholder-shown) + .ny-vselector__search__clear {
    opacity: 1;
}

/* Brand grid — scrollable, denser layout for many brands */
.ny-brand-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--ny-sp-2);
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    margin-inline: -4px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.ny-brand-grid::-webkit-scrollbar {
    width: 6px;
}

.ny-brand-grid::-webkit-scrollbar-track {
    background: transparent;
}

.ny-brand-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

.ny-brand-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.ny-brand-tile {
    aspect-ratio: 1 / 1;
    min-height: 64px;
}

/* No-results state */
.ny-brand-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--ny-sp-5) 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.ny-brand-grid__empty i {
    font-size: 32px;
    display: block;
    margin-bottom: var(--ny-sp-2);
    color: rgba(255, 255, 255, 0.3);
}

/* Responsive: tighter columns on smaller screens */
@media (max-width: 991px) {
    .ny-brand-grid {
        grid-template-columns: repeat(4, 1fr);
        max-height: 340px;
    }
}

@media (max-width: 575px) {
    .ny-brand-grid {
        grid-template-columns: repeat(3, 1fr);
        max-height: 320px;
    }
}

/* ============================================================
   ============================================================
   .is-classic — CLASSIC MODE (no rounded corners anywhere)
   Activated by adding `is-classic` to the wrapper div on the
   home page. Zeroes out all `--ny-r-*` design tokens AND every
   hardcoded `border-radius` so the whole page becomes a strict
   right-angled brutalist/classic aesthetic.
   ============================================================
   ============================================================ */

/* Step 1 — Zero out all radius tokens within is-classic scope.
   Anything that uses `var(--ny-r-*)` will inherit 0. */
.is-classic {
    --ny-r-sm: 0;
    --ny-r-md: 0;
    --ny-r-lg: 0;
    --ny-r-xl: 0;
    --ny-r-pill: 0;
}

/* Step 2 — Defeat any hardcoded radius values from legacy CSS or
   inline styles. Wildcard radius reset under is-classic scope. */
.is-classic,
.is-classic *,
.is-classic *::before,
.is-classic *::after {
    border-radius: 0 !important;
}

/* Step 3 — Make sure round images / avatars are sharp too.
   (Common css: img has border-radius:50% for avatars.) */
.is-classic img,
.is-classic .ny-brand-tile__logo img,
.is-classic .logo-area img {
    border-radius: 0 !important;
}

/* Step 4 — Owl carousel nav buttons (were circles, now squares).
   Keep the same visual contrast but sharp corners. */
.is-classic .owl-carousel .owl-nav button.owl-prev,
.is-classic .owl-carousel .owl-nav button.owl-next,
.is-classic .ny-widget-band--products .owl-prev,
.is-classic .ny-widget-band--products .owl-next,
.is-classic .ny-widget-band--discount .owl-prev,
.is-classic .ny-widget-band--discount .owl-next {
    border-radius: 0 !important;
}

/* Step 5 — Pill chips (garage, brand strip, count, CTA) → squares */
.is-classic .ny-garage-chip,
.is-classic header.main-header .nav-link,
.is-classic .ny-brandstrip__item,
.is-classic .ny-bento__count,
.is-classic .ny-bento__cta,
.is-classic .ny-verify__tab,
.is-classic .ny-btn-primary,
.is-classic .ny-btn-ghost,
.is-classic .product-card .cart .add-to-cart-single,
.is-classic .product-card .discount,
.is-classic .ny-fitment-badge,
.is-classic .ny-badge-info,
.is-classic .ny-badge-error,
.is-classic .amazing-section .view-all-amazing-btn,
.is-classic .modal-content,
.is-classic .dropdown-menu,
.is-classic .search-area #search-form,
.is-classic .search-area #search-form button[type="submit"],
.is-classic .search-area #close-search-result {
    border-radius: 0 !important;
}

/* Step 6 — Keep the design coherent: classic mode often pairs
   sharp corners with stronger 1px borders for definition.
   Just gently bump card borders so cards still feel contained. */
.is-classic .product-card,
.is-classic .ny-bento__tile,
.is-classic .promotion-category,
.is-classic .post-card,
.is-classic .widget-banner {
    border-width: 1px !important;
}

/* Step 7 — Brand-strip pills stay as text-buttons but classic */
.is-classic .ny-brandstrip__item {
    padding: 8px 14px !important;
}

/* Step 8 — Verify-input typing area stays sharp */
.is-classic .ny-verify__input,
.is-classic input,
.is-classic select,
.is-classic textarea,
.is-classic button {
    border-radius: 0 !important;
}

/* ============================================================
   ============================================================
   .is-editorial — EDITORIAL MODE (refined rounded, attractive)
   Activated by adding `is-editorial` to the wrapper div on the
   home page. Restores the design-system radii that `is-classic`
   strips, and adds:
     • a slightly more generous radius scale (modern, friendlier)
     • refined hover lift on product / bento / banner cards
     • soft pill hover on brand-strip items
     • polished pill "view-all" chip link
     • subtle scale-on-press feedback on the primary CTA
   Respects prefers-reduced-motion (transforms collapse cleanly).
   ============================================================
   ============================================================ */

/* Step 1 — Softer, more contemporary radius scale (scoped). */
.is-editorial {
    --ny-r-sm: 8px;     /* 6 → 8  : badges, label chips */
    --ny-r-md: 12px;    /* 10 → 12: buttons, inputs, product cards */
    --ny-r-lg: 20px;    /* 16 → 20: bento, banner cards, USP strip */
    --ny-r-xl: 28px;    /* 24 → 28: hero, authenticity pillar */
}

/* Step 2 — Product card: smoother lift + softer shadow on hover. */
.is-editorial .product-card {
    border-radius: var(--ny-r-md) !important;
    transition: transform var(--ny-dur) var(--ny-ease-out),
                box-shadow var(--ny-dur) var(--ny-ease-out),
                border-color var(--ny-dur) var(--ny-ease-out);
}

.is-editorial .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ny-shadow-lg);
    border-color: var(--ny-border-mid);
}

/* Step 3 — Bento tiles: keep their existing lift but ensure the
   refined radius and a subtle inner-shadow on hover for depth. */
.is-editorial .ny-bento__tile {
    border-radius: var(--ny-r-lg);
    transition: transform var(--ny-dur) var(--ny-ease-out),
                box-shadow var(--ny-dur) var(--ny-ease-out),
                border-color var(--ny-dur) var(--ny-ease-out);
}

/* Step 4 — Brand-strip items: chip-brand-hover from DESIGN.md
   (transparent → ny-fog on hover, charcoal text). */
.is-editorial .ny-brandstrip__item {
    border-radius: var(--ny-r-pill) !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

.is-editorial .ny-brandstrip__item:hover {
    background: var(--ny-fog) !important;
    color: var(--ny-charcoal) !important;
}

/* Step 5 — Primary CTA: tactile scale on hover (combines with the
   existing translateY + shadow-red for a single coherent lift). */
.is-editorial .ny-btn-primary {
    border-radius: var(--ny-r-md);
}

.is-editorial .ny-btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
}

.is-editorial .ny-btn-primary:active {
    transform: translateY(0) scale(0.99);
}

/* Step 6 — Section-title "view all" link as a polished pill. */
.is-editorial .ny-section-title__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--ny-r-pill);
    background: var(--ny-fog);
    color: var(--ny-charcoal);
    font-weight: 500;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

.is-editorial .ny-section-title__link:hover {
    background: var(--ny-charcoal);
    color: var(--ny-white);
    text-decoration: none;
}

/* Step 7 — Add-to-cart per card: align to refined button radius. */
.is-editorial .product-card .cart .add-to-cart-single {
    border-radius: var(--ny-r-md) !important;
}

/* Step 8 — Owl carousel nav buttons: keep perfectly circular. */
.is-editorial .owl-carousel .owl-nav button.owl-prev,
.is-editorial .owl-carousel .owl-nav button.owl-next,
.is-editorial .ny-widget-band--products .owl-prev,
.is-editorial .ny-widget-band--products .owl-next,
.is-editorial .ny-widget-band--discount .owl-prev,
.is-editorial .ny-widget-band--discount .owl-next {
    border-radius: 50% !important;
}

/* Step 9 — Modals & dropdowns: rounded panels on the home surface. */
.is-editorial .modal-content {
    border-radius: var(--ny-r-lg) !important;
}

.is-editorial .dropdown-menu {
    border-radius: var(--ny-r-md) !important;
}

/* Step 10 — Banner widget tiles: editorial radius. */
.is-editorial .widget-banner,
.is-editorial .ny-widget-band--banners .widget-banner > a,
.is-editorial .ny-widget-band--banners .widget-banner img {
    border-radius: var(--ny-r-lg);
    overflow: hidden;
}

/* Step 11 — Reduced motion: collapse transforms / lifts. */
@media (prefers-reduced-motion: reduce) {
    .is-editorial .product-card,
    .is-editorial .ny-bento__tile,
    .is-editorial .ny-btn-primary,
    .is-editorial .ny-brandstrip__item,
    .is-editorial .ny-section-title__link {
        transition: none !important;
    }

    .is-editorial .product-card:hover,
    .is-editorial .ny-bento__tile:hover,
    .is-editorial .ny-btn-primary:hover,
    .is-editorial .ny-btn-primary:active {
        transform: none !important;
    }
}

/* ============================================================
   ============================================================
   MEGA MENU — editorial visual upgrade
   Improves the .sub-menu / .megadrop dropdown when a menu item
   is hovered. Adds:
     • clean grid layout for category columns
     • subtle red accent on master-menu hover + active
     • better typography hierarchy (h5 = category, h6 = sub)
     • soft animation on dropdown open
     • shadow + border for proper visual elevation
   ============================================================
   ============================================================ */

/* Container — the floating dropdown panel */
header.main-header .main-menu .list .list-item-has-children .sub-menu {
    background: var(--ny-white) !important;
    border: 1px solid var(--ny-border-soft) !important;
    box-shadow: 0 16px 48px rgba(15, 15, 16, 0.16) !important;
    border-top: 3px solid var(--ny-red) !important;
    padding: var(--ny-sp-5) !important;
    min-width: 280px;
    z-index: 100;
}

/* Sub-menu items (basic dropdown) */
header.main-header .main-menu .list .list-item-has-children .sub-menu li {
    padding: 0;
    border: 0;
}

header.main-header .main-menu .list .list-item-has-children .sub-menu a {
    display: flex !important;
    align-items: center;
    gap: var(--ny-sp-2);
    padding: 9px 12px !important;
    color: var(--ny-charcoal) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    border: 0 !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                padding-inline-start var(--ny-dur) var(--ny-ease);
}

header.main-header .main-menu .list .list-item-has-children .sub-menu a:hover {
    background: var(--ny-fog) !important;
    color: var(--ny-red) !important;
    padding-inline-start: 18px !important;
}

/* Active item indicator */
header.main-header .main-menu .list .list-item-has-children .sub-menu li.active > a,
header.main-header .main-menu .list .list-item-has-children .sub-menu a.master-menu {
    color: var(--ny-charcoal) !important;
    font-weight: 700 !important;
}

/* ── MEGAMENU specific (multi-column grid) ─────────────────── */
header.main-header .main-menu .list-item.mega-menu .sub-menu,
header.main-header .main-menu .list-item.mega-menu > .sub-menu {
    width: 100% !important;
    max-width: 1400px !important;
    inset-inline-start: 50% !important;
    transform: translateX(-50%) !important;
    padding: var(--ny-sp-6) var(--ny-sp-7) !important;
    display: flex !important;
    gap: var(--ny-sp-5);
}

/* Master menu (level 1 in megamenu) — left column with category list */
header.main-header .main-menu .list-item.mega-menu .sub-menu > li {
    flex: 0 0 220px;
    border-inline-end: 1px solid var(--ny-border-soft);
    padding-inline-end: var(--ny-sp-4) !important;
}

header.main-header .main-menu .list-item.mega-menu .sub-menu > li:last-child {
    border-inline-end: 0;
    padding-inline-end: 0 !important;
}

header.main-header .main-menu .list-item.mega-menu .sub-menu .master-menu {
    display: flex !important;
    align-items: center;
    gap: var(--ny-sp-2);
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ny-charcoal) !important;
    line-height: 1.3 !important;
    transition: all var(--ny-dur) var(--ny-ease);
    position: relative;
}

header.main-header .main-menu .list-item.mega-menu .sub-menu .master-menu::before {
    content: '\F0142';                /* chevron-left in RTL */
    font-family: 'Material Design Icons';
    margin-inline-start: auto;
    font-size: 16px;
    color: var(--ny-steel);
    transition: transform var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

header.main-header .main-menu .list-item.mega-menu .sub-menu .master-menu:hover {
    background: var(--ny-fog) !important;
    color: var(--ny-red) !important;
}

header.main-header .main-menu .list-item.mega-menu .sub-menu .master-menu:hover::before {
    color: var(--ny-red);
    transform: translateX(-4px);
}

/* Megadrop — the right-side content area of mega menu */
.megadrop {
    flex: 1;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ny-sp-4) var(--ny-sp-5);
    align-content: start;
    padding-inline-start: var(--ny-sp-4);
}

.megadrop a {
    display: block !important;
    padding: 6px 0 !important;
    color: var(--ny-charcoal) !important;
    text-decoration: none !important;
    transition: color var(--ny-dur) var(--ny-ease);
}

.megadrop a:hover {
    color: var(--ny-red) !important;
}

/* Level 2 - category headings */
.megadrop .h5 {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--ny-charcoal) !important;
    margin: 0 0 var(--ny-sp-2) 0 !important;
    padding-bottom: var(--ny-sp-2);
    border-bottom: 1px solid var(--ny-border-soft);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.megadrop .h5::before {
    content: '';
    width: 3px;
    height: 14px;
    background: var(--ny-red);
    display: inline-block;
}

/* Level 3 - sub-category items */
.megadrop .h6 {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: var(--ny-steel) !important;
    margin: 0 !important;
    transition: color var(--ny-dur) var(--ny-ease),
                padding-inline-start var(--ny-dur) var(--ny-ease);
}

.megadrop a:hover .h6 {
    color: var(--ny-red) !important;
    padding-inline-start: 6px !important;
}

/* Smooth open animation */
header.main-header .main-menu .list .list-item-has-children .sub-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ny-ease-out),
                transform 200ms var(--ny-ease-out),
                visibility 0s 200ms;
}

header.main-header .main-menu .list .list-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
}

/* Megamenu position centering with transform */
header.main-header .main-menu .list-item.mega-menu:hover > .sub-menu {
    transform: translateX(-50%) translateY(0) !important;
}

header.main-header .main-menu .list-item.mega-menu .sub-menu {
    transform: translateX(-50%) translateY(-8px) !important;
}

/* Responsive: megamenu falls back to scrollable list on tablet */
@media (max-width: 991px) {
    header.main-header .main-menu .list-item.mega-menu .sub-menu {
        flex-direction: column;
    }
    .megadrop {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   ============================================================
   FOOTER — editorial visual upgrade
   New sections (added via blade): newsletter, contact, payments
   Existing sections (link groups, socials, enamad/samandehi):
   restyled with brand tokens, better hierarchy, accessibility.
   ============================================================
   ============================================================ */

footer.main-footer {
    background: var(--ny-charcoal);
    color: var(--ny-silver);
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* Subtle red glow accent at the top of footer */
footer.main-footer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 240px;
    background: radial-gradient(60% 100% at 50% 0%, rgba(227, 6, 19, 0.10), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

footer.main-footer > * {
    position: relative;
    z-index: 1;
}

/* ── Back-to-top button — fixed scroll-to-top in bottom-end corner.
   Visible always (so user can find it). Stays out of footer flow. ─── */
footer.main-footer .back-to-top {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    inset-inline-start: auto;
    top: auto;
    transform: none;
    z-index: 1000;
    pointer-events: none;
    border: none ;
}

footer.main-footer .back-to-top a {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ny-charcoal);
    border-radius: var(--ny-r-pill);
    color: var(--ny-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 15, 16, 0.30);
    transition: background var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease);
}

footer.main-footer .back-to-top a:hover {
    background: var(--ny-red);
    transform: translateY(-2px);
    color: var(--ny-white) !important;
    box-shadow: 0 12px 28px rgba(227, 6, 19, 0.40);
}
footer.main-footer .back-to-top a span{
    color: #fff !important;
}

footer.main-footer .back-to-top .icon {
    width: 22px;
    height: 22px;
    background: var(--ny-red);
    color: var(--ny-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    border-radius: var(--ny-r-pill);
}

/* Hide back-to-top label on tiny screens, keep just the icon */
@media (max-width: 575px) {
    footer.main-footer .back-to-top a > span:last-child {
        display: none;
    }
    footer.main-footer .back-to-top a {
        padding: 10px;
    }
}

/* ── Floating contact FAB — fixed button stacked above back-to-top.
   Red pill matching the brand color, opens messengers modal.
   Note: scoped under `footer.main-footer` to win specificity vs.
   the global `footer.main-footer > *` rule that forces relative
   positioning on direct children. ─── */
footer.main-footer .ny-contact-fab {
    position: fixed;
    bottom: 24px;
    inset-inline-start: 24px;
    inset-inline-end: auto;
    top: auto;
    z-index: 1000;
    pointer-events: none;
}

footer.main-footer .ny-contact-fab__btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--ny-red);
    border-radius: 50%;
    color: var(--ny-white);
    border: 2px solid rgba(255, 255, 255, 0.22);
    padding: 0;
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(227, 6, 19, 0.40);
    transition: background var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease);
    animation: ny-contact-pulse 2.2s ease-in-out infinite;
}

footer.main-footer .ny-contact-fab__btn:hover,
footer.main-footer .ny-contact-fab__btn:focus {
    background: var(--ny-charcoal);
    transform: translateY(-2px) scale(1.05);
    color: var(--ny-white);
    box-shadow: 0 16px 36px rgba(15, 15, 16, 0.45);
    outline: none;
    animation: none;
}

footer.main-footer .ny-contact-fab__btn i.mdi {
    font-size: 26px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ny-white);
    background: transparent;
    width: auto;
    height: auto;
    border-radius: 0;
}

@keyframes ny-contact-pulse {
    0%, 100% {
        box-shadow: 0 10px 24px rgba(227, 6, 19, 0.40),
                    0 0 0 0 rgba(227, 6, 19, 0.48);
    }
    50% {
        box-shadow: 0 10px 24px rgba(227, 6, 19, 0.40),
                    0 0 0 14px rgba(227, 6, 19, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    footer.main-footer .ny-contact-fab__btn {
        animation: none;
    }
}

@media (max-width: 575px) {
    footer.main-footer .ny-contact-fab {
        bottom: 20px;
        inset-inline-start: 16px;
        inset-inline-end: auto;
    }
    footer.main-footer .ny-contact-fab__btn {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }
    footer.main-footer .ny-contact-fab__btn i.mdi {
        font-size: 22px;
    }
}

/* ── Messengers modal — list of messaging app links.
   The legacy `main.css` overrides `.modal-backdrop.show` to
   `z-index: 1000000`, so this modal must sit ABOVE that number
   to be visible (otherwise the backdrop covers it). The modal is
   also rendered OUTSIDE <footer> in markup to escape the footer's
   stacking context. ─── */
.ny-messengers-modal {
    z-index: 1000001 !important;
}

.ny-messengers-modal .modal-dialog {
    max-width: 480px;
    z-index: 1000002;
    position: relative;
}

.ny-messengers-modal .modal-content {
    background: var(--ny-charcoal, #0f0f10);
    color: var(--ny-white, #fff);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.ny-messengers-modal__close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    inset-inline-start: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--ny-white, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background var(--ny-dur, .2s) var(--ny-ease, ease),
                transform var(--ny-dur, .2s) var(--ny-ease, ease);
}

.ny-messengers-modal__close:hover {
    background: var(--ny-red, #e30613);
    transform: rotate(90deg);
}

.ny-messengers {
    padding: 28px 24px 24px;
}

.ny-messengers__head {
    text-align: center;
    margin-bottom: 20px;
}

.ny-messengers__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--ny-white, #fff);
    margin: 0 0 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ny-messengers__title i.mdi {
    color: var(--ny-red, #e30613);
}

.ny-messengers__sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.ny-messengers__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ny-messenger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--ny-white, #fff) !important;
    text-decoration: none !important;
    transition: background var(--ny-dur, .2s) var(--ny-ease, ease),
                transform var(--ny-dur, .2s) var(--ny-ease, ease),
                border-color var(--ny-dur, .2s) var(--ny-ease, ease);
}

.ny-messenger:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
    color: var(--ny-white, #fff) !important;
}

.ny-messenger__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
    color: var(--ny-white, #fff);
    background: var(--ny-red, #e30613);
}

.ny-messenger--phone .ny-messenger__icon    { background: #e30613; }
.ny-messenger--whatsapp .ny-messenger__icon { background: #25D366; }
.ny-messenger--telegram .ny-messenger__icon { background: #229ED9; }
.ny-messenger--bale .ny-messenger__icon     { background: #00BFA5; }
.ny-messenger--eitaa .ny-messenger__icon    { background: #FF6F00; }
.ny-messenger--rubika .ny-messenger__icon   { background: #9C27B0; }
.ny-messenger--soroush .ny-messenger__icon  { background: #1976D2; }
.ny-messenger--igap .ny-messenger__icon     { background: #00897B; }
.ny-messenger--email .ny-messenger__icon    { background: #455A64; }

.ny-messenger__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.ny-messenger__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ny-white, #fff);
}

.ny-messenger__value {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .ny-messengers__list {
        grid-template-columns: 1fr;
    }
    .ny-messengers {
        padding: 24px 16px 16px;
    }
}

/* ── Top band: newsletter + contact ───────────────────────── */
.ny-footer-top {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--ny-sp-7) 0;
}

.ny-footer-top__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--ny-sp-7);
    align-items: center;
}

.ny-footer-newsletter h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ny-white);
    margin: 0 0 var(--ny-sp-2) 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ny-footer-newsletter h4 i {
    color: var(--ny-red);
    font-size: 24px;
}

.ny-footer-newsletter p {
    color: var(--ny-silver);
    opacity: 0.75;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 var(--ny-sp-4) 0;
}

.ny-footer-newsletter form {
    display: flex;
    gap: var(--ny-sp-2);
    max-width: 480px;
}

.ny-footer-newsletter input[type="email"] {
    flex: 1;
    height: 44px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ny-r-md);
    color: var(--ny-white);
    padding: 0 16px;
    font-size: 14px;
    font-family: var(--ny-font);
    outline: none;
    transition: border-color var(--ny-dur) var(--ny-ease);
}

.ny-footer-newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.ny-footer-newsletter input[type="email"]:focus {
    border-color: var(--ny-red);
}

.ny-footer-newsletter button {
    height: 44px;
    padding: 0 24px;
    background: var(--ny-red);
    color: var(--ny-white);
    border: 0;
    border-radius: var(--ny-r-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ny-dur) var(--ny-ease);
}

.ny-footer-newsletter button:hover {
    background: var(--ny-red-dark);
}

/* Contact info column */
.ny-footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--ny-sp-3);
}

.ny-footer-contact__item {
    display: flex;
    align-items: center;
    gap: var(--ny-sp-3);
    color: var(--ny-silver);
    text-decoration: none;
    transition: color var(--ny-dur) var(--ny-ease);
}

.ny-footer-contact__item:hover {
    color: var(--ny-white);
}

.ny-footer-contact__icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--ny-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ny-red);
    font-size: 18px;
}

.ny-footer-contact__label {
    font-size: 11px;
    color: var(--ny-steel);
    line-height: 1.2;
    margin-bottom: 2px;
}

.ny-footer-contact__value {
    font-size: 14px;
    color: var(--ny-white);
    font-weight: 600;
    line-height: 1.2;
    font-feature-settings: "tnum";
}

/* ── Link groups (existing) — restyle ─────────────────────── */
footer.main-footer .footer-widgets {
    padding: var(--ny-sp-7) 0;
}

footer.main-footer .widget-menu {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

footer.main-footer .widget-menu .card-header,
footer.main-footer .widget-menu header {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 var(--ny-sp-4) 0 !important;
    margin-bottom: var(--ny-sp-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: relative;
}

footer.main-footer .widget-menu .card-header::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    width: 32px;
    height: 2px;
    background: var(--ny-red);
    border-radius: var(--ny-r-pill);
}

footer.main-footer .widget-menu .card-title,
footer.main-footer h3 {
    color: var(--ny-white) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0;
    line-height: 1.4;
}

footer.main-footer .footer-menu {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--ny-sp-2);
}

footer.main-footer .footer-menu li {
    margin: 0;
}

footer.main-footer .footer-menu li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ny-silver) !important;
    font-size: 13px;
    line-height: 1.6;
    text-decoration: none !important;
    transition: color var(--ny-dur) var(--ny-ease),
                padding-inline-start var(--ny-dur) var(--ny-ease);
    opacity: 0.85;
}

footer.main-footer .footer-menu li a::before {
    content: '\F0142';            /* chevron-left in RTL */
    font-family: 'Material Design Icons';
    font-size: 14px;
    color: var(--ny-red);
    opacity: 0;
    transition: opacity var(--ny-dur) var(--ny-ease);
}

footer.main-footer .footer-menu li a:hover {
    color: var(--ny-red) !important;
    padding-inline-start: 4px;
    opacity: 1;
}

footer.main-footer .footer-menu li a:hover::before {
    opacity: 1;
}

/* ── Symbol / Enamad row ─────────────────────────────────── */
footer.main-footer .symbol,
footer.main-footer .footer-logo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ny-sp-3);
    margin-bottom: var(--ny-sp-4);
}

footer.main-footer .symbol > *,
footer.main-footer .footer-logo > * {
    background: rgba(255, 255, 255, 0.06);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ny-r-md);
    overflow: hidden;
}

footer.main-footer .symbol img,
footer.main-footer .footer-logo img {
    max-height: 80px;
    width: auto;
}

/* ── Socials — circular icons with brand-tone hover ──────── */
footer.main-footer .socials,
footer.main-footer .footer-social {
    margin-top: var(--ny-sp-3);
    margin-bottom: var(--ny-sp-4);
}

footer.main-footer .footer-social ul {
    display: flex !important;
    gap: var(--ny-sp-2);
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: flex-start;
}

footer.main-footer .footer-social ul li {
    margin: 0;
}

footer.main-footer .footer-social ul li a {
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ny-silver);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--ny-r-pill);
    font-size: 20px;
    text-decoration: none !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease);
}

footer.main-footer .footer-social ul li a:hover {
    background: var(--ny-red);
    color: var(--ny-white);
    border-color: var(--ny-red);
    transform: translateY(-2px);
}

footer.main-footer .footer-social ul li a i {
    font-size: 20px;
    margin: 0 !important;
}

/* ── Business hours list ──────────────────────────────────── */
.ny-footer-hours {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ny-sp-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--ny-sp-2);
}

.ny-footer-hours li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ny-sp-2);
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--ny-r-md);
    font-size: 12px;
    line-height: 1.4;
}

.ny-footer-hours__day {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ny-silver);
    opacity: 0.85;
}

.ny-footer-hours__day i {
    color: var(--ny-red);
    font-size: 14px;
}

.ny-footer-hours__time {
    color: var(--ny-white);
    font-weight: 600;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   ============================================================
   BRAND MOSAIC — puzzle/mosaic grid for 30-50+ car brands
   - Auto-fill columns at ~110px each (responsive)
   - dense flow fills gaps left by larger tiles
   - some tiles span 2 cols / 2 rows for visual variety
   - default state: grayscale + aluminum tint (low contrast)
   - hover state: full color + lift + red accent ring
   ============================================================
   ============================================================ */

.ny-brandstrip {
    /* Replaces old strip styles — explicitly reset */
    background: transparent !important;
    border: 0 !important;
    padding: var(--ny-sp-7) 0 !important;
    margin: 0;
}

/* Section header */
.ny-brandstrip__head {
    text-align: center;
    margin-bottom: var(--ny-sp-6);
}

.ny-brandstrip__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ny-charcoal);
    margin: 0 0 var(--ny-sp-2) 0;
    display: inline-block;
    position: relative;
    padding: 0 var(--ny-sp-5);
}

.ny-brandstrip__title::before,
.ny-brandstrip__title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 32px;
    height: 2px;
    background: var(--ny-red);
    transform: translateY(-50%);
}

.ny-brandstrip__title::before { inset-inline-start: -32px; }
.ny-brandstrip__title::after  { inset-inline-end: -32px; }

.ny-brandstrip__sub {
    font-size: 14px;
    color: var(--ny-steel);
    margin: 0;
    line-height: 1.6;
}

/* ── The mosaic grid ──────────────────────────────────────── */
.ny-brandstrip__mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    grid-auto-rows: 110px;
    grid-auto-flow: dense;
    gap: 2px;                            /* tight gaps for puzzle effect */
    background: var(--ny-border-soft);   /* visible thin separator lines */
    border: 1px solid var(--ny-border-soft);
}

@media (min-width: 768px) {
    .ny-brandstrip__mosaic {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        grid-auto-rows: 130px;
    }
   
}

@media (min-width: 1200px) {
    .ny-brandstrip__mosaic {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        grid-auto-rows: 150px;
    }
}

/* ── Brand cell (each tile) ───────────────────────────────── */
.ny-brandstrip__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--ny-white);
    padding: var(--ny-sp-3);
    text-decoration: none;
    color: var(--ny-steel);
    overflow: hidden;
    isolation: isolate;
    transition: background var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease),
                z-index 0s var(--ny-dur);
    cursor: pointer;
}

/* Variable tile sizes — creates the "puzzle" feel via grid-auto-flow:dense */
.ny-brandstrip__cell.is-tile-wide { grid-column: span 2; }
.ny-brandstrip__cell.is-tile-tall { grid-row: span 2; }
.ny-brandstrip__cell.is-tile-xl   { grid-column: span 2; grid-row: span 2; }

/* Logo image — grayscale + aluminum tone by default */
.ny-brandstrip__logo {
    max-width: 70%;
    max-height: 60%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1) brightness(0.8) contrast(0.85);
    opacity: 0.55;
    transition: filter var(--ny-dur) var(--ny-ease-out),
                opacity var(--ny-dur) var(--ny-ease-out),
                transform var(--ny-dur) var(--ny-ease-out);
}

/* Mark (text fallback) — ALWAYS rendered. Hidden only when image loads
   successfully (cell gets `is-loaded`). If image fails, the onerror handler
   removes the <img> and the mark naturally stays visible. */
.ny-brandstrip__mark {
    display: inline-flex;
    font-size: 28px;
    font-weight: 800;
    color: var(--ny-steel);
    line-height: 1;
    letter-spacing: -0.02em;
    transition: color var(--ny-dur) var(--ny-ease);
}

.ny-brandstrip__cell.is-loaded .ny-brandstrip__mark {
    display: none;
}

.ny-brandstrip__cell.is-tile-xl .ny-brandstrip__mark {
    font-size: 48px;
}

.ny-brandstrip__cell.is-tile-wide .ny-brandstrip__mark,
.ny-brandstrip__cell.is-tile-tall .ny-brandstrip__mark {
    font-size: 36px;
}

/* Brand name (small caption under logo) */
.ny-brandstrip__name {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ny-steel);
    text-align: center;
    opacity: 0;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

/* ── Hover: lift + full color + show name ────────────────── */
.ny-brandstrip__cell:hover,
.ny-brandstrip__cell:focus-visible {
    background: var(--ny-white);
    z-index: 2;
    transform: scale(1.03);
    box-shadow: 0 12px 28px rgba(15, 15, 16, 0.16),
                inset 0 0 0 2px var(--ny-red);
    transition-delay: 0s;
}

.ny-brandstrip__cell:hover .ny-brandstrip__logo,
.ny-brandstrip__cell:focus-visible .ny-brandstrip__logo {
    filter: grayscale(0) brightness(1) contrast(1);
    opacity: 1;
    transform: scale(1.06);
}

.ny-brandstrip__cell:hover .ny-brandstrip__mark,
.ny-brandstrip__cell:focus-visible .ny-brandstrip__mark {
    color: var(--ny-red);
}

.ny-brandstrip__cell:hover .ny-brandstrip__name,
.ny-brandstrip__cell:focus-visible .ny-brandstrip__name {
    opacity: 1;
    color: var(--ny-charcoal);
}

.ny-brandstrip__cell:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: -2px;
}

/* ── Responsive: title flourish on small screens ────────── */
@media (max-width: 575px) {
    .ny-brandstrip__title { font-size: 18px; }
    .ny-brandstrip__title::before,
    .ny-brandstrip__title::after { display: none; }
    .ny-brandstrip__mosaic {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        grid-auto-rows: 90px;
    }
     .product-card .pc-foot {
        padding-top: 0 !important;
    }
}

/* ============================================================
   ============================================================
   BRAND MARQUEE — 3 rows of brand tiles auto-scrolling.
   Each row has ONE track with content duplicated INSIDE so the
   keyframe translate(-50%) loops seamlessly. Rows alternate
   directions and have different speeds for a "mosaic in motion"
   feel. Tile widths vary (normal / wide / xl) for puzzle effect.
   ============================================================
   ============================================================ */

/* Marquee viewport — clips overflow, fades edges.
   IMPORTANT: forced LTR so the track sits at left:0 (not right-aligned).
   In RTL, a block child wider than its parent overflows LEFT, breaking
   the translateX math. LTR keeps everything predictable. */
.ny-brandstrip__marquee {
    display: block;
    direction: ltr;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin-bottom: 4px;
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg,
        transparent 0, #000 6%, #000 94%, transparent 100%);
}

.ny-brandstrip__marquee:last-child { margin-bottom: 0; }

/* The track — single element with duplicated content inside.
   width: max-content lets it size to its full child width.
   IMPORTANT: animation-play-state forced to running so OS-level
   "reduce animations" doesn't kill the marquee silently. The
   prefers-reduced-motion handler below is still respected. */
.ny-brandstrip__track {
    display: flex;
    align-items: stretch;
    width: max-content;
    gap: 4px;
    padding: 4px 0;
    animation-duration: var(--ny-brand-duration, 25s) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
    animation-fill-mode: both !important;
    will-change: transform;
    transform: translateX(0);
}

.ny-brandstrip__marquee.is-left .ny-brandstrip__track {
    animation-name: ny-brand-marq-left !important;
}

.ny-brandstrip__marquee.is-right .ny-brandstrip__track {
    animation-name: ny-brand-marq-right !important;
}

@keyframes ny-brand-marq-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes ny-brand-marq-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Pause on hover */
.ny-brandstrip:hover .ny-brandstrip__track,
.ny-brandstrip:focus-within .ny-brandstrip__track {
    animation-play-state: paused !important;
}

/* Reduced-motion: respect user preference but provide a SLOW fallback
   instead of freezing entirely, so the user still sees that brands cycle. */
@media (prefers-reduced-motion: reduce) {
    .ny-brandstrip__track {
        animation-duration: 120s !important;
    }
}

/* ── Tile cells inside the marquee ──────────────────────── */
.ny-brandstrip__marquee .ny-brandstrip__cell {
    flex: 0 0 auto;
    width: 120px;
    height: 96px;
    background: var(--ny-white);
    border: 1px solid var(--ny-border-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    text-decoration: none;
    color: var(--ny-steel);
    overflow: hidden;
    position: relative;
    transition: background var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease);
}

/* Puzzle / mosaic tile sizes */
.ny-brandstrip__marquee .ny-brandstrip__cell.is-wide { width: 180px; }
.ny-brandstrip__marquee .ny-brandstrip__cell.is-xl   { width: 220px; }

.ny-brandstrip__marquee .ny-brandstrip__cell:hover {
    background: var(--ny-white);
    border-color: var(--ny-red);
    box-shadow: 0 8px 20px rgba(227, 6, 19, 0.18);
    transform: scale(1.04);
    z-index: 5;
}

/* Logo image — aluminum/grayscale by default, full color on hover */
.ny-brandstrip__marquee .ny-brandstrip__logo {
    max-width: 75%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1) brightness(0.85) contrast(0.85);
    opacity: 0.55;
    transition: filter var(--ny-dur) var(--ny-ease),
                opacity var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease);
}

.ny-brandstrip__marquee .ny-brandstrip__cell:hover .ny-brandstrip__logo {
    filter: grayscale(0) brightness(1);
    opacity: 1;
    transform: scale(1.06);
}

/* Text fallback */
.ny-brandstrip__marquee .ny-brandstrip__mark {
    display: inline-flex;
    font-size: 22px;
    font-weight: 800;
    color: var(--ny-steel);
    line-height: 1;
    letter-spacing: -0.02em;
    transition: color var(--ny-dur) var(--ny-ease);
}

.ny-brandstrip__marquee .ny-brandstrip__cell.is-loaded .ny-brandstrip__mark {
    display: none;
}

.ny-brandstrip__marquee .ny-brandstrip__cell:hover .ny-brandstrip__mark {
    color: var(--ny-red);
}

/* Brand name caption — fades in on hover */
.ny-brandstrip__marquee .ny-brandstrip__name {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ny-steel);
    text-align: center;
    opacity: 0;
    max-width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--ny-dur) var(--ny-ease);
}

.ny-brandstrip__marquee .ny-brandstrip__cell:hover .ny-brandstrip__name {
    opacity: 1;
    color: var(--ny-charcoal);
}

/* Mobile: smaller tiles */
@media (max-width: 767px) {
    .ny-brandstrip__marquee .ny-brandstrip__cell {
        width: 100px;
        height: 80px;
    }
    .ny-brandstrip__marquee .ny-brandstrip__cell.is-wide { width: 150px; }
    .ny-brandstrip__marquee .ny-brandstrip__cell.is-xl   { width: 180px; }
    .ny-brandstrip__marquee .ny-brandstrip__logo { max-height: 44px; }
}

@media (max-width: 575px) {
    .ny-brandstrip__marquee .ny-brandstrip__cell { width: 90px; height: 72px; }
    .ny-brandstrip__marquee .ny-brandstrip__cell.is-wide { width: 130px; }
    .ny-brandstrip__marquee .ny-brandstrip__cell.is-xl   { width: 160px; }
}

/* ── Footer brand logo (inside first link column) ─────────── */
footer.main-footer .footer-logo-area {
    margin-top: var(--ny-sp-3);
    padding: var(--ny-sp-3);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ny-r-lg, 14px);
    text-align: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

footer.main-footer .footer-logo-area:hover {
    background: #ffffff;
    transform: translateY(-2px);
}

footer.main-footer .footer-logo-area a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

footer.main-footer .footer-logo-area img {
    max-width: 100%;
    max-height: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ── Trust badges row (inside second link column) ─────────── */
footer.main-footer .footer-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ny-sp-2);
    margin-top: var(--ny-sp-3);
    justify-content: flex-start;
}

footer.main-footer .footer-trust-badges .symbol,
footer.main-footer .footer-trust-badges .footer-logo {
    margin: 0;
}

@media (max-width: 575px) {
    footer.main-footer .footer-logo-area img {
        max-height: 80px;
    }
}

/* ── Payment methods row ─────────────────────────────────── */
.ny-footer-payments {
    padding: var(--ny-sp-5) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ny-footer-payments__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ny-sp-4);
    flex-wrap: wrap;
}

.ny-footer-payments__label {
    font-size: 13px;
    color: var(--ny-silver);
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ny-footer-payments__label i {
    color: var(--ny-red);
    font-size: 18px;
}

.ny-footer-payments__list {
    display: inline-flex;
    gap: var(--ny-sp-2);
    flex-wrap: wrap;
}

.ny-footer-payments__list span {
    height: 36px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ny-r-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ny-silver);
}

.ny-footer-payments__list span i {
    font-size: 18px;
    color: var(--ny-red);
}

/* ── Copyright bar ────────────────────────────────────────── */
footer.main-footer .copyright {
    background: var(--ny-onyx) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--ny-sp-4) 0 !important;
    color: var(--ny-steel) !important;
}

footer.main-footer .copyright p {
    margin: 0 !important;
    font-size: 12px;
    line-height: 1.5;
}

/* ── Responsive footer ───────────────────────────────────── */
@media (max-width: 991px) {
    .ny-footer-top__inner {
        grid-template-columns: 1fr;
    }
    footer.main-footer .footer-widgets .col-lg-3 {
        margin-bottom: var(--ny-sp-5);
    }
}

@media (max-width: 575px) {
    .ny-footer-payments__inner {
        flex-direction: column;
        align-items: flex-start;
    }
    footer.main-footer .back-to-top {
        inset-inline-end: 16px;
    }
}

.ny-widget-band--products .owl-nav button.owl-prev,
.ny-widget-band--products .owl-nav button.owl-next,
.ny-widget-band--discount .owl-nav button.owl-prev,
.ny-widget-band--discount .owl-nav button.owl-next {
    pointer-events: auto;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: var(--ny-r-pill) !important;
    background: var(--ny-charcoal) !important;
    border: 0 !important;
    box-shadow: 0 8px 24px rgba(15, 15, 16, 0.18) !important;
    color: var(--ny-white) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 22px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease) !important;
}

.ny-widget-band--products .owl-nav button.owl-prev:hover,
.ny-widget-band--products .owl-nav button.owl-next:hover,
.ny-widget-band--discount .owl-nav button.owl-prev:hover,
.ny-widget-band--discount .owl-nav button.owl-next:hover {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
    box-shadow: var(--ny-shadow-red) !important;
    transform: scale(1.08);
}

.ny-widget-band--products .owl-nav button.disabled,
.ny-widget-band--discount .owl-nav button.disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Hide dots — nav buttons are enough */
.ny-widget-band--products .owl-dots,
.ny-widget-band--discount .owl-dots {
    display: none !important;
}

/* Replace owl default chars/icons with chevrons via CSS pseudo */
.ny-widget-band--products .owl-nav button.owl-prev span,
.ny-widget-band--discount .owl-nav button.owl-prev span,
.ny-widget-band--products .owl-nav button.owl-next span,
.ny-widget-band--discount .owl-nav button.owl-next span {
    display: none;
}

.ny-widget-band--products .owl-nav button.owl-prev::before,
.ny-widget-band--discount .owl-nav button.owl-prev::before {
    content: '\F0142';                /* mdi-chevron-left */
    font-family: 'Material Design Icons';
    font-size: 24px;
    line-height: 1;
}

.ny-widget-band--products .owl-nav button.owl-next::before,
.ny-widget-band--discount .owl-nav button.owl-next::before {
    content: '\F0141';                /* mdi-chevron-right */
    font-family: 'Material Design Icons';
    font-size: 24px;
    line-height: 1;
}

/* ── 5) Card hover — subtle red glow already applied earlier ── */

/* Mobile: smaller nav buttons + tighter padding */
@media (max-width: 575px) {
    .ny-widget-band--products .owl-nav button.owl-prev,
    .ny-widget-band--products .owl-nav button.owl-next,
    .ny-widget-band--discount .owl-nav button.owl-prev,
    .ny-widget-band--discount .owl-nav button.owl-next {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
    .ny-widget-band--products .owl-carousel,
    .ny-widget-band--discount .owl-carousel {
        padding: 0 var(--ny-sp-4);
    }
}

/* ============================================================
   Section title CTA — primary "see all" button used in the
   newest-products & discount-products section headers.
   Higher specificity + !important to win against the legacy
   .ny-widget-band .section-title a / .title-wide > a override.
   ============================================================ */
.ny-widget-band .section-title a.ny-section-cta,
.section-title.title-wide > a.ny-section-cta,
.section-title.title-wide-custom > a.ny-section-cta {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
    padding: 8px 18px !important;
    border-radius: var(--ny-r-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    transition: all var(--ny-dur) var(--ny-ease) !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(227, 6, 19, 0.18);
    line-height: 1.2;
    flex-shrink: 0;
}

.ny-widget-band .section-title a.ny-section-cta:hover,
.section-title.title-wide > a.ny-section-cta:hover,
.section-title.title-wide-custom > a.ny-section-cta:hover {
    background: var(--ny-red-dark) !important;
    color: var(--ny-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(227, 6, 19, 0.28);
}

.ny-section-cta i {
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 575px) {
    .ny-widget-band .section-title a.ny-section-cta,
    .section-title.title-wide > a.ny-section-cta,
    .section-title.title-wide-custom > a.ny-section-cta {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}


i.mdi.mdi-chevron-up{
    color: white !important;
}

/* ============================================================
   ============================================================
   PRODUCT CARD v3 — refined modern layout
   Goals (from user feedback on screenshot):
     • Tighter padding — less dead white space below image
     • Refined price: large tabular number + muted "تومان" suffix
       and a small struck old-price above (when discounted)
     • Round "view product" CTA bottom-end of body (arrow icon)
     • Category as soft pill chip with hover state
     • Compact rating chip when present
     • Add-to-cart (single-price) stays as full-width pill
       below the foot row (kept since it's a separate action)
   ============================================================
   ============================================================ */

/* ── Body rhythm: tighter padding + flex column with gap ────── */
.product-card .product-card-body {
    padding: 12px 14px 14px !important;
    gap: 6px !important;
    display: flex;
    flex-direction: column;
}

/* ── Meta row: category chip + rating sit on one tight line ──── */
.product-card .pc-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ny-sp-2);
    min-height: 22px;
}

/* Category becomes a soft pill chip — visible but quiet */
.product-card .pc-meta-row .product-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px !important;
    background: var(--ny-fog) !important;
    color: var(--ny-charcoal) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border-radius: var(--ny-r-pill) !important;
    text-decoration: none !important;
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

.product-card .pc-meta-row .product-meta:hover {
    background: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
}

/* Rating chip — compact, warm star color */
.product-card .pc-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ny-charcoal);
    line-height: 1;
    flex-shrink: 0;
}

.product-card .pc-rating i.mdi-star {
    color: var(--ny-warning);
    font-size: 14px;
    line-height: 1;
}

/* Hide the legacy .rating-stars markup if it ever co-exists */
.product-card .pc-meta-row + .rating-stars {
    display: none;
}

/* ── Title: tighter min-height and rhythm ──────────────────── */
.product-card .product-title {
    margin: 2px 0 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card .product-title a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ── Foot row: price block on the start, round view btn on end ── */
.product-card .pc-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ny-sp-3);
    margin-top: 0;
    padding-top: var(--ny-sp-2);
}

/* Price block: struck old above, big current below */
.product-card .pc-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Struck old price — small, muted, single-line */
.product-card .pc-price .product-price-del {
    display: inline-flex !important;
    align-items: baseline;
    gap: 3px;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--ny-steel) !important;
    text-decoration: line-through !important;
    line-height: 1.2 !important;
    opacity: 0.9;
}

.product-card .pc-price .pc-price__num-old {
    font-variant-numeric: tabular-nums;
}

.product-card .pc-price .pc-price__cur-old {
    margin-inline-start: 2px;
    font-size: 10px;
    opacity: 0.85;
}

/* Main price — large tabular number + muted currency suffix */
.product-card .pc-price .product-price {
    display: inline-flex !important;
    align-items: baseline;
    gap: 3px;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.product-card .pc-price .pc-price__num {
    font-size: 18px;
    font-weight: 800;
    color: var(--ny-charcoal);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.product-card .pc-price .pc-price__cur {
    margin-inline-start: 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ny-steel);
    letter-spacing: 0.02em;
}

/* Unavailable fallback ("ناموجود") — keep readable */
.product-card .pc-price--unavailable {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ny-steel) !important;
}

/* ── Round VIEW button — bottom-end floating CTA ──────────── */
.product-card .pc-view-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ny-charcoal);
    color: var(--ny-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(15, 15, 16, 0.12);
    transition: background var(--ny-dur) var(--ny-ease-out),
                transform var(--ny-dur) var(--ny-ease-out),
                box-shadow var(--ny-dur) var(--ny-ease-out),
                color var(--ny-dur) var(--ny-ease-out);
}

.product-card .pc-view-btn i {
    font-size: 20px;
    line-height: 1;
    transition: transform var(--ny-dur) var(--ny-ease-out);
}

.product-card:hover .pc-view-btn {
    background: var(--ny-red);
    box-shadow: 0 8px 24px rgba(227, 6, 19, 0.30);
}

.product-card .pc-view-btn:hover {
    background: var(--ny-red);
    color: var(--ny-white) !important;
    transform: scale(1.08);
    box-shadow: 0 10px 28px rgba(227, 6, 19, 0.38);
}

.product-card .pc-view-btn:hover i {
    transform: translateX(-3px);
}

.product-card .pc-view-btn:active {
    transform: scale(0.96);
}

.product-card .pc-view-btn:focus-visible {
    outline: 2px solid var(--ny-red);
    outline-offset: 3px;
}

/* LTR mirror — arrow drifts the other way */
[dir="ltr"] .product-card .pc-view-btn i.mdi-arrow-left::before {
    content: '\F0142';   /* mdi-chevron-right would be 0142? actually keep arrow-right */
}

[dir="ltr"] .product-card .pc-view-btn:hover i {
    transform: translateX(3px);
}

/* ── Add-to-cart pill — full-width below foot row ───────────── */
.product-card .cart {
    margin-top: var(--ny-sp-2);
    padding-top: 0;
}

.product-card .cart .add-to-cart-single {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--ny-fog) !important;
    color: var(--ny-charcoal) !important;
    padding: 9px 12px !important;
    border-radius: var(--ny-r-pill) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    border: 1px solid var(--ny-border-soft) !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease) !important;
}

.product-card .cart .add-to-cart-single:hover {
    background: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
    border-color: var(--ny-charcoal) !important;
    transform: translateY(-1px);
}

.product-card .cart .add-to-cart-single i {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px;
    line-height: 1;
}

/* ── Compact mobile rhythm ──────────────────────────────────── */
@media (max-width: 575px) {
    .product-card .product-card-body {
        padding: 10px 12px 12px !important;
        gap: 5px !important;
    }
    .product-card .product-title {
        font-size: 13px !important;
        min-height: 38px;
        margin-top: 10px !important;
    }
    .product-card .pc-price .pc-price__num {
        font-size: 16px;
    }
    .product-card .pc-view-btn {
        width: 36px;
        height: 36px;
    }
    .product-card .pc-view-btn i {
        font-size: 18px;
    }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .product-card .pc-view-btn,
    .product-card .pc-view-btn i,
    .product-card .pc-meta-row .product-meta,
    .product-card .cart .add-to-cart-single {
        transition: none !important;
    }
    .product-card .pc-view-btn:hover,
    .product-card .pc-view-btn:active,
    .product-card .cart .add-to-cart-single:hover {
        transform: none !important;
    }
    .product-card .pc-view-btn:hover i {
        transform: none !important;
    }
}

/* ============================================================
   ============================================================
   HOME MOBILE OPTIMIZATION — 2026-05
     1) Categories → 2-per-row grid (not slider) on mobile
     2) Hero → hide heavy copy, vselector on top
     3) Topstrip → fix horizontal scroll padding
     4) Authenticity → hide copy, show only verify input
     5) Amazing-section / slider-section → radius 0 on mobile
     6) General mobile polish (paddings, tap targets)
   ============================================================
   ============================================================ */

/* ── 1) CATEGORIES: 2-per-row grid on mobile ─────────────────── */
@media (max-width: 767px) {
    .category-section .category-section-slider {
        overflow: visible !important;
    }

    /* Neutralize owl-carousel so children render as a CSS grid */
    .category-section .category-slider.owl-carousel,
    .category-section .category-slider.owl-loaded {
        display: block !important;
    }

    .category-section .category-slider .owl-stage-outer {
        overflow: visible !important;
        padding: 0 !important;
    }

    .category-section .category-slider .owl-stage {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--ny-sp-3) !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        padding: 0 !important;
    }

    .category-section .category-slider .owl-item {
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    .category-section .category-slider .owl-item.cloned {
        display: none !important;          /* avoid duplicates if loop enabled */
    }

    .category-section .category-slider .item {
        padding: 0 !important;
    }

    .category-section .category-slider .owl-nav,
    .category-section .category-slider .owl-dots {
        display: none !important;
    }

    /* Tighter category cards on mobile */
    .promotion-category {
        min-height: 0 !important;
        padding: var(--ny-sp-3) !important;
    }

    .promotion-category img {
        max-width: 110px !important;
        padding: var(--ny-sp-2) !important;
        margin-bottom: var(--ny-sp-2) !important;
    }

    .promotion-category .promotion-category-name {
        font-size: 13px !important;
        min-height: 36px !important;
    }

    .promotion-category .promotion-category-quantity {
        font-size: 11px !important;
    }
}

/* ── 2) HERO: prioritize vselector, hide heavy copy ──────────── */
@media (max-width: 767px) {
    .ny-hero {
        padding: var(--ny-sp-4) !important;
        margin: var(--ny-sp-3) 0 var(--ny-sp-5) !important;
        border-radius: var(--ny-r-lg) !important;
    }

    .ny-hero__grid {
        grid-template-columns: 1fr !important;
        gap: var(--ny-sp-4) !important;
    }

    /* Move vehicle selector ABOVE the title on mobile */
    .ny-hero .ny-vselector {
        order: -1 !important;
    }

    /* Strip eyebrow + lede + USP list — user reaches selector instantly */
    .ny-hero__content .ny-hero__eyebrow,
    .ny-hero__content .ny-hero__lede,
    .ny-hero__content .ny-hero__usp {
        display: none !important;
    }

    .ny-hero__content {
        max-width: 100% !important;
        text-align: center;
    }

    .ny-hero__title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }
}

/* ── 3) TOPSTRIP: fix horizontal-scroll padding & sizing ─────── */
@media (max-width: 991px) {
    .ny-topstrip__wrap {
        padding: 8px 14px !important;        /* restore horizontal padding */
    }

    .ny-topstrip__item {
        padding: 0 var(--ny-sp-3) !important;
        font-size: 12px !important;
    }

    .ny-topstrip__item i {
        font-size: 14px !important;
    }

    .ny-topstrip .main-container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 575px) {
    .ny-topstrip {
        font-size: 11px !important;
    }

    .ny-topstrip__wrap {
        padding: 6px 12px !important;
    }

    .ny-topstrip__item {
        padding: 0 10px !important;
    }
}

/* ── 4) AUTHENTICITY: hide copy, show only verify box ────────── */
@media (max-width: 767px) {
    .ny-authenticity {
        padding: var(--ny-sp-4) !important;
        border-radius: var(--ny-r-lg) !important;
    }

    .ny-authenticity__grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Hide marketing copy block — go straight to inquiry */
    .ny-authenticity__copy {
        display: none !important;
    }

    .ny-verify {
        padding: var(--ny-sp-4) !important;
    }

    .ny-verify__tabs {
        gap: var(--ny-sp-2) !important;
    }

    .ny-verify__tab {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    .ny-verify__input {
        font-size: 16px !important;          /* prevents iOS zoom on focus */
    }
}

/* ── 5) AMAZING-SECTION / slider-section: radius 0 on mobile ── */
@media (max-width: 767px) {
    .ny-widget-band--colorful .amazing-section,
    .amazing-section,
    .slider-section.amazing-section,
    .slider-section.mb-3.amazing-section {
        border-radius: 0 !important;
    }

    .ny-widget-band--colorful .amazing-section .container.main-container,
    .amazing-section .container.main-container {
        padding-left: var(--ny-sp-3) !important;
        padding-right: var(--ny-sp-3) !important;
    }
}

/* ── 6) GENERAL HOME MOBILE POLISH ───────────────────────────── */
@media (max-width: 767px) {
    /* Tighter rhythm between widget bands */
    .ny-widget-band {
        margin: var(--ny-sp-5) 0 !important;
    }

    /* USP strip — readable & compact */
    .ny-usp {
        padding: var(--ny-sp-3) !important;
        gap: var(--ny-sp-3) !important;
        border-radius: var(--ny-r-md) !important;
    }

    .ny-usp__icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
    }

    .ny-usp__title {
        font-size: 13px !important;
    }

    .ny-usp__desc {
        font-size: 11px !important;
    }

    /* Brand strip — better tap rhythm */
    .ny-brandstrip {
        padding: var(--ny-sp-3) 0 !important;
    }

    .ny-brandstrip__inner {
        gap: var(--ny-sp-2) !important;
    }

    .ny-brandstrip__item {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* Vselector card — more compact */
    .ny-vselector {
        padding: var(--ny-sp-4) !important;
    }

    .ny-vselector__title {
        font-size: 15px !important;
    }

    /* Owl-nav arrows — comfortable tap targets */
    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }

    /* Bento categories — slightly tighter */
    .ny-bento {
        gap: var(--ny-sp-2) !important;
    }
}

/* ── 7) Container side padding on smallest screens ───────────── */
@media (max-width: 575px) {
    .main-content > .container.main-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Section titles smaller still */
    .category-section .category-section-title h3,
    .ny-section-title h2 {
        font-size: 15px !important;
    }
}

/* ============================================================
   ============================================================
   HOME MOBILE OPTIMIZATION — PASS 2 (2026-05)
     A) Footer side padding on mobile
     B) Topstrip inner padding & wrap
     C) ny-widget-band--hero edge safety on mobile
     D) Header garage-chip: icon + text visible on mobile
     E) Header account button: show label text on mobile
   ============================================================
   ============================================================ */

/* ── A) FOOTER: restore comfortable side padding on mobile ───── */
@media (max-width: 767px) {
    footer.main-footer > .container.main-container,
    footer.main-footer .ny-footer-top > .container.main-container,
    footer.main-footer .ny-footer-payments > .container.main-container,
    footer.main-footer .copyright > .container.main-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ny-footer-top {
        padding: var(--ny-sp-5) 0 !important;
    }

    .ny-footer-top__inner {
        grid-template-columns: 1fr !important;
        gap: var(--ny-sp-5) !important;
    }

    .ny-footer-newsletter h4 {
        font-size: 17px !important;
    }

    .ny-footer-newsletter form {
        flex-direction: column;
        max-width: 100%;
    }

    .ny-footer-newsletter button {
        width: 100%;
    }

    footer.main-footer .footer-widgets {
        padding: var(--ny-sp-5) 0 !important;
    }

    footer.main-footer .footer-widgets .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    footer.main-footer .footer-widgets .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ny-footer-payments__inner {
        flex-direction: column;
        gap: var(--ny-sp-3);
        align-items: flex-start;
    }
}

/* ── B) TOPSTRIP INNER: gap so dividers don't crowd, padding-end ── */
@media (max-width: 991px) {
    .ny-topstrip__inner {
        column-gap: 0 !important;
        padding-inline-end: 12px !important;       /* breathing space at scroll end */
    }
}

/* ── C) HERO BAND: edge safety on small screens ──────────────── */
@media (max-width: 991px) {
    /* Full-bleed band has left/right: 50%; margin-x: -50vw — on small
       devices with visible scrollbars this can introduce horizontal
       overflow. Constrain explicitly. */
    .ny-widget-band--hero {
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        max-width: 100vw !important;
        overflow-x: hidden;
    }

    .ny-widget-band--hero .ny-hero__grid,
    .ny-hero__grid {
        padding-left: var(--ny-sp-4) !important;
        padding-right: var(--ny-sp-4) !important;
    }
}

@media (max-width: 575px) {
    .ny-widget-band--hero .ny-hero,
    .ny-hero {
        padding: var(--ny-sp-4) var(--ny-sp-3) !important;
    }

    .ny-widget-band--hero .ny-hero__grid,
    .ny-hero__grid {
        padding-left: var(--ny-sp-2) !important;
        padding-right: var(--ny-sp-2) !important;
    }
}

/* ── D) HEADER: garage-chip — ALWAYS show icon AND text ──────── */
.main-header .topbar .ny-garage-chip,
header.main-header .ny-garage-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Force the icon to render (defeats any inherited display:none or
   font-size:0 from legacy CSS) */
.main-header .topbar .ny-garage-chip i,
header.main-header .ny-garage-chip > i,
.ny-garage-chip > i.mdi {
    display: inline-flex !important;
    align-items: center;
    font-size: 18px !important;
    color: var(--ny-red) !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Re-show chip span on mobile (was hidden at <=575px). Truncate if needed. */
@media (max-width: 575px) {
    .ny-garage-chip span,
    .main-header .topbar .ny-garage-chip span {
        display: inline-block !important;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px !important;
        line-height: 1.2;
    }

    .main-header .topbar .ny-garage-chip {
        padding: 0 10px !important;
        gap: 6px !important;
        font-size: 11px !important;
    }
}

/* ── E) HEADER: account button — show label text on mobile ───── */
@media (max-width: 575px) {
    header.main-header .nav-link span.label-dropdown {
        display: inline-block !important;
        font-size: 11px !important;
        margin-inline-end: 4px !important;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    header.main-header .nav-item.account .nav-link {
        padding: 0 10px !important;
        gap: 4px;
    }

    header.main-header .nav-item.account .nav-link i {
        font-size: 18px !important;
    }
}

/* ── Topbar-left flex: prevent wrap on small screens (keep one row) ── */
header.main-header .topbar-left > .d-flex {
    flex-wrap: nowrap !important;
}

@media (max-width: 575px) {
    header.main-header .topbar-left > .d-flex {
        gap: 6px !important;
    }
}

/* ============================================================
   ============================================================
   HOME MOBILE OPTIMIZATION — PASS 3 (2026-05)
     F) Brand grid (vselector) — bigger gap, tidier cards
     G) ny-bento → 2-per-row on mobile, big tile spans 2 cols
     H) ny-usp → 2x2 on mobile (don't drop to single column)
   ============================================================
   ============================================================ */

/* ── F) BRAND GRID — comfortable breathing room between tiles ── */
.ny-brand-grid {
    gap: 14px !important;
    padding: 8px !important;
    margin-inline: -8px !important;
}

.ny-brand-tile {
    padding: var(--ny-sp-3) !important;
    gap: 4px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 6px rgba(15, 15, 16, 0.22) !important;
}

.ny-brand-tile__logo {
    padding: 2px !important;
    max-height: 60%;
}

.ny-brand-tile__name {
    font-size: 10px !important;
    line-height: 1.1 !important;
}

.ny-brand-tile.has-logo .ny-brand-tile__name {
    font-size: 9px !important;
}

@media (max-width: 991px) {
    .ny-brand-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 575px) {
    /* 3 columns × 3 rows = exactly 9 tiles visible (rest scrollable).
       Tile is aspect-ratio 1/1, so row height ≈ tile width.
       Tile width ≈ (100vw − host paddings − gaps) / 3.
       Approximate 3-row height with vw math:
         3 × (33vw − 18px) + 2 × 10px + 12px padding ≈ fits 3 rows. */
    .ny-brand-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-auto-rows: 88px !important;
        gap: 10px !important;
        padding: 6px !important;
        margin-inline: -6px !important;
        max-height: 296px !important;
        overflow-y: auto !important;
    }

    .ny-brand-tile {
        aspect-ratio: auto !important;
        height: 88px !important;
        min-height: 0 !important;
        padding: 8px !important;
    }

    .ny-brand-tile__logo {
        max-height: 50%;
    }

    .ny-brand-tile__logo img {
        max-height: 32px;
    }

    .ny-brand-tile__name {
        font-size: 9px !important;
    }
}

/* ── G) NY-BENTO — 2 per row on mobile, big tile full-width ── */
@media (max-width: 575px) {
    .ny-bento {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 130px !important;
        gap: var(--ny-sp-2) !important;
    }

    /* First (big) tile fills the row */
    .ny-bento__tile--big {
        grid-column: span 2 !important;
        grid-row: span 1 !important;
    }

    .ny-bento__title {
        font-size: 14px !important;
    }

    .ny-bento__tile--big .ny-bento__title {
        font-size: 18px !important;
    }

    .ny-bento__icon {
        font-size: 28px !important;
    }

    .ny-bento__tile--big .ny-bento__icon {
        font-size: 44px !important;
    }
}

/* ── H) NY-USP — 2x2 on mobile (don't collapse to single column) ── */
@media (max-width: 575px) {
    .ny-usp {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--ny-sp-2) !important;
        padding: var(--ny-sp-3) !important;
    }

    .ny-usp__item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ny-sp-2);
        padding: var(--ny-sp-2) !important;
    }

    .ny-usp__icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }

    .ny-usp__title {
        font-size: 12px !important;
        line-height: 1.3;
    }

    .ny-usp__desc {
        font-size: 10px !important;
        line-height: 1.3;
    }
}

/* ============================================================
   ============================================================
   VSELECTOR MODAL — global "change vehicle" sheet
   Opens on any page when [data-ny-garage-chip-trigger] or the
   header garage chip is clicked. Dark editorial theme to match
   the inline hero vselector.
   ============================================================
   ============================================================ */

/* Aggressive z-index so the modal always wins over sticky bars
   and any legacy stacking context */
.ny-vselector-modal {
    z-index: 99999 !important;
}

.modal-backdrop.ny-vselector-modal-backdrop,
body.ny-vselector-modal-open .modal-backdrop {
    z-index: 99990 !important;
}

.ny-vselector-modal .modal-dialog {
    max-width: 520px;
    margin: 1.75rem auto;
    z-index: 100000;
}

.ny-vselector-modal .modal-content {
    background: var(--ny-onyx);
    color: var(--ny-white);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--ny-r-xl);
    padding: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

/* Subtle red glow accent — matches hero/authenticity */
.ny-vselector-modal .modal-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(50% 50% at 90% 10%, rgba(227, 6, 19, 0.18), transparent 60%),
        radial-gradient(40% 40% at 10% 90%, rgba(140, 140, 142, 0.08), transparent 60%);
    z-index: -1;
    pointer-events: none;
}

/* Close button — top-end corner */
.ny-vselector-modal__close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--ny-r-pill);
    color: var(--ny-white);
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
    transition: background var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease);
}

.ny-vselector-modal__close:hover,
.ny-vselector-modal__close:focus {
    background: var(--ny-red);
    border-color: var(--ny-red);
    color: var(--ny-white);
    outline: none;
}

/* Vselector inside the modal — flatten the standalone card styles so
   it fills the modal cleanly without double padding/border. */
.ny-vselector-modal .ny-vselector {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: var(--ny-sp-6) var(--ny-sp-5) var(--ny-sp-5) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: 100%;
}

.ny-vselector-modal .ny-vselector__head {
    padding-inline-end: 44px;        /* clear of close button */
}

.ny-vselector-modal .ny-vselector__title {
    font-size: 16px;
}

/* Backdrop — slightly darker than Bootstrap default */
.modal-backdrop.show {
    opacity: 0.72;
}

/* Mobile: full-screen sheet */
@media (max-width: 575px) {
    .ny-vselector-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
        display: flex;
        align-items: stretch;
    }

    .ny-vselector-modal .modal-content {
        border-radius: 0;
        border: 0;
        min-height: 100vh;
        width: 100%;
    }

    .ny-vselector-modal .ny-vselector {
        padding: var(--ny-sp-5) var(--ny-sp-4) var(--ny-sp-4) !important;
    }

    .ny-vselector-modal__close {
        top: 10px;
        inset-inline-end: 10px;
    }

    .ny-vselector-modal .ny-vselector__title {
        font-size: 15px;
    }
}

/* When modal is open without jQuery/Bootstrap (fallback) */
.ny-vselector-modal.is-open {
    display: block;
    background: rgba(0, 0, 0, 0.72);
}

body.ny-modal-open {
    overflow: hidden;
}

/* ============================================================
   PASS M — Page chrome retrofit (auth, cart, checkout, product
   show, posts, user dashboard, contact, brands, CMS)

   Strategy: target the LEGACY class names already in the Blade
   templates (.form-ui, .input-ui, .btn-primary-cm,
   .section-title.text-sm-title, .profile-sidebar, .shop-list,
   .ah-tab, .box-card …) and lift them into the design system
   so no structural Blade rewrites are needed.

   Tokens used throughout: var(--ny-*).
   ============================================================ */

/* ---------- M.1 — Page surface ---------- */
body {
    background-color: var(--ny-surface-1);
}

body.ny-auth-shell {
    background-color: var(--ny-fog);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.ny-auth-shell > .wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

body.ny-auth-shell > .wrapper > main {
    flex: 1 0 auto;
}

.main-content.dt-sl {
    padding-top: var(--ny-sp-4);
}

/* ---------- M.2 — Universal section titles ---------- */
.section-title.text-sm-title,
.section-title.title-wide,
.section-title.title-wide-custom {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ny-sp-3);
    margin-bottom: var(--ny-sp-4) !important;
    padding: 0;
    background: transparent;
}

.section-title.text-sm-title h2,
.section-title.text-sm-title h3,
.section-title.text-sm-title h4,
.section-title.title-wide h2,
.section-title.title-wide h3,
.section-title.title-wide h4,
.section-title.title-wide-custom h2 {
    font-family: var(--ny-font) !important;
    color: var(--ny-charcoal);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    padding-inline-start: 12px;
    position: relative;
}

.section-title.text-sm-title h2::before,
.section-title.text-sm-title h3::before,
.section-title.text-sm-title h4::before,
.section-title.title-wide h2::before,
.section-title.title-wide-custom h2::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background: var(--ny-red);
    border-radius: 2px;
    display: block;
}

.section-title.no-after-title-wide::before,
.section-title.no-after-title-wide::after,
.section-title h2::after,
.section-title h3::after {
    display: none !important;
}

.section-title a,
.section-title > a {
    margin-inline-start: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--ny-steel);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--ny-dur) var(--ny-ease);
}

.section-title a:hover {
    color: var(--ny-red);
}

/* ---------- M.3 — Breadcrumb (.title-breadcrumb-special) ---------- */
.title-breadcrumb-special {
    background: transparent;
    margin-bottom: var(--ny-sp-4);
}

.title-breadcrumb-special .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.title-breadcrumb-special .breadcrumb nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--ny-steel);
}

.title-breadcrumb-special .breadcrumb a,
.title-breadcrumb-special .breadcrumb span {
    color: var(--ny-steel);
    text-decoration: none;
    transition: color var(--ny-dur) var(--ny-ease);
    font-family: var(--ny-font);
    font-size: 13px;
}

.title-breadcrumb-special .breadcrumb a:hover {
    color: var(--ny-red);
}

.title-breadcrumb-special .breadcrumb a + a::before,
.title-breadcrumb-special .breadcrumb a + span::before {
    content: '\F141';
    font-family: "Material Design Icons";
    color: var(--ny-steel);
    opacity: 0.6;
    margin: 0 6px;
    font-size: 14px;
    vertical-align: middle;
}

[dir="ltr"] .title-breadcrumb-special .breadcrumb a + a::before,
[dir="ltr"] .title-breadcrumb-special .breadcrumb a + span::before {
    content: '\F142';
}

.title-breadcrumb-special .breadcrumb > nav > *:last-child {
    color: var(--ny-charcoal);
    font-weight: 500;
}

.title-page h1 {
    font-family: var(--ny-font) !important;
    font-size: 28px;
    font-weight: 800;
    color: var(--ny-charcoal);
    line-height: 1.3;
    margin: var(--ny-sp-3) 0 var(--ny-sp-4) 0;
}

/* ---------- M.4 — Section panels (.dt-sn used as a card) ---------- */
.dt-sn {
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-5);
    box-shadow: var(--ny-shadow-sm);
}

.dt-sn.p-0 {
    padding: 0;
}

.dt-sn.pt-0 {
    padding-top: 0;
}

.dt-sn.search-amazing-tab {
    padding: var(--ny-sp-5);
}

.page.dt-sn {
    padding: var(--ny-sp-6);
}

.page.dt-sn h1 {
    font-family: var(--ny-font) !important;
    font-size: 26px;
    font-weight: 800;
    color: var(--ny-charcoal);
    margin: 0 0 var(--ny-sp-4) 0;
}

.page.dt-sn p {
    color: var(--ny-charcoal);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: var(--ny-sp-3);
}

.page.dt-sn img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ny-r-md);
}

/* ---------- M.5 — Forms (form-ui, input-ui, form-row-title) ---------- */
.form-ui {
    padding: 0;
    background: transparent;
}

.form-ui.dt-sn {
    padding: var(--ny-sp-6);
}

.form-ui.additional-info.dt-sn {
    padding: var(--ny-sp-6);
}

.form-row-title {
    margin-bottom: 6px;
}

.form-row-title h3,
.form-row-title h4 {
    font-family: var(--ny-font) !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--ny-charcoal);
    margin: 0;
    line-height: 1.4;
}

.form-row-title h3 small,
.form-row-title h4 small {
    color: var(--ny-steel);
    font-weight: 400;
    margin-inline-start: 4px;
}

.form-row {
    margin: 0 0 var(--ny-sp-3) 0;
}

.form-row.form-group {
    margin-bottom: var(--ny-sp-4);
}

.form-row.with-icon {
    position: relative;
}

.form-row.with-icon > i.mdi {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--ny-steel);
    pointer-events: none;
    z-index: 2;
}

.form-row .input-group {
    display: flex;
    align-items: stretch;
    border-radius: var(--ny-r-md);
    overflow: hidden;
}

.form-row .input-group .input-group-append {
    background: var(--ny-fog);
    border: 1px solid var(--ny-border-soft);
    border-inline-start: 0;
    border-start-end-radius: var(--ny-r-md);
    border-end-end-radius: var(--ny-r-md);
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    color: var(--ny-steel);
    transition: color var(--ny-dur) var(--ny-ease);
}

.form-row .input-group .input-group-append:hover {
    color: var(--ny-red);
}

.form-row .input-group .input-ui {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.input-ui,
input.input-ui,
select.input-ui,
textarea.input-ui {
    width: 100%;
    min-height: 44px;
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: 0 var(--ny-sp-3);
    font-family: var(--ny-font) !important;
    font-size: 14px;
    color: var(--ny-charcoal);
    transition: border-color var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease),
                background-color var(--ny-dur) var(--ny-ease);
    outline: none;
    box-shadow: none;
    appearance: none;
}

textarea.input-ui {
    min-height: 120px;
    padding: var(--ny-sp-3);
    line-height: 1.7;
    resize: vertical;
}

.input-ui::placeholder {
    color: var(--ny-steel);
    opacity: 0.85;
}

.input-ui:focus,
.input-ui:focus-visible {
    border-color: var(--ny-red);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
    background: var(--ny-surface-0);
}

.input-ui:disabled,
.input-ui[disabled] {
    background: var(--ny-fog);
    color: var(--ny-steel);
    cursor: not-allowed;
}

.input-ui.captcha {
    text-align: center;
    letter-spacing: 0.2em;
}

img.captcha {
    border-radius: var(--ny-r-md);
    background: var(--ny-fog);
    border: 1px solid var(--ny-border-soft);
    height: 44px;
    width: auto;
}

.custom-select-ui {
    position: relative;
}

.custom-select-ui::after {
    content: '\F140';
    font-family: "Material Design Icons";
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ny-steel);
    pointer-events: none;
    font-size: 18px;
}

.custom-select-ui select,
.custom-select-ui select.right {
    width: 100%;
    min-height: 44px;
    padding: 0 38px 0 12px;
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    color: var(--ny-charcoal);
    font-family: var(--ny-font) !important;
    font-size: 14px;
    appearance: none;
}

.custom-select-ui select:focus {
    outline: none;
    border-color: var(--ny-red);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
}

.nice-select {
    background: var(--ny-surface-0) !important;
    border: 1px solid var(--ny-border-soft) !important;
    border-radius: var(--ny-r-md) !important;
    min-height: 44px !important;
    line-height: 42px !important;
    padding: 0 38px 0 12px !important;
    font-family: var(--ny-font) !important;
    color: var(--ny-charcoal) !important;
}

.nice-select .list {
    border-radius: var(--ny-r-md) !important;
    border: 1px solid var(--ny-border-soft) !important;
    box-shadow: var(--ny-shadow-md) !important;
    background: var(--ny-surface-0) !important;
    margin-top: 6px !important;
}

.nice-select .option {
    font-family: var(--ny-font) !important;
    color: var(--ny-charcoal) !important;
    line-height: 36px !important;
    min-height: 36px !important;
}

.nice-select .option.selected.focus,
.nice-select .option:hover {
    background: var(--ny-fog) !important;
    color: var(--ny-red) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--ny-red) !important;
    border-color: var(--ny-red) !important;
    box-shadow: none !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.18) !important;
    border-color: var(--ny-red) !important;
}

.custom-control-label {
    font-family: var(--ny-font);
    color: var(--ny-charcoal);
    font-size: 13px;
    cursor: pointer;
}

.custom-control-label::before {
    border: 1px solid var(--ny-border-mid) !important;
    background: var(--ny-surface-0) !important;
}

.toggle-password {
    color: var(--ny-steel);
    transition: color var(--ny-dur) var(--ny-ease);
    display: inline-flex;
    align-items: center;
    font-size: 18px;
}

.toggle-password:hover {
    color: var(--ny-red);
}

/* ---------- M.6 — Buttons (override legacy pink) ---------- */
.btn-primary-cm,
a.btn-primary-cm,
button.btn-primary-cm,
.btn.btn-primary-cm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 22px;
    background-color: var(--ny-red) !important;
    color: var(--ny-white) !important;
    font-family: var(--ny-font) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    border: 0;
    border-radius: var(--ny-r-md);
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    transition: background-color var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease);
}

.btn-primary-cm:hover,
.btn-primary-cm:focus {
    background-color: var(--ny-red-dark) !important;
    color: var(--ny-white) !important;
    box-shadow: var(--ny-shadow-red);
    text-decoration: none;
}

.btn-primary-cm:focus-visible {
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.30);
}

.btn-primary-cm:active {
    transform: translateY(1px);
}

.btn-primary-cm.btn-with-icon {
    padding-inline-start: 22px;
    padding-inline-end: 22px;
}

.btn-primary-cm.btn-with-icon::before {
    display: none;
}

.btn-primary-cm.btn-with-icon img,
.btn-primary-cm.btn-with-icon i {
    position: static;
    width: auto;
    height: auto;
    top: auto;
    right: auto;
    font-size: 18px;
}

.btn-primary-cm.bg-secondary {
    background-color: var(--ny-charcoal) !important;
}

.btn-primary-cm.bg-secondary:hover {
    background-color: var(--ny-red) !important;
}

.btn.btn-primary {
    background-color: var(--ny-red) !important;
    border-color: var(--ny-red) !important;
    color: var(--ny-white) !important;
    border-radius: var(--ny-r-md);
    min-height: 44px;
    padding: 10px 18px;
    font-family: var(--ny-font) !important;
    font-weight: 600;
    box-shadow: none !important;
    transition: background-color var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: var(--ny-red-dark) !important;
    border-color: var(--ny-red-dark) !important;
}

.btn.btn-secondary,
.btn.btn-dark {
    background-color: var(--ny-charcoal) !important;
    border-color: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
    border-radius: var(--ny-r-md);
    min-height: 44px;
    padding: 10px 18px;
    font-family: var(--ny-font) !important;
    font-weight: 600;
}

.btn.btn-secondary:hover,
.btn.btn-dark:hover {
    background-color: var(--ny-red) !important;
    border-color: var(--ny-red) !important;
    color: var(--ny-white) !important;
}

.btn.btn-info {
    background-color: var(--ny-charcoal) !important;
    border-color: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
    border-radius: var(--ny-r-md);
    min-height: 44px;
    padding: 10px 18px;
    font-family: var(--ny-font) !important;
    font-weight: 600;
}

.btn.btn-info:hover {
    background-color: var(--ny-red) !important;
    border-color: var(--ny-red) !important;
    color: var(--ny-white) !important;
}

.btn.btn-danger {
    background-color: var(--ny-red) !important;
    border-color: var(--ny-red) !important;
    color: var(--ny-white) !important;
    border-radius: var(--ny-r-md);
    min-height: 44px;
    padding: 10px 18px;
    font-family: var(--ny-font) !important;
    font-weight: 600;
}

.btn.btn-danger:hover {
    background-color: var(--ny-red-dark) !important;
    border-color: var(--ny-red-dark) !important;
}

.btn.btn-light {
    background-color: var(--ny-fog) !important;
    border: 1px solid var(--ny-border-soft) !important;
    color: var(--ny-charcoal) !important;
    border-radius: var(--ny-r-md);
    min-height: 44px;
    padding: 10px 18px;
    font-family: var(--ny-font) !important;
    font-weight: 600;
}

.btn.btn-light:hover {
    background-color: var(--ny-surface-0) !important;
    border-color: var(--ny-charcoal) !important;
    color: var(--ny-charcoal) !important;
}

.btn.btn-block {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-link-border,
.link--with-border-bottom {
    color: var(--ny-red) !important;
    font-family: var(--ny-font);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
    cursor: pointer;
}

.btn-link-border:hover,
.link--with-border-bottom:hover {
    color: var(--ny-red-dark) !important;
    border-bottom-color: var(--ny-red);
    text-decoration: none;
}

.border-bottom-dt {
    color: var(--ny-charcoal) !important;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed var(--ny-border-mid);
    transition: color var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease);
}

.border-bottom-dt:hover {
    color: var(--ny-red) !important;
    border-bottom-color: var(--ny-red);
    text-decoration: none;
}

/* ---------- M.7 — AH custom tabs + Bootstrap nav-tabs ---------- */
.ah-tab-wrapper {
    border-bottom: 1px solid var(--ny-border-soft);
    margin-bottom: var(--ny-sp-5);
    padding: 0 var(--ny-sp-3);
}

.ah-tab {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ny-sp-4);
}

.ah-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    color: var(--ny-steel);
    font-family: var(--ny-font);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: color var(--ny-dur) var(--ny-ease);
    cursor: pointer;
}

.ah-tab-item i.mdi {
    font-size: 16px;
}

.ah-tab-item:hover {
    color: var(--ny-charcoal);
    text-decoration: none;
}

.ah-tab-item[data-ah-tab-active="true"],
.ah-tab-item.active {
    color: var(--ny-red);
}

.ah-tab-item[data-ah-tab-active="true"]::after,
.ah-tab-item.active::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: -1px;
    height: 2px;
    background: var(--ny-red);
    border-radius: 2px 2px 0 0;
}

.ah-tab-content-wrapper {
    padding: 0 var(--ny-sp-3) var(--ny-sp-5);
}

.ah-tab-content {
    padding: var(--ny-sp-4) 0;
}

.search-amazing-tab .ah-tab-wrapper {
    margin: calc(-1 * var(--ny-sp-5)) calc(-1 * var(--ny-sp-5)) var(--ny-sp-5);
    padding: 0 var(--ny-sp-5);
    background: var(--ny-fog);
    border-top-left-radius: var(--ny-r-md);
    border-top-right-radius: var(--ny-r-md);
}

.tab-cart-page .nav-tabs {
    border-bottom: 1px solid var(--ny-border-soft);
    background: transparent;
    display: flex;
    gap: var(--ny-sp-4);
    padding: 0 var(--ny-sp-3);
    margin-bottom: var(--ny-sp-4);
}

.tab-cart-page .nav-tabs .nav-item.nav-link,
.tab-cart-page .nav-tabs .nav-link {
    border: 0;
    background: transparent;
    color: var(--ny-steel);
    font-family: var(--ny-font);
    font-weight: 600;
    font-size: 15px;
    padding: 12px 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tab-cart-page .nav-tabs .nav-link.active,
.tab-cart-page .nav-tabs .nav-item.nav-link.active {
    color: var(--ny-red);
    background: transparent;
    border: 0;
}

.tab-cart-page .nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: -1px;
    height: 2px;
    background: var(--ny-red);
    border-radius: 2px 2px 0 0;
}

.tab-cart-page .nav-tabs .count-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--ny-charcoal);
    color: var(--ny-white);
    border-radius: var(--ny-r-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.tab-cart-page .nav-tabs .nav-link.active .count-cart {
    background: var(--ny-red);
}

/* ---------- M.8 — Cart shop-list ---------- */
.checkout-content {
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    overflow: hidden;
}

.checkout-header {
    padding: var(--ny-sp-4) var(--ny-sp-5);
    border-bottom: 1px solid var(--ny-border-soft);
    background: var(--ny-fog);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkout-header-title {
    font-family: var(--ny-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--ny-charcoal);
}

.shop-list {
    padding: 0;
    background: transparent;
}

.shop-list .list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ny-sp-3);
    padding: var(--ny-sp-4) var(--ny-sp-5);
    border-bottom: 1px solid var(--ny-border-soft);
    margin: 0;
    background: transparent;
    transition: background-color var(--ny-dur) var(--ny-ease);
}

.shop-list .list-row:hover {
    background: var(--ny-fog);
}

.shop-list .list-row:last-child {
    border-bottom: 0;
}

.shop-list .list-row img.img-fluid {
    border-radius: var(--ny-r-sm);
    border: 1px solid var(--ny-border-soft);
    background: var(--ny-surface-0);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 4px;
}

.shop-list .card-product-name .title {
    font-family: var(--ny-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--ny-charcoal);
    margin: 0 0 6px 0;
    line-height: 1.5;
}

.shop-list .card-product-name a:hover .title {
    color: var(--ny-red);
}

.shop-list .card-product-name .detail {
    font-family: var(--ny-font);
    font-size: 12px;
    color: var(--ny-steel);
    margin: 0;
    line-height: 1.6;
}

.shop-list .card-product-name .text-danger {
    color: var(--ny-red) !important;
    font-size: 12px;
    font-weight: 500;
}

.cart-product-price {
    font-family: var(--ny-font-num) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-size: 16px;
    font-weight: 700;
    color: var(--ny-charcoal);
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.cart-product-price .currency-suffix {
    font-size: 12px;
    color: var(--ny-steel);
    font-weight: 500;
}

.old-cart-c {
    display: block;
    font-family: var(--ny-font-num);
    font-size: 12px;
    color: var(--ny-steel);
    text-decoration: line-through;
    margin-top: 2px;
}

.counter-box {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--ny-fog);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-pill);
    padding: 4px;
    min-height: 40px;
}

.counter-box button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ny-surface-0);
    border: 0;
    color: var(--ny-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
    font-size: 16px;
    padding: 0;
}

.counter-box button:hover {
    background: var(--ny-red);
    color: var(--ny-white);
}

.counter-box input.quantity,
.counter-box input.count {
    width: 40px;
    text-align: center;
    border: 0;
    background: transparent;
    font-family: var(--ny-font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-size: 14px;
    font-weight: 700;
    color: var(--ny-charcoal);
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

.counter-box input.quantity::-webkit-inner-spin-button,
.counter-box input.quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- M.9 — Cart empty + alerts ---------- */
.cart-page.cart-empty {
    text-align: center;
    padding: var(--ny-sp-7) var(--ny-sp-5);
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-lg);
    box-shadow: var(--ny-shadow-sm);
}

.circle-box-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--ny-fog);
    color: var(--ny-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    margin: 0 auto var(--ny-sp-4);
    border: 1px solid var(--ny-border-soft);
}

.cart-page.cart-empty .cart-empty-title {
    font-family: var(--ny-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--ny-charcoal);
    margin: 0 0 var(--ny-sp-2) 0;
}

.cart-page.cart-empty p {
    color: var(--ny-steel);
    font-size: 14px;
    margin: 0 0 var(--ny-sp-4) 0;
}

.alert.alert-danger {
    background: rgba(227, 6, 19, 0.08);
    border: 1px solid rgba(227, 6, 19, 0.18);
    color: var(--ny-red-dark);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-3) var(--ny-sp-4);
    font-family: var(--ny-font);
    font-size: 14px;
}

.alert .close {
    color: inherit;
    opacity: 0.6;
}

.alert .close:hover {
    opacity: 1;
}

/* ---------- M.10 — Checkout sidebar / summary ---------- */
#checkout-sidebar .dt-sn.details {
    padding: 0;
    overflow: hidden;
}

.checkout-summary-summary {
    list-style: none;
    margin: 0;
    padding: var(--ny-sp-4) var(--ny-sp-5) 0;
}

.checkout-summary-summary li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ny-sp-2) 0;
    font-family: var(--ny-font);
    font-size: 13px;
    color: var(--ny-charcoal);
}

.checkout-summary-summary li > span:first-child {
    color: var(--ny-steel);
}

.checkout-summary-summary li > span:last-child {
    font-family: var(--ny-font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 600;
    color: var(--ny-charcoal);
}

.checkout-summary-summary li.checkout-summary-discount > span:last-child {
    color: var(--ny-success);
}

.checkout-summary-devider {
    margin: 0 var(--ny-sp-5);
    padding: var(--ny-sp-3) 0;
}

.checkout-summary-devider > div {
    height: 1px;
    background: var(--ny-border-soft);
}

.checkout-summary-content {
    padding: 0 var(--ny-sp-5) var(--ny-sp-5);
}

.checkout-summary-price-title {
    font-family: var(--ny-font);
    font-size: 13px;
    color: var(--ny-steel);
    margin-bottom: 4px;
}

.checkout-summary-price-value {
    font-family: var(--ny-font-num);
    font-size: 13px;
    color: var(--ny-steel);
    margin-bottom: var(--ny-sp-4);
}

.checkout-summary-price-value .checkout-summary-price-value-amount {
    font-size: 22px;
    font-weight: 800;
    color: var(--ny-charcoal);
    font-variant-numeric: tabular-nums;
    margin-inline-end: 4px;
}

#checkout-sidebar .checkout-summary-content > div:last-child {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--ny-sp-3);
    padding-top: var(--ny-sp-3);
    border-top: 1px dashed var(--ny-border-soft);
    color: var(--ny-steel);
    font-size: 12px;
}

#checkout-sidebar .checkout-summary-content .help-sn {
    color: var(--ny-info);
    cursor: help;
}

#update-cart {
    margin-top: var(--ny-sp-3);
}

/* ---------- M.11 — Profile sidebar (user dashboard) ---------- */
.profile-sidebar .dt-sn {
    margin-bottom: var(--ny-sp-4);
    padding: 0;
    overflow: hidden;
}

.profile-sidebar-header {
    padding: var(--ny-sp-5);
    position: relative;
    background: linear-gradient(135deg, var(--ny-charcoal) 0%, var(--ny-onyx) 100%);
    color: var(--ny-white);
}

.profile-sidebar-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 50% at 100% 0%, rgba(227, 6, 19, 0.16), transparent 60%);
    pointer-events: none;
}

.profile-sidebar-header > * {
    position: relative;
    z-index: 1;
}

.profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-username {
    font-family: var(--ny-font);
    font-weight: 700;
    font-size: 15px;
    color: var(--ny-white);
    margin: 0 !important;
}

.profile-phone {
    font-family: var(--ny-font-num);
    font-size: 12px;
    color: var(--ny-silver);
    opacity: 0.8;
    margin-top: 2px;
    direction: ltr;
    text-align: start;
}

.profile-point {
    margin-top: var(--ny-sp-4) !important;
    padding: var(--ny-sp-3) var(--ny-sp-4);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ny-r-md);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.profile-point .value-profile-point {
    font-family: var(--ny-font);
    font-size: 12px;
    color: var(--ny-silver);
    float: none !important;
}

.profile-point .label-profile-point {
    font-family: var(--ny-font-num);
    font-size: 14px;
    font-weight: 700;
    color: var(--ny-white) !important;
    font-variant-numeric: tabular-nums;
    float: none !important;
}

.profile-point .label-profile-point strong {
    color: var(--ny-white);
}

.profile-link {
    margin-top: var(--ny-sp-4) !important;
}

.profile-link .row {
    margin: 0;
}

.profile-link [class*="col-"] {
    padding: 0;
}

.profile-link a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--ny-sp-3);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ny-r-md);
    margin: 0 4px;
    color: var(--ny-silver);
    font-size: 12px;
    text-decoration: none;
    transition: background-color var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

.profile-link a:hover {
    background: var(--ny-red);
    color: var(--ny-white);
    text-decoration: none;
}

.profile-link a i {
    font-size: 20px;
    color: inherit;
}

.profile-menu-section {
    padding: var(--ny-sp-4) 0;
}

.profile-menu-section .label-profile-menu {
    padding: 0 var(--ny-sp-5) var(--ny-sp-2);
    font-family: var(--ny-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--ny-steel);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.profile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-menu ul li {
    margin: 0;
}

.profile-menu ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px var(--ny-sp-5);
    color: var(--ny-charcoal);
    font-family: var(--ny-font);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: background-color var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

.profile-menu ul li a i.mdi {
    font-size: 18px;
    color: var(--ny-steel);
    transition: color var(--ny-dur) var(--ny-ease);
}

.profile-menu ul li a:hover {
    background: var(--ny-fog);
    color: var(--ny-red);
    text-decoration: none;
}

.profile-menu ul li a:hover i.mdi {
    color: var(--ny-red);
}

.profile-menu ul li a.active {
    background: rgba(227, 6, 19, 0.06);
    color: var(--ny-red);
    font-weight: 600;
}

.profile-menu ul li a.active::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--ny-red);
    border-radius: 0 3px 3px 0;
}

[dir="ltr"] .profile-menu ul li a.active::before {
    border-radius: 3px 0 0 3px;
}

.profile-menu ul li a.active i.mdi {
    color: var(--ny-red);
}

/* Profile body content */
.profile-section {
    margin-bottom: var(--ny-sp-5);
}

.profile-section .label-info,
.label-info {
    font-family: var(--ny-font);
    font-size: 12px;
    color: var(--ny-steel);
    margin: 0 0 4px 0;
    display: block;
}

.profile-section .value-info,
.value-info {
    font-family: var(--ny-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--ny-charcoal);
    margin: 0;
}

.profile-section-link {
    margin-top: var(--ny-sp-3);
}

.list-favorites {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-favorites > li {
    display: flex;
    align-items: center;
    gap: var(--ny-sp-3);
    padding: var(--ny-sp-3) 0;
    border-bottom: 1px solid var(--ny-border-soft);
    position: relative;
}

.list-favorites > li:last-child {
    border-bottom: 0;
}

.list-favorites > li a {
    color: var(--ny-charcoal);
    text-decoration: none;
    font-family: var(--ny-font);
    font-weight: 500;
    flex: 1;
}

.list-favorites > li a:hover {
    color: var(--ny-red);
}

.favorite-remove-btn {
    background: transparent;
    border: 1px solid var(--ny-border-soft);
    color: var(--ny-steel);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease);
}

.favorite-remove-btn:hover {
    background: var(--ny-red);
    border-color: var(--ny-red);
    color: var(--ny-white);
}

.table-order,
.table.table-order {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ny-surface-0);
    font-family: var(--ny-font);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    overflow: hidden;
}

.table.table-order th {
    background: var(--ny-fog);
    color: var(--ny-charcoal);
    font-size: 13px;
    font-weight: 600;
    text-align: start;
    padding: var(--ny-sp-3) var(--ny-sp-4);
    border-bottom: 1px solid var(--ny-border-soft);
}

.table.table-order td {
    padding: var(--ny-sp-3) var(--ny-sp-4);
    font-size: 13px;
    color: var(--ny-charcoal);
    border-bottom: 1px solid var(--ny-border-soft);
    vertical-align: middle;
}

.table.table-order tr:last-child td {
    border-bottom: 0;
}

/* ---------- M.12 — Product show page ---------- */
.product-info .product-title h1 {
    font-family: var(--ny-font) !important;
    font-size: 24px;
    font-weight: 700;
    color: var(--ny-charcoal);
    line-height: 1.4;
    margin: 0 0 4px 0;
}

.product-info .product-title h3 {
    font-family: var(--ny-font) !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--ny-steel);
    margin: 0;
    direction: ltr;
    text-align: start;
}

.product-info .border-product-title {
    border: 0;
    border-top: 1px solid var(--ny-border-soft);
    margin: var(--ny-sp-3) 0;
}

.product-info .little-des {
    color: var(--ny-charcoal);
    font-size: 14px;
    line-height: 1.8;
    margin: var(--ny-sp-3) 0 var(--ny-sp-4);
}

.product-info .commodity {
    font-size: 12px;
}

.product-info .commodity span {
    color: var(--ny-success);
    font-weight: 700;
}

.product-info .text-warning.mdi-star {
    color: #F59E0B !important;
}

.product-info .text-success.mdi-thumb-up-outline {
    color: var(--ny-success) !important;
}

.product-info .text-primary {
    color: var(--ny-charcoal) !important;
    font-weight: 600;
}

.product-info .text-muted {
    color: var(--ny-steel) !important;
}

.product-params {
    margin: var(--ny-sp-3) 0;
    padding: var(--ny-sp-3) var(--ny-sp-4);
    background: var(--ny-fog);
    border-radius: var(--ny-r-md);
}

.product-params ul[data-title] {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.product-params ul[data-title]::before {
    content: attr(data-title);
    display: block;
    font-family: var(--ny-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--ny-steel);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--ny-sp-2);
}

.product-params li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--ny-charcoal);
}

.product-params li > span:first-child {
    color: var(--ny-steel);
    min-width: 90px;
}

.sum-more {
    margin-top: var(--ny-sp-2);
}

.size-guide a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.size-guide img {
    width: 28px;
    height: 28px;
}

/* Variant selector list */
.product-variant {
    margin: var(--ny-sp-3) 0;
}

.product-variant .section-title {
    margin-bottom: 6px !important;
}

.product-variant .section-title h2 {
    font-size: 13px !important;
    color: var(--ny-charcoal) !important;
    font-weight: 600 !important;
    padding-inline-start: 0 !important;
}

.product-variant .section-title h2::before {
    display: none !important;
}

.product-variant .section-title span.mdi {
    color: var(--ny-red);
    font-size: 12px;
}

.product-variants {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-variants li.ui-variant {
    margin: 0;
    padding: 0;
    position: relative;
}

.product-variants li.ui-variant .ui-variant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 36px;
    padding: 4px 10px;
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-mid);
    border-radius: var(--ny-r-md);
    color: var(--ny-charcoal);
    font-family: var(--ny-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--ny-dur) var(--ny-ease),
                background-color var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease);
}

.product-variants li.ui-variant input[type="radio"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    width: 100%;
    height: 100%;
}

.product-variants li.ui-variant input[type="radio"]:checked + .ui-variant--check,
.product-variants li.ui-variant input[type="radio"]:checked ~ .ui-variant--check {
    background: rgba(227, 6, 19, 0.06);
    border-color: var(--ny-red);
    color: var(--ny-red);
}

.product-variants li.ui-variant.product-attribute.unavailable .ui-variant--check {
    background: var(--ny-fog);
    color: var(--ny-steel);
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: 0.7;
}

.product-variants li.ui-variant .ui-variant-shape {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--ny-border-mid);
    background-clip: padding-box;
    cursor: pointer;
    transition: border-color var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease);
}

.product-variants li.ui-variant.product-attribute label.ui-variant--color {
    padding: 0;
    border: 0;
    background: transparent;
    min-width: auto;
    min-height: auto;
}

.product-variants li.ui-variant.product-attribute input[type="radio"]:checked + .ui-variant-shape,
.product-variants li.ui-variant.product-attribute input[type="radio"]:checked ~ .ui-variant-shape {
    border-color: var(--ny-red);
    transform: scale(1.08);
}

/* Price box */
.card.box-card {
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-lg);
    box-shadow: var(--ny-shadow-sm);
    padding: var(--ny-sp-5) !important;
    position: relative;
    overflow: hidden;
}

.card.box-card .box-border {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ny-red);
    border-radius: 4px 0 0 4px;
}

.card.box-card .box-Price-number {
    margin: 0;
}

.card.box-card .box-Price-number .number {
    font-family: var(--ny-font);
    font-size: 13px;
    color: var(--ny-steel);
    font-weight: 500;
}

.card.box-card .text-price {
    font-family: var(--ny-font);
    font-size: 13px;
    color: var(--ny-steel);
}

.card.box-card .price.text-danger,
.card.box-card .price {
    font-family: var(--ny-font-num) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-size: 22px;
    font-weight: 800;
    color: var(--ny-charcoal) !important;
}

.card.box-card .currency {
    font-family: var(--ny-font);
    font-size: 13px;
    color: var(--ny-steel);
    margin-inline-start: 4px;
}

.card.box-card del {
    color: var(--ny-steel);
    font-family: var(--ny-font-num);
    font-size: 13px;
}

.card.box-card .discount {
    display: inline-flex;
    align-items: center;
    background: var(--ny-red);
    color: var(--ny-white);
    border-radius: var(--ny-r-pill);
    padding: 2px 8px;
    font-family: var(--ny-font-num);
    font-size: 12px;
    font-weight: 700;
    margin-inline-start: 6px;
    margin-inline-end: 0 !important;
}

.card.box-card .add-to-cart,
.card.box-card .btn-primary-cm.add-to-cart {
    width: 100%;
    margin-top: var(--ny-sp-4);
    background-color: var(--ny-red) !important;
    color: var(--ny-white) !important;
    font-size: 15px;
    font-weight: 700;
    min-height: 48px;
}

.card.box-card .add-to-cart:hover {
    background-color: var(--ny-red-dark) !important;
    box-shadow: var(--ny-shadow-red);
}

.box-product-unavailable {
    background: var(--ny-fog);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-4);
    text-align: center;
    margin-bottom: var(--ny-sp-3);
}

.box-product-unavailable h5 {
    font-family: var(--ny-font);
    color: var(--ny-charcoal);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.box-product-unavailable p {
    color: var(--ny-steel);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

/* Number-input quantity stepper inside product detail */
.number-input {
    display: inline-flex;
    align-items: center;
    background: var(--ny-fog);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-pill);
    padding: 4px;
    min-height: 40px;
    gap: 0;
}

.number-input button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ny-surface-0);
    border: 0;
    color: var(--ny-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: background-color var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

.number-input button::before {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 2px;
    width: 12px;
    height: 2px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.number-input button.plus::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 2px;
    width: 2px;
    height: 12px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.number-input button:hover {
    background: var(--ny-red);
    color: var(--ny-white);
}

.number-input input.quantity {
    width: 44px;
    text-align: center;
    border: 0;
    background: transparent;
    font-family: var(--ny-font-num);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
    color: var(--ny-charcoal);
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

.number-input input.quantity::-webkit-inner-spin-button,
.number-input input.quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Gallery side options */
.gallery-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: var(--ny-sp-3);
    inset-inline-end: var(--ny-sp-3);
    z-index: 2;
}

.gallery-options li {
    position: relative;
}

.gallery-options li button,
.gallery-options li .add-favorites {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    color: var(--ny-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--ny-shadow-sm);
    transition: background-color var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease);
}

.gallery-options li button:hover,
.gallery-options li .add-favorites:hover {
    background: var(--ny-charcoal);
    color: var(--ny-white);
    border-color: var(--ny-charcoal);
}

.gallery-options li .add-favorites.favorites {
    background: var(--ny-red);
    color: var(--ny-white);
    border-color: var(--ny-red);
}

.gallery-options li .tooltip-option {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    background: var(--ny-charcoal);
    color: var(--ny-white);
    padding: 6px 10px;
    border-radius: var(--ny-r-sm);
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ny-dur) var(--ny-ease),
                visibility var(--ny-dur) var(--ny-ease);
    pointer-events: none;
}

.gallery-options li:hover .tooltip-option {
    opacity: 1;
    visibility: visible;
}

.promotion-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ny-red);
    color: var(--ny-white);
    padding: 6px 14px;
    border-radius: var(--ny-r-pill);
    font-family: var(--ny-font);
    font-weight: 600;
    font-size: 12px;
}

.promotion-badge.not-available {
    background: var(--ny-steel);
}

.promotion-badge .product-special {
    color: var(--ny-white);
}

.countdown-timer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ny-charcoal);
    color: var(--ny-white);
    padding: 8px 14px;
    border-radius: var(--ny-r-md);
    font-family: var(--ny-font-num);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
}

.countdown-timer span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: var(--ny-onyx);
    border-radius: var(--ny-r-sm);
    padding: 0 6px;
}

/* ---------- M.13 — Post show & content typography ---------- */
.content-page .content-desc {
    padding: var(--ny-sp-6);
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
}

.content-desc .entry-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ny-sp-4);
    padding-bottom: var(--ny-sp-3);
    border-bottom: 1px solid var(--ny-border-soft);
    margin-bottom: var(--ny-sp-4) !important;
}

.content-desc .post-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ny-font);
    font-size: 12px;
    color: var(--ny-steel);
}

.content-desc .post-meta i.mdi {
    color: var(--ny-red);
    font-size: 14px;
}

.content-desc .post-meta a {
    color: var(--ny-charcoal);
    text-decoration: none;
    transition: color var(--ny-dur) var(--ny-ease);
}

.content-desc .post-meta a:hover {
    color: var(--ny-red);
}

.content-desc .post-thumbnail img {
    border-radius: var(--ny-r-md);
    margin-bottom: var(--ny-sp-4);
}

.content-desc p {
    color: var(--ny-charcoal);
    line-height: 1.85;
    font-size: 15px;
    margin: 0 0 var(--ny-sp-3) 0;
}

.content-desc h2,
.content-desc h3 {
    font-family: var(--ny-font);
    color: var(--ny-charcoal);
    font-weight: 700;
    margin: var(--ny-sp-5) 0 var(--ny-sp-3);
    position: relative;
    padding-inline-start: 12px;
}

.content-desc h2 {
    font-size: 22px;
}

.content-desc h3 {
    font-size: 18px;
}

.content-desc h2::before,
.content-desc h3::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    background: var(--ny-red);
    border-radius: 2px;
}

.content-desc ul,
.content-desc ol {
    color: var(--ny-charcoal);
    line-height: 1.85;
    padding-inline-start: var(--ny-sp-5);
    margin-bottom: var(--ny-sp-3);
}

.content-desc a {
    color: var(--ny-red);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color var(--ny-dur) var(--ny-ease);
}

.content-desc a:hover {
    border-bottom-color: var(--ny-red);
}

.content-desc img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ny-r-md);
    margin: var(--ny-sp-3) 0;
}

.content-desc blockquote {
    border-inline-start: 3px solid var(--ny-red);
    padding-inline-start: var(--ny-sp-4);
    color: var(--ny-charcoal);
    font-style: italic;
    margin: var(--ny-sp-4) 0;
}

/* ---------- M.14 — Post sidebar widget ---------- */
.widget-posts.dt-sn,
.posts-widget.dt-sn {
    padding: var(--ny-sp-4);
}

.widget-posts .title-sidebar {
    position: relative;
    padding-inline-start: 12px;
    margin-bottom: var(--ny-sp-3) !important;
}

.widget-posts .title-sidebar::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    background: var(--ny-red);
    border-radius: 2px;
}

.widget-posts .title-sidebar h3 {
    font-family: var(--ny-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--ny-charcoal);
    margin: 0;
}

.widget-posts .content-sidebar .item {
    padding: var(--ny-sp-3) 0;
    border-bottom: 1px solid var(--ny-border-soft);
}

.widget-posts .content-sidebar .item:last-child {
    border-bottom: 0;
}

.widget-posts .content-sidebar .item-inner {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: var(--ny-sp-3);
    align-items: start;
}

.widget-posts .content-sidebar .item-thumb.img-holder {
    display: block;
    width: 72px;
    height: 72px;
    background-size: cover;
    background-position: center;
    background-color: var(--ny-fog);
    border-radius: var(--ny-r-sm);
}

.widget-posts .content-sidebar .item .title {
    margin: 0;
}

.widget-posts .content-sidebar .item .title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ny-charcoal);
    text-decoration: none;
    font-family: var(--ny-font);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
    transition: color var(--ny-dur) var(--ny-ease);
}

.widget-posts .content-sidebar .item .title a:hover {
    color: var(--ny-red);
}

.widget-posts .content-sidebar .item-meta .time {
    display: block;
    margin-top: 4px;
    font-family: var(--ny-font-num);
    font-size: 11px;
    color: var(--ny-steel);
}

/* Post-card .post-tag color override (used in post grid) */
.post-card .post-tag {
    background: var(--ny-red);
}

/* ---------- M.15 — Contact tiles ---------- */
.contact_tile.block {
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-5);
    text-align: center;
    height: 100%;
    transition: border-color var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease);
}

.contact_tile.block:hover {
    border-color: var(--ny-red);
    box-shadow: var(--ny-shadow-md);
}

.contact_tile .tiles__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(227, 6, 19, 0.08);
    color: var(--ny-red);
    font-size: 24px;
    margin-bottom: var(--ny-sp-3);
}

.contact_tile .tiles__title {
    font-family: var(--ny-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--ny-charcoal);
    margin: 0 0 6px 0;
}

.contact_tile .tiles__content p {
    color: var(--ny-steel);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

#map {
    width: 100%;
    height: 380px;
    background: var(--ny-fog);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    overflow: hidden;
}

/* ---------- M.16 — Brand listing search ---------- */
#brand-search {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: 0 var(--ny-sp-4);
    font-family: var(--ny-font);
    font-size: 14px;
    color: var(--ny-charcoal);
    background: var(--ny-surface-0);
    margin-bottom: var(--ny-sp-4);
    box-shadow: var(--ny-shadow-sm);
}

#brand-search:focus {
    outline: none;
    border-color: var(--ny-red);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
}

.product-card.brands-index {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-4);
    transition: border-color var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease);
}

.product-card.brands-index .product-title {
    font-family: var(--ny-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--ny-charcoal);
    margin: 0;
}

.single-brand-div a:hover .product-card.brands-index {
    border-color: var(--ny-red);
    box-shadow: var(--ny-shadow-md);
    transform: translateY(-2px);
}

/* ---------- M.17 — Comments (shared component) ---------- */
.comments-area .section-title h2,
.comments-area .section-title h3 {
    font-family: var(--ny-font) !important;
}

.form-question-answer.comment--form,
.comments-summary-note {
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-4);
    margin-bottom: var(--ny-sp-4);
}

.comment--form .comment-replay-to {
    color: var(--ny-steel);
    font-size: 13px;
    margin-bottom: var(--ny-sp-2);
}

.comment--form textarea.form-control {
    width: 100%;
    min-height: 120px;
    background: var(--ny-fog);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-3);
    font-family: var(--ny-font) !important;
    font-size: 14px;
    color: var(--ny-charcoal);
    line-height: 1.7;
    transition: border-color var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease);
}

.comment--form textarea.form-control:focus {
    outline: none;
    border-color: var(--ny-red);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
    background: var(--ny-surface-0);
}

.comment-submit-btn,
.btn.btn-dark.comment-submit-btn {
    margin-top: var(--ny-sp-3);
    min-width: 160px;
}

.comments-area .comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comments-area .comment-list > li {
    padding: var(--ny-sp-4) 0;
    border-bottom: 1px solid var(--ny-border-soft);
}

.comments-area .comment-list > li:last-child {
    border-bottom: 0;
}

.comments-area .comment-body {
    background: transparent;
    padding: 0;
}

.comments-area .comment-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--ny-sp-2);
}

.comments-area .comment-author .icon-comment {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ny-fog);
    color: var(--ny-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.comments-area cite.fn {
    font-family: var(--ny-font);
    font-weight: 700;
    font-size: 14px;
    color: var(--ny-charcoal);
    font-style: normal;
}

.comments-area .says,
.comments-area .commentmetadata {
    font-family: var(--ny-font);
    font-size: 12px;
    color: var(--ny-steel);
}

.comments-area .comment-content {
    color: var(--ny-charcoal);
    font-size: 14px;
    line-height: 1.8;
    margin: var(--ny-sp-2) 0;
}

.comments-area .comment-reply-link,
.comments-area .comment-replay {
    color: var(--ny-red);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.comments-area .comment-reply-link:hover {
    text-decoration: underline;
}

.comments-area ol.children {
    list-style: none;
    padding-inline-start: var(--ny-sp-5);
    border-inline-start: 2px solid var(--ny-border-soft);
    margin-top: var(--ny-sp-3);
}

.comments-likes .btn-like {
    background: var(--ny-fog);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-pill);
    padding: 4px 12px;
    color: var(--ny-charcoal);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.comments-likes .btn-like:hover {
    background: var(--ny-charcoal);
    color: var(--ny-white);
}

.content-expert-evaluation-positive,
.content-expert-evaluation-negative {
    background: var(--ny-fog);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-3);
    margin-top: var(--ny-sp-3);
}

.content-expert-evaluation-positive {
    border-inline-start: 3px solid var(--ny-success);
}

.content-expert-evaluation-negative {
    border-inline-start: 3px solid var(--ny-red);
}

.user-suggest {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ny-success);
    margin-top: var(--ny-sp-2);
}

/* ---------- M.18 — Auth layout (mini-header + form) ---------- */
body.ny-auth-shell .mini-header {
    background: var(--ny-charcoal);
    padding: var(--ny-sp-4) var(--ny-sp-5);
}

body.ny-auth-shell .mini-header .logo-area-mini-header img {
    max-height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
}

body.ny-auth-shell .mini-footer {
    background: var(--ny-charcoal);
    color: var(--ny-silver);
    padding: var(--ny-sp-5);
    margin-top: var(--ny-sp-6);
}

body.ny-auth-shell .mini-footer .footer-light-text {
    color: var(--ny-silver);
    font-size: 12px;
    text-align: center;
    margin: 0;
}

body.ny-auth-shell .main-content {
    background: var(--ny-fog);
}

body.ny-auth-shell .form-ui.dt-sn {
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-6) var(--ny-sp-5);
    box-shadow: var(--ny-shadow-md);
}

body.ny-auth-shell .section-title.title-wide h2.font-weight-bold,
body.ny-auth-shell .section-title.no-after-title-wide h2 {
    font-family: var(--ny-font) !important;
    font-size: 22px;
    font-weight: 800;
    color: var(--ny-charcoal);
    margin-bottom: var(--ny-sp-3) !important;
    padding-inline-start: 12px;
    position: relative;
}

body.ny-auth-shell .section-title.title-wide h2::before,
body.ny-auth-shell .section-title.no-after-title-wide h2::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    background: var(--ny-red);
    border-radius: 2px;
}

body.ny-auth-shell .form-footer.text-right {
    text-align: start !important;
}

body.ny-auth-shell .form-footer a {
    color: var(--ny-red);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}

body.ny-auth-shell .form-footer a:hover {
    color: var(--ny-red-dark);
    text-decoration: underline;
}

/* OTP verify boxes */
.numbers-verify {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    direction: ltr;
    margin: var(--ny-sp-4) 0;
}

.numbers-verify .activation-code-input {
    width: 48px;
    height: 56px;
    border: 1px solid var(--ny-border-mid);
    border-radius: var(--ny-r-md);
    background: var(--ny-surface-0);
    text-align: center;
    font-family: var(--ny-font-num);
    font-size: 22px;
    font-weight: 700;
    color: var(--ny-charcoal);
}

.numbers-verify .activation-code-input:focus {
    outline: none;
    border-color: var(--ny-red);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.16);
}

.message-light {
    background: var(--ny-fog);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-3) var(--ny-sp-4);
    font-size: 13px;
    color: var(--ny-charcoal);
    text-align: center;
    margin: var(--ny-sp-3) 0;
}

.message-light strong {
    color: var(--ny-red);
}

/* ---------- M.19 — Profile sub-pages spacing ---------- */
.dt-sl.dt-sn.pt-3.pb-5,
.dt-sl.dt-sn.pt-3 {
    padding: var(--ny-sp-5) !important;
}

.card-horizontal-product {
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-4);
    margin-bottom: var(--ny-sp-3);
    transition: border-color var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease);
}

.card-horizontal-product:hover {
    border-color: var(--ny-red);
    box-shadow: var(--ny-shadow-md);
}

.card-horizontal-product .label-status-comment {
    display: inline-block;
    padding: 3px 10px;
    background: var(--ny-fog);
    color: var(--ny-charcoal);
    border-radius: var(--ny-r-pill);
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
}

.card-horizontal-comment-title {
    font-family: var(--ny-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--ny-charcoal);
    margin: 4px 0;
}

.card-horizontal-comment {
    color: var(--ny-steel);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

/* ---------- M.20 — Compare page ---------- */
.comparison-table {
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    overflow-x: auto;
    padding: var(--ny-sp-3);
}

.comparison-table table.table {
    margin: 0;
    width: 100%;
}

.comparison-table table.table th,
.comparison-table table.table td {
    padding: var(--ny-sp-3) var(--ny-sp-4);
    font-family: var(--ny-font);
    font-size: 13px;
    color: var(--ny-charcoal);
    border-color: var(--ny-border-soft);
    vertical-align: top;
}

.comparison-table table.table th {
    background: var(--ny-fog);
    font-weight: 600;
    color: var(--ny-steel);
}

.comparison-item {
    text-align: center;
}

.comparison-item-thumb img {
    max-width: 110px;
    border-radius: var(--ny-r-sm);
    margin-bottom: var(--ny-sp-2);
}

.comparison-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ny-charcoal);
    margin: 0 0 6px 0;
}

.comparison-item .remove-item {
    color: var(--ny-steel);
    font-size: 12px;
    text-decoration: none;
}

.comparison-item .remove-item:hover {
    color: var(--ny-red);
}

/* ---------- M.21 — Modals (Bootstrap 4) ---------- */
.modal-content {
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-lg);
    box-shadow: var(--ny-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--ny-border-soft);
    padding: var(--ny-sp-4) var(--ny-sp-5);
}

.modal-header .modal-title {
    font-family: var(--ny-font);
    font-weight: 700;
    color: var(--ny-charcoal);
    font-size: 16px;
    margin: 0;
}

.modal-header .close {
    color: var(--ny-steel);
    opacity: 1;
    font-weight: 400;
    text-shadow: none;
    transition: color var(--ny-dur) var(--ny-ease);
}

.modal-header .close:hover {
    color: var(--ny-red);
}

.modal-body {
    padding: var(--ny-sp-5);
    color: var(--ny-charcoal);
    font-family: var(--ny-font);
}

/* ---------- M.22 — Authenticity result (extracted) ---------- */
.ny-result {
    border-radius: var(--ny-r-xl);
    padding: var(--ny-sp-7) var(--ny-sp-6);
    margin: var(--ny-sp-5) 0;
    color: var(--ny-white);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ny-result--valid {
    background: linear-gradient(135deg, #064E2B 0%, #0F1C13 100%);
}

.ny-result--invalid {
    background: linear-gradient(135deg, #6B1B1F 0%, #1C0F10 100%);
}

.ny-result__icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    margin-bottom: var(--ny-sp-4);
}

.ny-result--valid .ny-result__icon {
    background: rgba(22, 163, 74, 0.20);
    color: #22C55E;
}

.ny-result--invalid .ny-result__icon {
    background: rgba(227, 6, 19, 0.20);
    color: var(--ny-red);
}

.ny-result__title {
    font-family: var(--ny-font);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    margin: 0 0 var(--ny-sp-3) 0;
    color: var(--ny-white);
}

.ny-result__code {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ny-r-md);
    font-family: var(--ny-font);
    font-size: 14px;
    letter-spacing: 0.08em;
    margin: var(--ny-sp-2) 0 var(--ny-sp-4) 0;
    direction: ltr;
}

.ny-result__details {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-5);
    margin-top: var(--ny-sp-5);
    text-align: right;
}

.ny-result__details dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--ny-sp-3) var(--ny-sp-5);
    margin: 0;
}

.ny-result__details dt {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 500;
}

.ny-result__details dd {
    color: var(--ny-white);
    font-size: 14px;
    margin: 0;
    font-weight: 500;
}

.ny-result__details dd a {
    color: var(--ny-white);
    text-decoration: underline;
}

.ny-result__cta {
    margin-top: var(--ny-sp-5);
    display: flex;
    gap: var(--ny-sp-3);
    justify-content: center;
    flex-wrap: wrap;
}

.ny-crumb {
    font-size: 13px;
    color: var(--ny-steel);
    margin-bottom: var(--ny-sp-4);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.ny-crumb a {
    color: var(--ny-steel);
    text-decoration: none;
}

.ny-crumb a:hover {
    color: var(--ny-red);
}

.ny-crumb > i.mdi {
    color: var(--ny-steel);
    opacity: 0.6;
    font-size: 14px;
}

.ny-crumb > span {
    color: var(--ny-charcoal);
}

/* ---------- M.23 — Garage page (extracted) ---------- */
.ny-garage-hero {
    background: linear-gradient(135deg, var(--ny-charcoal) 0%, var(--ny-onyx) 100%);
    color: var(--ny-white);
    border-radius: var(--ny-r-xl);
    padding: var(--ny-sp-7) var(--ny-sp-6);
    margin: var(--ny-sp-5) 0 var(--ny-sp-7);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ny-garage-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(50% 60% at 80% 30%, rgba(227, 6, 19, 0.18), transparent 60%);
    z-index: -1;
}

.ny-garage-hero h1 {
    font-family: var(--ny-font);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    margin: 0 0 var(--ny-sp-3) 0;
    color: var(--ny-white);
}

.ny-garage-hero h1 em {
    color: var(--ny-red);
    font-style: normal;
}

.ny-garage-hero p {
    color: var(--ny-silver);
    margin: 0;
    max-width: 640px;
    line-height: 1.8;
}

.ny-garage-empty {
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-5);
    margin-top: var(--ny-sp-5);
    text-align: center;
}

.ny-garage-empty p {
    color: var(--ny-silver);
    margin-bottom: var(--ny-sp-4);
}

.ny-gviz {
    background: var(--ny-white);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-6);
    position: relative;
    box-shadow: var(--ny-shadow-md);
}

.ny-gviz__svg-wrap {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}

.ny-gviz svg {
    width: 100%;
    height: auto;
    display: block;
}

.ny-hotspot {
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ny-hotspot circle.dot {
    fill: var(--ny-red);
}

.ny-hotspot circle.pulse {
    fill: var(--ny-red);
    opacity: 0.35;
    transform-origin: center;
    animation: nyPulse 2s ease-out infinite;
}

.ny-hotspot:hover circle.dot {
    fill: var(--ny-charcoal);
    r: 12;
}

.ny-hotspot text {
    fill: var(--ny-charcoal);
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 200ms;
    pointer-events: none;
}

.ny-hotspot:hover text {
    opacity: 1;
}

@keyframes nyPulse {
    0%   { r: 8; opacity: 0.5; }
    100% { r: 22; opacity: 0; }
}

.ny-gviz__info {
    background: var(--ny-fog);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-5);
    margin-top: var(--ny-sp-5);
    min-height: 120px;
    transition: all 200ms;
}

.ny-gviz__info--empty {
    color: var(--ny-steel);
    text-align: center;
    font-size: 13px;
}

.ny-gviz__info h3 {
    font-family: var(--ny-font);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--ny-sp-2) 0;
    color: var(--ny-charcoal);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ny-gviz__info h3 i {
    color: var(--ny-red);
}

.ny-gviz__info p {
    color: var(--ny-steel);
    margin: 0 0 var(--ny-sp-3) 0;
    font-size: 14px;
    line-height: 1.6;
}

.ny-gviz__info .ny-btn-primary {
    display: inline-flex;
}

.ny-parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--ny-sp-3);
    margin-top: var(--ny-sp-5);
}

.ny-part-card {
    background: var(--ny-white);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-3);
    text-align: center;
    text-decoration: none;
    color: var(--ny-charcoal);
    transition: all 200ms;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ny-part-card:hover {
    border-color: var(--ny-red);
    transform: translateY(-2px);
    box-shadow: var(--ny-shadow-md);
    color: var(--ny-charcoal);
    text-decoration: none;
}

.ny-part-card i {
    font-size: 32px;
    color: var(--ny-red);
}

.ny-part-card span {
    font-size: 13px;
    font-weight: 500;
}

/* ---------- M.24 — Category filter sidebar accordion ---------- */
.col-lg-3.sticky-sidebar > .dt-sn {
    padding: var(--ny-sp-4);
}

.widget-search input.input-ui {
    margin-bottom: var(--ny-sp-3);
}

.col-lg-3 .accordion .card {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ny-border-soft);
    border-radius: 0 !important;
    margin: 0;
}

.col-lg-3 .accordion .card:last-child {
    border-bottom: 0;
}

.col-lg-3 .accordion .card-header {
    background: transparent;
    border: 0;
    padding: 0;
}

.col-lg-3 .accordion .card-header .btn.btn-block {
    text-align: start;
    background: transparent !important;
    border: 0 !important;
    color: var(--ny-charcoal) !important;
    padding: var(--ny-sp-3) 0;
    font-family: var(--ny-font);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: auto;
    box-shadow: none !important;
}

.col-lg-3 .accordion .card-header .btn.btn-block::after {
    content: '\F140';
    font-family: "Material Design Icons";
    color: var(--ny-steel);
    transition: transform var(--ny-dur) var(--ny-ease);
}

.col-lg-3 .accordion .card-header .btn.btn-block.collapsed::after {
    transform: rotate(-90deg);
}

.col-lg-3 .accordion .card-body {
    padding: 0 0 var(--ny-sp-3);
}

.filter-color {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--ny-border-mid);
    display: inline-block;
    cursor: pointer;
    transition: transform var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease);
}

.filter-color:hover {
    transform: scale(1.1);
    border-color: var(--ny-red);
}

.parent-switcher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-family: var(--ny-font);
    font-size: 13px;
    color: var(--ny-charcoal);
}

.ui-statusswitcher {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--ny-fog);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-pill);
    cursor: pointer;
    transition: background-color var(--ny-dur) var(--ny-ease);
}

.ui-statusswitcher.active,
.ui-statusswitcher.is-on {
    background: var(--ny-red);
    border-color: var(--ny-red);
}

.ui-statusswitcher-slider-toggle {
    position: absolute;
    top: 1px;
    inset-inline-start: 1px;
    width: 16px;
    height: 16px;
    background: var(--ny-white);
    border-radius: 50%;
    transition: transform var(--ny-dur) var(--ny-ease);
}

.ui-statusswitcher.active .ui-statusswitcher-slider-toggle,
.ui-statusswitcher.is-on .ui-statusswitcher-slider-toggle {
    transform: translateX(-16px);
}

[dir="ltr"] .ui-statusswitcher.active .ui-statusswitcher-slider-toggle,
[dir="ltr"] .ui-statusswitcher.is-on .ui-statusswitcher-slider-toggle {
    transform: translateX(16px);
}

/* ---------- M.25 — Pagination polish ---------- */
.pagination {
    display: flex;
    gap: 6px;
    margin: var(--ny-sp-5) 0 0;
    padding: 0;
    list-style: none;
    justify-content: center;
    flex-wrap: wrap;
}

.pagination a {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    color: var(--ny-charcoal);
    font-family: var(--ny-font-num);
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--ny-r-md);
    text-decoration: none;
    transition: background-color var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease);
}

.pagination a:hover {
    background: var(--ny-fog);
    color: var(--ny-charcoal);
    border-color: var(--ny-charcoal);
    text-decoration: none;
}

.pagination a.active-page {
    background: var(--ny-red);
    border-color: var(--ny-red);
    color: var(--ny-white);
}

.pagination a.prev,
.pagination a.next {
    color: var(--ny-steel);
}

/* ---------- M.26 — Mini footer (auth shell) ---------- */
.mini-footer.dt-sl {
    background: var(--ny-charcoal);
    color: var(--ny-silver);
    padding: var(--ny-sp-5);
    text-align: center;
}

.mini-footer .footer-light-text {
    color: var(--ny-silver);
    font-size: 12px;
    font-family: var(--ny-font);
    margin: 0;
}

/* ---------- M.27 — Misc utility polish ---------- */
.text-danger {
    color: var(--ny-red) !important;
}

.text-info {
    color: var(--ny-info) !important;
}

.text-success {
    color: var(--ny-success) !important;
}

.text-warning {
    color: var(--ny-warning) !important;
}

.text-muted {
    color: var(--ny-steel) !important;
}

.bg-primary {
    background-color: var(--ny-red) !important;
}

.bg-secondary {
    background-color: var(--ny-charcoal) !important;
}

.badge {
    font-family: var(--ny-font);
    font-weight: 600;
    border-radius: var(--ny-r-sm);
    padding: 4px 8px;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.btn-border.badge.bg-primary {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
    border: 0;
}

.dt-sn .dt-sn {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.page.dt-sl.dt-sn p {
    color: var(--ny-steel);
    text-align: center;
    margin: 0;
    padding: var(--ny-sp-5);
    font-size: 14px;
}

.search-amazing-tab > .row {
    margin: 0;
}

.products-list-sort-type {
    background: transparent;
    border-bottom: 1px solid var(--ny-border-soft);
    padding: 0 var(--ny-sp-3);
    margin-bottom: var(--ny-sp-4);
}

.products-list-sort-type .ah-tab {
    padding: 0;
}

.category-background {
    background-size: cover;
    background-position: center;
    background-color: var(--ny-charcoal);
    color: var(--ny-white);
    border-radius: var(--ny-r-md);
    padding: var(--ny-sp-5) !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.category-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 15, 16, 0.86) 0%, rgba(28, 28, 30, 0.78) 100%);
    z-index: -1;
}

.category-background h2,
.category-background h3 {
    color: var(--ny-white);
}

.category-background p {
    color: var(--ny-silver);
    line-height: 1.85;
}

.sticky-sidebar {
    align-self: flex-start;
}

.btn-primary-cm.w-5 {
    min-width: 220px;
}

.add-to-cart-single {
    background: var(--ny-charcoal) !important;
    color: var(--ny-white) !important;
    border-radius: var(--ny-r-md);
    padding: 8px 12px;
    font-family: var(--ny-font);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color var(--ny-dur) var(--ny-ease);
}

.add-to-cart-single:hover {
    background: var(--ny-red) !important;
    color: var(--ny-white) !important;
}

.fild_products {
    display: inline-flex;
    align-items: center;
    background: var(--ny-charcoal);
    color: var(--ny-white);
    border-radius: var(--ny-r-sm);
    padding: 3px 8px;
    font-family: var(--ny-font);
    font-size: 11px;
    font-weight: 600;
}

.fild_products span {
    color: inherit;
}

.pc-cat-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(15, 15, 16, 0.06);
    color: var(--ny-charcoal);
    border-radius: var(--ny-r-pill);
    padding: 3px 10px;
    font-family: var(--ny-font);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease);
}

.pc-cat-badge:hover {
    background: var(--ny-charcoal);
    color: var(--ny-white);
    text-decoration: none;
}

/* ---------- M.28 — Responsive tweaks ---------- */
@media (max-width: 575px) {
    .form-ui.dt-sn,
    .page.dt-sn,
    .dt-sn {
        padding: var(--ny-sp-4);
    }

    .profile-sidebar-header {
        padding: var(--ny-sp-4);
    }

    .shop-list .list-row {
        padding: var(--ny-sp-3);
    }

    .checkout-header {
        padding: var(--ny-sp-3) var(--ny-sp-4);
    }

    body.ny-auth-shell .mini-header {
        padding: var(--ny-sp-3);
    }

    .content-page .content-desc {
        padding: var(--ny-sp-4);
    }

    .ny-result {
        padding: var(--ny-sp-5) var(--ny-sp-4);
    }

    .ny-garage-hero {
        padding: var(--ny-sp-5) var(--ny-sp-4);
    }

    .product-info .product-title h1 {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .gallery-options {
        position: static;
        margin-bottom: var(--ny-sp-3);
        justify-content: flex-end;
    }
}

/* ---------- M.29 — Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .ny-hotspot circle.pulse {
        animation: none;
    }
}

/* ---------- M.30a — Garage hero modifiers ---------- */
.ny-garage-status {
    margin-top: var(--ny-sp-4);
}

.ny-gviz__cursor {
    font-size: 32px;
    color: var(--ny-steel);
    margin-bottom: 8px;
    display: inline-block;
}

.ny-gviz__parts-heading {
    font-family: var(--ny-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--ny-charcoal);
    margin: var(--ny-sp-6) 0 var(--ny-sp-3) 0;
}

/* ---------- M.30 — Authenticity result modifiers ---------- */
.ny-result--centered {
    text-align: center;
}

.ny-result__lede {
    color: rgba(255, 255, 255, 0.75);
    margin: 0 auto;
    max-width: 520px;
    line-height: 1.8;
}

.ny-result__title-emph {
    color: #22C55E;
}

.ny-result__title-emph--red {
    color: var(--ny-red);
}

.ny-result__warning {
    margin-top: var(--ny-sp-4);
    color: #FCD34D;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ny-result__checklist {
    text-align: right;
    max-width: 480px;
    margin: var(--ny-sp-4) auto 0 auto;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.8;
}

/* ============================================================
   ============================================================
   2026-05-18 PASS v2 — Mobile header & brand hero
   High specificity (body header.main-header …) + !important so
   we beat legacy @layer rules and any cached vendor !importants.
   ============================================================
   ============================================================ */

/* ── 1) Fixed main header (desktop + mobile) ────────────────── */
/* We tried `position: sticky` first but legacy main.css applies
   `overflow-x: hidden !important` to body + .wrapper. That implicitly
   creates a scroll container on the body, which breaks sticky against
   the viewport. `overflow: clip` would fix it but browser support and
   cascade reliability turned out to be inconsistent here.
   Switched to `position: fixed` — it ignores parent overflow entirely
   and always anchors to the viewport. The trade-off (element leaves
   normal flow) is fixed by adding padding-top on .wrapper equal to the
   header's height so content doesn't slide under it. */
html body header.main-header,
html body header.main-header.dt-sl {
    position: fixed !important;
    top: 0 !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1020 !important;
    background: var(--ny-white) !important;
    box-shadow: 0 1px 0 var(--ny-border-soft);
}

/* The header is now `fixed`, so it no longer occupies space in the
   document flow. The first scrollable element after it must absorb
   the displaced height — apply padding-top to .wrapper, computed
   roughly as: topstrip (~42px) + header (~110px). Adjust per viewport. */
body .wrapper {
    padding-top: 152px;
}

@media (max-width: 991px) {
    body .wrapper {
        padding-top: 120px;
    }
}

@media (max-width: 575px) {
    body .wrapper {
        padding-top: 104px;
    }
}

/* Move the topstrip out of .wrapper's padding region — the fixed header
   anchors to viewport top:0, but the topstrip needs to sit at the very
   top first, then the header beneath it. Since both will overlap if we
   simply pin the header at top:0, we instead fix the *whole top stack*
   (topstrip + header) as a group by also fixing the topstrip. */
html body .ny-topstrip {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1021 !important;
}

html body header.main-header,
html body header.main-header.dt-sl {
    /* offset by the topstrip's height so the header sits beneath it */
    top: 42px !important;
}

@media (max-width: 575px) {
    html body header.main-header,
    html body header.main-header.dt-sl {
        top: 38px !important;
    }
}

/* Active-vehicle bar — hidden for now in all states/viewports.
   Re-enable later by removing this block. */
body .ny-active-vehicle-bar,
body .ny-active-vehicle-bar.is-active {
    display: none !important;
}

/* ── 2) Mobile (≤991px): hide desktop menu, show hamburger ──── */
@media (max-width: 991px) {
    /* Hide ALL variants of the desktop horizontal menu */
    body header.main-header .main-menu > ul.list,
    body header.main-header .main-menu > ul.list.hidden-md,
    body header.main-header .main-menu .list.float-right,
    body header.main-header nav.main-menu > ul.list {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Force the hamburger button visible */
    body header.main-header button.btn-menu,
    body header.main-header .main-menu button.btn-menu {
        display: inline-flex !important;
        visibility: visible !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        order: 0 !important;
        cursor: pointer;
    }

    body header.main-header .main-menu button.btn-menu .align,
    body header.main-header .main-menu button.btn-menu .align__justify {
        margin: 0 !important;
        display: inline-block !important;
    }

    body header.main-header .main-menu button.btn-menu .align span {
        background: var(--ny-charcoal) !important;
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        margin: 0 0 5px 0 !important;
        border-radius: 2px !important;
    }

    body header.main-header .main-menu button.btn-menu .align span:last-child {
        margin-bottom: 0 !important;
    }

    /* Compact the bottom-header strip on mobile */
    body header.main-header .bottom-header,
    body header.main-header .bottom-header.dt-sl,
    body header.main-header .bottom-header.mb-sm-bottom-header {
        padding: 4px 0 !important;
        min-height: 48px;
    }

    body header.main-header .main-menu,
    body header.main-header nav.main-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 44px !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    body header.main-header .main-menu > ul.nav,
    body header.main-header .main-menu > .nav {
        order: 2 !important;
        margin-left: auto !important;
    }
}

/* ── 3) Garage chip — short label on mobile ─────────────────── */
.ny-garage-chip__label--short {
    display: none;
}

@media (max-width: 767px) {
    body .ny-garage-chip .ny-garage-chip__label--full,
    body .main-header .topbar .ny-garage-chip .ny-garage-chip__label--full {
        display: none !important;
    }

    body .ny-garage-chip .ny-garage-chip__label--short,
    body .main-header .topbar .ny-garage-chip .ny-garage-chip__label--short {
        display: inline-block !important;
        max-width: none !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    body .main-header .topbar .ny-garage-chip {
        padding: 6px 10px !important;
        gap: 6px !important;
    }
}

/* ── 4) Phone chip in topbar (mobile-priority) ──────────────── */
.ny-phone-chip {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--ny-r-pill);
    background: transparent;
    border: 1px solid var(--ny-border-mid);
    color: var(--ny-charcoal);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                border-color var(--ny-dur) var(--ny-ease);
    direction: ltr;
}

.ny-phone-chip i {
    color: var(--ny-red);
    font-size: 16px;
    line-height: 1;
}

.ny-phone-chip:hover,
.ny-phone-chip:focus {
    background: var(--ny-charcoal);
    color: var(--ny-white);
    border-color: var(--ny-charcoal);
    text-decoration: none;
}

.ny-phone-chip:hover i,
.ny-phone-chip:focus i {
    color: var(--ny-white);
}

/* Account / login button — solid red (primary) with white text on
   all viewports. Ultra-high specificity via `html body` prefix +
   literal #FFFFFF (in case any rule scopes --ny-white differently)
   to defeat every legacy .nav-link/.nav-link i/.label-dropdown rule. */
html body header.main-header .nav-item.account .nav-link,
html body header.main-header .nav-item.account .nav-link:link,
html body header.main-header .nav-item.account .nav-link:visited,
html body header.main-header .topbar .nav-item.account .nav-link,
html body header.main-header.dt-sl .nav-item.account .nav-link {
    background: #E30613 !important;
    background-color: #E30613 !important;
    color: #FFFFFF !important;
    border: 1px solid #E30613 !important;
    border-radius: var(--ny-r-pill) !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background var(--ny-dur) var(--ny-ease),
                color var(--ny-dur) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease),
                transform var(--ny-dur) var(--ny-ease) !important;
}

html body header.main-header .nav-item.account .nav-link:hover,
html body header.main-header .nav-item.account .nav-link:focus,
html body header.main-header .nav-item.account .nav-link:focus-visible,
html body header.main-header .topbar .nav-item.account .nav-link:hover,
html body header.main-header.dt-sl .nav-item.account .nav-link:hover {
    background: #1F2125 !important;
    background-color: #1F2125 !important;
    color: #FFFFFF !important;
    border-color: #1F2125 !important;
    box-shadow: 0 4px 10px rgba(227, 6, 19, 0.18) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* Text label — defeat legacy `color: inherit !important` + `color: #607d8b`.
   Setting color directly on the span (not relying on inherit). */
html body header.main-header .nav-item.account .nav-link span,
html body header.main-header .nav-item.account .nav-link span.label-dropdown,
html body header.main-header .topbar .nav-item.account .nav-link span.label-dropdown,
html body header.main-header.dt-sl .nav-item.account .nav-link .label-dropdown {
    color: #FFFFFF !important;
}

/* Icon — defeat legacy `header.main-header .nav-link i { color: var(--ny-red) }` */
html body header.main-header .nav-item.account .nav-link i,
html body header.main-header .nav-item.account .nav-link i.mdi,
html body header.main-header .topbar .nav-item.account .nav-link i,
html body header.main-header.dt-sl .nav-item.account .nav-link i {
    color: #FFFFFF !important;
}

html body header.main-header .nav-item.account .nav-link:hover i,
html body header.main-header .nav-item.account .nav-link:hover span,
html body header.main-header .nav-item.account .nav-link:hover .label-dropdown,
html body header.main-header .nav-item.account .nav-link:focus i,
html body header.main-header .nav-item.account .nav-link:focus .label-dropdown {
    color: #FFFFFF !important;
}

/* Universal selector — force every descendant of .nav-link (including
   inline elements, ::before / ::after pseudo content) to white. This
   is the nuclear option so nothing inherits/overrides red or charcoal. */
html body header.main-header .nav-item.account .nav-link,
html body header.main-header .nav-item.account .nav-link *,
html body header.main-header .nav-item.account .nav-link::before,
html body header.main-header .nav-item.account .nav-link::after,
html body header.main-header .nav-item.account .nav-link:hover,
html body header.main-header .nav-item.account .nav-link:hover *,
html body header.main-header .nav-item.account .nav-link:focus,
html body header.main-header .nav-item.account .nav-link:focus * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Compact on mobile — keep icon + single word inside the red pill. */
@media (max-width: 575px) {
    body header.main-header .nav-item.account .nav-link {
        padding: 6px 12px !important;
        gap: 4px !important;
        height: 36px;
    }

    body header.main-header .nav-link span.label-dropdown {
        font-size: 12px !important;
        max-width: none !important;
        overflow: visible !important;
    }
}

/* ── 5) Owl prev/next — bulletproof circle on all sizes ─────── */
body .owl-carousel .owl-nav button.owl-prev,
body .owl-carousel .owl-nav button.owl-next,
body .brand-slider .owl-nav button.owl-prev,
body .brand-slider .owl-nav button.owl-next,
body .product-carousel .owl-nav button.owl-prev,
body .product-carousel .owl-nav button.owl-next,
body .category-section-slider .owl-carousel .owl-nav .owl-prev,
body .category-section-slider .owl-carousel .owl-nav .owl-next {
    box-sizing: border-box !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
}

@media (max-width: 991px) {
    body .owl-carousel .owl-nav button.owl-prev,
    body .owl-carousel .owl-nav button.owl-next,
    body .brand-slider .owl-nav button.owl-prev,
    body .brand-slider .owl-nav button.owl-next,
    body .product-carousel .owl-nav button.owl-prev,
    body .product-carousel .owl-nav button.owl-next,
    body .category-section-slider .owl-carousel .owl-nav .owl-prev,
    body .category-section-slider .owl-carousel .owl-nav .owl-next {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        line-height: 1 !important;
        font-size: 18px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ── 6) Hero — brand-forward "فروشگاه نئو یدک" treatment ────── */

/* Widen the hero content column so the 3-word title doesn't get
   forced to wrap on desktop. Overrides legacy max-width: 460px. */
body .ny-hero .ny-hero__content {
    max-width: 629px !important;
}

/* Override the legacy .ny-hero__title (font-size: clamp(28px, 4vw, 44px)).
   All three words share the same size and weight per request. */
body .ny-hero h1.ny-hero__title,
body .ny-hero .ny-hero__brand {
    font-size: clamp(48px, 7vw, 80px) !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    font-weight: 800 !important;
    margin: 0 0 var(--ny-sp-6) 0 !important;
    color: var(--ny-white);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.18em;
}

body .ny-hero .ny-hero__brand-word {
    display: inline-block;
    color: var(--ny-white);
    font-style: normal;
    font-weight: 800 !important;
    font-size: inherit;
    line-height: 0.95;
}

/* Prefix word "فروشگاه" — same size + weight as siblings now. */
body .ny-hero .ny-hero__brand-word--prefix {
    font-size: inherit;
    font-weight: 800 !important;
    opacity: 1;
    letter-spacing: -0.01em;
}

body .ny-hero .ny-hero__brand-word--accent {
    color: var(--ny-red) !important;
    font-style: normal !important;
    font-weight: 800 !important;
    /* Subtle text-shadow for accent punch (Persian fonts can render
       weights differently across systems). */
    text-shadow: 0 1px 0 rgba(227, 6, 19, 0.15);
}

body .ny-hero .ny-hero__brand + .ny-hero__lede,
body .ny-hero p.ny-hero__lede {
    font-size: clamp(15px, 1.6vw, 18px) !important;
    line-height: 1.8 !important;
    color: var(--ny-silver) !important;
    opacity: 0.92 !important;
    margin: 0 0 var(--ny-sp-5) 0 !important;
    max-width: 44ch;
    font-weight: 400 !important;
}

/* Short branded tagline (5-6 words) — sits right under the brand
   with bigger font than the old lede and a tight rhythm so it feels
   like the second line of the slogan. Heavier weight for impact. */
body .ny-hero p.ny-hero__tagline,
body .ny-hero .ny-hero__brand + .ny-hero__tagline {
    font-size: clamp(22px, 3vw, 34px) !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    color: var(--ny-white) !important;
    opacity: 1 !important;
    margin: 0 0 var(--ny-sp-2) 0 !important;
    letter-spacing: -0.01em;
    /* Subtle gradient accent on the tagline gives it personality
       without competing with the brand title above. */
    background: linear-gradient(90deg, var(--ny-white) 0%, rgba(255,255,255,0.78) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

@media (max-width: 991px) {
    body .ny-hero .ny-hero__content {
        max-width: 100% !important;
    }

    body .ny-hero h1.ny-hero__title,
    body .ny-hero .ny-hero__brand {
        font-size: clamp(36px, 7vw, 56px) !important;
        justify-content: flex-start;
    }

    body .ny-hero p.ny-hero__tagline {
        font-size: clamp(16px, 3.5vw, 22px) !important;
    }
}

/* Mobile (≤767px) — content FIRST, brand selector BELOW, compact type */
@media (max-width: 767px) {
    /* Override the legacy mobile rule that moves .ny-vselector above
       the content. Now content (title/tagline/USPs) sits on top. */
    body .ny-hero .ny-hero__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--ny-sp-4) !important;
        width: 100% !important;
    }

    body .ny-hero .ny-hero__content {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: right;
    }

    body .ny-hero .ny-vselector {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Re-show eyebrow (legacy mobile rule was hiding it) */
    body .ny-hero .ny-hero__content .ny-hero__eyebrow {
        display: inline-flex !important;
    }

    /* Hide the USP list entirely on mobile per request */
    body .ny-hero .ny-hero__content .ny-hero__usp {
        display: none !important;
    }

    /* Smaller, mobile-appropriate type — not the huge desktop sizes */
    body .ny-hero h1.ny-hero__title,
    body .ny-hero .ny-hero__brand {
        font-size: clamp(28px, 7vw, 40px) !important;
        line-height: 1.05 !important;
        font-weight: 800 !important;
        margin: 0 0 var(--ny-sp-2) 0 !important;
        gap: 0.14em;
        letter-spacing: -0.02em !important;
    }

    body .ny-hero .ny-hero__brand-word,
    body .ny-hero .ny-hero__brand-word--prefix,
    body .ny-hero .ny-hero__brand-word--accent {
        font-weight: 800 !important;
        font-size: inherit !important;
    }

    body .ny-hero p.ny-hero__tagline {
        font-size: clamp(14px, 4vw, 18px) !important;
        line-height: 1.5 !important;
        font-weight: 700 !important;
        margin: 0 0 var(--ny-sp-3) 0 !important;
        letter-spacing: 0 !important;
    }

    body .ny-hero .ny-hero__eyebrow {
        font-size: 11px !important;
        padding: 4px 10px !important;
        margin-bottom: var(--ny-sp-2) !important;
    }
}

@media (max-width: 575px) {
    body .ny-hero h1.ny-hero__title,
    body .ny-hero .ny-hero__brand {
        font-size: clamp(26px, 8vw, 36px) !important;
        margin-bottom: var(--ny-sp-2) !important;
    }

    body .ny-hero p.ny-hero__tagline {
        font-size: clamp(13px, 4.2vw, 16px) !important;
        margin-bottom: var(--ny-sp-3) !important;
    }
}

/* ── 7) Topstrip — phones split space-between ───────────────── */
.ny-topstrip--phones .ny-topstrip__inner--split {
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 12px;
}

.ny-topstrip__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ny-silver);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--ny-r-sm);
    transition: color var(--ny-dur) var(--ny-ease),
                background var(--ny-dur) var(--ny-ease);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}

.ny-topstrip__phone:hover,
.ny-topstrip__phone:focus {
    color: var(--ny-white);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
}

.ny-topstrip__phone i {
    color: var(--ny-red);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.ny-topstrip__phone-label {
    opacity: 0.7;
    font-size: 12px;
}

.ny-topstrip__phone-value {
    font-weight: 600;
    direction: ltr;
    unicode-bidi: embed;
}

/* Kill the divider pseudo-element that ny-topstrip__item uses
   (phones don't use the same selector but be defensive). */
.ny-topstrip--phones .ny-topstrip__phone + .ny-topstrip__phone::before {
    display: none;
}

/* On mobile, when scrolling-strip layout is active, restore split
   layout for phones (override the legacy max-content + nowrap). */
@media (max-width: 991px) {
    body .ny-topstrip--phones {
        overflow: visible !important;
    }

    body .ny-topstrip--phones .ny-topstrip__wrap {
        max-width: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 8px 12px !important;
    }

    body .ny-topstrip--phones .ny-topstrip__inner--split {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 8px !important;
    }

    body .ny-topstrip__phone {
        padding: 2px 4px;
        font-size: 12px;
    }

    body .ny-topstrip__phone i {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    body .ny-topstrip__phone-label {
        display: none;
    }

    body .ny-topstrip__phone {
        gap: 6px;
        font-size: 12px;
    }

    body .ny-topstrip__phone-value {
        font-size: 12px;
    }
}
/* ============================================================
   ABOUT US PAGE — Editorial sections
   ============================================================ */
.ny-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ny-sp-2);
    padding: 14px 24px;
    border-radius: var(--ny-r-md);
    font-family: var(--ny-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--ny-dur-fast) var(--ny-ease),
                color var(--ny-dur-fast) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease-out),
                transform var(--ny-dur-fast) var(--ny-ease);
}
.ny-btn:hover { text-decoration: none; }
.ny-btn--lg { padding: 16px 28px; font-size: 15px; }

.ny-btn--primary {
    background: var(--ny-red);
    color: var(--ny-white);
}
.ny-btn--primary:hover {
    background: var(--ny-red-dark);
    color: var(--ny-white);
    box-shadow: var(--ny-shadow-red);
    transform: translateY(-1px);
}

.ny-btn--ghost {
    background: transparent;
    color: var(--ny-white);
    border-color: var(--ny-border-on-dark);
}
.ny-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ny-white);
}

.is-about .ny-btn--ghost,
.is-faq   .ny-btn--ghost {
    color: var(--ny-charcoal);
    border-color: var(--ny-border-mid);
}
.is-about .ny-btn--ghost:hover,
.is-faq   .ny-btn--ghost:hover {
    background: var(--ny-fog);
    color: var(--ny-charcoal);
}

.ny-section-bar {
    display: inline-block;
    width: 32px;
    height: 4px;
    background: var(--ny-red);
    border-radius: 2px;
    margin-bottom: var(--ny-sp-3);
}

/* HERO */
.ny-about-page { padding-top: var(--ny-sp-5); padding-bottom: var(--ny-sp-9); }

.ny-about-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ny-charcoal) 0%, var(--ny-onyx) 100%);
    color: var(--ny-white);
    border-radius: var(--ny-r-xl);
    padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--ny-sp-6);
    align-items: center;
}
.ny-about-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 400px at 100% 0%, rgba(227,6,19,0.18), transparent 60%),
        radial-gradient(600px 300px at 0% 100%, rgba(227,6,19,0.10), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.ny-about-hero__inner { position: relative; z-index: 1; }
.ny-about-hero__media {
    position: relative;
    z-index: 1;
    border-radius: var(--ny-r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--ny-graphite);
}
.ny-about-hero__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

.ny-about-hero__eyebrow {
    display: inline-block;
    color: var(--ny-red);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(227,6,19,0.45);
    padding: 6px 12px;
    border-radius: var(--ny-r-pill);
    margin-bottom: var(--ny-sp-4);
}

.ny-about-hero__title {
    font-size: clamp(36px, 5.5vw, 56px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 var(--ny-sp-4) 0;
    color: var(--ny-white);
}
.ny-about-hero__subtitle {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ny-silver);
    margin: 0 0 var(--ny-sp-5) 0;
    max-width: 56ch;
}

.ny-about-hero__cta-row {
    display: flex; flex-wrap: wrap; gap: var(--ny-sp-3);
}

@media (max-width: 991px) {
    .ny-about-hero { grid-template-columns: 1fr; }
    .ny-about-hero__media { order: -1; aspect-ratio: 16 / 10; }
}

/* STORY */
.ny-about-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: var(--ny-sp-7) 0;
}
.ny-about-story__media {
    border-radius: var(--ny-r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--ny-fog);
}
.ny-about-story__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.ny-about-story__title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 var(--ny-sp-4) 0;
    color: var(--ny-charcoal);
}
.ny-about-story__text {
    font-size: 16px;
    line-height: 1.8;
    color: #36363a;
}
.ny-about-story__text p { margin: 0 0 var(--ny-sp-4) 0; }
.ny-about-story__text p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
    .ny-about-story { grid-template-columns: 1fr; }
    .ny-about-story__media { aspect-ratio: 16 / 10; max-height: 360px; }
}

/* STATS */
.ny-about-stats {
    background: var(--ny-surface-2);
    border-radius: var(--ny-r-lg);
    padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 48px);
    margin: var(--ny-sp-5) 0;
}
.ny-about-stats__head { text-align: center; margin-bottom: var(--ny-sp-6); }
.ny-about-stats__title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    margin: 0 0 var(--ny-sp-2) 0;
    color: var(--ny-charcoal);
}
.ny-about-stats__subtitle {
    color: var(--ny-steel);
    font-size: 14px;
    margin: 0;
}
.ny-about-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ny-sp-5);
}
.ny-about-stat { text-align: center; padding: var(--ny-sp-4); }
.ny-about-stat__icon {
    display: inline-flex;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: var(--ny-charcoal);
    color: var(--ny-red);
    border-radius: var(--ny-r-pill);
    font-size: 22px;
    margin-bottom: var(--ny-sp-3);
}
.ny-about-stat__value {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;
    color: var(--ny-charcoal);
    line-height: 1.1;
    margin-bottom: var(--ny-sp-2);
    font-variant-numeric: tabular-nums;
}
.ny-about-stat__label {
    font-size: 13px;
    color: var(--ny-steel);
    font-weight: 500;
}

@media (max-width: 767px) {
    .ny-about-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ny-sp-4); }
}

/* VALUES */
.ny-about-values { padding: var(--ny-sp-7) 0; }
.ny-about-values__head { margin-bottom: var(--ny-sp-6); }
.ny-about-values__title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    margin: 0 0 var(--ny-sp-2) 0;
    color: var(--ny-charcoal);
}
.ny-about-values__subtitle {
    color: var(--ny-steel);
    font-size: 14px;
    margin: 0;
    max-width: 60ch;
}
.ny-about-values__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ny-sp-5);
}
.ny-about-value {
    background: var(--ny-surface-0);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-5);
    transition: box-shadow var(--ny-dur) var(--ny-ease-out),
                transform var(--ny-dur) var(--ny-ease-out),
                border-color var(--ny-dur) var(--ny-ease-out);
}
.ny-about-value:hover {
    box-shadow: var(--ny-shadow-md);
    transform: translateY(-2px);
    border-color: var(--ny-border-mid);
}
.ny-about-value__icon-wrap {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 52px; height: 52px;
    background: var(--ny-charcoal);
    color: var(--ny-red);
    border-radius: var(--ny-r-pill);
    font-size: 24px;
    margin-bottom: var(--ny-sp-4);
}
.ny-about-value__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ny-charcoal);
    margin: 0 0 var(--ny-sp-2) 0;
}
.ny-about-value__desc {
    font-size: 14px;
    color: var(--ny-steel);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 991px) {
    .ny-about-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .ny-about-values__grid { grid-template-columns: 1fr; }
}

/* TEAM */
.ny-about-team {
    background: var(--ny-surface-1);
    border-radius: var(--ny-r-lg);
    padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 48px);
    margin: var(--ny-sp-5) 0;
}
.ny-about-team__head { margin-bottom: var(--ny-sp-6); }
.ny-about-team__title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    margin: 0 0 var(--ny-sp-2) 0;
    color: var(--ny-charcoal);
}
.ny-about-team__subtitle {
    color: var(--ny-steel);
    font-size: 14px;
    margin: 0;
}
.ny-about-team__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ny-sp-5);
}
.ny-team-card {
    background: var(--ny-surface-0);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-5) var(--ny-sp-4) var(--ny-sp-4);
    text-align: center;
    border: 1px solid var(--ny-border-soft);
    position: relative;
    transition: box-shadow var(--ny-dur) var(--ny-ease-out),
                transform var(--ny-dur) var(--ny-ease-out);
}
.ny-team-card:hover {
    box-shadow: var(--ny-shadow-md);
    transform: translateY(-2px);
}
.ny-team-card__avatar {
    width: 88px; height: 88px;
    margin: 0 auto var(--ny-sp-4) auto;
    border-radius: var(--ny-r-pill);
    overflow: hidden;
    background: var(--ny-fog);
    display: flex; align-items: center; justify-content: center;
}
.ny-team-card__avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.ny-team-card__initials {
    font-size: 32px;
    font-weight: 800;
    color: var(--ny-steel);
}
.ny-team-card__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--ny-charcoal);
    margin: 0 0 4px 0;
}
.ny-team-card__role {
    display: block;
    font-size: 12px;
    color: var(--ny-steel);
    font-weight: 500;
}
.ny-team-card__social {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 32px; height: 32px;
    margin-top: var(--ny-sp-3);
    border-radius: var(--ny-r-pill);
    background: var(--ny-fog);
    color: var(--ny-charcoal);
    font-size: 16px;
    transition: background var(--ny-dur-fast) var(--ny-ease),
                color var(--ny-dur-fast) var(--ny-ease);
}
.ny-team-card__social:hover {
    background: var(--ny-red);
    color: var(--ny-white);
    text-decoration: none;
}

@media (max-width: 991px) {
    .ny-about-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .ny-about-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* TIMELINE */
.ny-about-timeline { padding: var(--ny-sp-7) 0; }
.ny-about-timeline__head { margin-bottom: var(--ny-sp-6); }
.ny-about-timeline__title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    margin: 0 0 var(--ny-sp-2) 0;
    color: var(--ny-charcoal);
}
.ny-about-timeline__subtitle {
    color: var(--ny-steel);
    font-size: 14px;
    margin: 0;
}
.ny-about-timeline__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.ny-about-timeline__list::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 14px;
    width: 2px;
    background: var(--ny-border-mid);
}
[dir="ltr"] .ny-about-timeline__list::before { right: auto; left: 14px; }

.ny-about-milestone {
    position: relative;
    padding-right: 52px;
    padding-bottom: var(--ny-sp-5);
}
[dir="ltr"] .ny-about-milestone { padding-right: 0; padding-left: 52px; }
.ny-about-milestone:last-child { padding-bottom: 0; }

.ny-about-milestone__dot {
    position: absolute;
    right: 6px;
    top: 4px;
    width: 18px; height: 18px;
    border-radius: var(--ny-r-pill);
    background: var(--ny-red);
    box-shadow: 0 0 0 4px var(--ny-white), 0 0 0 5px rgba(227,6,19,0.3);
}
[dir="ltr"] .ny-about-milestone__dot { right: auto; left: 6px; }

.ny-about-milestone__year {
    display: inline-block;
    background: var(--ny-charcoal);
    color: var(--ny-white);
    padding: 4px 12px;
    border-radius: var(--ny-r-pill);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: var(--ny-sp-2);
    font-variant-numeric: tabular-nums;
}
.ny-about-milestone__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ny-charcoal);
    margin: 0 0 4px 0;
}
.ny-about-milestone__desc {
    font-size: 14px;
    color: var(--ny-steel);
    line-height: 1.7;
    margin: 0;
}

/* TRUST */
.ny-about-trust {
    background: var(--ny-charcoal);
    color: var(--ny-white);
    border-radius: var(--ny-r-xl);
    padding: clamp(40px, 5vw, 64px);
    margin: var(--ny-sp-5) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.ny-about-trust__title {
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 var(--ny-sp-3) 0;
    color: var(--ny-white);
}
.ny-about-trust__body {
    font-size: 15px;
    line-height: 1.8;
    color: var(--ny-silver);
    margin: 0;
}
.ny-about-trust__pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ny-sp-4);
}
.ny-about-pillar {
    background: var(--ny-surface-dark-2);
    border-radius: var(--ny-r-lg);
    padding: var(--ny-sp-5) var(--ny-sp-4);
    border: 1px solid var(--ny-border-on-dark);
}
.ny-about-pillar__icon {
    display: inline-flex;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: rgba(227,6,19,0.15);
    color: var(--ny-red);
    border-radius: var(--ny-r-pill);
    font-size: 22px;
    margin-bottom: var(--ny-sp-3);
}
.ny-about-pillar__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ny-white);
    margin: 0 0 6px 0;
}
.ny-about-pillar__body {
    font-size: 13px;
    color: var(--ny-silver);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 991px) {
    .ny-about-trust { grid-template-columns: 1fr; }
    .ny-about-trust__pillars { grid-template-columns: 1fr; }
}

/* CTA BAND */
.ny-about-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(95deg, var(--ny-onyx) 0%, var(--ny-charcoal) 60%, var(--ny-red-dark) 140%);
    color: var(--ny-white);
    border-radius: var(--ny-r-xl);
    padding: clamp(32px, 5vw, 56px);
    margin: var(--ny-sp-5) 0 0 0;
    display: flex;
    align-items: center;
    gap: var(--ny-sp-6);
    flex-wrap: wrap;
    justify-content: space-between;
}
.ny-about-cta__copy { flex: 1 1 320px; }
.ny-about-cta__title {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    margin: 0 0 var(--ny-sp-2) 0;
    color: var(--ny-white);
}
.ny-about-cta__body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ny-silver);
    margin: 0;
}

/* ============================================================
   FAQ PAGE
   ============================================================ */

.ny-faq-page { padding-top: var(--ny-sp-5); padding-bottom: var(--ny-sp-9); }

.ny-faq-hero {
    background: linear-gradient(180deg, var(--ny-charcoal) 0%, var(--ny-onyx) 100%);
    color: var(--ny-white);
    border-radius: var(--ny-r-xl);
    padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
    position: relative;
    overflow: hidden;
}
.ny-faq-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 300px at 0% 0%, rgba(227,6,19,0.18), transparent 60%),
        radial-gradient(500px 250px at 100% 100%, rgba(227,6,19,0.10), transparent 60%);
    pointer-events: none;
}
.ny-faq-hero__inner {
    position: relative;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.ny-faq-hero__eyebrow {
    display: inline-block;
    color: var(--ny-red);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(227,6,19,0.45);
    padding: 6px 12px;
    border-radius: var(--ny-r-pill);
    margin-bottom: var(--ny-sp-4);
}
.ny-faq-hero__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 var(--ny-sp-3) 0;
    color: var(--ny-white);
}
.ny-faq-hero__subtitle {
    color: var(--ny-silver);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 var(--ny-sp-5) 0;
}

.ny-faq-search {
    position: relative;
    background: var(--ny-surface-dark-1);
    border-radius: var(--ny-r-md);
    padding: 0;
    border: 1px solid var(--ny-border-on-dark);
    transition: border-color var(--ny-dur-fast) var(--ny-ease);
}
.ny-faq-search:focus-within { border-color: var(--ny-red); }
.ny-faq-search__icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ny-steel);
    font-size: 20px;
    pointer-events: none;
}
[dir="ltr"] .ny-faq-search__icon { right: auto; left: 18px; }
.ny-faq-search__input {
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--ny-white);
    padding: 16px 52px;
    font-size: 15px;
    font-family: var(--ny-font);
    outline: none;
}
.ny-faq-search__input::placeholder { color: var(--ny-steel); }
.ny-faq-search__clear {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--ny-steel);
    font-size: 18px;
    cursor: pointer;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ny-r-pill);
    transition: background var(--ny-dur-fast) var(--ny-ease), color var(--ny-dur-fast) var(--ny-ease);
}
[dir="ltr"] .ny-faq-search__clear { left: auto; right: 14px; }
.ny-faq-search__clear:hover { background: var(--ny-surface-dark-2); color: var(--ny-white); }

/* CHIPS (top tab bar — all viewports) */
/* NOTE: legacy main.css sets `overflow-x: hidden !important` on both body
   and .wrapper, which would break `position: sticky` on this nav. So the
   chip bar is placed at the top of the FAQ body section instead of being
   pinned during scroll. */
.ny-faq-chips {
    display: flex;
    overflow-x: auto;
    gap: var(--ny-sp-2);
    margin: var(--ny-sp-5) 0 var(--ny-sp-4) 0;
    padding: var(--ny-sp-3) 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-wrap: wrap;
    justify-content: center;
}
@media (max-width: 767px) {
    .ny-faq-chips { flex-wrap: nowrap; justify-content: flex-start; }
}
.ny-faq-chips::-webkit-scrollbar { display: none; }
.ny-faq-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--ny-fog);
    color: var(--ny-charcoal);
    border-radius: var(--ny-r-pill);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--ny-border-soft);
    transition: background var(--ny-dur-fast) var(--ny-ease),
                color var(--ny-dur-fast) var(--ny-ease),
                border-color var(--ny-dur-fast) var(--ny-ease),
                transform var(--ny-dur-fast) var(--ny-ease);
    text-decoration: none;
    flex-shrink: 0;
    cursor: pointer;
}
.ny-faq-chip:hover:not(.is-active) {
    background: var(--ny-white);
    border-color: var(--ny-border-mid);
    color: var(--ny-charcoal);
    transform: translateY(-1px);
    text-decoration: none;
}
.ny-faq-chip i { font-size: 18px; }
.ny-faq-chip.is-active {
    background: var(--ny-red);
    color: var(--ny-white);
    border-color: var(--ny-red);
}
.ny-faq-chip.is-active:hover { color: var(--ny-white); text-decoration: none; }
.ny-faq-chip:hover { text-decoration: none; }

/* LAYOUT (single column — chips serve as top nav) */
.ny-faq-layout {
    display: block;
    padding-top: var(--ny-sp-4);
}
.ny-faq-sidebar { display: none; }
.ny-faq-sidebar__title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ny-steel);
    margin: 0 0 var(--ny-sp-3) 0;
}
.ny-faq-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ny-faq-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--ny-r-md);
    color: var(--ny-charcoal);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    transition: background var(--ny-dur-fast) var(--ny-ease), color var(--ny-dur-fast) var(--ny-ease);
}
.ny-faq-sidebar__link i { font-size: 18px; color: var(--ny-steel); }
.ny-faq-sidebar__count {
    margin-inline-start: auto;
    background: var(--ny-fog);
    color: var(--ny-steel);
    padding: 2px 8px;
    border-radius: var(--ny-r-pill);
    font-size: 12px;
    font-weight: 600;
}
.ny-faq-sidebar__link:hover {
    background: var(--ny-fog);
    color: var(--ny-charcoal);
    text-decoration: none;
}
.ny-faq-sidebar__link.is-active {
    background: var(--ny-charcoal);
    color: var(--ny-white);
}
.ny-faq-sidebar__link.is-active i { color: var(--ny-red); }
.ny-faq-sidebar__link.is-active .ny-faq-sidebar__count {
    background: var(--ny-red);
    color: var(--ny-white);
}

/* ACCORDION */
.ny-faq-category {
    margin-bottom: var(--ny-sp-8);
    scroll-margin-top: 120px;
}
.ny-faq-category:last-child { margin-bottom: 0; }
.ny-faq-category.is-hidden { display: none !important; }
/* Editorial header: dark badge with red icon on the leading edge,
   eyebrow + big title in the middle, "count" pill on the trailing edge. */
.ny-faq-category__head {
    display: flex;
    align-items: center;
    gap: var(--ny-sp-4);
    margin-bottom: var(--ny-sp-5);
    padding-bottom: var(--ny-sp-4);
    border-bottom: 1px solid var(--ny-border-soft);
    flex-wrap: wrap;
}
.ny-faq-category__badge {
    width: 56px;
    height: 56px;
    border-radius: var(--ny-r-md);
    background: linear-gradient(135deg, var(--ny-charcoal) 0%, var(--ny-onyx) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(15, 15, 16, 0.18);
    position: relative;
}
.ny-faq-category__badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--ny-r-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
}
.ny-faq-category__badge i {
    color: var(--ny-red);
    font-size: 28px;
    line-height: 1;
}
.ny-faq-category__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 200px;
    min-width: 0;
}
.ny-faq-category__eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--ny-red);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ny-faq-category__title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ny-charcoal);
    margin: 0;
}
.ny-faq-category__count {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--ny-r-pill);
    background: var(--ny-fog);
    color: var(--ny-charcoal);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .ny-faq-category__head { gap: var(--ny-sp-3); }
    .ny-faq-category__badge { width: 48px; height: 48px; }
    .ny-faq-category__badge i { font-size: 24px; }
    .ny-faq-category__count { order: 3; margin-top: var(--ny-sp-2); width: 100%; justify-content: center; }
}

.ny-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--ny-sp-3);
}
.ny-faq-item {
    background: var(--ny-surface-1);
    border: 1px solid var(--ny-border-soft);
    border-radius: var(--ny-r-md);
    overflow: hidden;
    transition: border-color var(--ny-dur-fast) var(--ny-ease),
                box-shadow var(--ny-dur) var(--ny-ease-out);
}
.ny-faq-item[open] {
    border-color: var(--ny-border-mid);
    box-shadow: var(--ny-shadow-sm);
}
.ny-faq-item__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ny-sp-3);
    padding: var(--ny-sp-4) var(--ny-sp-5);
    color: var(--ny-charcoal);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    user-select: none;
}
.ny-faq-item__summary::-webkit-details-marker { display: none; }
.ny-faq-item__summary::marker { content: ''; display: none; }
.ny-faq-item__q { flex: 1; }
.ny-faq-item__chev {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--ny-r-pill);
    background: var(--ny-fog);
    color: var(--ny-charcoal);
    font-size: 20px;
    flex-shrink: 0;
    transition: transform var(--ny-dur) var(--ny-ease-out),
                background var(--ny-dur-fast) var(--ny-ease),
                color var(--ny-dur-fast) var(--ny-ease);
}
.ny-faq-item[open] .ny-faq-item__chev {
    transform: rotate(180deg);
    background: var(--ny-red);
    color: var(--ny-white);
}
.ny-faq-item__a {
    padding: 0 var(--ny-sp-5) var(--ny-sp-5);
    color: #3a3a3e;
    font-size: 14px;
    line-height: 1.8;
    border-top: 1px solid var(--ny-border-soft);
    padding-top: var(--ny-sp-4);
    margin-top: 0;
}
.ny-faq-item__a p { margin: 0 0 var(--ny-sp-3) 0; }
.ny-faq-item__a p:last-child { margin-bottom: 0; }
.ny-faq-item__a a { color: var(--ny-red); }

/* EMPTY / NORESULT */
.ny-faq-noresult, .ny-faq-empty {
    text-align: center;
    padding: var(--ny-sp-7) var(--ny-sp-4);
    color: var(--ny-steel);
}
.ny-faq-noresult i, .ny-faq-empty i {
    font-size: 56px;
    color: var(--ny-steel);
    display: block;
    margin-bottom: var(--ny-sp-3);
}

@media (max-width: 767px) {
    .ny-faq-chip { padding: 10px 16px; font-size: 13px; }
}

/* FAQ CTA */
.ny-faq-cta {
    background: var(--ny-charcoal);
    color: var(--ny-white);
    border-radius: var(--ny-r-xl);
    padding: clamp(32px, 5vw, 56px);
    margin-top: var(--ny-sp-6);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--ny-sp-6);
    align-items: center;
}
.ny-faq-cta__title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    margin: 0 0 var(--ny-sp-2) 0;
    color: var(--ny-white);
}
.ny-faq-cta__body {
    font-size: 14px;
    color: var(--ny-silver);
    line-height: 1.7;
    margin: 0;
}
.ny-faq-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--ny-sp-3);
    align-items: stretch;
}
.ny-faq-cta__actions .ny-btn { justify-content: center; }

@media (max-width: 767px) {
    .ny-faq-cta { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ny-btn,
    .ny-faq-item,
    .ny-faq-item__chev,
    .ny-about-value,
    .ny-team-card,
    .ny-faq-sidebar__link {
        transition: none !important;
    }
}

/* ============================================================
   ============================================================
   2026-05-18 PASS 3 — Mobile footer layout
   - Brand logo at top
   - Link columns in 2-col grid (col-6 on xs)
   - Trust badges (enamad / samandehi) above payments band
   ============================================================
   ============================================================ */
@media (max-width: 767px) {
    /* Footer brand logo at the very top of the mobile footer */
    body .main-footer .footer-logo-area--mobile {
        display: flex !important;
        justify-content: center;
        align-items: center;
        float: none !important;
        margin: 0 auto var(--ny-sp-4) auto !important;
        padding: var(--ny-sp-3) 0 !important;
        text-align: center;
    }

    body .main-footer .footer-logo-area--mobile img {
        max-height: 56px;
        width: auto;
        display: inline-block;
    }

    /* Make sure the column gutters are tight on mobile so the 2-col
       layout has room to breathe without horizontal scroll. */
    body .main-footer .footer-widgets__row {
        margin-left: -8px !important;
        margin-right: -8px !important;
        row-gap: var(--ny-sp-4);
    }

    body .main-footer .footer-widgets__col {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body .main-footer .footer-widgets__col .widget-menu.card {
        padding: var(--ny-sp-3) !important;
        height: 100%;
    }

    body .main-footer .footer-widgets__col .card-title {
        font-size: 13px !important;
        margin-bottom: var(--ny-sp-2) !important;
    }

    body .main-footer .footer-widgets__col .footer-menu li {
        margin-bottom: 4px;
    }

    body .main-footer .footer-widgets__col .footer-menu a {
        font-size: 12px !important;
        line-height: 1.6;
    }

    /* Mobile trust-badge band — sits ABOVE .ny-footer-payments */
    body .main-footer .footer-trust-badges--mobile {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--ny-sp-3);
        flex-wrap: wrap;
        padding: var(--ny-sp-4) var(--ny-sp-3);
        margin: 0;
        background: transparent;
    }

    body .main-footer .footer-trust-badges--mobile .symbol {
        margin: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body .main-footer .footer-trust-badges--mobile .symbol img,
    body .main-footer .footer-trust-badges--mobile .symbol svg {
        max-height: 88px;
        width: auto;
        display: block;
    }
}

/* Very small phones — keep the 4 cards readable */
@media (max-width: 380px) {
    body .main-footer .footer-widgets__col .widget-menu.card {
        padding: 10px !important;
    }

    body .main-footer .footer-widgets__col .card-title {
        font-size: 12px !important;
    }

    body .main-footer .footer-widgets__col .footer-menu a {
        font-size: 11px !important;
    }
}

/* Mobile-only: business hours full-width block below the 2-col link grid */
@media (max-width: 767px) {
    body .main-footer .footer-widgets__col--hours {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-top: var(--ny-sp-3);
    }

    body .main-footer .ny-footer-hours--mobile {
        list-style: none;
        padding: var(--ny-sp-3);
        margin: 0;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--ny-r-md);
    }

    body .main-footer .ny-footer-hours--mobile li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ny-sp-2);
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 12px;
    }

    body .main-footer .ny-footer-hours--mobile li:last-child {
        border-bottom: 0;
    }

    body .main-footer .ny-footer-hours--mobile .ny-footer-hours__day {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--ny-silver);
    }

    body .main-footer .ny-footer-hours--mobile .ny-footer-hours__day i {
        color: var(--ny-red);
        font-size: 14px;
    }

    body .main-footer .ny-footer-hours--mobile .ny-footer-hours__time {
        color: var(--ny-white);
        font-weight: 600;
        white-space: nowrap;
    }
}

/* Ghost-large button — force white background */
html body a.ny-btn.ny-btn--ghost.ny-btn--lg,
html body a.ny-btn.ny-btn--ghost.ny-btn--lg:link,
html body a.ny-btn.ny-btn--ghost.ny-btn--lg:visited {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

html body a.ny-btn.ny-btn--ghost.ny-btn--lg:hover,
html body a.ny-btn.ny-btn--ghost.ny-btn--lg:focus {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Desktop-only top padding for hero section (above mobile/tablet breakpoint). */
@media (min-width: 992px) {
    .ny-widget-band--hero .ny-hero,
    .ny-hero {
        padding-top: 80px !important;
    }
}