/* ============================================================================
   Multimaart — v21 Premium Storefront Layer (2026-07-11)
   Loaded LAST. Refines typography, sections, cards, buttons, nav/mega-menu
   and mobile polish for a premium marketplace feel. Design-only: it only
   overrides styles, never changes markup or JS.
   ============================================================================ */

/* v21.12: the login/auth modal used z-50, which sat BELOW the premium header
   (z-300) and mega menu (z-500), so it appeared to "overlap"/render behind the
   nav. Lift it above everything (mobile drawer is z-1000). */
/* v21.75: Tawk.to widget uses ~max z-index; keep Sign In above it (same tier as logout confirm). */
#my-modal { z-index: 2147483600 !important; }

/* v21.75 / v21.76: cart drawer — full-viewport white panel, above header hairlines */
#sideNavbar {
    border: 0 !important;
    border-top: 0 !important;
    outline: 0 !important;
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18) !important;
    background: #fff !important;
}
#sideNavbar.active {
    z-index: 2147483000 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
}
#sidebarOverlay {
    z-index: 2147482990 !important;
}

/* v21.76: while cart is open, kill the header/category hairlines that cut across
   the top of the drawer on mobile (absolute border div + cats border + header border-top). */
html.mm-cart-open .mm-mobile-cats,
html.mm-cart-open header.header,
html.mm-cart-open .mm-site-header {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
html.mm-cart-open header.header + div,
html.mm-cart-open div.w-full.mt-16.absolute {
    display: none !important;
    border: 0 !important;
}

/* v21.76: on phones the collapsed bottom header still paints a 1px border-top —
   hide that hairline always on mobile (nav is already collapsed). */
@media (max-width: 1023px) {
    header.header {
        border-top: 0 !important;
        box-shadow: none !important;
        min-height: 0 !important;
    }
    /* empty absolute underline left of header-bottom */
    div.w-full.mt-16.absolute {
        display: none !important;
    }
}

:root {
    /* v21.3: ONE premium font across the whole site */
    --mm-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mm-font-head: var(--mm-font);
    --mm-font-body: var(--mm-font);
    --global-font: var(--mm-font);

    --mm-ink: #0f172a;
    --mm-ink-soft: #475569;
    --mm-ink-mute: #94a3b8;
    --mm-line: #eef1f6;
    --mm-surface: #ffffff;
    --mm-bg: #f6f8fb;

    --mm-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
    --mm-shadow-md: 0 8px 24px -12px rgba(15,23,42,.20);
    --mm-shadow-lg: 0 24px 48px -24px rgba(15,23,42,.30);
    --mm-radius: 16px;
    --mm-radius-lg: 22px;
    --mm-ease: cubic-bezier(.22,.61,.36,1);
}

/* ===========================================================================
   v21.3 GLOBAL SINGLE FONT — applied everywhere, icon-safe.
   We target text elements + the theme's font utility classes but never touch
   icon elements (<i>, .fa*, .feather, [class*="icon"], ionicons, material,
   themify) so glyph fonts keep working.
   =========================================================================== */
html body,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body p, html body a, html body li, html body ul, html body ol,
html body button, html body input, html body select, html body textarea,
html body label, html body small, html body strong, html body b, html body em,
html body th, html body td, html body caption, html body blockquote, html body figcaption,
html body .dm-sans, html body .dm-regular, html body .roboto-regular,
html body [class*="dm-sans"], html body [class*="dm-regular"], html body [class*="roboto"],
html body [class*="jost"], html body [class*="poppins"], html body [class*="nunito"] {
    font-family: var(--mm-font) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- Typography */
body,
.site-body,
input, select, textarea, button {
    font-family: var(--mm-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body { color: var(--mm-ink); letter-spacing: -0.002em; }

h1, h2, h3, h4, h5, h6,
.mm-section-title,
.mm-cat2-name, .mm-prod-name, .mm-brand-card,
.mm-occasion-card, .mm-style-card, .mm-deal-card,
.mm-trending-card, .mm-why-label, .mm-trust-label,
.mm-hero2-title, .btn, .mm-btn {
    font-family: var(--mm-font-head);
    letter-spacing: -0.01em;
}

/* Section headers — tighter, more editorial */
.mm-section-title {
    font-family: var(--mm-font-head) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--mm-ink) !important;
    line-height: 1.1 !important;
}

/* Blue uppercase eyebrow label above titles (e.g. BROWSE / TRUSTED SELLERS) */
.mm-eyebrow, .mm-kicker, .mm-sec-eyebrow, .mm-section-eyebrow, .mm-badge-label {
    font-family: var(--mm-font-head);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mm-primary, #3BAFE2);
}

/* --------------------------------------------------------------- Card polish */
.mm-prod-card,
.mm-trending-card,
.mm-occasion-card,
.mm-style-card,
.mm-brand-card,
.mm-deal-card,
.mm-engage-card,
.mm-why-item,
.mm-trust-item,
.mm-cat2 {
    border-radius: var(--mm-radius);
    transition: transform .35s var(--mm-ease), box-shadow .35s var(--mm-ease),
                border-color .35s var(--mm-ease);
    will-change: transform;
}

.mm-prod-card,
.mm-trending-card,
.mm-occasion-card,
.mm-style-card,
.mm-brand-card,
.mm-engage-card,
.mm-why-item,
.mm-trust-item {
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    box-shadow: var(--mm-shadow-sm);
}

.mm-prod-card:hover,
.mm-trending-card:hover,
.mm-occasion-card:hover,
.mm-style-card:hover,
.mm-engage-card:hover,
.mm-why-item:hover,
.mm-trust-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--mm-shadow-lg);
    border-color: rgba(59, 175, 226, .45);
    border-color: color-mix(in srgb, var(--mm-primary, #3BAFE2) 35%, transparent);
}

.mm-brand-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mm-shadow-md);
    border-color: rgba(59, 175, 226, .55);
    border-color: color-mix(in srgb, var(--mm-primary, #3BAFE2) 45%, transparent);
}

/* Product imagery — smoother zoom on hover */
.mm-prod-img img,
.mm-trending-img img,
.mm-cat2-img img {
    transition: transform .6s var(--mm-ease);
}
.mm-prod-card:hover .mm-prod-img img,
.mm-trending-card:hover .mm-trending-img img,
.mm-cat2:hover .mm-cat2-img img {
    transform: scale(1.06);
}

/* Product name + price refinement */
.mm-prod-name {
    font-weight: 700;
    color: var(--mm-ink);
    letter-spacing: -0.01em;
}
.mm-price-current, .mm-prod-price {
    font-family: var(--mm-font-head);
    font-weight: 800;
    color: var(--mm-ink);
}
.mm-price-old { color: var(--mm-ink-mute); }

/* Category tiles */
.mm-cat2-name { font-weight: 700; color: var(--mm-ink); }
.mm-cat2-ring { box-shadow: var(--mm-shadow-md); }

/* Brand chips */
.mm-brand-card {
    font-weight: 700;
    color: var(--mm-primary, #3BAFE2);
    border-radius: 14px;
}

/* -------------------------------------------------------------- Buttons/CTAs */
.mm-scroll-btn,
.mm-cats2-all,
.mm-deal-card-btn,
.mm-hsl-nav {
    font-family: var(--mm-font-head);
    font-weight: 700;
    border-radius: 999px;
    transition: transform .25s var(--mm-ease), box-shadow .25s var(--mm-ease),
                background .25s var(--mm-ease);
}
.mm-scroll-btn:hover,
.mm-hsl-nav:hover {
    transform: translateY(-2px);
    box-shadow: var(--mm-shadow-md);
}

/* Pill "View All" buttons keep a soft outlined look */
.mm-cats2-all {
    border: 1px solid var(--mm-line);
    box-shadow: var(--mm-shadow-sm);
}
.mm-cats2-all:hover {
    border-color: var(--mm-primary, #3BAFE2);
    box-shadow: var(--mm-shadow-md);
    transform: translateY(-2px);
}

/* --------------------------------------------------- Header / nav / mega menu */
.mm-navbar, .site-header, header .mm-nav {
    font-family: var(--mm-font-head);
}
.mm-nav-link, .site-nav a, .header-bottom a {
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Mega menu / category flyout — softer, premium panel */
.mm-mega, .mega-menu, .web-categories, .header-categories-dropdown,
.category-dropdown-menu {
    border-radius: var(--mm-radius-lg) !important;
    box-shadow: var(--mm-shadow-lg) !important;
    border: 1px solid var(--mm-line) !important;
    overflow: hidden;
}
.mm-mega a:hover, .mega-menu a:hover,
.web-categories a:hover, .category-dropdown-menu a:hover {
    color: var(--mm-primary, #3BAFE2);
}

/* ------------------------------------------------------------------ Sections */
.mm-why-number { font-family: var(--mm-font-head); font-weight: 800; }
.mm-trust-label, .mm-why-label { font-weight: 800; letter-spacing: -0.01em; }
.mm-trust-sub { color: var(--mm-ink-soft); }

/* Deal cards keep bold headline typography */
.mm-deal-card-badge {
    font-family: var(--mm-font-head);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mm-deal-card-price { font-family: var(--mm-font-head); font-weight: 800; }

/* Newsletter block */
.mm-newsletter, .newsletter-section {
    border-radius: var(--mm-radius-lg);
}

/* Scroll-reveal is handled by mm-theme.css + mm-ux.js (.mm-in). Not touched
   here so sections never risk staying hidden. */

/* --------------------------------------------------------------- Responsive  */
@media (max-width: 1024px) {
    .mm-section-title { letter-spacing: -0.015em !important; }
}

@media (max-width: 768px) {
    .mm-section-title { font-size: 21px !important; line-height: 1.15 !important; }
    .mm-prod-card:hover,
    .mm-trending-card:hover,
    .mm-occasion-card:hover,
    .mm-style-card:hover { transform: translateY(-3px); }
    /* Comfortable tap targets */
    .mm-scroll-btn, .mm-hsl-nav, .mm-cats2-all { min-height: 40px; }
}

@media (max-width: 480px) {
    body { letter-spacing: 0; }
    .mm-section-title { font-size: 19px !important; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .mm-prod-card, .mm-trending-card, .mm-occasion-card, .mm-style-card,
    .mm-brand-card, .mm-engage-card, .mm-why-item, .mm-trust-item, .mm-cat2,
    .mm-prod-img img, .mm-trending-img img, .mm-cat2-img img,
    [data-reveal] {
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================================
   v21 HOME REBUILD — sections matching the reference design
   (hero, trust strip, category tiles, occasions, brand chips, promise grid,
   top vendors, blog, newsletter). New class prefixes so nothing in the older
   home-custom.css conflicts.
   ============================================================================ */
:root { --mm-blue: #2563eb; --mm-blue-dark: #1d4ed8; }

.mm-block { max-width: 1320px; margin: 0 auto; padding: 46px 16px 0; }
.mm-block:last-child { padding-bottom: 8px; }

/* Section header with eyebrow + view-all */
.mm-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.mm-sec-head .mm-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.mm-sec-head .mm-section-title { margin: 0 !important; font-size: 28px !important; }
.mm-eyebrow { font-family: var(--mm-font-head); font-weight: 700; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mm-blue); }
.mm-eyebrow::before { content: "\2022"; margin-right: 7px; color: var(--mm-blue); }
.mm-view-all { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mm-font-head); font-weight: 700; font-size: 13.5px; color: var(--mm-ink); background: #fff; border: 1px solid var(--mm-line); box-shadow: var(--mm-shadow-sm); padding: 9px 18px; border-radius: 999px; text-decoration: none; transition: all .25s var(--mm-ease); white-space: nowrap; }
.mm-view-all:hover { color: var(--mm-blue); border-color: var(--mm-blue); transform: translateY(-2px); box-shadow: var(--mm-shadow-md); }

/* --------------------------------------------- PDP similar products carousel */
.mm-similar-scroll {
    display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    padding: 2px 2px 12px; scrollbar-width: thin;
}
.mm-similar-scroll::-webkit-scrollbar { height: 7px; }
.mm-similar-scroll::-webkit-scrollbar-thumb { background: #d5dbe6; border-radius: 999px; }
.mm-similar-scroll::-webkit-scrollbar-track { background: transparent; }
.mm-similar-card {
    flex: 0 0 auto; width: 190px; scroll-snap-align: start; text-decoration: none;
}
@media (max-width: 640px) { .mm-similar-card { width: 150px; } }
/* v21.12: similar-products carousel items now host the full home product card */
.mm-similar-item { flex: 0 0 auto; width: 246px; scroll-snap-align: start; }
.mm-similar-item .mm-prod-card { height: 100%; }
@media (max-width: 640px) { .mm-similar-item { width: 200px; } }

/* ------------------------------------------------------------------- Hero (image-only Independence banners) */
.mm-hero3 { max-width: 1320px; margin: 14px auto 0; padding: 0 16px; }
.mm-hero3-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 1024 / 426;
    min-height: 0;
    height: auto;
    background: #f1f5f9;
    box-shadow: 0 30px 60px -34px rgba(15,23,42,.35);
}
.mm-hero3-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s var(--mm-ease); }
.mm-hero3-slide.active { opacity: 1; visibility: visible; }
.mm-hero3-link { position: absolute; inset: 0; display: block; z-index: 1; }
.mm-hero3-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.mm-hero3-shade,
.mm-hero3-body,
.mm-hero3-actions { display: none !important; }
.mm-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--mm-blue), var(--mm-blue-dark)); color: #fff; font-family: var(--mm-font-head); font-weight: 700; font-size: 14.5px; padding: 13px 26px; border-radius: 999px; text-decoration: none; box-shadow: 0 14px 26px -12px rgba(37,99,235,.75); transition: transform .25s var(--mm-ease), box-shadow .25s var(--mm-ease); }
.mm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(37,99,235,.85); color: #fff; }
.mm-btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.55); color: #fff; font-family: var(--mm-font-head); font-weight: 700; font-size: 14.5px; padding: 12px 24px; border-radius: 999px; text-decoration: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .25s var(--mm-ease); }
.mm-btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; }
.mm-hero3-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: #0f172a; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--mm-shadow-md); transition: background .2s; }
.mm-hero3-nav:hover { background: #fff; }
.mm-hero3-prev { left: 16px; } .mm-hero3-next { right: 16px; }
.mm-hero3-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.mm-hero3-dot { width: 9px; height: 9px; border-radius: 999px; border: 0; background: rgba(255,255,255,.55); cursor: pointer; transition: all .3s var(--mm-ease); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mm-hero3-dot.active { width: 26px; background: #fff; }

/* Trust strip — sits BELOW the hero (no overlap) */
.mm-trust3 { max-width: 1240px; margin: 28px auto 0; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 24px; }
.mm-trust3-item { background: #fff; border: 1px solid var(--mm-line); border-radius: 16px; padding: 16px 18px; display: flex; align-items: center; gap: 13px; box-shadow: var(--mm-shadow-md); }
.mm-trust3-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #eff4ff; color: var(--mm-blue); display: flex; align-items: center; justify-content: center; }
.mm-trust3-icon svg { width: 22px; height: 22px; }
.mm-trust3-item strong { display: block; font-family: var(--mm-font-head); font-weight: 700; font-size: 14px; color: var(--mm-ink); }
.mm-trust3-item small { color: var(--mm-ink-soft); font-size: 12.5px; }

/* ------------------------------------------------------ Shop by Category */
.mm-catg-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.mm-catg { display: flex; flex-direction: column; text-decoration: none; }
.mm-catg-img { aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--g, #eef2ff); box-shadow: var(--mm-shadow-sm); border: 1px solid var(--mm-line); }
.mm-catg-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--mm-ease); }
.mm-catg:hover .mm-catg-img { box-shadow: var(--mm-shadow-lg); }
.mm-catg:hover .mm-catg-img img { transform: scale(1.07); }
.mm-catg-name { font-family: var(--mm-font-head); font-weight: 700; font-size: 14.5px; color: var(--mm-ink); margin-top: 12px; }
.mm-catg-count { font-size: 12.5px; color: var(--mm-ink-mute); margin-top: 2px; }

/* ---- v21.11 premium Shop by Category tiles ---- */
.mm-cat2-scroll { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 2px 14px; }
.mm-cat2-scroll::-webkit-scrollbar { display: none; }
.mm-cat2 { flex: 0 0 176px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; }
.mm-cat2-media {
    width: 176px; height: 176px; border-radius: 22px; overflow: hidden;
    background: var(--g, #eef2ff);
    border: 1px solid var(--mm-line, #eef1f6);
    box-shadow: 0 12px 30px -18px rgba(15,23,42,.4);
    position: relative;
    transition: transform .35s var(--mm-ease, ease), box-shadow .35s var(--mm-ease, ease), border-color .35s var(--mm-ease, ease);
}
.mm-cat2-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); pointer-events: none; }
.mm-cat2-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--mm-ease, ease); }
.mm-cat2:hover .mm-cat2-media { transform: translateY(-6px); box-shadow: 0 22px 44px -18px rgba(15,23,42,.45); border-color: #bfdbfe; }
.mm-cat2:hover .mm-cat2-media img { transform: scale(1.09); }
.mm-cat2-name { font-family: var(--mm-font-head); font-weight: 800; font-size: 15px; color: var(--mm-ink, #0f172a); margin-top: 14px; line-height: 1.25; }
.mm-cat2-count { font-size: 12.5px; color: var(--mm-ink-mute, #94a3b8); margin-top: 3px; }
@media (max-width: 640px) {
    .mm-cat2 { flex: 0 0 138px; }
    .mm-cat2-media { width: 138px; height: 138px; border-radius: 18px; }
    .mm-cat2-name { font-size: 13.5px; margin-top: 10px; }
}

/* ---- v21.12 Shop by Category — image-forward grid layout ---- */
.mm-cat3-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.mm-cat3 { display: flex; flex-direction: column; text-decoration: none; }
.mm-cat3-media {
    position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
    background: var(--g, #eef2ff);
    border: 1px solid var(--mm-line, #eef1f6);
    box-shadow: 0 14px 34px -22px rgba(15,23,42,.42);
    transition: transform .35s var(--mm-ease, ease), box-shadow .35s var(--mm-ease, ease), border-color .35s var(--mm-ease, ease);
}
.mm-cat3-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--mm-ease, ease); }
.mm-cat3-count {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    background: rgba(255,255,255,.92); color: #0f172a; font-family: var(--mm-font-head);
    font-weight: 700; font-size: 11px; padding: 4px 9px; border-radius: 999px;
    box-shadow: 0 6px 16px -8px rgba(15,23,42,.5); backdrop-filter: blur(2px);
}
.mm-cat3:hover .mm-cat3-media { transform: translateY(-6px); box-shadow: 0 24px 46px -20px rgba(15,23,42,.5); border-color: #bfdbfe; }
.mm-cat3:hover .mm-cat3-media img { transform: scale(1.08); }
.mm-cat3-name { font-family: var(--mm-font-head); font-weight: 800; font-size: 14.5px; color: var(--mm-ink, #0f172a); margin-top: 12px; text-align: center; line-height: 1.25; }
@media (max-width: 1024px) { .mm-cat3-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (max-width: 700px) { .mm-cat3-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } .mm-cat3-name { font-size: 13px; margin-top: 9px; } }
@media (max-width: 460px) { .mm-cat3-grid { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------- Explore Your Style Needs */
.mm-needs { display: grid; gap: 16px; }
.mm-needs-hero {
    display: block; position: relative; overflow: hidden; text-decoration: none;
    min-height: 230px; border-radius: 20px;
    background-size: cover; background-position: center right; background-repeat: no-repeat;
    box-shadow: var(--mm-shadow-md, 0 12px 34px -22px rgba(15,23,42,.4));
    transition: transform .3s var(--mm-ease, ease), box-shadow .3s var(--mm-ease, ease);
}
.mm-needs-hero:hover { transform: translateY(-3px); box-shadow: var(--mm-shadow-lg, 0 24px 48px -22px rgba(15,23,42,.45)); }
.mm-needs-hero-body { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); max-width: 46%; display: flex; flex-direction: column; gap: 8px; }
.mm-needs-hero-t { font-family: var(--mm-font-head); font-weight: 800; font-size: 30px; line-height: 1.1; color: #0f172a; }
.mm-needs-hero-s { font-size: 15px; color: #334155; }
.mm-needs-hero-link { align-self: flex-start; margin-top: 6px; font-family: var(--mm-font-head); font-weight: 700; font-size: 13.5px; color: #fff; background: var(--mm-blue, #2196C8); padding: 9px 18px; border-radius: 999px; box-shadow: 0 12px 24px -12px rgba(33,150,200,.7); transition: transform .2s var(--mm-ease, ease); }
.mm-needs-hero:hover .mm-needs-hero-link { transform: translateX(3px); }
.mm-needs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mm-needs-card {
    position: relative; overflow: hidden; text-decoration: none;
    min-height: 200px; border-radius: 18px;
    display: flex; align-items: flex-end;
    background-size: cover; background-position: center top; background-repeat: no-repeat;
    box-shadow: var(--mm-shadow-sm, 0 8px 22px -16px rgba(15,23,42,.4));
    transition: transform .3s var(--mm-ease, ease), box-shadow .3s var(--mm-ease, ease);
}
.mm-needs-card:hover { transform: translateY(-5px); box-shadow: var(--mm-shadow-lg, 0 24px 48px -22px rgba(15,23,42,.45)); }
.mm-needs-card-body { position: relative; z-index: 2; padding: 16px 18px; width: 100%; display: flex; flex-direction: column; gap: 2px; }
.mm-needs-card-t { font-family: var(--mm-font-head); font-weight: 800; font-size: 17px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.mm-needs-card-s { font-size: 12.5px; color: rgba(255,255,255,.9); text-shadow: 0 1px 8px rgba(0,0,0,.45); }
@media (max-width: 900px) {
    .mm-needs-hero-body { max-width: 60%; left: 22px; }
    .mm-needs-hero-t { font-size: 24px; }
    .mm-needs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .mm-needs-hero { min-height: 190px; }
    .mm-needs-hero-body { max-width: 78%; }
    .mm-needs-hero-t { font-size: 21px; }
    .mm-needs-card { min-height: 160px; }
}

/* ------------------------------------------------------ Shop by Occasion */
.mm-occ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mm-occ { background: #fff; border: 1px solid var(--mm-line); border-radius: 18px; padding: 26px 22px; text-decoration: none; box-shadow: var(--mm-shadow-sm); transition: transform .3s var(--mm-ease), box-shadow .3s var(--mm-ease); display: flex; flex-direction: column; }
.mm-occ:hover { transform: translateY(-6px); box-shadow: var(--mm-shadow-lg); }
.mm-occ-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: var(--mm-shadow-md); }
.mm-occ-icon svg { width: 26px; height: 26px; }
.mm-occ-t { font-family: var(--mm-font-head); font-weight: 800; font-size: 16px; color: var(--mm-ink); }
.mm-occ-s { font-size: 13px; color: var(--mm-ink-soft); margin: 4px 0 14px; }
.mm-occ-link { margin-top: auto; font-family: var(--mm-font-head); font-weight: 700; font-size: 13px; color: var(--mm-blue); }

/* v21.9: image-backed "Shop by Occasion" cards */
.mm-occ-grid-img { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mm-occ-img {
    position: relative; overflow: hidden; border: 0 !important; padding: 0 !important;
    min-height: 340px; border-radius: 18px;
    display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important;
    background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important;
    box-shadow: var(--mm-shadow-md);
}
.mm-occ-img .mm-occ-body { margin-top: auto; }
.mm-occ-img::after { content: none; }
.mm-occ-img .mm-occ-body { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 20px 20px 22px; width: 100%; }
.mm-occ-img .mm-occ-t { color: #fff; font-size: 18px; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.mm-occ-img .mm-occ-s { color: rgba(255,255,255,.9); margin: 4px 0 12px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.mm-occ-img .mm-occ-link {
    align-self: flex-start; color: #0f172a; background: #fff; padding: 8px 15px; border-radius: 999px;
    font-size: 12.5px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); transition: transform .2s var(--mm-ease), gap .2s;
}
.mm-occ-img:hover { transform: translateY(-6px); box-shadow: var(--mm-shadow-lg); }
.mm-occ-img:hover .mm-occ-link { transform: translateX(2px); }
@media (max-width: 900px) { .mm-occ-img { min-height: 300px; } }
@media (max-width: 640px) { .mm-occ-grid-img { grid-template-columns: repeat(2, 1fr); gap: 12px; } .mm-occ-img { min-height: 250px; } }

/* ------------------------------------------------------------ CTA banners */
.mm-cta2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mm-cta2 { position: relative; min-height: 168px; border-radius: 20px; overflow: hidden; padding: 30px 32px; color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: center; background-size: cover; background-position: center; box-shadow: var(--mm-shadow-md); transition: transform .3s var(--mm-ease), box-shadow .3s var(--mm-ease); }
.mm-cta2:hover { transform: translateY(-4px); box-shadow: var(--mm-shadow-lg); color: #fff; }
.mm-cta2-tag { display: inline-block; width: max-content; background: rgba(255,255,255,.9); color: #0f172a; font-family: var(--mm-font-head); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin-bottom: 12px; }
.mm-cta2 h3 { font-family: var(--mm-font-head); font-weight: 800; font-size: 24px; line-height: 1.15; margin: 0 0 14px; max-width: 300px; }
.mm-cta2-link { font-family: var(--mm-font-head); font-weight: 700; font-size: 14px; }

/* --------------------------------------------------------- Popular Brands */
.mm-brandchip-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.mm-brandchip { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 62px; padding: 12px 14px; background: #fff; border: 1px solid var(--mm-line); border-radius: 14px; font-family: var(--mm-font-head); font-weight: 700; font-size: 14px; color: var(--mm-blue); text-decoration: none; box-shadow: var(--mm-shadow-sm); transition: transform .25s var(--mm-ease), box-shadow .25s var(--mm-ease), border-color .25s var(--mm-ease); }
.mm-brandchip:hover { transform: translateY(-3px); border-color: var(--mm-blue); box-shadow: var(--mm-shadow-md); color: var(--mm-blue-dark); }

/* ------------------------------------------------------- Why Shop / promise */
.mm-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mm-promise { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--mm-line); border-radius: 16px; padding: 22px; box-shadow: var(--mm-shadow-sm); transition: transform .3s var(--mm-ease), box-shadow .3s var(--mm-ease); }
.mm-promise:hover { transform: translateY(-4px); box-shadow: var(--mm-shadow-md); }
.mm-promise-icon { flex: none; width: 46px; height: 46px; border-radius: 12px; background: #eff4ff; color: var(--mm-blue); display: flex; align-items: center; justify-content: center; }
.mm-promise-icon svg { width: 24px; height: 24px; }
.mm-promise strong { display: block; font-family: var(--mm-font-head); font-weight: 800; font-size: 15.5px; color: var(--mm-ink); margin-bottom: 4px; }
.mm-promise p { margin: 0; font-size: 13px; color: var(--mm-ink-soft); line-height: 1.5; }

/* -------------------------------------------------------------- Top Vendors */
.mm-vendor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mm-vendor { position: relative; background: #fff; border: 1px solid var(--mm-line); border-radius: 18px; overflow: hidden; text-decoration: none; padding: 0 18px 22px; display: flex; flex-direction: column; align-items: center; box-shadow: var(--mm-shadow-sm); transition: transform .3s var(--mm-ease), box-shadow .3s var(--mm-ease); }
.mm-vendor:hover { transform: translateY(-6px); box-shadow: var(--mm-shadow-lg); }
.mm-vendor-cover { position: absolute; top: 0; left: 0; right: 0; height: 70px; background: linear-gradient(135deg, var(--mm-blue), var(--mm-blue-dark)); }
.mm-vendor-avatar { position: relative; z-index: 2; margin-top: 34px; width: 66px; height: 66px; border-radius: 18px; background: #fff; color: var(--mm-blue); display: flex; align-items: center; justify-content: center; font-family: var(--mm-font-head); font-weight: 800; font-size: 26px; box-shadow: var(--mm-shadow-md); }
.mm-vendor-name { font-family: var(--mm-font-head); font-weight: 800; font-size: 15.5px; color: var(--mm-ink); margin-top: 14px; text-align: center; }
.mm-vendor-meta { font-size: 12.5px; color: var(--mm-ink-mute); margin-top: 3px; }
.mm-vendor-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; background: #ecfdf5; color: #16a34a; font-family: var(--mm-font-head); font-weight: 700; font-size: 11.5px; padding: 5px 11px; border-radius: 999px; }

/* --------------------------------------------------------------- From Blog */
.mm-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mm-blog { background: #fff; border: 1px solid var(--mm-line); border-radius: 18px; overflow: hidden; text-decoration: none; box-shadow: var(--mm-shadow-sm); transition: transform .3s var(--mm-ease), box-shadow .3s var(--mm-ease); display: flex; flex-direction: column; }
.mm-blog:hover { transform: translateY(-6px); box-shadow: var(--mm-shadow-lg); }
.mm-blog-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f7; }
.mm-blog-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--mm-ease); }
.mm-blog:hover .mm-blog-img img { transform: scale(1.03); }
.mm-blog-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.mm-blog-tag { align-self: flex-start; background: #eff4ff; color: var(--mm-blue); font-family: var(--mm-font-head); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.mm-blog-title { font-family: var(--mm-font-head); font-weight: 700; font-size: 16px; color: var(--mm-ink); line-height: 1.3; }

/* -------------------------------------------------------------- Newsletter */
.mm-news { background: linear-gradient(135deg, var(--mm-blue), var(--mm-blue-dark)); border-radius: 24px; padding: 46px 24px; text-align: center; color: #fff; box-shadow: 0 26px 50px -26px rgba(37,99,235,.7); }
.mm-news-title { font-family: var(--mm-font-head); font-weight: 800; font-size: 30px; letter-spacing: -.02em; margin: 10px 0 8px; color: #fff; }
.mm-news-sub { font-size: 15px; color: rgba(255,255,255,.9); max-width: 560px; margin: 0 auto 24px; }
.mm-news-form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto; }
.mm-news-form input { flex: 1; border: 0; border-radius: 999px; padding: 14px 20px; font-size: 14.5px; font-family: var(--mm-font-body); color: var(--mm-ink); outline: none; }
.mm-news-form button { border: 0; border-radius: 999px; padding: 14px 26px; background: #0f172a; color: #fff; font-family: var(--mm-font-head); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: transform .2s var(--mm-ease); }
.mm-news-form button:hover { transform: translateY(-2px); }

/* Product card badges container (used by home-custom-card partial)
   v21.69: left stack for NEW/BESTSELLER only — sale % is separate on the right */
.mm-prod-badges,
.mm-prod-badges-left { position: absolute; top: 10px; left: 10px; right: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 2; }
.mm-badge-best { background: #f59e0b !important; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
    .mm-hero3-title { font-size: 36px; }
    .mm-catg-grid { grid-template-columns: repeat(3, 1fr); }
    .mm-brandchip-grid { grid-template-columns: repeat(4, 1fr); }
    .mm-occ-grid, .mm-vendor-grid { grid-template-columns: repeat(2, 1fr); }
    .mm-promise-grid, .mm-blog-grid { grid-template-columns: repeat(2, 1fr); }
    .mm-trust3 { grid-template-columns: repeat(2, 1fr); }
    .mm-sec-head .mm-section-title { font-size: 24px !important; }
}
@media (max-width: 640px) {
    .mm-block { padding: 34px 14px 0; }
    .mm-hero3-frame { min-height: 0; }
    .mm-hero3-slide { position: absolute; }
    .mm-hero3-slide.active { position: absolute; }
    .mm-hero3-shade,
    .mm-hero3-body { display: none !important; }
    .mm-hero3-dots { left: 50%; transform: translateX(-50%); }
    .mm-hero3-nav { display: none; }
    .mm-trust3 { grid-template-columns: 1fr 1fr; margin-top: 18px; gap: 12px; padding: 0 14px; }
    .mm-catg-grid { grid-template-columns: repeat(2, 1fr); }
    .mm-occ-grid, .mm-promise-grid, .mm-blog-grid, .mm-cta2-grid, .mm-vendor-grid { grid-template-columns: 1fr; }
    .mm-brandchip-grid { grid-template-columns: repeat(2, 1fr); }
    .mm-sec-head { align-items: center; }
    .mm-sec-head .mm-section-title { font-size: 21px !important; }
    .mm-news-form { flex-direction: column; }
    .mm-news-title { font-size: 24px; }
}

/* ===========================================================================
   v21.3 POLISH PASS — spacing/structure, hero alignment, image fill,
   category scroller, footer alignment, darker nav + colored icons, mobile.
   =========================================================================== */

/* ---- Section headers: left aligned, left underline, consistent spacing ---- */
.mm-block .mm-section-title,
.mm-sec-head .mm-section-title { text-align: left !important; margin: 0 !important; }
.mm-block .mm-section-title::after,
.mm-sec-head .mm-section-title::after { margin: 10px 0 0 !important; }
.mm-block { padding-top: 52px !important; }
.mm-hero3 + .mm-block { padding-top: 44px !important; } /* trust strip now sits below hero, no overlap */

/* ---- Hero: nav arrows on the image (no text overlay) ---- */
.mm-hero3-prev { left: auto !important; right: 70px !important; }
.mm-hero3-next { right: 16px !important; }
.mm-hero3-body { display: none !important; }
@media (min-width: 641px) {
    .mm-hero3-frame { min-height: 0; aspect-ratio: 1024 / 426; }
    .mm-hero3-slide.active { display: block; }
}

/* ---- Images always fill their frame ---- */
.mm-prod-img img, .mm-catg-img img,
.mm-vendor img, .mm-cta2 { background-repeat: no-repeat; }
.mm-prod-img img, .mm-catg-img img { object-fit: cover !important; width: 100% !important; height: 100% !important; }
/* v21.28: blog cards show the FULL image (contain) — no crop/zoom */
.mm-blog-img img { object-fit: contain !important; width: 100% !important; height: 100% !important; }
.mm-prod-img { height: auto !important; aspect-ratio: 3 / 4 !important; background: #f1f5f9 !important; }

/* ---- Shop by Category horizontal scroller ---- */
.mm-catg-scroll { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 10px; }
.mm-catg-scroll::-webkit-scrollbar { display: none; }
.mm-catg-scroll .mm-catg { flex: 0 0 170px; }
@media (max-width: 640px) { .mm-catg-scroll .mm-catg { flex: 0 0 140px; } }

/* ---- Footer: align columns, stop heading wrap breaking alignment ---- */
.mm-footer-pro footer .flex.flex-wrap {
    grid-template-columns: 1.6fr 1fr 1fr 1.15fr 1fr 1.5fr 1.4fr !important;
    gap: 30px 26px !important;
    align-items: start !important;
    max-width: 1240px; margin-left: auto; margin-right: auto;
}
.mm-footer-pro footer ul p,
.mm-footer-pro footer .order-5 > p,
.mm-footer-pro footer .order-6 > p {
    min-height: 2.6em; display: flex; align-items: flex-end;
}
.mm-footer-pro footer li { line-height: 1.5 !important; }
@media (max-width: 1024px) {
    .mm-footer-pro footer .flex.flex-wrap { grid-template-columns: repeat(3, 1fr) !important; }
    .mm-footer-pro footer ul p, .mm-footer-pro footer .order-5 > p, .mm-footer-pro footer .order-6 > p { min-height: 0; }
}
@media (max-width: 600px) {
    .mm-footer-pro footer .flex.flex-wrap { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 16px !important; }
}

/* ===========================================================================
   v21.4 NAV — clean WHITE menu bar, DEEP navy text, deep-colored icons.
   Category-driven mega menu (.mm-nav2 + .mm-mega). Overrides the theme's
   inline dark/blue styles with !important.
   --mm-nav-ink is the "deep" menu/icon color the merchant asked for.
   =========================================================================== */
:root { --mm-nav-ink: #0a1120; --mm-nav-accent: #0284c7; }

header.header {
    background: #ffffff !important;
    border-top: 1px solid #eef1f6 !important;
    box-shadow: 0 6px 20px -16px rgba(15,23,42,.35);
    overflow: visible !important;
    /* v21.4.1 (2026-07-11): give the header its own stacking context ABOVE the
       hero/slider so the mega-menu flyout is never painted behind it. */
    position: relative;
    z-index: 200;
}
header.header > .layout-wrapper { overflow: visible !important; }
/* the nav row must never clip Blog/Deals/Support. Categories sit on the left;
   Blog/Deals/Support are pinned on the right via .mm-nav2-spacer + .mm-nav2-pin. */
header.header #nav-wrap {
    overflow: visible !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* --- the nav list (used by both the left "All Categories" box and the row) --- */
ul.mm-nav2 { display: flex !important; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; width: 100%; height: 56px; flex-wrap: nowrap; }
.mm-nav2 .mm-nav2-li { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
/* v21.29: spacer pushes Blog/Deals/Support to the right edge as a compact group
   so "Deals" is never truncated by overflow-x:clip. */
.mm-nav2 .mm-nav2-spacer {
    flex: 1 1 auto !important;
    min-width: 8px;
    max-width: none;
    pointer-events: none;
    list-style: none;
}
.mm-nav2 .mm-nav2-pin { flex: 0 0 auto !important; }
.mm-nav2 .mm-nav2-sep { margin-left: 0; padding-left: 0; }

.mm-nav2 .mm-nav2-link {
    display: inline-flex !important; align-items: center; gap: 7px;
    height: 100%; padding: 0 12px !important; margin: 0 !important;
    font-family: var(--mm-font) !important; font-weight: 700 !important;
    font-size: 14px !important; letter-spacing: .1px; line-height: 1;
    color: var(--mm-nav-ink) !important; background: transparent !important;
    text-decoration: none !important; white-space: nowrap; border: 0 !important;
    position: relative; transition: color .16s ease;
}
.mm-nav2 .mm-nav2-link .mm-nav2-ic { display: inline-flex; align-items: center; color: var(--mm-nav-ink) !important; opacity: .92; }
.mm-nav2 .mm-nav2-link .mm-nav2-ic svg { width: 17px; height: 17px; display: block; }
.mm-nav2 .mm-nav2-caret { opacity: .55; transition: transform .18s ease; }
.mm-nav2 .mm-nav2-li:hover > .mm-nav2-link { color: var(--mm-nav-accent) !important; }
.mm-nav2 .mm-nav2-li:hover > .mm-nav2-link .mm-nav2-ic { color: var(--mm-nav-accent) !important; opacity: 1; }
.mm-nav2 .mm-nav2-li:hover > .mm-nav2-link .mm-nav2-caret { transform: rotate(180deg); }
/* hover underline */
.mm-nav2 .mm-nav2-link::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px;
    background: linear-gradient(90deg, var(--mm-nav-accent), #38bdf8);
    transform: scaleX(0); transform-origin: center; transition: transform .2s ease; border-radius: 2px;
}
.mm-nav2 .mm-nav2-li:hover > .mm-nav2-link::after { transform: scaleX(1); }
.mm-nav2 .mm-nav2-accent { color: var(--mm-nav-accent) !important; font-weight: 700 !important; }
.mm-nav2 .mm-nav2-accent .mm-nav2-ic { color: var(--mm-nav-accent) !important; }

/* v21.47: real active state for the mega-menu. Only the item matching the
   current page lights up (accent color + persistent underline), so "Deals"
   no longer looks selected while browsing e.g. the Blog page. */
.mm-nav2 .mm-nav2-link.is-active { color: var(--mm-nav-accent) !important; font-weight: 700 !important; }
.mm-nav2 .mm-nav2-link.is-active .mm-nav2-ic { color: var(--mm-nav-accent) !important; opacity: 1; }
.mm-nav2 .mm-nav2-link.is-active::after { transform: scaleX(1); }

/* left "All Categories" box */
header.header .mm-allcat-group { position: relative; }
header.header .mm-allcat-group .mm-allcat-btn {
    height: 56px; padding: 0 18px 0 4px !important;
    border-right: 1px solid #eef1f6; font-weight: 700 !important;
}

/* --- MEGA PANEL --- */
.mm-nav2 .mm-mega, header.header .mm-mega {
    position: absolute !important; left: 0; top: 100%;
    width: min(880px, 92vw); background: #fff;
    border: 1px solid #eef1f6 !important; border-top: 3px solid var(--mm-nav-accent) !important;
    border-radius: 0 0 14px 14px !important; box-shadow: 0 24px 60px -20px rgba(15,23,42,.35) !important;
    padding: 0; z-index: 500; overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    pointer-events: none;
}
.mm-nav2 .mm-nav2-li:hover > .mm-mega,
.mm-nav2 .mm-nav2-li:focus-within > .mm-mega,
header.header .mm-allcat-group:hover > .mm-mega,
header.header .mm-allcat-group:focus-within > .mm-mega {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
/* v21.8: single-category panels size to their content (with sane min/max) so a
   category with only 2 sub-categories doesn't stretch into a huge airy box, and
   a category with many still gets a comfortable 2-column layout. */
.mm-nav2 .mm-mega-single { width: auto; min-width: 430px; max-width: 640px; }
/* keep the panel on-screen for items toward the right of the bar. v21.12.7:
   category items from the 4th onward also right-align so their (wide) panel +
   promo image don't overflow past the right viewport edge and get clipped. */
.mm-nav2 .mm-nav2-sep .mm-mega,
.mm-nav2 .mm-nav2-li.mm-has-mega:nth-child(n+4) .mm-mega,
.mm-nav2 .mm-nav2-li:nth-last-child(-n+3) .mm-mega { left: auto; right: 0; }

.mm-mega-inner { display: grid; grid-template-columns: 1fr 220px; }
.mm-mega-single .mm-mega-inner { grid-template-columns: 1fr 180px; }
.mm-mega-cols { padding: 14px 16px; display: grid; gap: 2px 16px; align-content: start; max-height: 420px; overflow-y: auto; }
.mm-mega-cols-4 { grid-template-columns: repeat(4, 1fr); }
.mm-mega-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mm-mega-col { display: flex; flex-direction: column; }
.mm-mega-head {
    display: flex; align-items: center; gap: 8px; text-decoration: none !important;
    font-family: var(--mm-font); font-weight: 800; font-size: 11.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--mm-nav-accent) !important; padding: 2px 0 6px; margin-bottom: 3px;
    border-bottom: 1px solid #f1f4f9;
}
.mm-mega-head .mm-mega-head-ic svg { width: 15px; height: 15px; }
.mm-mega-link {
    display: flex; align-items: center; gap: 7px; text-decoration: none !important;
    color: #33415c !important; font-weight: 500; font-size: 13.5px;
    padding: 6px 8px; border-radius: 8px; transition: background .14s, color .14s;
}
.mm-mega-link .mm-mega-dot { color: #cbd5e1; flex: none; transition: color .14s, transform .14s; }
.mm-mega-link:hover { background: #eff6ff; color: var(--mm-nav-accent) !important; }
.mm-mega-link:hover .mm-mega-dot { color: var(--mm-nav-accent); transform: translateX(2px); }

/* promo card in the panel — compact, capped so it doesn't inflate the panel */
.mm-mega-promo {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 18px; color: #fff !important; text-decoration: none !important;
    /* v21.12: promo images are wide with the model on the right; the panel is
       tall/narrow, so anchor to the right so the subject stays visible instead
       of cropping to the empty background. */
    background-size: cover; background-position: right center; background-repeat: no-repeat;
    min-height: 240px; height: 100%; border-radius: 0 12px 12px 0; overflow: hidden;
}
.mm-mega-single .mm-mega-promo { padding: 16px; }
.mm-mega-promo span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #dbeafe; }
.mm-mega-promo strong { font-family: var(--mm-font); font-weight: 800; font-size: 17px; line-height: 1.18; margin: 5px 0 12px; color: #fff; }
.mm-mega-single .mm-mega-promo strong { font-size: 15.5px; margin: 4px 0 10px; }
.mm-mega-promo .mm-mega-promo-btn { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; background: #fff; color: var(--mm-nav-ink); font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 999px; letter-spacing: 0; text-transform: none; }

@media (max-width: 1280px) {
    .mm-nav2 .mm-nav2-link { padding: 0 10px !important; font-size: 13px !important; }
    .mm-nav2 .mm-nav2-link .mm-nav2-ic svg { width: 15px; height: 15px; }
}
@media (max-width: 1100px) {
    .mm-nav2 .mm-nav2-link { padding: 0 8px !important; font-size: 12px !important; gap: 4px; }
    /* Prefer showing Deals fully — hide Support label icons first if tight */
    .mm-nav2 .mm-nav2-support { display: none !important; }
}
@media (max-width: 1024px) {
    .mm-nav2 .mm-mega, header.header .mm-mega { width: 92vw; }
    .mm-mega-inner, .mm-mega-single .mm-mega-inner { grid-template-columns: 1fr; }
    .mm-mega-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .mm-mega-promo { display: none; }
}

/* ===========================================================================
   PRODUCT DETAIL PAGE (v21.3)
   =========================================================================== */
/* v21.172: PDP gallery uses a fixed 3:4 frame + cover (top-aligned).
   Earlier min-height 480px + object-fit:contain left a large empty band
   under shorter / square product photos on some PDPs. */
#zoomImage .swiper-slide,
.swiper-container-main .swiper-slide {
    background-image: none !important;
    background-color: #f8fafc !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center;
    overflow: hidden !important;
}
#zoomImage .swiper-slide-img,
.swiper-container-main .swiper-slide-img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    padding: 0 !important;
    opacity: 1 !important;
}
/* v21.48 / v21.91: never hide the photo (old magnifier used opacity:0 on hover). */
#zoomImage .swiper-slide.zoom img.swiper-slide-img,
#zoomImage .swiper-slide.zoom img.swiper-slide-img:hover,
.swiper-container-main .swiper-slide.zoom img.swiper-slide-img,
.swiper-container-main .swiper-slide.zoom img.swiper-slide-img:hover { opacity: 1 !important; }
.swiper-container-main { border-radius: 16px !important; overflow: hidden; box-shadow: var(--mm-shadow-sm); }
.swiper-container-main .minimum-height {
    min-height: 0 !important;
    aspect-ratio: 3 / 4;
    height: auto !important;
}
@media (max-width: 640px) {
    .swiper-container-main .minimum-height {
        min-height: 0 !important;
        aspect-ratio: 3 / 4;
    }
}

/* v21.49: vendor-authored product descriptions often paste a "Product Details"
   HTML table with fixed pixel widths, which overflowed the phone viewport
   (sideways scroll / cut-off values). Force any table inside the description
   to fit the screen and wrap long cell text on mobile. */
#item-details .list-style table,
#item-details table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
}
#item-details table td,
#item-details table th {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal !important;
    max-width: 100% !important;
}
#item-details table img { max-width: 100% !important; height: auto !important; }
@media (max-width: 640px) {
    #item-details table td,
    #item-details table th { padding: 8px 10px !important; font-size: 13px !important; }
}

/* Premium tabs (Description / Specification) */
#tabs .c-tabs-nav { display: flex; gap: 6px; border-bottom: 1px solid var(--mm-line); margin-bottom: 4px; }
#tabs .c-tabs-nav__link {
    font-family: var(--mm-font) !important; font-weight: 700 !important; font-size: 15px !important;
    color: var(--mm-ink-mute) !important; padding: 12px 18px !important; position: relative;
    text-decoration: none !important; border: 0 !important; background: transparent !important;
    transition: color .2s var(--mm-ease);
}
#tabs .c-tabs-nav__link.is-active { color: var(--mm-ink) !important; }
#tabs .c-tabs-nav__link.is-active::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px;
    background: linear-gradient(90deg, var(--mm-blue), var(--mm-blue-dark)); border-radius: 3px 3px 0 0;
}
#tabs .c-tabs-nav__link:hover { color: var(--mm-ink) !important; }

/* Description body */
#tabs .c-tab__content { font-family: var(--mm-font) !important; color: var(--mm-ink-soft) !important; line-height: 1.75; font-size: 15px; }
#tabs .item-full-details { padding: 4px 2px; }
#tabs .list-style ul { list-style: disc; padding-left: 20px; }
#tabs .list-style li { margin: 6px 0; }
#view-more .add, #view-more > div { background: linear-gradient(180deg, rgba(255,255,255,0), #fff 65%); }
#view-more span { color: var(--mm-blue) !important; font-weight: 700 !important; }

/* Specification table — clean striped card */
#product-specification-panel table {
    border: 1px solid var(--mm-line) !important; border-radius: 12px; overflow: hidden; border-collapse: separate !important; border-spacing: 0;
}
#product-specification-panel table td { border: 0 !important; border-bottom: 1px solid var(--mm-line) !important; padding: 13px 18px !important; font-size: 14px; }
#product-specification-panel table tr td:first-child { font-weight: 700; color: var(--mm-ink); width: 38%; background: #f8fafc; }
#product-specification-panel table tr:last-child td { border-bottom: 0 !important; }
#product-specification-panel table tr:hover td:last-child { background: #fafbff; }

/* Related products card polish */
.similar-product-card { text-decoration: none !important; display: block; }
.similar-product-card .aspect-square { aspect-ratio: 1 / 1; }
.similar-product-card img { transition: transform .35s var(--mm-ease); }

/* ===========================================================================
   MOBILE RESPONSIVE PASS (v21.3)
   =========================================================================== */
@media (max-width: 768px) {
    .mm-block { padding-left: 14px !important; padding-right: 14px !important; padding-top: 34px !important; }
    .mm-hero3 + .mm-block { padding-top: 40px !important; }
    .mm-sec-head { flex-wrap: wrap; gap: 6px; }
    .mm-sec-head .mm-view-all { font-size: 12px; padding: 7px 13px; }
    /* PDP: stack image + summary + reviews cleanly */
    #item-details-section.grid { gap: 18px !important; }
    /* Category button hidden on mobile already; keep nav readable */
    .mm-nav2 .mm-nav2-link { font-size: 12.5px !important; }
}
@media (max-width: 480px) {
    .mm-hero3-title { font-size: 24px !important; }
    .mm-hero3-sub { font-size: 13px !important; }
    .mm-prod-img { height: auto !important; aspect-ratio: 3 / 4 !important; }
}

/* ===========================================================================
   v21.4 HEADER ICONS — recolor the account / wishlist / cart / track / contact
   icons + their labels to the deep navy ink (overrides the theme's inline
   stroke/color values). Search field icons stay as-is.
   =========================================================================== */
.mm-site-header .rev svg [stroke],
.mm-site-header .rev svg path[stroke],
.mm-site-header .rev svg circle[stroke] { stroke: var(--mm-nav-ink, #0f1e3d) !important; }
.mm-site-header .rev li p,
.mm-site-header .rev li a p { color: var(--mm-nav-ink, #0f1e3d) !important; font-family: var(--mm-font) !important; }
/* cart badge stays red/white; don't touch .bg-reds-3 */

/* ===========================================================================
   v21.4 TOP BAR — deep background (matches reference). The header-top inline
   <style> also sets this; this is a higher-specificity backstop.
   =========================================================================== */
section.mm-htop { background: linear-gradient(90deg, #0b1220 0%, #101b30 55%, #14213b 100%) !important; }
section.mm-htop .layout-wrapper * { color: #eaf0f9; }
section.mm-htop svg [fill="#fff"] { fill: #eaf0f9; }

/* ===========================================================================
   v21.4.5 (2026-07-11) — profile dropdown, mega spacing, mobile responsive
   =========================================================================== */

/* 1) PROFILE / ACCOUNT DROPDOWN — the header-main (.mm-site-header) is z-40 but
      the nav bar is z-200, so the "My Account / Logout" flyout rendered BEHIND
      the menu. Lift the header-main above the nav and give the menu a high z. */
/* Only lift the header-main above the nav on DESKTOP. On mobile this would
   cover the slide-in drawer (#sidenav z-50) and make the sticky search bar
   overlap the menu items — so keep the default z there. */
@media (min-width: 769px) { .mm-site-header { z-index: 300 !important; } }
#userMenu { z-index: 80 !important; }
/* the account flyout should sit cleanly under the avatar with a soft card look */
#userMenu.visible, #userMenu:not(.invisible) { box-shadow: 0 22px 50px -18px rgba(15,23,42,.4); }

/* 2) MEGA MENU SPACING — sub-category rows align to the top-left (no floaty
      centering). The panel keeps a modest min-height so the promo image on the
      right always renders at a proper height even for short lists. */
.mm-mega-single .mm-mega-cols { align-content: start; padding: 16px 18px; gap: 3px 12px; }
.mm-mega-inner { align-items: stretch; }
.mm-mega-single .mm-mega-inner { min-height: 210px; grid-template-columns: minmax(230px, 1fr) 180px; }

/* 3) MOBILE RESPONSIVE ---------------------------------------------------- */
@media (max-width: 768px) {
    /* Hero: image-only, keep banner aspect ratio so creatives are not cropped. */
    .mm-hero3 { margin-top: 8px; padding: 0 12px; }
    .mm-hero3-frame { min-height: 0 !important; border-radius: 16px; aspect-ratio: 1024 / 426; }
    .mm-hero3-slide { position: absolute !important; inset: 0 !important; }
    .mm-hero3-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; }
    .mm-hero3-shade,
    .mm-hero3-body,
    .mm-hero3-actions { display: none !important; }
    .mm-hero3-dots { left: 50% !important; transform: translateX(-50%); bottom: 10px; }
    .mm-hero3-nav { display: none; }
    /* Trust strip: 2-up on phones, no negative overlap glitch.
       v21.12.8: shrink the 4 trust cards on mobile per merchant request. */
    /* v21.49: on phones the trust cards used a negative margin that pulled them
       UP over the (short) hero, overlapping the hero buttons/model. Sit them
       cleanly BELOW the hero with a small positive gap instead. */
    .mm-trust3 { grid-template-columns: repeat(2, 1fr) !important; margin-top: 14px !important; gap: 8px !important; padding: 0 12px !important; }
    .mm-trust3-item { padding: 9px 10px !important; gap: 8px !important; border-radius: 12px !important; }
    .mm-trust3-icon { width: 30px !important; height: 30px !important; border-radius: 9px !important; }
    .mm-trust3-icon svg { width: 16px !important; height: 16px !important; }
    .mm-trust3-item strong { font-size: 11.5px !important; line-height: 1.2 !important; }
    .mm-trust3-item small { font-size: 10px !important; line-height: 1.2 !important; }
    /* The desktop category mega bar is hidden on phones; the hamburger drawer
       (header-top .mm-mobile-menu-section) is the mobile menu. Make sure the
       desktop bar can never force horizontal scroll on small screens. */
    #nav-wrap, header.header .mm-allcat-group, header.header ul.mm-nav2 { display: none !important; }
    /* mobile slide-in menu + its backdrop always on top of the sticky header */
    #sidenav { z-index: 1000 !important; }
    #overlay { z-index: 999 !important; }
    /* give the drawer's scrollable content room so the top items are never
       hidden under the logo/account header inside the drawer */
    #sidenav { overflow-y: auto; }
}
/* v21.66: hide empty desktop category bar + show chip strip through tablet (< lg) */
@media (max-width: 1023px) {
    #nav-wrap, header.header .mm-allcat-group, header.header ul.mm-nav2 { display: none !important; }
    header.header { min-height: 0 !important; }
    header.header > .flex.justify-between {
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* v21.66 / v21.67 — category strip under search (mobile + tablet only) */
.mm-mobile-cats {
    display: none;
    background: #fff;
    border-bottom: 0;
    position: relative;
    z-index: 35;
}
@media (max-width: 1023px) {
    .mm-mobile-cats { display: block !important; }
}
.mm-mobile-cats-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 14px 12px;
}
.mm-mobile-cats-scroll::-webkit-scrollbar { display: none; }
.mm-mobile-cat-item {
    flex: 0 0 auto;
    width: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    color: #0f2038;
}
.mm-mobile-cat-img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px -6px rgba(15,23,42,.28);
}
.mm-mobile-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mm-mobile-cat-initial {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
}
.mm-mobile-cat-name {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #1f2937;
}
.mm-mobile-cat-all .mm-mobile-cat-name { color: #0f2038; font-weight: 700; }
@media (max-width: 480px) {
    .mm-hero3-frame { min-height: 0 !important; aspect-ratio: 1024 / 426; }
    .mm-trust3 { margin-top: 12px !important; }
}

/* ===========================================================================
   v21.6 (2026-07-11) — PREMIUM HOMEPAGE PRODUCT CARD (refined)
   Loaded last so it overrides home-custom.css + earlier .mm-prod-card rules.
   Typography now uses the same heavy Plus Jakarta Sans (--mm-font-head) as the
   "New Arrivals" section heading — title/price/badges/buttons all share that
   bold, modern look. Card structure: image link, badges, wishlist, title,
   rating, price and a two-button action row (Add to Cart + Buy Now).
   =========================================================================== */
.mm-product-scroll .mm-prod-card { flex: 0 0 250px !important; }

.mm-prod-card {
    background: #fff !important;
    border: 1px solid #eceff4 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.05) !important;
    transition: box-shadow .35s var(--mm-ease), transform .3s var(--mm-ease), border-color .35s var(--mm-ease) !important;
}
.mm-prod-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 28px 50px -22px rgba(15,23,42,.34) !important;
    border-color: #dde5f0 !important;
}

/* media — v21.167: portrait 3:4 frame + top-aligned crop so heads/faces stay visible */
.mm-prod-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    background: #f1f5f9 !important;
    overflow: hidden !important;
    position: relative !important;
}
.mm-prod-imglink { display: block; width: 100%; height: 100%; }
/* v21.87 / v21.167: cover + center-top (fashion), sharper image-rendering */
.mm-prod-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    background: #f1f5f9 !important;
    transition: transform .6s var(--mm-ease) !important;
}
.mm-prod-card:hover .mm-prod-img img { transform: scale(1.04) !important; }

/* badges — NEW / BESTSELLER stay LEFT; sale % sits RIGHT (no overlap) */
.mm-prod-badges,
.mm-prod-badges-left {
    position: absolute;
    top: 11px;
    left: 11px;
    right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    z-index: 2;
    max-width: calc(100% - 96px);
}
.mm-prod-badge {
    font-family: var(--mm-font-head) !important;
    background: linear-gradient(135deg,#ef4444,#dc2626) !important;
    color: #fff !important; padding: 5px 10px !important; border-radius: 999px !important;
    font-size: 10.5px !important; font-weight: 800 !important; line-height: 1 !important;
    letter-spacing: .06em !important; text-transform: uppercase !important;
    box-shadow: 0 6px 14px -6px rgba(220,38,38,.75);
}
.mm-prod-badge.mm-badge-new { background: linear-gradient(135deg,#22c55e,#16a34a) !important; box-shadow: 0 6px 14px -6px rgba(22,163,74,.75); }
.mm-prod-badge.mm-badge-best { background: linear-gradient(135deg,#f59e0b,#d97706) !important; box-shadow: 0 6px 14px -6px rgba(217,119,6,.75); }
.mm-prod-badge.mm-badge-sale {
    position: absolute !important;
    top: 11px !important;
    right: 11px !important;
    left: auto !important;
    z-index: 3;
    background: linear-gradient(135deg,#ef4444,#dc2626) !important;
}
/* wishlist sits under the sale badge when both are on the right */
.mm-prod-wish.mm-wish-below-sale { top: 46px !important; }

/* wishlist */
.mm-prod-wish {
    position: absolute; top: 11px; right: 11px; z-index: 3;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.95); border: 1px solid #eef1f6;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #b0b8c6; padding: 0;
    box-shadow: 0 5px 14px -6px rgba(15,23,42,.4);
    opacity: 0; transform: translateY(-4px);
    transition: color .2s var(--mm-ease), background .2s var(--mm-ease), opacity .25s var(--mm-ease), transform .25s var(--mm-ease);
}
.mm-prod-card:hover .mm-prod-wish { opacity: 1; transform: translateY(0); }
.mm-prod-wish:hover { color: #ef4444; background: #fff; transform: translateY(0) scale(1.08); }
.mm-prod-wish.remove-wishlist, .mm-prod-wish.color_fill { color: #ef4444; }
.mm-prod-wish svg { width: 18px; height: 18px; display: block; }
@media (hover: none) { .mm-prod-wish { opacity: 1; transform: none; } }

/* body */
.mm-prod-info { padding: 15px 15px 16px !important; display: flex !important; flex-direction: column; gap: 8px; flex: 1; }

/* title — SAME heavy heading font as "New Arrivals" */
.mm-prod-name {
    font-family: var(--mm-font-head) !important;
    font-size: 14px !important; font-weight: 700 !important; color: #0f172a !important;
    margin: 0 !important; line-height: 1.34 !important; letter-spacing: -.02em !important;
    text-decoration: none !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 38px;
    transition: color .2s var(--mm-ease);
}
.mm-prod-name:hover { color: var(--mm-primary, #2196C8) !important; }

.mm-prod-rating { display: inline-flex; align-items: center; gap: 6px; }
.mm-prod-stars { color: #f59e0b; font-size: 12.5px; letter-spacing: 1.5px; line-height: 1; }
.mm-prod-rnum { font-family: var(--mm-font-head); font-size: 11px; font-weight: 800; color: #475569; background: #f1f5f9; padding: 2px 7px; border-radius: 6px; line-height: 1; }

.mm-prod-price { display: flex !important; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 2px; }
.mm-price-current { font-family: var(--mm-font-head) !important; font-size: 19px !important; font-weight: 800 !important; color: #0f172a !important; letter-spacing: -.02em !important; }
.mm-price-old { font-family: var(--mm-font-head) !important; font-size: 12.5px !important; font-weight: 600 !important; color: #9aa6b6 !important; text-decoration: line-through !important; }
.mm-price-save { font-family: var(--mm-font-head); font-size: 11px; font-weight: 800; color: #16a34a; background: #e9f9ef; padding: 2px 7px; border-radius: 6px; line-height: 1.4; }

/* actions — heavy heading font */
.mm-prod-actions { display: flex; gap: 9px; margin-top: 13px; }
.mm-prod-cart, .mm-prod-buy {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 41px; border-radius: 12px; font-family: var(--mm-font-head) !important;
    font-size: 13px; font-weight: 800; letter-spacing: -.01em;
    text-decoration: none; cursor: pointer; white-space: nowrap; border: 1px solid transparent;
    transition: background .2s var(--mm-ease), color .2s var(--mm-ease), border-color .2s var(--mm-ease), transform .15s var(--mm-ease), box-shadow .2s var(--mm-ease);
}
.mm-prod-cart { background: #eef4fb; color: var(--mm-primary, #2196C8); border-color: #d7e6f6; }
.mm-prod-cart:hover { background: var(--mm-primary, #2196C8); color: #fff; border-color: var(--mm-primary, #2196C8); box-shadow: 0 12px 24px -12px rgba(33,150,200,.9); }
.mm-prod-cart svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mm-prod-buy { background: linear-gradient(135deg,#0f172a,#1f2937); color: #fff !important; box-shadow: 0 8px 18px -12px rgba(15,23,42,.9); }
.mm-prod-buy:hover { background: linear-gradient(135deg,#1e293b,#334155); transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(15,23,42,.95); }

@media (max-width: 1024px) {
    .mm-product-scroll .mm-prod-card { flex: 0 0 218px !important; }
}
@media (max-width: 640px) {
    .mm-product-scroll .mm-prod-card { flex: 0 0 178px !important; }
    .mm-prod-name { font-size: 13px !important; }
    .mm-price-current { font-size: 17px !important; }
    .mm-prod-actions { flex-direction: column; gap: 7px; }
    .mm-prod-cart, .mm-prod-buy { height: 38px; font-size: 12.5px; }
    .mm-prod-wish { opacity: 1; transform: none; }
}

/* v21.7 (2026-07-11): New Arrivals / Trending / Best Sellers now render as a
   fixed 2-row responsive GRID (no horizontal scroll). "View All" stays in the
   section header. 5 columns × 2 rows on desktop (10 products). */
.mm-prod-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.mm-prod-grid .mm-prod-card { flex: none !important; width: 100% !important; }
@media (max-width: 1200px) { .mm-prod-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (max-width: 900px)  { .mm-prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .mm-prod-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* v21.70 — button click loading spinner */
.mm-btn-loading {
    position: relative !important;
    pointer-events: none !important;
    opacity: .78 !important;
}
.mm-btn-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mm-btn-spin .7s linear infinite;
    z-index: 2;
}
.mm-prod-cart.mm-btn-loading::after,
a.mm-btn-loading::after,
button.mm-btn-loading:not(.mm-prod-buy)::after {
    border-color: rgba(33,150,200,.25);
    border-top-color: #2196C8;
}
@keyframes mm-btn-spin { to { transform: rotate(360deg); } }