:root {
    --vip-bg: #14141F;
    --vip-card: #1a1a2e;
    --vip-card-alt: #161625;
    --vip-border: #2d2d44;
    --vip-border-strong: #3a3a55;
    --vip-text: #ffffff;
    --vip-text-dim: #9a9ab0;
    /* a11y: bumped from #6b6b85 (3.54:1) to meet WCAG AA 4.5:1 on #14141F */
    --vip-text-muted: #8a8aa8;
    --vip-accent: #ccff00;
    --vip-accent-hover: #e0ff4d;
    --vip-accent-dim: rgba(204, 255, 0, 0.12);
    --vip-error: #ff5b6b;
    --vip-success: #4ade80;
    --vip-warning: #f59e0b;
    --vip-gold-gradient: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFC947 100%);
    --vip-lime-gradient: linear-gradient(135deg, #ccff00 0%, #a3cc00 100%);
    --vip-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
    --vip-shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.35);
    --vip-shadow-glow: 0 0 24px rgba(204, 255, 0, 0.25);
}

/*
 * Animated light beam sweeping diagonally across hero grid backdrops.
 * One global rule cascades to every "-hero-grid" / page-grid class in
 * the app (auth, errors, legal, marketing pages, status). Uses a
 * blurred linear-gradient translated via CSS animation — GPU-composited,
 * no layout shift. Respects prefers-reduced-motion.
 */
/*
 * Universal light-through-grid effect — applies to any section
 * containing a grid-backdrop child (class contains "-grid" or
 * "grid-pattern", excluding Bootstrap ".grid" utility).
 *
 * Uses CSS :has() (supported in all modern browsers since
 * Chrome 105 / Safari 15.4 / Firefox 121). Falls back to
 * explicit class list for older browsers.
 */
/* Explicit class list (fallback + backwards compat) */
.faq-hero, .ct-hero, .help-hero, .sell-hero, .prem-hero,
.pricing-hero, .apl, .epl, .rp, .ve, .legal-hero,
/* Universal: any element containing a grid backdrop child */
section:has(> [class$="-hero-grid"]),
section:has(> [class*="-grid"][aria-hidden]),
div:has(> [class$="-hero-grid"]),
div:has(> [class*="grid-pattern"]) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Children always above the sweep */
.faq-hero > *, .ct-hero > *, .help-hero > *, .sell-hero > *,
.prem-hero > *, .pricing-hero > *, .apl > *, .epl > *,
.rp > *, .ve > *, .legal-hero > *,
section:has(> [class$="-hero-grid"]) > *,
section:has(> [class*="-grid"][aria-hidden]) > *,
div:has(> [class$="-hero-grid"]) > *,
div:has(> [class*="grid-pattern"]) > * {
    position: relative;
    z-index: 2;
}
/* Grid backdrop child itself sits at layer 0, content at 2 */
[class$="-hero-grid"], [class*="grid-pattern"] { z-index: 0 !important; }
/*
 * Light beam sweeps behind the grid. A grid-line mask ensures
 * the light is ONLY visible through the 1px gridlines — giving
 * the illusion of light leaking through the grid weave.
 * Mask uses two linear-gradients (horizontal + vertical 1px lines
 * every 40px) composited together to form the grid mesh.
 */
.faq-hero::before, .ct-hero::before, .help-hero::before,
.sell-hero::before, .prem-hero::before, .pricing-hero::before,
.apl::before, .epl::before, .rp::before, .ve::before,
.legal-hero::before,
section:has(> [class$="-hero-grid"])::before,
section:has(> [class*="-grid"][aria-hidden])::before,
div:has(> [class$="-hero-grid"])::before,
div:has(> [class*="grid-pattern"])::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 35%,
        rgba(204, 255, 0, 0.25) 48%,
        rgba(224, 255, 77, 0.35) 50%,
        rgba(204, 255, 0, 0.25) 52%,
        transparent 65%
    );
    background-size: 35% 100%;
    background-repeat: no-repeat;
    -webkit-mask-image:
        linear-gradient(rgba(0,0,0,1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,1) 1px, transparent 1px);
    mask-image:
        linear-gradient(rgba(0,0,0,1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,1) 1px, transparent 1px);
    -webkit-mask-size: 40px 40px;
    mask-size: 40px 40px;
    -webkit-mask-composite: source-over;
    mask-composite: add;
    pointer-events: none;
    animation: hero-grid-sweep 7s linear infinite;
    will-change: background-position;
    z-index: 0;
}
/* Secondary softer sweep (offset phase + slower + white-ish) */
/* Secondary softer white sweep, different phase/speed */
.faq-hero::after, .ct-hero::after, .help-hero::after,
.sell-hero::after, .prem-hero::after, .pricing-hero::after,
.apl::after, .epl::after, .rp::after, .ve::after,
.legal-hero::after,
section:has(> [class$="-hero-grid"])::after,
section:has(> [class*="-grid"][aria-hidden])::after,
div:has(> [class$="-hero-grid"])::after,
div:has(> [class*="grid-pattern"])::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 40%,
        rgba(255, 255, 255, 0.12) 50%,
        transparent 60%
    );
    background-size: 30% 100%;
    background-repeat: no-repeat;
    -webkit-mask-image:
        linear-gradient(rgba(0,0,0,1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,1) 1px, transparent 1px);
    mask-image:
        linear-gradient(rgba(0,0,0,1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,1) 1px, transparent 1px);
    -webkit-mask-size: 40px 40px;
    mask-size: 40px 40px;
    -webkit-mask-composite: source-over;
    mask-composite: add;
    pointer-events: none;
    animation: hero-grid-sweep 12s linear infinite;
    animation-delay: 3.5s;
    will-change: background-position;
    z-index: 0;
}
/* Sweep animates background-position instead of transform, so the
 * masked grid-line light moves without breaking the mask-origin. */
@keyframes hero-grid-sweep {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}
/*
 * Template sets #wrapper { overflow: hidden; height: 100% } which
 * clips both axes. overflow: hidden on ANY ancestor of a sticky
 * element breaks the sticky-to-viewport binding, so the legal-page
 * TOC and other scroll-spy sidebars just scroll with the content.
 * Switch to overflow-x only so sticky works while still preventing
 * horizontal scrollbars from stray animations.
 */
/* NOTE: template CSS sets html/body/#wrapper with overflow:hidden +
   height:100% which breaks native position:sticky. Rather than
   fighting the template layout (which also depends on those heights),
   we implement sticky behaviour via JS inside each component that
   needs it (see components/common/use-sticky-top.ts). */

/*
 * Header menu spacing fix: template uses absolute positioning for both
 * #main-nav and .flat-wallet, which overlaps when we add more menu items.
 * Tighten menu item padding and cap nav right edge to leave room for
 * locale switcher + cart + login.
 */
.header_1 #main-nav > ul > li {
    padding: 16px 12px 18px 12px;
}
.header_1 #main-nav > ul > li > a {
    font-size: 15px;
}
/* Keep each nav item on one line and tighten spacing so 5 items
   fit comfortably between the logo and the right-side wallet widgets.
   Template still positions #main-nav absolute with left: 22.48%; we
   leave that alone but constrain the per-item width. */
.header_1 #main-nav { white-space: nowrap; }
.header_1 #main-nav > ul > li {
    padding: 16px 10px 18px 10px;
    white-space: nowrap;
}
.header_1 #main-nav > ul > li > a {
    font-size: 14px;
    white-space: nowrap;
}
@media (max-width: 1280px) {
    .header_1 #main-nav { left: 19% !important; }
    .header_1 #main-nav > ul > li { padding: 16px 7px 18px 7px; }
    .header_1 #main-nav > ul > li > a { font-size: 13px; }
}
@media (max-width: 1024px) {
    .header_1 #main-nav { display: none !important; }
}

/*
 * A11y: button elements promoted from <div> keep original template look.
 * The header mobile-button / canvas / close / overlay buttons need these resets
 * so they display identically to the original <div> markup.
 */
button.mobile-button,
button.canvas,
button.mobile-nav-close,
button.canvas-nav-close,
button.overlay-mobile-nav,
button.overlay-canvas-nav {
    background: transparent;
    padding: 0;
    border: 0;
    font: inherit;
    cursor: pointer;
    color: inherit;
}

/*
 * Subtle page-entry fade-in-up for primary content containers.
 * Runs once on mount. Respects prefers-reduced-motion.
 * Applies to section headings and first-level content blocks
 * on pages that opt-in by adding class="rv-on-enter" to wrappers.
 * Keeps motion subtle — 0.4s, small translation.
 */
@keyframes rv-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rv-on-enter { animation: rv-fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.rv-on-enter-delay-1 { animation: rv-fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
.rv-on-enter-delay-2 { animation: rv-fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both; }
.rv-on-enter-delay-3 { animation: rv-fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both; }
@media (prefers-reduced-motion: reduce) {
    .rv-on-enter, .rv-on-enter-delay-1, .rv-on-enter-delay-2, .rv-on-enter-delay-3 {
        animation: none !important;
    }
}

/*
 * A11y: screen-reader-only utility class (WCAG-compatible visually-hidden).
 */
.sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*
 * A11y: visible keyboard focus indicator (WCAG 2.4.7).
 * Only shows for keyboard navigation (:focus-visible), not mouse clicks.
 * Lime ring matches brand accent; offset keeps it clear of rounded edges.
 */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid #ccff00 !important;
    outline-offset: 3px !important;
    border-radius: 4px;
}
/* Buttons/inputs with rounded corners: use box-shadow ring instead of outline
   so it follows the border-radius smoothly. */
button:focus-visible,
a.plan-cta:focus-visible,
a.oauth-btn:focus-visible,
.auth-submit:focus-visible,
.oauth-btn:focus-visible,
.faq-q:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.45), 0 0 0 5px rgba(204, 255, 0, 0.15) !important;
}

@media (prefers-reduced-motion: reduce) {
    .faq-hero::before, .faq-hero::after,
    .ct-hero::before, .ct-hero::after,
    .help-hero::before, .help-hero::after,
    .sell-hero::before, .sell-hero::after,
    .prem-hero::before, .prem-hero::after,
    .pricing-hero::before, .pricing-hero::after,
    .apl::before, .apl::after,
    .epl::before, .epl::after,
    .rp::before, .rp::after,
    .ve::before, .ve::after,
    .legal-hero::before, .legal-hero::after,
    section:has(> [class$="-hero-grid"])::before,
    section:has(> [class$="-hero-grid"])::after,
    section:has(> [class*="-grid"][aria-hidden])::before,
    section:has(> [class*="-grid"][aria-hidden])::after,
    div:has(> [class$="-hero-grid"])::before,
    div:has(> [class$="-hero-grid"])::after,
    div:has(> [class*="grid-pattern"])::before,
    div:has(> [class*="grid-pattern"])::after {
        animation: none !important;
        display: none;
    }
}

/* ============================================================
 * MOBILE-FIRST GLOBAL OVERRIDES (≤767px)
 * Applies to every page. Keeps desktop layout untouched.
 * ============================================================ */

/* Safe-area + touch target tokens */
:root {
    --vip-sa-top: env(safe-area-inset-top);
    --vip-sa-bottom: env(safe-area-inset-bottom);
    --vip-sa-left: env(safe-area-inset-left);
    --vip-sa-right: env(safe-area-inset-right);
    --vip-bottom-nav-h: 64px;
    --vip-tap: 44px;
}

/* Prevent accidental horizontal scroll from long content/images */
html, body { max-width: 100vw; overflow-x: hidden; }
body { -webkit-text-size-adjust: 100%; }

/* Make sure images/videos never overflow on mobile */
@media (max-width: 767px) {
    img, video, canvas, svg { max-width: 100%; height: auto; }
    /* Typical template container fixes */
    .zGameArcade-container,
    .themesflat-container,
    .tf-container { width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
    /* Heroes shouldn't cap content height on mobile */
    h1 { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.15 !important; }
    h2 { font-size: clamp(22px, 5.5vw, 32px) !important; line-height: 1.18 !important; }
    h3 { font-size: clamp(18px, 5vw, 24px) !important; line-height: 1.25 !important; }
    p, li { font-size: 15px; line-height: 1.6; }
}

/* Header sits at top — no extra space above it on mobile.
   Header switches from relative to sticky so content doesn't jump. */
@media (max-width: 767px) {
    #page.pt-40 { padding-top: 0 !important; }
    #header_main { position: sticky; top: 0; z-index: 100; }
    #header_main.is-fixed { position: sticky; top: 0; }
}

/* Reserve space for bottom nav so content isn't hidden */
@media (max-width: 767px) {
    body.has-bottom-nav #page,
    body.has-bottom-nav footer,
    body.has-bottom-nav { padding-bottom: calc(var(--vip-bottom-nav-h) + var(--vip-sa-bottom)); }
}

/* Mobile drawer brand header + close button are rendered by MobileMenu component (components/layout/MobileMenu.js). */
@media (max-width: 767px) {
    .mobile-nav-wrap.active { z-index: 9998; }
}

/* ------- Bottom Nav Mobile ------- */
.vip-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0;
    display: none;
    align-items: stretch;
    height: calc(var(--vip-bottom-nav-h) + var(--vip-sa-bottom));
    padding-bottom: var(--vip-sa-bottom);
    background: rgba(20,20,31,0.94);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid rgba(255,255,255,0.06);
    z-index: 9990;
}
@media (max-width: 767px) { .vip-bottom-nav { display: flex; } }
.vip-bottom-nav a {
    flex: 1;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    color: #9a9ab0;
    font-size: 11px; font-weight: 600;
    text-decoration: none;
    min-height: 48px;
    transition: color 160ms ease, transform 120ms ease;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.vip-bottom-nav a:focus-visible { outline: 2px solid #ccff00; outline-offset: -2px; border-radius: 8px; }
.vip-bottom-nav a.is-active { color: #ccff00; }
.vip-bottom-nav a.is-active::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 36px; height: 3px;
    background: #ccff00;
    border-radius: 0 0 4px 4px;
}
.vip-bottom-nav a:active { transform: scale(0.92); }
.vip-bottom-nav-ico {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
}
.vip-bottom-nav-badge {
    position: absolute;
    top: 4px; right: calc(50% - 18px);
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #ff5b6b;
    color: #fff;
    font-size: 10px; font-weight: 800;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #14141F;
}

/* ------- Touch target minimum on critical buttons ------- */
@media (max-width: 767px) {
    button, a.tf-button, .auth-submit, .btn, .oauth-btn { min-height: 44px; }
}

/* ------- BackToTop safe-area awareness ------- */
@media (max-width: 767px) {
    .backtop, #backtotop, .back-to-top, .btn-back-to-top, .progress-wrap {
        bottom: calc(var(--vip-bottom-nav-h) + var(--vip-sa-bottom) + 12px) !important;
        right: 14px !important;
    }
    /* Hide BackToTop where a sticky/fixed action bar already occupies
       the bottom-right quadrant (checkout pay bar, cart mobile bar).
       Uses :has() so we don't need page-specific classnames. */
    body:has(.mspb-root) .progress-wrap,
    body:has(.mcb-root) .progress-wrap,
    body:has([data-sticky-paybar]) .progress-wrap {
        display: none !important;
    }
}

/* ==========================================================
   PHASE B1 — HOME PAGE MOBILE (.home-1)
   Tightens hero padding, condenses sections, mobile CTA rhythm
========================================================== */
@media (max-width: 767px) {
    /* Hero — compact */
    .home-1 .flat-pages-title {
        padding: 20px 0 28px !important;
        min-height: auto !important;
    }
    .home-1 .flat-pages-title .pages-title .content {
        padding: 0 4px;
    }
    .home-1 .flat-pages-title h1 {
        font-size: clamp(28px, 7.5vw, 34px) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.4px !important;
        margin-bottom: 14px !important;
        max-width: 18ch;
        margin-left: auto; margin-right: auto;
    }
    .home-1 .flat-pages-title p {
        font-size: 13px !important;
        line-height: 1.55 !important;
        max-width: 40ch;
        margin: 0 auto 22px !important;
        padding: 0 6px;
    }
    /* CTA stacks, full-width, gap instead of mr-16 */
    .home-1 .flat-pages-title .flat-button {
        flex-direction: column !important;
        gap: 10px;
        width: 100%;
        padding: 0 6px;
        align-items: stretch !important;
    }
    .home-1 .flat-pages-title .flat-button .tf-button {
        width: 100% !important;
        margin: 0 !important;
        min-height: 48px;
        font-size: 14px !important;
        letter-spacing: 0.2px;
    }
    /* Hide heavy decorative icons that clutter the 375 viewport */
    .home-1 .flat-pages-title .icon-background .item1,
    .home-1 .flat-pages-title .icon-background .item2,
    .home-1 .flat-pages-title .icon-background .item5,
    .home-1 .flat-pages-title .icon-background .item7,
    .home-1 .flat-pages-title .icon-background .item8 {
        display: none !important;
    }
    .home-1 .flat-pages-title .icon-background .gold-wrap,
    .home-1 .flat-pages-title .icon-background .rose-wrap {
        display: none !important;
    }
    .home-1 .flat-pages-title .bg-grid-line { display: none !important; }
    /* Coverflow slider under hero — fit mobile comfortably */
    .home-1 .flat-pages-title .swiper-3d-7 {
        padding: 0 !important;
        margin-top: 18px;
    }
    .home-1 .flat-pages-title .swiper-3d-7 .tf-card-box {
        border-radius: 16px;
    }
    .home-1 .flat-pages-title .swiper-3d-7 .tf-card-box .card-media img {
        border-radius: 14px;
    }
    .home-1 .flat-pages-title .swiper-button-next,
    .home-1 .flat-pages-title .swiper-button-prev { display: none !important; }

    /* Section rhythm on home — reduce vertical bleed between sections */
    .home-1 .tf-section,
    .home-1 .tf-section-3 {
        padding: 36px 0 8px !important;
    }
    .home-1 .about-us-page.about-swiper-counter-home {
        padding: 28px 0 16px !important;
    }
    .home-1 .create-sell {
        padding: 32px 0 24px !important;
    }
    .home-1 .action {
        padding: 28px 0 24px !important;
    }
    .home-1 .slider-scroll-page {
        padding: 24px 0 12px !important;
    }
    .home-1 .flat-pages-title-home7 h1,
    .home-1 .slider-scroll-page h1 {
        font-size: clamp(24px, 6.2vw, 30px) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.3px !important;
        margin-bottom: 10px !important;
    }
    .home-1 .flat-pages-title-home7 p,
    .home-1 .slider-scroll-page p {
        font-size: 13px !important;
        line-height: 1.55 !important;
        max-width: 40ch;
    }
    .home-1 .flat-pages-title-home7 .pages-title,
    .home-1 .slider-scroll-page .pages-title {
        padding: 10px 0 !important;
    }
    .home-1 .flat-pages-title-home7 .bg-grid-line { display: none !important; }

    /* Section headings — unified mobile scale */
    .home-1 .tf-heading .heading,
    .home-1 .tf-section h2,
    .home-1 .tf-section-3 h2,
    .home-1 .about-us-page h2 {
        font-size: clamp(22px, 5.6vw, 26px) !important;
        line-height: 1.18 !important;
        margin-bottom: 10px !important;
    }
    .home-1 .tf-heading .sub-heading,
    .home-1 .about-us-page .sub-heading,
    .home-1 .tf-section p,
    .home-1 .tf-section-3 p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    /* Stat counters in AboutSwiperCounter — grid 2x2 on mobile */
    .home-1 .about-swiper-counter-home .counter__body-1 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        justify-items: stretch !important;
        align-items: stretch !important;
    }
    .home-1 .about-swiper-counter-home .counter__body-1 .space {
        display: none !important;
    }
    .home-1 .about-swiper-counter-home .counter-1 {
        padding: 18px 10px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        text-align: center;
        width: 100% !important;
    }
    .home-1 .about-swiper-counter-home .counter-1 .number-counter {
        font-size: clamp(24px, 7.5vw, 32px) !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        color: #ccff00 !important;
        margin-bottom: 6px !important;
    }
    .home-1 .about-swiper-counter-home .counter-1 .number-counter .number {
        font-size: inherit !important;
        line-height: inherit !important;
        color: inherit !important;
    }
    .home-1 .about-swiper-counter-home .counter-1 .title {
        font-size: 12px !important;
        line-height: 1.3 !important;
        color: #c6c6d6 !important;
        margin: 0 !important;
    }
    .home-1 .about-swiper-counter-home .tf-section-2.counter {
        padding: 16px 0 12px !important;
    }
    .home-1 .about-us-page.about-swiper-counter-home {
        padding: 0 0 8px !important;
        margin-bottom: 0 !important;
    }
    /* Compact the top image swiper inside AboutSwiperCounter */
    .home-1 .about-swiper-counter-home .tf-card-box.style-7 .card-media {
        aspect-ratio: 4 / 3 !important;
        border-radius: 14px !important;
    }
    .home-1 .about-swiper-counter-home .page-title { padding-bottom: 8px !important; }
    /* Hide decorative silver-logo image on mobile */
    .home-1 .about-swiper-counter-home .icon-background img { display: none !important; }

    /* Horizontal scroll rails for card lists — Seller1/SellerRows1 */
    .home-1 .seller .seller-box,
    .home-1 .seller .seller-wrap,
    .home-1 .seller .swiper-wrapper,
    .home-1 .seller .list-sellers,
    .home-1 .seller-row-group {
        -webkit-overflow-scrolling: touch;
    }
    .home-1 .seller .sub-heading,
    .home-1 .discover-item .sub-heading,
    .home-1 .featured-item .sub-heading,
    .home-1 .top-collections .sub-heading,
    .home-1 .top-collector .sub-heading {
        margin-bottom: 14px !important;
    }

    /* Card polish — consistent radius + shadow on mobile */
    .home-1 .tf-card-box,
    .home-1 .card-article,
    .home-1 .sc-card-collection,
    .home-1 .sc-product-item {
        border-radius: 14px !important;
    }

    /* CreateSell1 — tighten container rows */
    .home-1 .create-sell .tf-heading,
    .home-1 .create-sell .heading-live-auctions {
        margin-bottom: 18px !important;
    }
    .home-1 .create-sell .create-sell-box,
    .home-1 .create-sell .row > [class^="col"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Action section image balance */
    .home-1 .action .action-image,
    .home-1 .action img {
        max-width: 100%;
        height: auto;
    }

    /* Blog/Card text clamp mobile */
    .home-1 .tf-card-box .meta-info .name,
    .home-1 .tf-card-box h5 {
        font-size: 14px !important;
    }
    .home-1 .tf-card-box .featured-countdown {
        font-size: 11px !important;
    }

    /* Swipers — safe spacing inside */
    .home-1 .swiper-pagination { bottom: 0 !important; }
}