/* =========================================================================
   «9:41» — client theme for the Rostov-on-Don / Donetsk / Mariupol
   franchisee of the "9:41" electronics-reseller franchise.

   Structurally this theme is «Гаджет» (product stage, cards, instalment
   line, trade-in panel, comparison, brand shelf, category shelf, header and
   footer chrome): gadzhet's own stylesheet is linked unchanged by base.twig
   and loads BEFORE this one. Everything below re-points gadzhet's shared
   tokens (--gz-accent, --gz-r, --gz-display, --gz-text, the --gzp-*/--gzn-*
   palette) at this theme's own design settings (--s941-*) and recolours the
   header/footer for the black-topbar, white-showroom, blue-accent identity
   of 941store.ru — plus small additions for blocks gadzhet does not style
   (shop category tiles, the "Naши салоны" map block).

   1. Design settings   2. Tokens (palette "obsidian")   3. Topbar (always
   black)   4. Header variant bridge   5. Nav highlight pill   6. Card style
   bridge   7. Instalment line   8. Density bridge   9. Shop category tiles
   10. Objects-on-map ("Наши салоны")   11. Palette variants   12. Phones
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. The owner's design settings (theme.json → design.controls). Core
   prints the chosen values as :root{--s941-…} after this file, so these are
   only the defaults. Fonts reuse «Гаджет»'s own @font-face names — its
   stylesheet is loaded before this one, so 'Gadzhet Unbounded' etc. are
   already available; no new font files are shipped.
   ------------------------------------------------------------------------- */
:root {
    --s941-accent: #0088f4;
    --s941-font-display: 'Gadzhet Unbounded', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --s941-font-text: 'Gadzhet Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --s941-radius: 28px;
}

/* -------------------------------------------------------------------------
   2. Tokens: the "obsidian" palette (default) — a white showroom with a
   near-black night for dark panels, and the accent/radius/font hookup that
   feeds every gadzhet-inherited component (buttons, chips, cards, hero,
   brand shelf, category shelf, comparison, perks, trade-in, instalment,
   footer). html.s941 rules are later in the cascade than html.gadzhet's, so
   at equal specificity they win.
   ------------------------------------------------------------------------- */
html.s941 {
    --gzp-bg: #f4f5f6;
    --gzp-surface: #ffffff;
    --gzp-sunk: #eceef1;
    --gzp-stage-1: #fbfbfc;
    --gzp-stage-2: #e6e8eb;
    --gzp-ink: #0b0c0f;
    --gzp-ink-2: #52565d;
    --gzp-ink-3: #797d85;
    --gzp-line: #e1e3e6;
    --gzp-line-2: #ccd0d5;
    --gzp-grid: rgba(11, 12, 15, 0.06);
    --gzp-blend: multiply;

    --gzn-bg: #0b0c0f;
    --gzn-surface: #17181c;
    --gzn-sunk: #000000;
    --gzn-stage-1: #202126;
    --gzn-stage-2: #101114;
    --gzn-ink: #f5f6f7;
    --gzn-ink-2: #b3b6bc;
    --gzn-ink-3: #8b8e95;
    --gzn-line: #26272c;
    --gzn-line-2: #3a3c42;
    --gzn-grid: rgba(255, 255, 255, 0.07);
    --gzn-blend: normal;

    --gz-accent: var(--s941-accent);
    --gz-accent-ink: #ffffff;
    --gz-r: var(--s941-radius);
    --gz-r-sm: calc(var(--s941-radius) * 0.55);
    --gz-r-xs: calc(var(--s941-radius) * 0.35);
    --gz-display: var(--s941-font-display);
    --gz-text: var(--s941-font-text);

    /* the topbar stays black regardless of the palette chosen */
    --s941-topbar-bg: #0b0c0f;
    --s941-topbar-ink: #f5f6f7;
    --s941-topbar-ink-2: #a9adb5;
}

/* -------------------------------------------------------------------------
   3. Topbar: always the franchise's black line, whichever palette is on.
   ------------------------------------------------------------------------- */
html.s941 .gz-top {
    background: var(--s941-topbar-bg);
    color: var(--s941-topbar-ink-2);
}
html.s941 .gz-top a,
html.s941 .gz-top .hdr-phone__number { color: var(--s941-topbar-ink); }
html.s941 .gz-top a:hover { color: var(--gz-accent); }
html.s941 .gz-top .hdr-text .cms-icon { color: var(--s941-topbar-ink-2); }
html.s941 .gz-top .hdr-phone__caption { color: var(--s941-topbar-ink-2); }
html.s941 .gz-hdr__tools :is(.hdr-icon-btn, .shop-hlink) { color: var(--gzp-ink); }

/* the city picker (module "geo") sits with the other header icon buttons */
html.s941 .geo-city {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.75rem;
    padding: 0 0.9rem;
    font-size: 0.86rem;
    font-weight: 550;
    color: var(--gz-ink);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
html.s941 .geo-city:hover { background: var(--gz-sunk); }
html.s941 .geo-city .cms-icon { width: 1.05rem; height: 1.05rem; color: var(--gz-ink-3); }
html.s941 .geo-city__label { display: none; }
html.s941 .geo-city__name { font-weight: 650; }
html.s941 .gz-top .geo-city { height: 2rem; padding: 0 0.5rem; color: var(--s941-topbar-ink); }
html.s941 .gz-top .geo-city:hover { background: rgba(255, 255, 255, 0.08); }
html.s941 .gz-top .geo-city .cms-icon { color: var(--s941-topbar-ink-2); }

/* -------------------------------------------------------------------------
   4. Header variant bridge: this theme's default is the flat full-width
   bar (941store.ru has no floating capsule); «Парящая капсула» is the
   alternate, gated behind this theme's own attribute.
   ------------------------------------------------------------------------- */
html.s941 .gz-hdr__dock { padding: 0; }
html.s941 .gz-hdr__capsule {
    padding-inline: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--gz-line);
}
html.s941[data-s941-header="island"] .gz-hdr__dock { padding: 0.35rem 0 0.5rem; }
html.s941[data-s941-header="island"] .gz-hdr__capsule {
    padding: 0.45rem 0.55rem 0.45rem 1.25rem;
    background: color-mix(in srgb, var(--gz-surface) 88%, transparent);
    border: 1px solid var(--gz-line);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(17, 17, 19, 0.04), 0 16px 36px -26px rgba(17, 17, 19, 0.35);
    backdrop-filter: saturate(1.4) blur(16px);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
}

/* -------------------------------------------------------------------------
   5. Nav highlight pill: the "Уценка"-style solid accent tab.
   ------------------------------------------------------------------------- */
html.s941 .gz-hdr__nav .hdr-nav__item--highlight > .hdr-nav__link {
    color: var(--gz-accent-ink);
    background: var(--gz-accent);
}
html.s941 .gz-hdr__nav .hdr-nav__item--highlight > .hdr-nav__link::before { display: none; }
html.s941 .gz-hdr__nav .hdr-nav__item--highlight > .hdr-nav__link:hover { background: var(--gz-ink); }
html.s941 .gz-ftr__menu a.is-hot { color: var(--gz-accent); font-weight: 650; }
html.s941 .gz-ftr__menu a.is-hot::after { background: var(--gz-accent); }

/* -------------------------------------------------------------------------
   6. Card style bridge: this theme's default is a hairline frame with no
   fill; the grey "stage" and the frameless "float" look are the alternates.
   ------------------------------------------------------------------------- */
html.s941 .shop-card { background: transparent; }
html.s941 .shop-card .shop-card__media { background: transparent; border: 1px solid var(--gz-line); }
html.s941[data-s941-cards="stage"] .shop-card { background: var(--gz-surface); }
html.s941[data-s941-cards="stage"] .shop-card .shop-card__media {
    border: 0;
    background:
        radial-gradient(70% 60% at 50% 45%, var(--gz-stage-1), transparent 72%),
        linear-gradient(180deg, var(--gz-stage-1), var(--gz-stage-2));
}
html.s941[data-s941-cards="float"] .shop-card { background: transparent; border-color: transparent; padding: 0; }
html.s941[data-s941-cards="float"] .shop-card:hover { box-shadow: none; }
html.s941[data-s941-cards="float"] .shop-card .shop-card__media { border: 0; background: var(--gz-surface); box-shadow: var(--gz-shadow); }
html.s941[data-s941-cards="float"] .shop-card .shop-card__body { padding-inline: 0.2rem; }

/* -------------------------------------------------------------------------
   7. Instalment line under a card's price (design setting "Платёж в
   рассрочку на карточках" — off hides it; the amount itself is worked out
   by the inherited shop/card.twig).
   ------------------------------------------------------------------------- */
html.s941[data-s941-instalment="off"] .gz-instal { display: none; }

/* the topbar toggle (design setting "Чёрная строка над шапкой") */
html.s941[data-s941-topbar="off"] .gz-top { display: none; }

/* -------------------------------------------------------------------------
   8. Density bridge (this theme's default "airy" is gadzhet's own default —
   no override needed; "compact" duplicates gadzhet's own compact rules
   under this theme's attribute so the check finds them in this file).
   ------------------------------------------------------------------------- */
html.s941[data-s941-density="compact"] {
    --gz-gap: 0.6rem;
    --sp-sm: clamp(1.25rem, 1rem + 1.2vw, 2rem);
    --sp-md: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
    --sp-lg: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
html.s941[data-s941-density="compact"] .gz-hero__stage { aspect-ratio: 2.6 / 1; }
html.s941[data-s941-density="compact"] :is(.gz-brand, .gz-perk, .gz-plan) { min-height: 0; }
html.s941[data-s941-density="compact"] .shop-card .shop-card__body { padding-top: 0.6rem; }

/* -------------------------------------------------------------------------
   9. Shop category tiles ("Основные категории") — gadzhet does not style
   these; a light restyle to match the rest of the catalogue.
   ------------------------------------------------------------------------- */
html.s941 .shop-tile {
    position: relative;
    display: block;
    border-radius: var(--gz-r-sm);
    overflow: hidden;
    background: var(--gz-surface);
    border: 1px solid var(--gz-line);
    transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
html.s941 .shop-tile:hover { transform: translateY(-3px); box-shadow: var(--gz-shadow); }
html.s941 .shop-tile__media {
    background:
        radial-gradient(70% 60% at 50% 45%, var(--gz-stage-1), transparent 72%),
        linear-gradient(180deg, var(--gz-stage-1), var(--gz-stage-2));
}
html.s941 .shop-tile__icon { display: grid; place-items: center; width: 100%; height: 100%; color: var(--gz-ink-3); }
html.s941 .shop-tile__icon .cms-icon { width: 2.2rem; height: 2.2rem; }
html.s941 .shop-tile__body { padding: 1rem 1.1rem 1.1rem; }
html.s941 .shop-tile__title { margin: 0; font-family: var(--gz-display); font-size: 1.02rem; font-weight: 650; letter-spacing: -0.015em; }
html.s941 .shop-tile__link { color: var(--gz-ink); text-decoration: none; }
html.s941 .shop-tile__link::after { content: ''; position: absolute; inset: 0; }
html.s941 .shop-tile__count { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--gz-ink-3); }
html.s941 .shop-tile__arrow {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    color: var(--gz-ink);
    background: var(--gz-surface);
    border-radius: 50%;
    box-shadow: var(--gz-shadow);
}
html.s941 .shop-tile__arrow .cms-icon { width: 1rem; height: 1rem; }

/* -------------------------------------------------------------------------
   10. Objects on a map ("Наши салоны") — the three stores.
   ------------------------------------------------------------------------- */
html.s941 .cms-objmap__canvas--embed { border-radius: var(--gz-r); overflow: hidden; }
html.s941 .cms-objmap__list { gap: 0.75rem; }
html.s941 .cms-objmap__item {
    padding: 1.1rem 1.25rem;
    background: var(--gz-surface);
    border: 1px solid var(--gz-line);
    border-radius: var(--gz-r-sm);
}
html.s941 .cms-objmap__num {
    background: var(--gz-accent);
    color: var(--gz-accent-ink);
    font-family: var(--gz-display);
    font-weight: 700;
}
html.s941 .cms-objmap__title { font-family: var(--gz-display); letter-spacing: -0.02em; }
html.s941 .cms-objmap__title a { color: var(--gz-ink); text-decoration: none; }
html.s941 .cms-objmap__address .cms-icon { color: var(--gz-accent); }
html.s941 .cms-objmap__chip[aria-pressed="true"] { background: var(--gz-accent); color: var(--gz-accent-ink); border-color: var(--gz-accent); }

/* -------------------------------------------------------------------------
   11. Palette variants
   ------------------------------------------------------------------------- */
html.s941[data-s941-palette="frost"] {
    --gzp-bg: #edf1f6;
    --gzp-surface: #ffffff;
    --gzp-sunk: #e1e7ee;
    --gzp-stage-1: #f8fafc;
    --gzp-stage-2: #dee5ed;
    --gzp-ink: #0d1420;
    --gzp-ink-2: #4a5566;
    --gzp-ink-3: #6a7486;
    --gzp-line: #d8e0e9;
    --gzp-line-2: #c1cbd7;
    --gzp-grid: rgba(13, 20, 32, 0.06);
}
html.s941[data-s941-palette="graphite"] {
    --gzp-bg: #101012;
    --gzp-surface: #1a1a1d;
    --gzp-sunk: #242428;
    --gzp-stage-1: #2a2a2f;
    --gzp-stage-2: #17171a;
    --gzp-ink: #f3f3f1;
    --gzp-ink-2: #b0b1b6;
    --gzp-ink-3: #8a8b90;
    --gzp-line: #2a2a2e;
    --gzp-line-2: #3d3d43;
    --gzp-grid: rgba(255, 255, 255, 0.05);
    --gzp-blend: normal;
    color-scheme: dark;
}
html.s941[data-s941-palette="graphite"] .gz-hdr__capsule,
html.s941[data-s941-palette="graphite"] .gz-hdr__dock { border-color: var(--gzp-line); }

/* -------------------------------------------------------------------------
   12. Phones and tablets
   ------------------------------------------------------------------------- */
@media (max-width: 59.99rem) {
    html.s941[data-s941-header="island"] .gz-hdr__capsule { border-radius: calc(var(--gz-r) * 0.9); }
}