/* =========================================================================
   «Шаг» — a shoe store with a sneaker-magazine feel.

   ART DIRECTION
   A concrete-grey page (warm kraft or dark asphalt as options), near-black
   ink and one acid-lime accent that only marks what is new, what is cheaper
   and what buys. Headlines are a condensed grotesk (Oswald) set huge and in
   capitals, tight; text is Geologica. Shoes are always shown in profile on
   concrete-toned tiles, and tilt a few degrees on hover as if stepping off.
   Square corners by default (a shoebox), hairline rules, numbered tiles,
   a running ticker over a masthead, and a footer built like the label on
   the end of a shoebox.

   1. Fonts   2. Design settings   3. Tokens   4. Base   5. Header
   6. Footer   7. Shared blocks   8. Own blocks   9. Shop
   10. Variants   11. Phones   12. Motion
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fonts — self-hosted variable families (OFL): Oswald and Geologica
   ship with this theme, Unbounded, Inter and Manrope come from the parent.
   ------------------------------------------------------------------------- */
@font-face {
    font-family: 'Shag Oswald';
    font-style: normal;
    font-display: swap;
    font-weight: 200 700;
    src: url(../fonts/oswald-cyrillic-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Shag Oswald';
    font-style: normal;
    font-display: swap;
    font-weight: 200 700;
    src: url(../fonts/oswald-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Shag Geologica';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/geologica-cyrillic-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Shag Geologica';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/geologica-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Shag Unbounded';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(/themes/default/assets/fonts/unbounded-cyrillic-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Shag Unbounded';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(/themes/default/assets/fonts/unbounded-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Shag Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/themes/default/assets/fonts/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Shag Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/themes/default/assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Shag Manrope';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(/themes/default/assets/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Shag Manrope';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(/themes/default/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   2. The owner's design settings (theme.json → design.controls). Core
   prints the chosen values as :root{--shag-…} after this file, so these
   are only the defaults; the tokens below derive from them.
   ------------------------------------------------------------------------- */
:root {
    --shag-accent: #c6f432;
    --shag-font-display: 'Shag Oswald', 'Arial Narrow', Impact, sans-serif;
    --shag-font-text: 'Shag Geologica', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --shag-radius: 0px;
}

/* -------------------------------------------------------------------------
   3. Tokens. --shp-* is the page palette (concrete by default; paper and
   asphalt in section 10), --shn-* the ink panels (footer, labels, bands).
   ------------------------------------------------------------------------- */
html.shag {
    --shp-bg: #e4e2dd;
    --shp-surface: #f1efea;
    --shp-tone: #d5d2ca;
    --shp-tone-2: #cac6bd;
    --shp-ink: #121211;
    --shp-ink-2: #3f3e3a;
    --shp-ink-3: #5c5a55;
    --shp-line: #c4c0b7;
    --shp-line-2: #8f8b83;
    --shp-blend: multiply;

    --shn-bg: #121211;
    --shn-surface: #1c1c1a;
    --shn-tone: #262624;
    --shn-tone-2: #1f1f1d;
    --shn-ink: #efede8;
    --shn-ink-2: #c4c1b9;
    --shn-ink-3: #9d9a92;
    --shn-line: #34332f;
    --shn-line-2: #5a5852;
    --shn-blend: normal;

    --sh-accent: var(--shag-accent);
    --sh-accent-ink: #121211;
    --sh-r: var(--shag-radius);
    --sh-r-sm: calc(var(--shag-radius) * 0.6);
    --sh-display: var(--shag-font-display);
    --sh-text: var(--shag-font-text);
    --sh-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --sh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --sh-case: uppercase;

    color-scheme: light;
}

html.shag,
.sh-day {
    --sh-bg: var(--shp-bg);
    --sh-surface: var(--shp-surface);
    --sh-tone: var(--shp-tone);
    --sh-tone-2: var(--shp-tone-2);
    --sh-ink: var(--shp-ink);
    --sh-ink-2: var(--shp-ink-2);
    --sh-ink-3: var(--shp-ink-3);
    --sh-line: var(--shp-line);
    --sh-line-2: var(--shp-line-2);
    --sh-blend: var(--shp-blend);
}

.sh-night,
.sh-ftr,
.sh-label--ink,
.sh-band--ink,
html.shag .cms-tone-dark,
html.shag .cms-on-dark {
    --sh-bg: var(--shn-bg);
    --sh-surface: var(--shn-surface);
    --sh-tone: var(--shn-tone);
    --sh-tone-2: var(--shn-tone-2);
    --sh-ink: var(--shn-ink);
    --sh-ink-2: var(--shn-ink-2);
    --sh-ink-3: var(--shn-ink-3);
    --sh-line: var(--shn-line);
    --sh-line-2: var(--shn-line-2);
    --sh-blend: var(--shn-blend);
}

html.shag,
.sh-day,
.sh-night,
.sh-ftr,
html.shag .cms-tone-dark,
html.shag .cms-on-dark {
    --paper: var(--sh-bg);
    --c-bg: var(--sh-bg);
    --c-surface: var(--sh-surface);
    --c-surface-sunk: var(--sh-tone);
    --c-text: var(--sh-ink);
    --c-text-strong: var(--sh-ink);
    --c-text-muted: var(--sh-ink-2);
    --c-text-faint: var(--sh-ink-3);
    --c-border: var(--sh-line);
    --c-border-strong: var(--sh-line-2);
    /* The UI's «accent» is the ink: monochrome controls; the lime only
       where the template puts it on purpose. */
    --c-accent: var(--sh-ink);
    --c-accent-hover: var(--sh-ink-2);
    --c-accent-soft: var(--sh-tone);
    --c-accent-contrast: var(--sh-bg);
    --c-link: var(--sh-ink);
    --c-link-hover: var(--sh-ink-2);
    --c-mark: var(--sh-accent);
    --c-mark-text: var(--sh-accent-ink);
    --c-mark-soft: color-mix(in srgb, var(--sh-accent) 30%, transparent);
    --c-slab: var(--shn-bg);
    --c-slab-text: var(--shn-ink);
    --c-slab-muted: var(--shn-ink-2);
    --c-success: #2f7a2a;
    --c-danger: #b8321f;
    --card-bg: var(--sh-surface);
    --card-border: 1px solid var(--sh-line);
    --card-shadow: none;
    color: var(--sh-ink);
}

html.shag {
    --font-ui: var(--sh-text);
    --font-display: var(--sh-display);
    --font-prose: var(--sh-text);
    --fw-heading: 600;
    --tr-tight: -0.01em;
    --tr-snug: 0;

    --r-xs: var(--sh-r-sm);
    --r-sm: var(--sh-r-sm);
    --r-md: var(--sh-r);
    --r-lg: var(--sh-r);
    --r-btn: var(--sh-r-sm);
    --card-radius: var(--sh-r);
    --shadow-sm: none;
    --shadow-md: 0 24px 48px -30px rgba(18, 18, 17, 0.45);
    --shadow-lg: 0 24px 48px -30px rgba(18, 18, 17, 0.45);
    --shadow-lift: 0 24px 48px -30px rgba(18, 18, 17, 0.45);

    --w-container: 74rem;
    --w-wide: 90rem;
    --gutter: clamp(1rem, 3vw, 2.5rem);
    --sp-xs: 1.25rem;
    --sp-sm: clamp(1.75rem, 1.2rem + 2vw, 3rem);
    --sp-md: clamp(3rem, 2rem + 4vw, 5.5rem);
    --sp-lg: clamp(4rem, 2.8rem + 5.5vw, 8rem);
}

/* -------------------------------------------------------------------------
   4. Base
   ------------------------------------------------------------------------- */
html.shag { background: var(--sh-bg); }
html.shag body {
    background: var(--sh-bg);
    color: var(--sh-ink);
    font-family: var(--sh-text);
    font-size: 1rem;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
html.shag ::selection { background: var(--sh-accent); color: var(--sh-accent-ink); }
html.shag :focus-visible { outline: 2px solid var(--sh-ink); outline-offset: 3px; box-shadow: 0 0 0 5px var(--sh-accent); }
html.shag a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

.sh-wrap {
    width: min(100% - 2 * var(--gutter), var(--w-wide));
    margin-inline: auto;
}

html.shag :is(h1, h2, h3, h4),
html.shag .cms-section__title {
    font-family: var(--sh-display);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.005em;
    text-transform: var(--sh-case);
    color: var(--sh-ink);
}
html.shag h3,
html.shag h4 { line-height: 1.05; }

html.shag .cms-section__title { font-size: clamp(2.2rem, 1.3rem + 3.8vw, 4.8rem); }
html.shag .cms-section__head { margin-bottom: clamp(1.25rem, 0.9rem + 1.4vw, 2.5rem); }
html.shag .cms-section__subtitle { color: var(--sh-ink-2); font-size: 1rem; line-height: 1.5; margin: 0.6rem 0 0; max-width: 34rem; }
@media (min-width: 60rem) {
    html.shag .cms-section__head--left:has(.cms-section__subtitle) {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: end;
        gap: 1rem 3rem;
    }
    html.shag .cms-section__head--left .cms-section__subtitle { justify-self: end; max-width: 26rem; padding-left: 1rem; border-left: 3px solid var(--sh-accent); }
}

html.shag .cms-tone-soft { --section-bg: var(--sh-surface); }
html.shag .cms-tone-dark { --section-bg: var(--shn-bg); }

/* kicker: a small spaced line with a lime square */
.sh-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    font-family: var(--sh-text);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sh-ink);
}
.sh-kicker::before {
    content: '';
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    background: var(--sh-accent);
    box-shadow: 0 0 0 1px var(--sh-ink);
}

/* Buttons: square slabs, condensed capitals. Ink by default; the accent for buying. */
.sh-btn,
html.shag .cms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3.1rem;
    padding: 0.7rem 1.5rem;
    font-family: var(--sh-display);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--sh-r-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color 180ms var(--sh-ease), color 180ms var(--sh-ease), border-color 180ms var(--sh-ease), transform 180ms var(--sh-ease), box-shadow 180ms var(--sh-ease);
}
.sh-btn .cms-icon { width: 1.05em; height: 1.05em; transition: transform 200ms var(--sh-ease); }
.sh-btn:hover .cms-icon { transform: translateX(3px); }
.sh-btn--ink,
html.shag .cms-btn--primary { background: var(--sh-ink); color: var(--sh-bg); border-color: var(--sh-ink); }
.sh-btn--ink:hover,
html.shag .cms-btn--primary:hover { background: var(--sh-accent); border-color: var(--sh-ink); color: var(--sh-accent-ink); box-shadow: 4px 4px 0 var(--sh-ink); transform: translate(-2px, -2px); }
.sh-btn--line,
html.shag :is(.cms-btn--ghost, .cms-btn--outline, .cms-btn--secondary) { background: transparent; color: var(--sh-ink); border-color: var(--sh-ink); }
.sh-btn--line:hover,
html.shag :is(.cms-btn--ghost, .cms-btn--outline, .cms-btn--secondary):hover { background: var(--sh-ink); color: var(--sh-bg); border-color: var(--sh-ink); }
.sh-btn--accent { background: var(--sh-accent); color: var(--sh-accent-ink); border-color: var(--sh-ink); }

.sh-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    font-family: var(--sh-display);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sh-ink);
    text-decoration: none;
    background: linear-gradient(var(--sh-accent), var(--sh-accent)) left 88% / 100% 0.35em no-repeat;
    transition: background-size 200ms var(--sh-ease);
}
.sh-more:hover { background-size: 100% 0.8em; }
.sh-more .cms-icon { width: 1.05em; height: 1.05em; }

.sh-tag {
    display: inline-block;
    padding: 0.28rem 0.55rem;
    font-family: var(--sh-display);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--sh-accent-ink);
    background: var(--sh-accent);
    border: 1px solid var(--sh-ink);
    border-radius: var(--sh-r-sm);
}

/* A concrete tile: the tone a shoe stands on, with a faint grain. */
.sh-tone {
    position: relative;
    isolation: isolate;
    background-color: var(--sh-tone);
    background-image: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--sh-tone-2) 70%, transparent));
}
html[data-shag-grain="on"] .sh-tone::after,
html[data-shag-grain="on"] .shag-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--sh-grain);
    opacity: 0.9;
}

/* The tilt: a shoe steps off the ground on hover. */
.sh-tilt { transition: transform 450ms var(--sh-ease), filter 450ms var(--sh-ease); transform-origin: 70% 80%; }

/* -------------------------------------------------------------------------
   5. Header
   ------------------------------------------------------------------------- */
.sh-hdr {
    position: relative;
    z-index: 40;
    background: var(--sh-bg);
    border: 0;
    box-shadow: none;
}
.sh-hdr.site-header--sticky { position: sticky; top: 0; }

/* the ticker */
.sh-tick {
    overflow: hidden;
    background: var(--shn-bg);
    color: var(--shn-ink);
    font-family: var(--sh-display);
    font-size: 0.86rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sh-tick__track { display: flex; width: max-content; }
.sh-tick__run { display: flex; align-items: center; flex: none; min-height: 2.2rem; }
.sh-tick__item { display: inline-flex; align-items: center; padding: 0 1.4rem; }
.sh-tick__item::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 1.4rem;
    background: var(--sh-accent);
    transform: rotate(45deg);
}
.sh-tick .hdr-el { display: inline-flex; align-items: center; }
.sh-tick .hdr-text { display: inline-flex; align-items: center; gap: 0.4rem; }
.sh-tick .hdr-text .cms-icon { width: 14px; height: 14px; }
.sh-tick .hdr-links { display: flex; gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.sh-tick a { color: var(--shn-ink); text-decoration: none; }
.sh-tick a:hover { color: var(--sh-accent); }
.sh-tick .hdr-phone { display: flex !important; flex-direction: row; align-items: baseline; gap: 0.5rem; }
.sh-tick .hdr-phone__number { color: var(--shn-ink); }
.sh-tick .hdr-phone__caption { color: var(--shn-ink-3); }
.sh-tick .hdr-phone__icon { display: none; }
html[data-shag-topbar="ticker"] .sh-tick__track { animation: sh-marquee 48s linear infinite; }
html[data-shag-topbar="ticker"] .sh-tick:hover .sh-tick__track { animation-play-state: paused; }
html[data-shag-topbar="static"] .sh-tick__track { width: auto; justify-content: center; }
html[data-shag-topbar="static"] .sh-tick__run { flex-wrap: wrap; justify-content: center; }
html[data-shag-topbar="static"] .sh-tick__run + .sh-tick__run { display: none; }
html[data-shag-topbar="off"] .sh-tick { display: none; }
@keyframes sh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* the masthead */
.sh-hdr__bar { border-bottom: 1.5px solid var(--sh-ink); }
.sh-hdr__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "left logo right" "nav nav nav";
    align-items: center;
    column-gap: 1.25rem;
}
.sh-hdr__left { grid-area: left; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.sh-hdr__right { grid-area: right; display: flex; align-items: center; justify-content: flex-end; gap: 0.15rem; min-width: 0; }
.sh-logo {
    grid-area: logo;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.7rem 0 0.55rem;
    color: var(--sh-ink);
    text-decoration: none;
}
.sh-logo__img { display: block; height: var(--logo-h, 36px); width: auto; }
.sh-logo__name {
    font-family: var(--sh-display);
    font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.7rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sh-logo:hover .sh-logo__name { text-decoration: underline; text-decoration-color: var(--sh-accent); text-decoration-thickness: 0.18em; text-underline-offset: 0.08em; }

.sh-hdr__nav {
    grid-area: nav;
    display: flex;
    justify-content: center;
    min-width: 0;
    border-top: 1px solid var(--sh-line);
}
.sh-hdr__nav .hdr-nav { min-width: 0; }
.sh-hdr__nav .hdr-nav__list { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
.sh-hdr__nav .hdr-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.9rem;
    padding: 0.4rem 0.95rem;
    font-family: var(--sh-display);
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sh-ink);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 0;
}
.sh-hdr__nav .hdr-nav__link:hover,
.sh-hdr__nav .hdr-nav__link.is-active { background: var(--sh-ink); color: var(--sh-bg); }
.sh-hdr__nav .hdr-nav__item--highlight > .hdr-nav__link { background: var(--sh-accent); color: var(--sh-accent-ink); }
.sh-hdr__nav .hdr-nav__item--highlight > .hdr-nav__link:hover { background: var(--sh-ink); color: var(--sh-bg); }
.sh-hdr__nav .hdr-nav__toggle { color: var(--sh-ink-3); }
.sh-hdr__nav .hdr-sub {
    background: var(--sh-surface);
    border: 1.5px solid var(--sh-ink);
    border-radius: var(--sh-r-sm);
    box-shadow: 6px 6px 0 var(--sh-ink);
}
.sh-hdr__nav .hdr-sub__link { border-radius: 0; color: var(--sh-ink); font-weight: 500; }
.sh-hdr__nav .hdr-sub__link:hover { background: var(--sh-accent); color: var(--sh-accent-ink); }

.sh-hdr__left :is(.shop-hsearch-wrap, .shop-hsearch) { width: 15rem; max-width: 100%; }
html.shag .sh-hdr .shop-hsearch__input,
html.shag .sh-hdr .shop-hsearch input[type="search"] {
    min-height: 2.75rem;
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid var(--sh-ink);
    border-radius: 0;
    color: var(--sh-ink);
    font-size: 0.92rem;
}
html.shag .sh-hdr .shop-hsearch__input:focus { background: var(--sh-surface); }
.sh-hdr__right :is(.shop-hlink, .hdr-icon-btn) {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--sh-r-sm);
    color: var(--sh-ink);
    background: transparent;
    border-color: transparent;
}
.sh-hdr__right :is(.shop-hlink, .hdr-icon-btn):hover { background: var(--sh-ink); color: var(--sh-bg); }
html.shag .sh-hdr .shop-minicart {
    min-height: 2.75rem;
    padding: 0.4rem 1rem;
    border-radius: var(--sh-r-sm);
    background: var(--sh-ink);
    color: var(--sh-bg);
    border-color: var(--sh-ink);
    font-family: var(--sh-display);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
html.shag .sh-hdr .shop-minicart:hover { background: var(--sh-accent); color: var(--sh-accent-ink); }
html.shag :is(.shop-hlink__count, .shop-hlink__badge, .shop-minicart__count) { background: var(--sh-accent); color: var(--sh-accent-ink); border-radius: 0; }
.sh-hdr__right .hdr-el--button .cms-btn { min-height: 2.75rem; padding: 0.45rem 1rem; }
.sh-burger { border-radius: var(--sh-r-sm); background: var(--sh-ink); border-color: var(--sh-ink); color: var(--sh-bg); }

html.shag .sh-drawer { background: var(--sh-bg); border-color: var(--sh-ink); }
html.shag .sh-drawer .hdr-drawer__head { background: var(--sh-bg); border-color: var(--sh-ink); }
.sh-logo--drawer { padding: 0; }
.sh-logo--drawer .sh-logo__name { font-size: 2rem; }
html.shag .sh-drawer .hdr-drawer__nav a { font-family: var(--sh-display); font-size: 1.3rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* -------------------------------------------------------------------------
   6. Footer — the shoebox label
   ------------------------------------------------------------------------- */
.sh-ftr {
    margin-top: var(--sp-md);
    padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 1.25rem;
    background: var(--shn-bg);
    color: var(--shn-ink-2);
    border: 0;
}
.sh-ftr__band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 1rem 2.5rem;
    padding: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    border-bottom: 1px solid var(--shn-line-2);
}
.sh-ftr__band-title { margin: 0 0 0.35rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); color: var(--shn-ink); }
.sh-ftr__band-lead { margin: 0; }
.sh-ftr__label {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
    border: 1.5px solid var(--shn-ink);
    border-radius: var(--sh-r);
}
.sh-ftr__cell {
    position: relative;
    min-width: 0;
    padding: 2.4rem clamp(1rem, 0.8rem + 0.8vw, 1.6rem) 1.5rem;
    border-left: 1px solid var(--shn-line-2);
}
.sh-ftr__cell:first-child { border-left: 0; }
.sh-ftr__no {
    position: absolute;
    top: 0.7rem;
    left: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
    font-family: var(--sh-display);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--shn-ink-3);
}
.sh-ftr__cell--about { display: flex; flex-direction: column; gap: 1rem; }
.sh-ftr__cap {
    margin: 0 0 1rem;
    font-family: var(--sh-display);
    font-size: 1.15rem !important;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sh-accent) !important;
}
.sh-ftr__about { margin: 0; max-width: 28rem; font-size: 0.93rem; line-height: 1.6; color: var(--shn-ink-2); }
.sh-logo--ftr { padding: 0; justify-content: flex-start; color: var(--shn-ink); }
.sh-logo--ftr .sh-logo__name { font-size: 2.4rem; }
.sh-ftr__menu { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.1rem; }
.sh-ftr__menu a { display: inline-block; padding: 0.32rem 0; color: var(--shn-ink); text-decoration: none; font-size: 0.95rem; }
.sh-ftr__menu a:hover { color: var(--sh-accent); }
.sh-ftr__menu a.is-hot { color: var(--sh-accent); }
.sh-ftr__contacts { font-style: normal; display: grid; gap: 0.65rem; }
.sh-ftr__contacts p { margin: 0; }
.sh-ftr__phone a { font-family: var(--sh-display); font-size: 1.35rem; font-weight: 500; letter-spacing: 0.02em; color: var(--shn-ink); text-decoration: none; }
.sh-ftr__phone span { display: block; font-size: 0.82rem; color: var(--shn-ink-3); }
.sh-ftr__line { display: flex; gap: 0.5rem; font-size: 0.9rem; line-height: 1.45; }
.sh-ftr__line .cms-icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--shn-ink-3); }
.sh-ftr__line a { color: var(--shn-ink); }
.sh-ftr__pay { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sh-ftr__pay-item { padding: 0.3rem 0.6rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--shn-ink); border: 1px solid var(--shn-line-2); border-radius: var(--sh-r-sm); }
.sh-ftr__text { margin: 0; font-size: 0.92rem; }
html.shag .sh-ftr__socials .site-socials__link { background: transparent; color: var(--shn-ink); border: 1px solid var(--shn-line-2); border-radius: var(--sh-r-sm); }
html.shag .sh-ftr__socials .site-socials__link:hover { background: var(--sh-accent); color: var(--sh-accent-ink); border-color: var(--sh-accent); }

.sh-ftr__mast {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin: clamp(1.25rem, 1rem + 1vw, 2rem) 0 0;
    overflow: hidden;
}
.sh-ftr__word {
    font-family: var(--sh-display);
    font-size: clamp(5rem, 2rem + 16vw, 17rem);
    font-weight: 700;
    line-height: 0.9;
    padding-bottom: 0.04em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--shn-ink-3);
    white-space: nowrap;
}
.sh-ftr__barcode {
    flex: none;
    width: clamp(7rem, 5rem + 8vw, 14rem);
    height: clamp(3rem, 2rem + 3vw, 5.5rem);
    margin-bottom: 0.4rem;
    background: repeating-linear-gradient(90deg, var(--shn-ink) 0 2px, transparent 2px 5px, var(--shn-ink) 5px 6px, transparent 6px 9px, var(--shn-ink) 9px 13px, transparent 13px 15px);
    opacity: 0.85;
}
.sh-ftr__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 1.1rem 0 0;
    margin-top: 1rem;
    border-top: 1px solid var(--shn-line-2);
    font-size: 0.8rem;
    color: var(--shn-ink-3);
}
.sh-ftr__copy { margin: 0; max-width: 46rem; }
.sh-ftr__links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.sh-ftr__links a { color: var(--shn-ink-2); }
.sh-ftr__company { margin: 0; }

/* -------------------------------------------------------------------------
   7. Shared blocks
   ------------------------------------------------------------------------- */
html.shag .cms-card { border-radius: var(--sh-r); }

/* FAQ: ruled rows, a square plus. */
html.shag .cms-faq__item { background: transparent; border: 0; border-top: 1.5px solid var(--sh-ink); border-radius: 0; }
html.shag .cms-faq__item:last-child { border-bottom: 1.5px solid var(--sh-ink); }
html.shag .cms-faq__item + .cms-faq__item { margin-top: 0; }
html.shag .cms-faq__q { font-family: var(--sh-display); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); font-weight: 500; letter-spacing: 0.02em; text-transform: var(--sh-case); }

/* Steps / stats / testimonials: ruled cells. */
html.shag :is(.cms-steps__item, .cms-stats__item, .cms-testimonial) { border-radius: var(--sh-r); }
html.shag .cms-testimonial { background: var(--sh-surface); border: 1px solid var(--sh-line); }
html.shag .cms-step__marker {
    background: var(--sh-accent);
    color: var(--sh-accent-ink);
    font-family: var(--sh-display);
    font-weight: 600;
    border-radius: 0;
    box-shadow: 0 0 0 1.5px var(--sh-ink);
}
html.shag .cms-step__title { font-size: 1.3rem; }
html.shag .cms-step__duration { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
html.shag .cms-faq__toggle { border-radius: 0; background: var(--sh-ink); color: var(--sh-bg); }
html.shag .cms-faq__question { font-family: var(--sh-display); font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem); font-weight: 500; letter-spacing: 0.02em; text-transform: var(--sh-case); }
html.shag :is(.cms-steps__num, .cms-steps__index) {
    background: var(--sh-accent);
    color: var(--sh-accent-ink);
    font-family: var(--sh-display);
    border-radius: 0;
    box-shadow: 0 0 0 1.5px var(--sh-ink);
}
html.shag .cms-stats__value { font-family: var(--sh-display); }

/* The lead form. */
html.shag .cms-leadform__box { border-radius: var(--sh-r); border: 1.5px solid var(--sh-ink); box-shadow: 8px 8px 0 var(--sh-ink); background: var(--sh-surface); }
html.shag :is(.cms-form input:not([type="checkbox"]):not([type="radio"]), .cms-form select, .cms-form textarea, .cms-input, .cms-select, .cms-textarea) {
    border-radius: var(--sh-r-sm);
    background: var(--sh-bg);
    border-color: var(--sh-line-2);
}
html.shag :is(.cms-form input, .cms-form select, .cms-form textarea):focus { border-color: var(--sh-ink); }
html.shag input[type="checkbox"],
html.shag input[type="radio"] { accent-color: var(--sh-ink); }

/* media + text */
html.shag :is(.cms-media-text__media, .cms-mediatext__media) img { border-radius: var(--sh-r); }

/* -------------------------------------------------------------------------
   8. Own blocks
   ------------------------------------------------------------------------- */

/* --- cover --- */
.sh-hero { display: grid; gap: clamp(1rem, 0.6rem + 1.5vw, 2rem); position: relative; }
.sh-hero__copy { position: relative; z-index: 2; }
.sh-hero__title {
    margin: 0;
    font-size: clamp(3.4rem, 1rem + 10.5vw, 11.5rem) !important;
    line-height: 0.84 !important;
    letter-spacing: -0.01em !important;
    font-weight: 700 !important;
}
.sh-hero__sub { margin: 1rem 0 0; font-size: 1.1rem; color: var(--sh-ink-2); }
.sh-hero__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(16rem, 10rem + 22vw, 32rem);
}
.sh-hero__word {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    font-family: var(--sh-display);
    font-size: clamp(8rem, 3rem + 26vw, 28rem);
    font-weight: 700;
    line-height: 0.8;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--sh-line-2);
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.sh-hero__media { position: relative; z-index: 1; width: min(100%, 64rem); }
.sh-hero__img {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: var(--sh-blend);
    transition: transform 700ms var(--sh-ease);
    transform-origin: 60% 80%;
}
.sh-hero__stage:hover .sh-hero__img { transform: rotate(-7deg) translateY(-3%); }
.sh-sticker {
    position: absolute;
    z-index: 3;
    right: clamp(0.5rem, 4vw, 5rem);
    top: 8%;
    display: grid;
    place-content: center;
    gap: 0.15rem;
    width: clamp(7.5rem, 5.5rem + 5vw, 10.5rem);
    aspect-ratio: 1;
    margin: 0;
    padding: 1rem;
    text-align: center;
    color: var(--sh-accent-ink);
    background: var(--sh-accent);
    border: 1.5px solid var(--sh-ink);
    border-radius: 50%;
    text-decoration: none;
    transform: rotate(12deg);
    transition: transform 300ms var(--sh-ease);
}
a.sh-sticker:hover { transform: rotate(0deg) scale(1.05); }
.sh-sticker__top { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; }
.sh-sticker__price { font-family: var(--sh-display); font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); font-weight: 600; line-height: 1; white-space: nowrap; }
.sh-hero__foot {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 1.25rem 2.5rem;
    padding-top: 1.25rem;
    border-top: 1.5px solid var(--sh-ink);
}
.sh-hero__lead { margin: 0; max-width: 34rem; font-size: 1.05rem; line-height: 1.55; color: var(--sh-ink-2); }
.sh-hero__specs { margin: 0; display: grid; gap: 0; }
.sh-hero__spec { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--sh-line); font-size: 0.9rem; }
.sh-hero__spec dt { color: var(--sh-ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; font-weight: 600; align-self: center; }
.sh-hero__spec dd { margin: 0; font-weight: 600; text-align: right; }
.sh-hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; }

/* cover: the headline across, the pair crossing into it */
.sh-hero--cover .sh-hero__stage { margin-top: clamp(-5rem, -1rem - 6vw, -1.5rem); }
.sh-hero--cover.sh-hero--noimage .sh-hero__stage { min-height: 6rem; margin-top: 0; }

/* split: the copy on the left, the stage on the right */
@media (min-width: 60rem) {
    .sh-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "copy stage" "foot stage"; align-items: end; }
    .sh-hero--split .sh-hero__copy { grid-area: copy; }
    .sh-hero--split .sh-hero__stage { grid-area: stage; }
    .sh-hero--split .sh-hero__foot { grid-area: foot; grid-template-columns: minmax(0, 1fr); }
    .sh-hero--split .sh-hero__title { font-size: clamp(3rem, 1rem + 5.5vw, 7rem) !important; }
    .sh-hero--split .sh-hero__actions { justify-content: flex-start; }
}

/* --- editorial tiles --- */
.sh-edit__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.5rem, 0.3rem + 0.6vw, 0.9rem); }
.sh-edit--mosaic .sh-edit__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(14rem, 20vw);
}
.sh-edit--mosaic .sh-edit__tile:first-child { grid-column: span 2; grid-row: span 2; }
.sh-edit--mosaic.sh-edit--n3 .sh-edit__tile:not(:first-child),
.sh-edit--mosaic.sh-edit--n4 .sh-edit__tile:nth-child(4),
.sh-edit--mosaic.sh-edit--n7 .sh-edit__tile:nth-child(n + 6) { grid-column: span 2; }
/* six: the last tile is a wide, low banner under the grid */
.sh-edit--mosaic.sh-edit--n6 .sh-edit__tile:nth-child(6) { grid-column: 1 / -1; min-height: 11rem; }
.sh-edit--mosaic.sh-edit--n6 .sh-edit__tile:nth-child(6) .sh-edit__media { inset: 6% 4% 6% 45%; }
.sh-edit--row .sh-edit__grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); grid-auto-rows: minmax(22rem, 1fr); }
.sh-edit__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    padding: clamp(0.9rem, 0.7rem + 0.8vw, 1.5rem);
    overflow: hidden;
    border-radius: var(--sh-r);
    transition: background-color 300ms var(--sh-ease);
}
.sh-edit__tile:hover { background-color: var(--sh-tone-2); }
.sh-edit__no {
    position: absolute;
    top: clamp(0.8rem, 0.6rem + 0.6vw, 1.3rem);
    left: clamp(0.9rem, 0.7rem + 0.8vw, 1.5rem);
    z-index: 2;
    font-family: var(--sh-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--sh-ink);
}
.sh-edit__tile .sh-tag { position: absolute; z-index: 2; top: clamp(0.7rem, 0.5rem + 0.6vw, 1.2rem); right: clamp(0.7rem, 0.5rem + 0.6vw, 1.2rem); }
.sh-edit__media { position: absolute; inset: 7% 6% 27%; z-index: 1; display: grid; place-items: center; }
.sh-edit__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: var(--sh-blend); }
.sh-edit__tile:hover .sh-edit__img { transform: rotate(-9deg) translateY(-6%); }
.sh-edit__text { position: relative; z-index: 2; display: grid; gap: 0.25rem; padding-right: 3rem; }
.sh-edit__title { margin: 0; font-size: clamp(1.5rem, 1rem + 1.25vw, 2.4rem) !important; line-height: 0.92 !important; overflow-wrap: anywhere; }
.sh-edit--mosaic .sh-edit__tile:first-child .sh-edit__title { font-size: clamp(2.6rem, 1.4rem + 3.6vw, 5.4rem) !important; }
.sh-edit__link { color: inherit; text-decoration: none; }
.sh-edit__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.sh-edit__meta { font-size: 0.9rem; color: var(--sh-ink-2); }
.sh-edit__arrow {
    position: absolute;
    z-index: 2;
    right: clamp(0.9rem, 0.7rem + 0.8vw, 1.5rem);
    bottom: clamp(0.9rem, 0.7rem + 0.8vw, 1.5rem);
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    color: var(--sh-bg);
    background: var(--sh-ink);
    border-radius: var(--sh-r-sm);
    transition: background-color 200ms var(--sh-ease), color 200ms var(--sh-ease), transform 250ms var(--sh-ease);
}
.sh-edit__arrow .cms-icon { width: 1.1rem; height: 1.1rem; }
.sh-edit__tile:hover .sh-edit__arrow { background: var(--sh-accent); color: var(--sh-accent-ink); transform: rotate(45deg); }

/* --- lookbook --- */
.sh-look { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); align-items: start; }
.sh-look__intro { position: sticky; top: 9rem; }
.sh-look__title { margin: 0 0 1rem; font-size: clamp(2.6rem, 1.4rem + 4vw, 5.6rem) !important; line-height: 0.88 !important; }
.sh-look__sub { margin: 0 0 1rem; color: var(--sh-ink-2); }
.sh-look__lead { margin: 0 0 1.25rem; max-width: 26rem; line-height: 1.6; color: var(--sh-ink-2); }
.sh-look__count {
    margin: clamp(1.5rem, 1rem + 3vw, 4rem) 0 0;
    font-family: var(--sh-display);
    font-size: clamp(5rem, 3rem + 7vw, 11rem);
    font-weight: 700;
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--sh-ink);
}
.sh-look__frames { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 0.6rem + 1.5vw, 2rem); }
.sh-look__frame:nth-child(even) { margin-top: clamp(3rem, 2rem + 6vw, 9rem); }
.sh-look__pic { position: relative; margin: 0; overflow: hidden; border-radius: var(--sh-r); background: var(--sh-tone); aspect-ratio: 4 / 5; }
.sh-look__pic a { display: block; height: 100%; }
.sh-look__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--sh-ease); }
.sh-look__frame:hover .sh-look__img { transform: scale(1.04); }
.sh-look__no {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.35rem 0.7rem;
    font-family: var(--sh-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--sh-accent-ink);
    background: var(--sh-accent);
}
.sh-look__cap { margin: 0.9rem 0 0.4rem; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.8rem) !important; }
.sh-look__cap a { color: inherit; text-decoration: none; }
.sh-look__cap a:hover { text-decoration: underline; text-decoration-color: var(--sh-accent); text-decoration-thickness: 0.15em; }
.sh-look__items { list-style: none; margin: 0; padding: 0; }
.sh-look__items li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-top: 1px solid var(--sh-line); font-size: 0.9rem; }
.sh-look__items b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- size guide --- */
.sh-size { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.sh-size__lead { margin: 0 0 1.5rem; max-width: 34rem; font-size: 1.05rem; line-height: 1.6; color: var(--sh-ink-2); }
.sh-size__art { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 0 1.75rem; }
.sh-size__ruler { fill: var(--sh-accent); stroke: var(--sh-ink); stroke-width: 1.5; }
.sh-size__tick { stroke: var(--sh-ink); stroke-width: 1.2; }
.sh-size__foot { fill: var(--sh-tone); stroke: var(--sh-ink); stroke-width: 1.5; }
.sh-size__mark { stroke: var(--sh-ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.sh-size__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sh-size__step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1.5px solid var(--sh-ink); }
.sh-size__n { font-family: var(--sh-display); font-size: 2.6rem; font-weight: 700; line-height: 0.85; color: var(--sh-ink); }
.sh-size__step-title { margin: 0 0 0.35rem; font-size: 1.3rem !important; }
.sh-size__step-text { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--sh-ink-2); }
.sh-size__table-wrap { padding: clamp(1rem, 0.7rem + 1.2vw, 2rem); background: var(--sh-surface); border: 1.5px solid var(--sh-ink); border-radius: var(--sh-r); }
.sh-size__finder { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; align-items: center; gap: 0.5rem 1rem; margin: 0 0 1.25rem; padding: 1rem; background: var(--sh-accent); color: var(--sh-accent-ink); border-radius: var(--sh-r-sm); }
.sh-size__finder-label { font-family: var(--sh-display); font-size: 1.15rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.sh-size__finder-input { width: 100%; min-height: 2.9rem; padding: 0.5rem 0.75rem; font: 600 1.2rem/1 var(--sh-text); color: #121211; background: #fff; border: 1.5px solid #121211; border-radius: var(--sh-r-sm); }
.sh-size__finder-out { grid-column: 1 / -1; min-height: 1.3em; font-weight: 600; }
.sh-size__finder-out:empty { display: none; }
.sh-size__table-title { margin: 0 0 0.75rem; font-size: 1.6rem !important; }
.sh-size__scroll { overflow-x: auto; }
.sh-size__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sh-size__table th,
.sh-size__table td { padding: 0.55rem 0.6rem; text-align: center; border-bottom: 1px solid var(--sh-line); }
.sh-size__table thead th { font-family: var(--sh-display); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1.5px solid var(--sh-ink); }
.sh-size__table tbody th { font-weight: 600; text-align: left; }
.sh-size__table tbody tr { transition: background-color 200ms var(--sh-ease); }
.sh-size__table tbody tr:hover { background: var(--sh-tone); }
.sh-size__table tbody tr.is-match { background: var(--sh-ink); color: var(--sh-bg); }
.sh-size__note { margin: 1rem 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--sh-ink-2); }
.sh-size__cta { margin: 1.25rem 0 0; }

/* --- shoebox label --- */
.sh-label__panel {
    position: relative;
    padding: clamp(1rem, 0.7rem + 1.2vw, 2rem);
    color: var(--sh-ink);
    background: var(--sh-bg);
    border: 1.5px solid var(--sh-ink);
    border-radius: var(--sh-r);
}
.sh-label--ink .sh-label__panel { background: var(--shn-bg); border-color: var(--shn-bg); }
.sh-label--kraft .sh-label__panel { background: #cdb48f; --sh-ink: #1a140c; --sh-ink-2: #3a2f20; --sh-ink-3: #4d4030; --sh-line: rgba(26, 20, 12, 0.35); }
.sh-label--accent .sh-label__panel { background: var(--sh-accent); --sh-ink: #121211; --sh-ink-2: #262622; --sh-ink-3: #33332d; --sh-line: rgba(18, 18, 17, 0.35); }
.sh-label__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: 0.25rem; border-bottom: 1.5px solid var(--sh-ink); }
.sh-label__code { margin: 0; font-family: var(--sh-display); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sh-ink); }
.sh-label__barcode {
    flex: none;
    width: clamp(6rem, 4rem + 6vw, 11rem);
    height: 2.1rem;
    margin-left: auto;
    background: repeating-linear-gradient(90deg, var(--sh-ink) 0 2px, transparent 2px 4px, var(--sh-ink) 4px 5px, transparent 5px 8px, var(--sh-ink) 8px 11px, transparent 11px 13px);
}
.sh-label__cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sh-label__cell { position: relative; min-width: 0; padding: 1.25rem 1.25rem 0.5rem 0; }
.sh-label__cell + .sh-label__cell { padding-left: 1.25rem; border-left: 1px solid var(--sh-line); }
.sh-label__icon { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: 0.9rem; color: var(--sh-ink); border: 1px solid var(--sh-ink); border-radius: var(--sh-r-sm); }
.sh-label--ink .sh-label__icon { color: var(--sh-accent); border-color: var(--sh-accent); }
.sh-label__icon .cms-icon { width: 1.1rem; height: 1.1rem; }
.sh-label__value { margin: 0 0 0.35rem; font-family: var(--sh-display); font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.6rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.005em; text-transform: uppercase; color: var(--sh-ink); }
.sh-label--ink .sh-label__value { color: var(--sh-accent); }
.sh-label__title { margin: 0 0 0.4rem; font-family: var(--sh-text) !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.3 !important; color: var(--sh-ink) !important; }
.sh-label__text { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--sh-ink-2); }
.sh-label__more { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--sh-line); }
.sh-label--ink .sh-more { color: var(--shn-ink); }
.sh-label--ink .sh-more { background-image: linear-gradient(var(--sh-accent), var(--sh-accent)); background-size: 100% 2px; background-position: left bottom; }

/* --- word band --- */
.sh-band { overflow: hidden; border-block: 1.5px solid var(--sh-ink); }
.sh-band__track { display: flex; width: max-content; }
.sh-band--move .sh-band__track { animation: sh-marquee 36s linear infinite; }
.sh-band--move:hover .sh-band__track { animation-play-state: paused; }
.sh-band:not(.sh-band--move) .sh-band__track { width: auto; }
.sh-band__run { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
.sh-band:not(.sh-band--move) .sh-band__run { flex-wrap: wrap; justify-content: center; }
.sh-band__word {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0;
    font-family: var(--sh-display);
    font-size: clamp(2.6rem, 1.4rem + 5vw, 6.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sh-band__word::after {
    content: '';
    flex: none;
    width: 0.28em;
    height: 0.28em;
    margin: 0 0.45em;
    background: var(--sh-accent);
    border: 1.5px solid var(--sh-ink);
    transform: rotate(45deg);
}
.sh-band__word a { color: inherit; text-decoration: none; }
.sh-band--outline .sh-band__word { color: transparent; -webkit-text-stroke: 1.5px var(--sh-ink); }
.sh-band--outline .sh-band__word a:hover { color: var(--sh-ink); }
.sh-band--ink { background: var(--shn-bg); border-color: var(--shn-bg); }
.sh-band--ink .sh-band__word { color: var(--shn-ink); }
.sh-band--ink .sh-band__word a:hover { color: var(--sh-accent); }
.sh-band--accent { background: var(--sh-accent); }
.sh-band--accent .sh-band__word { color: var(--sh-accent-ink); }
.sh-band--accent .sh-band__word::after { background: var(--sh-accent-ink); border-color: var(--sh-accent-ink); }
.sh-band--accent .sh-band__word a:hover { color: transparent; -webkit-text-stroke: 1.5px var(--sh-accent-ink); }

/* -------------------------------------------------------------------------
   9. Shop
   ------------------------------------------------------------------------- */
html.shag :is(.shop-price__value, .shop-price__now, .shop-product__price) {
    font-family: var(--sh-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
html.shag .shop-price__value { color: var(--sh-ink); }
html.shag .shop-price__old { color: var(--sh-ink-3); }
html.shag .shop-price__off { background: var(--sh-accent); color: var(--sh-accent-ink); border-radius: 0; font-weight: 600; }

/* cards: the shoe on a concrete tile */
html.shag .shop-card {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: var(--sh-r);
    box-shadow: none;
    padding: 0;
}
html.shag .shop-card .shop-card__media {
    position: relative;
    isolation: isolate;
    margin: 0;
    aspect-ratio: 1 / 0.9;
    background-color: var(--sh-tone);
    background-image: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--sh-tone-2) 75%, transparent));
    border-radius: var(--sh-r);
    overflow: hidden;
}
html[data-shag-grain="on"] .shop-card .shop-card__media::after,
html[data-shag-grain="on"] :is(.shop-gallery__main, .shop-gallery__stage)::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--sh-grain);
}
html.shag .shop-card .shop-card__img {
    object-fit: contain;
    padding: 6%;
    mix-blend-mode: var(--sh-blend);
    transition: transform 500ms var(--sh-ease), opacity 300ms var(--sh-ease);
    transform-origin: 70% 80%;
}
html[data-shag-cards="tilt"] .shop-card:hover .shop-card__img { transform: rotate(-9deg) translateY(-5%); }
html.shag .shop-card .shop-card__body { display: flex; flex-direction: column; flex: 1; padding: 0.85rem 0 0; }
html.shag .shop-card .shop-card__brand {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sh-ink-3);
}
html.shag .shop-card .shop-card__title {
    font-family: var(--sh-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}
html.shag .shop-card .shop-card__link { color: var(--sh-ink); text-decoration: none; }
html.shag .shop-card .shop-card__link:hover { text-decoration: underline; text-decoration-color: var(--sh-accent); text-decoration-thickness: 0.2em; }
html.shag .shop-card .shop-card__foot { margin-top: auto; padding-top: 0.6rem; border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
html.shag .shop-card .shop-price { order: 1; }
html.shag .shop-card .shop-price__value { font-size: 1.35rem; }
html.shag .shop-card .shop-card__actions { order: 3; flex-basis: 100%; }
html.shag .shop-card .shop-card__btn { width: 100%; }
html.shag .shop-card .cms-btn--primary { background: var(--sh-ink); border-color: var(--sh-ink); color: var(--sh-bg); }
html.shag .shop-card .cms-btn--primary:hover { background: var(--sh-accent); border-color: var(--sh-ink); color: var(--sh-accent-ink); }
html.shag .shop-card :is(.shop-card__quick, .shop-toggle) { border-radius: var(--sh-r-sm); }
html.shag .shop-sticker { border-radius: 0; font-family: var(--sh-display); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
html.shag .shop-sticker--hit { background: var(--sh-ink); color: var(--sh-bg); }
html.shag .shop-sticker--new { background: var(--sh-accent); color: var(--sh-accent-ink); box-shadow: inset 0 0 0 1px var(--sh-ink); }
html.shag :is(.shop-sticker--sale, .shop-sticker--discount) { background: var(--sh-surface); color: var(--sh-ink); box-shadow: inset 0 0 0 1.5px var(--sh-ink); }
html.shag .shop-pick__legend { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sh-ink-3); }
html.shag .shop-pick__chip { min-width: 2.2rem; border-radius: 0; font-size: 0.76rem; font-variant-numeric: tabular-nums; background: transparent; border-color: var(--sh-line-2); }
html.shag .shop-pick__chip:has(:checked),
html.shag .shop-pick__chip:hover { border-color: var(--sh-ink); background: var(--sh-ink); color: var(--sh-bg); }
html.shag .shop-pick__chip.is-out { color: var(--sh-ink-3); text-decoration: line-through; border-style: dashed; }
html.shag .shop-stock--in .shop-stock__dot { background: #3b8f2f; }
html.shag .shop-card__spec dt { color: var(--sh-ink-3); }

/* the listing */
html.shag .shop-head__title { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6.4rem); line-height: 0.88; }
html.shag .shop-head__lead { color: var(--sh-ink-2); max-width: 42rem; }
html.shag .shop-toolbar { background: transparent; border: 0; border-block: 1.5px solid var(--sh-ink); border-radius: 0; }
html.shag :is(.shop-sort__select, .shop-views__btn) { border-radius: var(--sh-r-sm); background: var(--sh-bg); border-color: var(--sh-line-2); }
html.shag :is(.shop-views__btn[aria-pressed="true"], .shop-views__btn.is-active) { background: var(--sh-ink); border-color: var(--sh-ink); color: var(--sh-bg); }
html.shag .shop-side--filter :is(.shop-filter, .shop-facets) { background: transparent; border: 0; border-radius: 0; }
html.shag :is(.shop-facet__title, .shop-facet summary, .shop-filter__title) { font-family: var(--sh-display); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; }
html.shag .shop-facet { border-top: 1.5px solid var(--sh-ink); }
html.shag :is(.shop-facet__btn, .shop-facet__chip, .shop-chip, .shop-filter__chip) { border-radius: 0; }
html.shag :is(.shop-subs__list a, .shop-subs a) { border-radius: 0; background: transparent; border-color: var(--sh-ink); color: var(--sh-ink); font-family: var(--sh-display); letter-spacing: 0.05em; text-transform: uppercase; }
html.shag :is(.shop-subs__list a, .shop-subs a):hover { background: var(--sh-ink); color: var(--sh-bg); }
html.shag .shop-seealso__link { border-radius: 0; background: transparent; border: 1px solid var(--sh-ink); color: var(--sh-ink); font-weight: 600; }
html.shag .shop-seealso__link:hover { background: var(--sh-ink); color: var(--sh-bg); }
html.shag .shop-seealso__n { color: var(--sh-ink-3); }
html.shag .shop-table { background: var(--sh-surface); border-color: var(--sh-line); border-radius: var(--sh-r); }

/* the product page */
html.shag .shop-product__title { font-size: clamp(2.2rem, 1.3rem + 3vw, 4.2rem); line-height: 0.9; }
html.shag :is(.shop-gallery__main, .shop-gallery__stage) {
    position: relative;
    background-color: var(--sh-tone);
    background-image: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--sh-tone-2) 75%, transparent));
    border-radius: var(--sh-r);
}
html.shag :is(.shop-gallery__main, .shop-gallery__stage) img { mix-blend-mode: var(--sh-blend); }
html.shag :is(.shop-gallery__thumb, .shop-gallery__thumbs button) { border-radius: var(--sh-r-sm); background: var(--sh-tone); }
html.shag .shop-buybox { background: var(--sh-surface); border: 1.5px solid var(--sh-ink); border-radius: var(--sh-r); }
html.shag .shop-buybox .cms-btn--primary,
html.shag .shop-buy__add { background: var(--sh-accent); border-color: var(--sh-ink); color: var(--sh-accent-ink); }
html.shag .shop-buybox .cms-btn--primary:hover,
html.shag .shop-buy__add:hover { background: var(--sh-ink); border-color: var(--sh-ink); color: var(--sh-bg); box-shadow: 4px 4px 0 var(--sh-accent); }
html.shag :is(.shop-axis__value, .shop-option__value, .shop-variant__chip, .shop-options__btn, .shop-opt, .shop-chip__label) { border-radius: 0; }
html.shag .shop-axis__legend { font-family: var(--sh-display); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
html.shag :is(.shop-axis__chart, .shop-buy__chart) { font-weight: 600; text-decoration: underline; text-decoration-color: var(--sh-accent); text-decoration-thickness: 0.2em; text-underline-offset: 0.2em; }
html.shag .shop-keyspecs { padding: 1.1rem 1.25rem; background: var(--sh-surface); border: 1px solid var(--sh-line); border-radius: var(--sh-r); }
html.shag .shop-pros__item .cms-icon { color: var(--sh-ink); }
html.shag :is(.shop-dialog, .shop-quick) { background: var(--sh-surface); border: 1.5px solid var(--sh-ink); border-radius: var(--sh-r); }
html.shag .shop-request__btn { background: var(--sh-ink); color: var(--sh-bg); border-color: var(--sh-ink); }

/* the size chart in its dialog */
html.shag .shop-sizes__table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
html.shag .shop-sizes__table th,
html.shag .shop-sizes__table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--sh-line); text-align: center; }
html.shag .shop-sizes__table thead th { font-family: var(--sh-display); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1.5px solid var(--sh-ink); }
html.shag .shop-sizes__table tbody tr:hover { background: var(--sh-accent); color: var(--sh-accent-ink); }

/* -------------------------------------------------------------------------
   10. Variants (design settings)
   ------------------------------------------------------------------------- */
html[data-shag-palette="paper"].shag {
    --shp-bg: #f3efe6;
    --shp-surface: #fbf8f2;
    --shp-tone: #e6ded0;
    --shp-tone-2: #d9cfbd;
    --shp-ink: #1b1712;
    --shp-ink-2: #463e33;
    --shp-ink-3: #5f564a;
    --shp-line: #d6ccbb;
    --shp-line-2: #9d9282;
}
html[data-shag-palette="asphalt"].shag {
    --shp-bg: #151514;
    --shp-surface: #1e1e1c;
    --shp-tone: #2a2a27;
    --shp-tone-2: #22221f;
    --shp-ink: #eeece6;
    --shp-ink-2: #c6c3bb;
    --shp-ink-3: #a3a098;
    --shp-line: #353531;
    --shp-line-2: #6b6962;
    --shp-blend: normal;
    color-scheme: dark;
}
html[data-shag-palette="asphalt"] .sh-ftr { border-top: 1.5px solid var(--shn-line-2); }
html[data-shag-palette="asphalt"] .sh-tick { border-bottom: 1px solid var(--shn-line-2); }

html[data-shag-caps="off"] { --sh-case: none; }

/* header «line»: the name on the left, the menu in the same row */
@media (min-width: 60rem) {
    html[data-shag-header="line"] .sh-hdr__grid {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas: "logo nav left right";
        column-gap: 1rem;
    }
    html[data-shag-header="line"] .sh-hdr__nav { border-top: 0; justify-content: flex-start; }
    html[data-shag-header="line"] .sh-hdr__nav .hdr-nav__list { flex-wrap: nowrap; }
    html[data-shag-header="line"] .sh-hdr__nav .hdr-nav__link { padding-inline: 0.6rem; font-size: 0.95rem; }
    html[data-shag-header="line"] .sh-logo__name { font-size: 2.4rem; }
    html[data-shag-header="line"] .sh-hdr__left :is(.shop-hsearch-wrap, .shop-hsearch) { width: 11rem; }
}

/* cards: «clean» — a white tile, no tilt; «frame» — a hairline, no fill */
html[data-shag-cards="clean"] .shop-card .shop-card__media { background: var(--sh-surface); }
html[data-shag-cards="clean"] .shop-card .shop-card__media::after { display: none; }
html[data-shag-cards="clean"] .shop-card:hover .shop-card__img { transform: scale(1.04); }
html[data-shag-cards="frame"] .shop-card .shop-card__media { background: transparent; border: 1px solid var(--sh-line-2); }
html[data-shag-cards="frame"] .shop-card .shop-card__media::after { display: none; }
html[data-shag-cards="frame"] .shop-card:hover .shop-card__media { border-color: var(--sh-ink); }

html[data-shag-density="compact"] {
    --sp-sm: clamp(1.25rem, 1rem + 1.2vw, 2rem);
    --sp-md: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
    --sp-lg: clamp(2.75rem, 2rem + 3.5vw, 5rem);
}
html[data-shag-density="compact"] .sh-edit--mosaic .sh-edit__grid { grid-auto-rows: minmax(11rem, 15vw); }
html[data-shag-density="compact"] .shop-card .shop-card__media { aspect-ratio: 1 / 0.8; }

/* -------------------------------------------------------------------------
   11. Phones and tablets
   ------------------------------------------------------------------------- */
@media (max-width: 71.99rem) {
    .sh-hdr__nav .hdr-nav__link { padding-inline: 0.6rem; font-size: 0.95rem; }
    .sh-hdr__left :is(.shop-hsearch-wrap, .shop-hsearch) { width: 12rem; }
    .sh-ftr__label { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-ftr__cell { border-left: 0; border-top: 1px solid var(--shn-line-2); }
    .sh-ftr__cell--about { grid-column: 1 / -1; border-top: 0; }
    .sh-ftr__cell:nth-child(2n + 1):not(:first-child) { border-left: 1px solid var(--shn-line-2); }
    .sh-hero__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .sh-hero__actions { grid-column: 1 / -1; justify-content: flex-start; }
    .sh-edit--mosaic .sh-edit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(13rem, 26vw); }
    .sh-edit--mosaic.sh-edit--n6 .sh-edit__tile:nth-child(6) { grid-column: auto; }
    .sh-edit--mosaic.sh-edit--n6 .sh-edit__tile:nth-child(6) .sh-edit__media { inset: 8% 6% 22%; }
}

@media (max-width: 59.99rem) {
    .sh-hdr__grid {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "logo right" "left left";
        column-gap: 0.5rem;
    }
    .sh-hdr__nav { display: none; }
    .sh-logo { justify-content: flex-start; padding: 0.55rem 0; }
    .sh-logo__name { font-size: 2rem; }
    .sh-hdr__left .hdr-el:not(.hdr-el--mobile),
    .sh-hdr__right .hdr-el:not(.hdr-el--mobile) { display: none; }
    .sh-hdr__left:not(:has(.hdr-el--mobile)) { display: none; }
    .sh-hdr__left .hdr-el--mobile { flex: 1; padding-bottom: 0.6rem; }
    .sh-hdr__left .hdr-el--mobile :is(.shop-hsearch-wrap, .shop-hsearch) { width: 100%; }
    .sh-burger { display: inline-grid; }
    html.shag .sh-hdr .shop-minicart { padding: 0.4rem 0.8rem; }
    html.shag .sh-hdr .shop-minicart__label { display: none; }
    .sh-tick { font-size: 0.78rem; }
    .sh-tick__run { min-height: 1.9rem; }

    .sh-hero__foot { grid-template-columns: minmax(0, 1fr); }
    .sh-hero__stage { min-height: 13rem; }
    .sh-sticker { top: auto; bottom: 0; right: 0.25rem; width: 6.8rem; }
    .sh-hero--cover .sh-hero__stage { margin-top: -1rem; }

    .sh-edit--mosaic .sh-edit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(12rem, 44vw); }
    .sh-edit--mosaic .sh-edit__tile:first-child { grid-column: 1 / -1; grid-row: span 1; min-height: 20rem; }
    .sh-edit--mosaic.sh-edit--n4 .sh-edit__tile:nth-child(4) { grid-column: auto; }
    .sh-edit--mosaic.sh-edit--n6 .sh-edit__tile:nth-child(6) { grid-column: 1 / -1; }
    .sh-edit--row .sh-edit__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 74%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
    .sh-edit--row .sh-edit__tile { scroll-snap-align: start; }

    .sh-look { grid-template-columns: minmax(0, 1fr); }
    .sh-look__intro { position: static; }
    .sh-look__count { display: none; }
    .sh-look__frames {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(15rem, 78%);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        padding-bottom: 0.5rem;
    }
    .sh-look__frame { scroll-snap-align: start; }
    .sh-look__frame:nth-child(even) { margin-top: 0; }

    .sh-size { grid-template-columns: minmax(0, 1fr); }
    .sh-ftr__band { grid-template-columns: minmax(0, 1fr); }
    .sh-label__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-label__cell,
    .sh-label__cell + .sh-label__cell { padding: 1rem 0.9rem 0.6rem 0; border-left: 0; }
    .sh-label__cell:nth-child(even) { padding-left: 0.9rem; border-left: 1px solid var(--sh-line); }
    .sh-label__cell:nth-child(n + 3) { border-top: 1px solid var(--sh-line); }
    html.shag .cms-section__head--left .cms-section__subtitle { padding-left: 0.75rem; border-left: 3px solid var(--sh-accent); }
}

@media (max-width: 35.99rem) {
    .sh-hero__title { font-size: clamp(2.9rem, 0.6rem + 13vw, 4.6rem) !important; }
    .sh-hero__word { font-size: 9rem; }
    .sh-edit__title { font-size: 1.6rem !important; }
    .sh-edit__text { padding-right: 2.8rem; }
    .sh-edit__meta { font-size: 0.8rem; }
    .sh-label__cells { grid-template-columns: minmax(0, 1fr); }
    .sh-label__cell:nth-child(even) { padding-left: 0; border-left: 0; }
    .sh-label__cell + .sh-label__cell { border-top: 1px solid var(--sh-line); }
    .sh-label__value { font-size: 2.4rem; }
    .sh-ftr__label { grid-template-columns: minmax(0, 1fr); }
    .sh-ftr__cell:nth-child(2n + 1):not(:first-child) { border-left: 0; }
    .sh-ftr__barcode { display: none; }
    .sh-size__finder { grid-template-columns: minmax(0, 1fr); }
    html.shag .shop-card .shop-card__btn { min-height: 2.6rem; padding: 0.5rem 0.6rem; font-size: 0.9rem; }
    html.shag .shop-card .shop-card__btn .cms-icon { display: none; }
    html.shag .shop-card .shop-price__value { font-size: 1.15rem; }
    .sh-band__word { font-size: 2.6rem; }
}

/* -------------------------------------------------------------------------
   12. Motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.shag *,
    html.shag *::before,
    html.shag *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    html.shag .sh-tick__track,
    html.shag .sh-band__track { animation: none !important; width: auto; }
    html.shag .sh-tick__run { flex-wrap: wrap; justify-content: center; }
    html.shag .sh-tick__run + .sh-tick__run,
    html.shag .sh-band__run + .sh-band__run { display: none; }
    html.shag .sh-band__run { flex-wrap: wrap; justify-content: center; }
    html.shag :is(.shop-card, .sh-edit__tile, .sh-hero__stage):hover :is(.shop-card__img, .sh-edit__img, .sh-hero__img) { transform: none; }
}