/* ==========================================================================
   Velocity — bold high-contrast streetwear / sneaker-drop poster design.

   Ported from the Stitch "Velocity Streetwear" design (the Bold High-
   Contrast Poster design system lives at docs/templates/
   Velocity_streetwear_e_commerce/velocity_streetwear/DESIGN.md): off-white
   paper canvas, ink-black typography and 2px structural borders, signal-
   orange hype accents, HARD offset shadows (zero blur — comic-book depth),
   uppercase Poppins 700 headlines with tight tracking over Inter UI,
   marquee strips, and STRICTLY sharp corners.

   This theme OWNS its header + the hero / trust / promo / featured /
   new-arrivals / lookbook / info-cards / newsletter home sections (vl-*
   markup) and INHERITS Modern Retail's functional pages and the brands /
   categories / journal home partials. This stylesheet therefore has two
   jobs:

     (a) style the NEW `vl-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the paper/gray palette, flattening every
         radius, swapping soft shadows for hard offsets, and drawing the
         2px ink border structure.

   Everything is scoped under `body.vl-theme` and reads the 5 customizer
   tokens (--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
   --ll-font-body, --ll-btn-radius) with theme.json-default fallbacks, so
   the customizer + live preview keep working: change the primary colour and
   every ink surface follows.
   ========================================================================== */

body.vl-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --vl-ink: var(--bs-primary, #111111);
    --vl-ink-rgb: var(--bs-primary-rgb, 17, 17, 17);
    --vl-orange: var(--ll-accent, #fd591e);
    --vl-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --vl-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Bold High-Contrast Poster palette (DESIGN.md) */
    --vl-paper: #faf9f5;      /* surface — weathered off-white canvas */
    --vl-gray: #efeeea;       /* surface-container */
    --vl-gray-high: #e9e8e4;  /* surface-container-high — Best Sellers band */
    --vl-gray-highest: #e3e2df; /* surface-container-highest — tiles well */
    --vl-media: #d9d9d4;      /* product media well (template card bg) */
    --vl-muted: #444748;      /* on-surface-variant */
    --vl-soft: #747878;       /* outline */
    --vl-line: #d8d7d2;       /* quiet internal dividers (checkout/account) */

    /* Hard offset shadows — 100% opacity, zero blur (DESIGN.md depth) */
    --vl-shadow-sm: 4px 4px 0 var(--vl-ink);
    --vl-shadow-lg: 8px 8px 0 var(--vl-ink);

    /* Re-point the inherited base neutrals at the paper palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows. */
    --mr-ink: #1b1c1a;
    --mr-muted: var(--vl-muted);
    --mr-soft: var(--vl-soft);
    --mr-surface: var(--vl-paper);
    --mr-band: var(--vl-gray);
    --mr-band-alt: var(--vl-gray-high);
    --mr-fill: var(--vl-gray-highest);
    --mr-border: var(--vl-line);
    --mr-border-strong: var(--vl-ink);
    --mr-radius: 0;
    --mr-gold: var(--vl-orange);
    --mr-shadow: none;

    background-color: var(--vl-paper);
    color: #1b1c1a;
    font-family: var(--vl-font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Shape discipline — sharp corners everywhere, no soft shadows. The
   customizer button_radius default is 0; hard-flatten the rest. Depth comes
   ONLY from the hard offsets applied further down.
   -------------------------------------------------------------------------- */
body.vl-theme .mr-card,
body.vl-theme .mr-card__media,
body.vl-theme .mr-card__wish,
body.vl-theme .mr-card__quickview,
body.vl-theme .mr-card__badge,
body.vl-theme .mr-badge,
body.vl-theme .mr-promo,
body.vl-theme .mr-promo__img,
body.vl-theme .mr-tile,
body.vl-theme .mr-article__media,
body.vl-theme .mr-article__media img,
body.vl-theme .mr-gallery__main,
body.vl-theme .mr-gallery__thumb,
body.vl-theme .mr-summary,
body.vl-theme .mr-panel,
body.vl-theme .mr-acct-nav,
body.vl-theme .mr-alert,
body.vl-theme .mr-page,
body.vl-theme .mr-status,
body.vl-theme .mr-social,
body.vl-theme .mr-search input,
body.vl-theme .mr-cart-row__media,
body.vl-theme .form-control,
body.vl-theme .form-select,
body.vl-theme .mr-btn,
body.vl-theme .dropdown-menu,
body.vl-theme .offcanvas,
body.vl-theme .mr-quickview .modal-content {
    border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   Typography — Poppins 700 uppercase poster headlines, tight tracking.
   -------------------------------------------------------------------------- */
body.vl-theme h1, body.vl-theme h2, body.vl-theme h3,
body.vl-theme h4, body.vl-theme h5, body.vl-theme h6,
body.vl-theme .mr-display, body.vl-theme .mr-headline {
    font-family: var(--vl-font-head);
    color: var(--vl-ink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

body.vl-theme .vl-display { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 0.95; }

body.vl-theme .mr-eyebrow {
    font-family: var(--vl-font-body);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--vl-orange);
}

body.vl-theme .vl-subline {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vl-muted);
}

/* Thick ink rule under section headers (the template's border-b-4) */
body.vl-theme .vl-rule { border-bottom: 4px solid var(--vl-ink); padding-bottom: 1rem; }

body.vl-theme .vl-keyline-link {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vl-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--vl-orange);
    padding-bottom: 0.3rem;
}

body.vl-theme .vl-keyline-link:hover { color: var(--vl-orange); }

/* --------------------------------------------------------------------------
   Buttons — 2px ink frames, uppercase label-bold, hard offsets on the hype
   CTAs. Hover shifts -2px/-2px to "open" the shadow gap; active closes it.
   -------------------------------------------------------------------------- */
body.vl-theme .mr-btn {
    border-width: 2px;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
        transform 0.15s ease, box-shadow 0.15s ease;
}

body.vl-theme .mr-btn--primary {
    background: var(--vl-ink);
    border-color: var(--vl-ink);
    color: #fff;
}

body.vl-theme .mr-btn--primary:hover { filter: none; background: var(--vl-orange); border-color: var(--vl-ink); color: #fff; }

body.vl-theme .mr-btn--outline,
body.vl-theme .vl-btn-ghost {
    border: 2px solid var(--vl-ink);
    color: var(--vl-ink);
    background: transparent;
}

body.vl-theme .mr-btn--outline:hover,
body.vl-theme .vl-btn-ghost:hover {
    background: var(--vl-ink);
    border-color: var(--vl-ink);
    color: #fff;
}

/* Hero primary — the template's signal-orange "SHOP THE DROP" with the 2px
   ink frame + hard shadow (the sitewide primary stays customizer-ink). */
body.vl-theme .vl-hero .mr-btn--primary {
    background: var(--vl-orange);
    border-color: var(--vl-ink);
    color: #fff;
}

body.vl-theme .vl-hero .mr-btn--primary:hover { background: var(--vl-ink); }

body.vl-theme .vl-btn-hard { box-shadow: var(--vl-shadow-sm); }
body.vl-theme .vl-btn-hard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--vl-ink); }
body.vl-theme .vl-btn-hard:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--vl-ink); }

body.vl-theme .vl-btn-ghost { background: var(--vl-paper); }

/* Inputs — thick 2px frames, no radius; focus flips the border orange. */
body.vl-theme .form-control,
body.vl-theme .form-select {
    border: 2px solid var(--vl-ink);
    background-color: #fff;
}

body.vl-theme .form-control:focus,
body.vl-theme .form-select:focus {
    border-color: var(--vl-orange);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Marquees — the announcement strip + trust ticker share one track. Two
   identical halves translate -50% for a seamless loop; reduced-motion
   freezes the track and collapses the clones to a single static row.
   -------------------------------------------------------------------------- */
@keyframes vl-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

body.vl-theme .vl-marquee {
    display: flex;
    width: max-content;
    align-items: center;
    animation: vl-marquee 22s linear infinite;
}

body.vl-theme .vl-announce {
    background: var(--vl-ink);
    color: #fff;
    padding: 0.55rem 0;
    overflow: hidden;
    text-align: left;
}

body.vl-theme .vl-announce .vl-marquee__item {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.vl-theme .vl-announce .vl-marquee__item::after {
    content: "\2014"; /* em dash — the template's NEW DROP separator */
    margin-inline: 1.75rem;
    color: var(--vl-orange);
}

/* Trust ticker band (black, orange square dots) */
body.vl-theme .vl-ticker {
    background: var(--vl-ink);
    color: #fff;
    border-block: 2px solid var(--vl-ink);
    padding-block: 0.85rem;
    overflow: hidden;
}

body.vl-theme .vl-ticker .vl-marquee { animation-duration: 30s; }

body.vl-theme .vl-ticker__item {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.vl-theme .vl-ticker__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--vl-orange);
    margin-inline: 2.5rem;
}

/* --------------------------------------------------------------------------
   Header — paper bar under the marquee, heavy uppercase wordmark left,
   shouted nav, boxed search, closed by the 2px ink keyline.
   -------------------------------------------------------------------------- */
body.vl-theme .vl-header {
    background: var(--vl-paper);
    border-bottom: 2px solid var(--vl-ink);
}

body.vl-theme .vl-logo {
    font-family: var(--vl-font-head);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--vl-ink);
}

body.vl-theme .vl-logo img { max-height: 40px; }

body.vl-theme .mr-nav-link {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vl-ink);
}

body.vl-theme .mr-nav-link:hover { color: var(--vl-orange); }
body.vl-theme .mr-nav-link.is-active { color: var(--vl-orange); border-bottom-color: var(--vl-orange); }

body.vl-theme .vl-search input {
    border: 2px solid var(--vl-ink);
    border-radius: 0;
    background: #fff;
}

body.vl-theme .vl-search input:focus { border-color: var(--vl-orange); box-shadow: none; }

body.vl-theme .mr-icon-btn { color: var(--vl-ink); }
body.vl-theme .mr-icon-btn:hover { color: var(--vl-orange); }

body.vl-theme .mr-badge {
    background: var(--vl-orange);
    border: 1px solid var(--vl-ink);
}

body.vl-theme .dropdown-menu { border: 2px solid var(--vl-ink); }

/* --------------------------------------------------------------------------
   Hero — split poster: massive stacked uppercase headline left, product
   shot floating over the rotated signal-orange shape block right.
   -------------------------------------------------------------------------- */
body.vl-theme .vl-hero { padding-block: clamp(3rem, 7vw, 5.5rem); overflow: hidden; }

body.vl-theme .vl-hero__title {
    font-size: clamp(3rem, 7.5vw, 6.25rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
    max-width: 11ch; /* forces the WEAR / THE / NOISE stack */
    margin-bottom: 1.75rem;
}

body.vl-theme .vl-hero__lead {
    border-left: 4px solid var(--vl-orange);
    padding-left: 1rem;
    max-width: 46ch;
    color: var(--vl-muted);
    margin-bottom: 2.25rem;
}

body.vl-theme .vl-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

body.vl-theme .vl-hero__figure {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
}

body.vl-theme .vl-hero__block {
    position: absolute;
    inset: 12% 8%;
    background: var(--vl-orange);
    border: 2px solid var(--vl-ink);
    transform: rotate(-8deg);
}

body.vl-theme .vl-hero__img {
    position: relative;
    width: min(88%, 520px);
    border: 2px solid var(--vl-ink);
    background: #fff;
    transform: rotate(6deg);
    box-shadow: var(--vl-shadow-lg);
}

/* --------------------------------------------------------------------------
   Promo tiles — chunky square blocks: 2px ink frame, hard shadow, hover
   lift, white label PLATE (+ optional orange chip) pinned bottom-left.
   -------------------------------------------------------------------------- */
body.vl-theme .vl-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    text-decoration: none;
    background: var(--vl-gray-highest);
    border: 2px solid var(--vl-ink);
    box-shadow: var(--vl-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.vl-theme .vl-tile:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--vl-ink); }

body.vl-theme .vl-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

body.vl-theme .vl-tile:hover .vl-tile__img { transform: scale(1.06); }

body.vl-theme .vl-tile__cap {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 2;
    display: grid;
    gap: 0.5rem;
    justify-items: start;
}

body.vl-theme .vl-tile__plate {
    background: #fff;
    color: var(--vl-ink);
    border: 2px solid var(--vl-ink);
    padding: 0.45rem 1.1rem;
    font-family: var(--vl-font-head);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

body.vl-theme .vl-tile__chip {
    background: var(--vl-orange);
    color: #fff;
    border: 2px solid var(--vl-ink);
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — the template's boxed sticker cards:
   2px ink frame, gray media well, bold uppercase name, oversized price,
   orange frame + hard offset on hover.
   -------------------------------------------------------------------------- */
body.vl-theme .mr-card {
    background: #fff;
    border: 2px solid var(--vl-ink);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body.vl-theme .mr-card:hover {
    border-color: var(--vl-orange);
    transform: translate(-2px, -2px);
    box-shadow: var(--vl-shadow-sm);
}

body.vl-theme .mr-card__media {
    background: var(--vl-media);
    border-bottom: 2px solid var(--vl-ink);
    margin-bottom: 0.9rem;
}

/* Text block inside the frame (media is full-bleed, copy is padded) */
body.vl-theme .mr-card > p,
body.vl-theme .mr-card > h3 { padding-inline: 0.9rem; }
body.vl-theme .mr-card > *:last-child { padding-bottom: 0.9rem; }

body.vl-theme .mr-card__eyebrow {
    color: var(--vl-soft);
    letter-spacing: 0.18em;
    font-size: 0.64rem;
}

body.vl-theme .mr-card__title,
body.vl-theme .mr-card__title a {
    font-family: var(--vl-font-body);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--vl-ink);
}

body.vl-theme .mr-card__title a:hover { color: var(--vl-orange); }

body.vl-theme .mr-card__price {
    font-family: var(--vl-font-head);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    color: var(--vl-ink);
}

/* Sale/demo sticker — rotated hype badge over the media well. */
body.vl-theme .mr-card__badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 2;
    background: var(--vl-orange);
    color: #fff;
    border: 2px solid var(--vl-ink);
    padding: 0.25rem 0.6rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(-4deg);
}

body.vl-theme .mr-card__wish,
body.vl-theme .mr-card__quickview {
    background: rgba(250, 249, 245, 0.92);
    color: var(--vl-ink);
}

body.vl-theme .mr-card__wish.is-active,
body.vl-theme .mr-card__wish:hover,
body.vl-theme .mr-card__quickview:hover { color: var(--vl-orange); }

body.vl-theme .mr-card__quick {
    background: var(--vl-ink);
    letter-spacing: 0.14em;
    font-weight: 700;
}

/* Best Sellers band — cool gray behind the cards, heavy ink rules. */
body.vl-theme .vl-sellers { border-block: 2px solid var(--vl-ink); }

/* --------------------------------------------------------------------------
   Lookbook — the ink-black campaign band: huge white heading, keyline link,
   gapless white-keyline photo grid with orange caption chips.
   -------------------------------------------------------------------------- */
body.vl-theme .vl-lookbook {
    background: var(--vl-ink);
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

body.vl-theme .vl-lookbook__title {
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 0.95;
}

body.vl-theme .vl-lookbook__link {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid #fff;
    padding-bottom: 0.25rem;
}

body.vl-theme .vl-lookbook__link:hover { color: var(--vl-orange); border-color: var(--vl-orange); }

body.vl-theme .vl-lookbook__grid { border: 2px solid #fff; }

body.vl-theme .vl-lookbook__cell {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #1f201e;
    border-bottom: 2px solid #fff;
}

body.vl-theme .vl-lookbook__grid > :last-child .vl-lookbook__cell { border-bottom: 0; }

body.vl-theme .vl-lookbook__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

body.vl-theme .vl-lookbook__cell:hover .vl-lookbook__img { transform: scale(1.06); }

body.vl-theme .vl-lookbook__chip {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    background: var(--vl-orange);
    color: #fff;
    padding: 0.3rem 0.8rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Info cards — the 3-up "drops feed": white cards, 2px ink frames, hard
   offsets, orange-underlined uppercase links.
   -------------------------------------------------------------------------- */
body.vl-theme .vl-info__card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #fff;
    border: 2px solid var(--vl-ink);
    box-shadow: var(--vl-shadow-sm);
    padding: 1.75rem;
}

body.vl-theme .vl-info__title { font-size: 1.3rem; margin: 0; }

body.vl-theme .vl-info__text { color: var(--vl-muted); font-size: 0.92rem; margin: 0; }

body.vl-theme .vl-info__link {
    margin-top: auto;
    align-self: flex-start;
    color: var(--vl-ink);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--vl-orange);
    text-underline-offset: 5px;
}

body.vl-theme .vl-info__link:hover { color: var(--vl-orange); }

/* --------------------------------------------------------------------------
   Newsletter — the full-width signal-orange "GET DROP ALERTS" band with
   heavy ink rules, huge heading left, boxed input + black JOIN right.
   -------------------------------------------------------------------------- */
body.vl-theme .vl-cta {
    background: var(--vl-orange);
    border-block: 4px solid var(--vl-ink);
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

body.vl-theme .vl-cta__eyebrow {
    color: var(--vl-ink);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.vl-theme .vl-cta__title {
    color: var(--vl-ink);
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    line-height: 0.95;
}

body.vl-theme .vl-cta__body {
    color: var(--vl-ink);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.vl-theme .vl-cta__form { display: flex; }

body.vl-theme .vl-cta__form input {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 2px solid var(--vl-ink);
    border-right: 0;
    padding: 0.9rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--vl-ink);
}

body.vl-theme .vl-cta__form input::placeholder { color: var(--vl-soft); text-transform: uppercase; }
body.vl-theme .vl-cta__form input:focus { outline: none; }

body.vl-theme .vl-cta__btn {
    background: var(--vl-ink);
    color: #fff;
    border: 2px solid var(--vl-ink);
    padding: 0.9rem 2rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.vl-theme .vl-cta__note { color: rgba(var(--vl-ink-rgb), 0.7); font-size: 0.74rem; }

/* --------------------------------------------------------------------------
   Inherited chrome — brand wall, journal, categories, footer on the paper
   system with the ink border structure.
   -------------------------------------------------------------------------- */

/* Brand wall — the template's dashed-frame shouted wordmarks. */
body.vl-theme .mr-brandstrip { border-block: 0; opacity: 1; padding-block: clamp(2rem, 5vw, 3rem); }

body.vl-theme .mr-brandstrip .mr-shell > * {
    flex: 1 1 12rem;
    text-align: center;
    border: 2px dashed var(--vl-ink);
    padding: 1.5rem 1rem;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

body.vl-theme .mr-brandstrip .mr-shell > *:hover { opacity: 1; }

body.vl-theme .mr-brandstrip span {
    font-family: var(--vl-font-head);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--vl-ink);
}

/* Journal + category tiles pick up the ink frame. */
body.vl-theme .mr-article__media,
body.vl-theme .mr-tile { border: 2px solid var(--vl-ink); background: var(--vl-gray-highest); }

body.vl-theme .mr-ulink { color: var(--vl-ink); border-bottom-color: var(--vl-orange); }
body.vl-theme .mr-ulink:hover { color: var(--vl-orange); border-color: var(--vl-orange); }

body.vl-theme .mr-page { border: 2px solid var(--vl-ink); }
body.vl-theme .mr-page.is-active { background: var(--vl-ink); border-color: var(--vl-ink); }

body.vl-theme .mr-quickview .modal-content { box-shadow: var(--vl-shadow-lg); border: 2px solid var(--vl-ink); }

/* Footer — the template's ink-black basement. */
body.vl-theme .mr-footer {
    background: var(--vl-ink);
    border-top: 2px solid var(--vl-ink);
    color: rgba(255, 255, 255, 0.75);
}

body.vl-theme .mr-footer h4 { color: #fff; letter-spacing: 0.18em; }

body.vl-theme .mr-footer a { color: rgba(255, 255, 255, 0.7); }
body.vl-theme .mr-footer a:hover { color: var(--vl-orange); }

body.vl-theme .mr-footer__brand {
    font-family: var(--vl-font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #fff;
}

body.vl-theme .mr-footer .mr-muted,
body.vl-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.55); }

body.vl-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.18); }

body.vl-theme .mr-social {
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
}

body.vl-theme .mr-social:hover { background: var(--vl-orange); border-color: var(--vl-orange); color: #fff; }

body.vl-theme .mr-footer .mr-btn--primary { background: var(--vl-orange); border-color: var(--vl-orange); }
body.vl-theme .mr-footer .form-control { border-color: transparent; }

/* --------------------------------------------------------------------------
   Motion discipline — freeze the marquees and collapse the clone copies to
   a single static row; drop the decorative lifts.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.vl-theme .vl-marquee {
        animation: none;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    body.vl-theme .vl-marquee__clone { display: none; }

    body.vl-theme .vl-announce .vl-marquee__item::after,
    body.vl-theme .vl-ticker__item:last-child .vl-ticker__dot { display: none; }

    body.vl-theme .mr-btn,
    body.vl-theme .mr-card,
    body.vl-theme .vl-tile {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frames): tighter margins keep the content
   loud; the poster headline and lookbook scale down.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.vl-theme .vl-logo { font-size: 1.35rem; }
    body.vl-theme .vl-hero__title { font-size: clamp(2.6rem, 11vw, 3.6rem); }
    body.vl-theme .vl-hero__figure { padding: 1rem; }
    body.vl-theme .vl-cta__form { width: 100%; }
}

@media (min-width: 768px) {
    body.vl-theme .vl-lookbook__cell { border-bottom: 0; border-right: 2px solid #fff; }
    body.vl-theme .vl-lookbook__grid > :last-child .vl-lookbook__cell { border-right: 0; }
}