/**
 * Buffalo Mobile — Electro-style storefront skin.
 *
 * Layout, spacing and type are matched to the reference marketplace layout at
 * 1440px: 1200px container, 300px left sidebar, 870px content column, 38px top
 * bar, 97px logo row, 50px department bar. Every value below was measured
 * against that reference rather than eyeballed, so keep edits in whole pixels.
 *
 * Written from scratch for Buffalo — no third-party theme CSS is copied here.
 */

/* ---------------------------------------------------------------- tokens
 * Buffalo Mobile brand palette, same values as the tokens in buffalo.css:
 * blue accent #2E7BAE with the logo blues #519BCB/#5180BE, navy #0E3350 and
 * blue-tinted greys. Neither the brand yellow nor the NuMobile red appears:
 * everything the reference paints yellow or red is blue here.
 */
:root {
    /* Primary accent is the Buffalo blue, not the brand yellow: #2E7BAE is the
       token that clears AA with white text (the logo blue itself is 3.04:1). */
    --el-accent: #2e7bae;
    --el-accent-d: #2a6f9e;
    --el-accent-lite: #53aed5;
    --el-on-accent: #ffffff;
    --el-ink: #0e3350;
    --el-body: #1f5c88;
    --el-blue: #2e7bae;
    --el-blue-light: #519bcb;
    --el-blue-deep: #5180be;
    /* Price emphasis (deal of the week, sale prices) is the blue accent, not
       the NuMobile red — the page carries no warm colour. */
    --el-price-hi: #2e7bae;
    --el-del: #6b6b6b;
    --el-grey: #f2f7fb;
    --el-grey-2: #eaf1f8;
    --el-line: #d7e3ee;
    --el-line-soft: #eef4fa;
    --el-dark: #0e3350;
    --el-bar: #dce6f0;
    --el-sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------ base */
body.el-page {
    margin: 0;
    background: #fff;
    color: var(--el-body);
    font-family: var(--el-sans);
    font-size: 14px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
}
body.el-page * { box-sizing: border-box; }
body.el-page a { color: var(--el-ink); text-decoration: none; }
body.el-page a:hover { color: var(--el-blue); }
/* Zero specificity so per-component image sizing (the logo, for one) still wins. */
:where(body.el-page) img { max-width: 100%; height: auto; display: block; }
:where(body.el-page) ul { list-style: none; margin: 0; padding: 0; }
body.el-page h1, body.el-page h2, body.el-page h3,
body.el-page h4, body.el-page h5 { margin: 0; font-weight: 500; color: var(--el-ink); }
body.el-page button { font-family: inherit; cursor: pointer; }

/* Zero-specificity reset (:where) so form controls arrive unstyled no matter
   what a plugin sheet did to them, while every class rule below still wins. */
:where(body.el-page) :where(button, input, select, textarea) {
    background: none; border: 0; border-radius: 0; box-shadow: none;
    color: inherit; font: inherit; letter-spacing: inherit; text-transform: none;
    padding: 0; margin: 0; -webkit-appearance: none; appearance: none;
    min-height: 0; width: auto;
}
:where(body.el-page) :where(h1, h2, h3, h4, h5, h6) {
    font: inherit; margin: 0; letter-spacing: normal;
}
:where(body.el-page) :where(select) { -webkit-appearance: auto; appearance: auto; }

/**
 * The chrome carries its own type. On inner pages buffalo.css loads afterwards
 * and sets the body to Plus Jakarta Sans for the page content; a declaration on
 * the chrome containers beats that inherited value, so the header and footer read
 * identically on every page. Switch --el-sans if the brand font should win here.
 */
.el-topbar, .el-header, .el-deptbar, .el-deptmenu,
.el-footer, .el-cookie, .el-cookie-modal {
    font-family: var(--el-sans);
    font-size: 14px;
    line-height: 24px;
    color: var(--el-body);
}

.el-container { width: 1200px; max-width: 100%; margin: 0 auto; padding: 0 15px; }

/* ---------------------------------------------------------------- topbar */
.el-topbar {
    height: 38px;
    border-bottom: 1px solid var(--el-line);
    font-size: 14px;
}
.el-topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 37px; }
.el-topbar__links { display: flex; align-items: center; }
.el-topbar__links a {
    display: flex; align-items: center; gap: 7px;
    padding: 0 15px; height: 20px; line-height: 20px;
    border-left: 1px solid var(--el-line);
}
.el-topbar__links a:first-child { border-left: 0; }
.el-topbar__links a:last-child { padding-right: 0; }
.el-ico { width: 15px; height: 15px; flex: 0 0 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ---------------------------------------------------------------- header */
.el-header { background: #fff; }
.el-header__inner { display: flex; align-items: center; height: 97px; }
.el-logo { flex: 0 0 auto; margin-right: 46px; }
.el-logo img { height: 46px; width: auto; max-width: none; }

.el-burger {
    width: 24px; height: 18px; border: 0; background: none; padding: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    margin-right: 42px;
}
.el-burger span { display: block; height: 2px; background: var(--el-ink); border-radius: 2px; }

.el-mainnav { display: flex; align-items: center; gap: 30px; }
.el-mainnav > li > a {
    font-size: 15px; font-weight: 700; letter-spacing: -.1px; white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
}
.el-caret { width: 9px; height: 6px; flex: 0 0 9px; }

.el-support { margin-left: auto; display: flex; align-items: center; gap: 14px; padding-left: 20px; }
.el-support__icon { width: 42px; height: 42px; flex: 0 0 42px; stroke: var(--el-accent); fill: none; stroke-width: 1.2; }
.el-support__txt { font-size: 14px; line-height: 22px; white-space: nowrap; }
.el-support__txt strong { font-weight: 700; }
.el-support__txt a { color: var(--el-ink); }
.el-support__txt a:hover { color: var(--el-blue); }

/* --------------------------------------------------------- department bar */
.el-deptbar { background: var(--el-accent); height: 50px; z-index: 40; }
/* The dropdown hangs off the container, not the full-width bar, so it lines up
   with the sidebar column below it. */
.el-deptbar__inner { display: flex; align-items: center; height: 50px; position: relative; }

/* 270px wide so the label block matches the dropdown beneath it and the search
   pill starts where the content column does. */
.el-dept-toggle {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 700; color: var(--el-on-accent);
    background: none; border: 0; padding: 0; height: 50px;
    width: 270px; flex: 0 0 270px; margin-right: 30px;
}

/* search pill */
.el-search {
    display: flex; align-items: stretch; flex: 0 0 575px;
    height: 38px; background: #fff; border-radius: 19px; overflow: hidden;
}
.el-search input[type="search"], .el-search input[type="text"] {
    flex: 1 1 auto; border: 0; outline: 0; background: none;
    padding: 0 22px; font-size: 14px; font-family: inherit; color: var(--el-ink);
    min-width: 0;
}
.el-search input::placeholder { color: #8c98a4; }
.el-search select {
    border: 0; outline: 0; background: none; font-family: inherit; font-size: 14px;
    color: var(--el-ink); padding: 0 24px 0 10px; max-width: 190px;
}
.el-search__btn {
    flex: 0 0 60px; border: 0; background: var(--el-dark); color: #fff;
    display: flex; align-items: center; justify-content: center;
    border-radius: 19px;
}
.el-search__btn svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; }

/* header icon cluster */
.el-headicons { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.el-headicon { position: relative; display: flex; align-items: center; gap: 8px; color: var(--el-on-accent); }
.el-headicon svg { width: 22px; height: 22px; stroke: var(--el-on-accent); fill: none; stroke-width: 1.6; }
.el-headicon__n {
    position: absolute; left: 13px; top: 12px;
    min-width: 18px; height: 18px; border-radius: 9px;
    background: var(--el-ink); color: var(--el-on-accent);
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    padding: 0 4px;
}
.el-headicon__total { font-size: 17px; font-weight: 700; color: var(--el-on-accent); }

/* department dropdown panel */
.el-deptmenu {
    position: absolute; top: 50px; left: 15px; width: 270px;
    background: #fff; border: 1px solid var(--el-accent); border-top: 0;
    z-index: 45;
}
.el-deptmenu.is-collapsed { display: none; }
.el-deptmenu li + li { border-top: 1px solid var(--el-line); }
.el-deptmenu a {
    display: flex; align-items: center; justify-content: space-between;
    height: 35px; padding: 0 18px; font-size: 14px; color: var(--el-ink);
}
.el-deptmenu a:hover { color: var(--el-blue); }
.el-deptmenu .is-strong a { font-weight: 700; }
.el-deptmenu .el-chev { width: 6px; height: 10px; stroke: #8fa8bd; fill: none; stroke-width: 2; }

/* ------------------------------------------------------------------ hero */
.el-hero {
    position: relative; height: 438px; overflow: hidden;
    background: var(--el-grey);
    background-image: radial-gradient(circle at 78% 40%, #ffffff 0%, #f2f7fb 62%, #e7eff7 100%);
}
.el-hero__inner { position: relative; height: 438px; display: flex; align-items: center; }
/* Clears the 270px department panel plus its 45px gutter, as in the reference. */
.el-hero__text { width: 440px; flex: 0 0 440px; margin-left: 315px; position: relative; z-index: 2; }
.el-hero__eyebrow {
    color: var(--el-blue); font-size: 14px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase; margin-bottom: 18px;
}
.el-hero__title {
    font-size: 42px; line-height: 58px; font-weight: 300;
    text-transform: uppercase; color: var(--el-ink); letter-spacing: -.6px;
}
.el-hero__title b { font-weight: 700; }
.el-hero__btn {
    display: inline-block; margin-top: 36px;
    background: var(--el-accent); color: var(--el-on-accent);
    font-size: 16px; font-weight: 400; padding: 15px 42px; border-radius: 3px;
}
.el-hero__btn:hover { background: var(--el-accent-d); color: var(--el-on-accent); }
.el-hero__dots { display: flex; gap: 8px; margin-top: 30px; align-items: center; }
.el-hero__dots i { width: 8px; height: 8px; border-radius: 50%; background: #c3d4e2; display: block; }
.el-hero__dots i.is-on { width: 22px; border-radius: 4px; background: var(--el-accent); }
.el-hero__fig {
    position: absolute; right: 30px; bottom: 0; top: 0;
    width: 470px; display: flex; align-items: flex-end; justify-content: flex-end;
}
.el-hero__fig img { max-height: 392px; width: auto; object-fit: contain; }

/* --------------------------------------------------------------- layout */
.el-main { padding-bottom: 0; }
/* -15px gutters so the sidebar's visible edge lands on the container edge
   (135px at 1440), matching the reference grid. */
.el-row { display: flex; margin: 0 -15px; }
/* The sidebar sits left of the content but after it in source order, and starts
   level with the first product row rather than the promo cards — 268px down,
   as in the reference. */
.el-sidebar { flex: 0 0 300px; width: 300px; padding: 298px 15px 0; order: -1; }
.el-content { flex: 0 0 900px; width: 900px; padding: 0 15px; }

/* ------------------------------------------------------ section headings */
.el-sec { margin-bottom: 30px; }
.el-sec__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    border-bottom: 1px solid var(--el-line); position: relative;
    padding-bottom: 8px; margin-bottom: 8px;
}
.el-sec__title {
    font-size: 25px; line-height: 35px; font-weight: 500;
    letter-spacing: -.14px; position: relative;
}
.el-sec__title::after {
    content: ""; position: absolute; left: 0; bottom: -9px; right: 0;
    height: 2px; background: var(--el-accent);
}
.el-sec__nav { display: flex; align-items: center; gap: 26px; padding-bottom: 6px; }

/* tab pills / plain tabs */
.el-tabs { display: flex; align-items: center; gap: 24px; padding-bottom: 6px; }
.el-tab {
    background: none; border: 0; padding: 0; font-size: 14px; color: var(--el-ink);
    font-family: inherit;
}
.el-tab.is-on {
    border: 1px solid var(--el-accent); border-radius: 16px;
    padding: 4px 16px; font-weight: 700;
}
.el-tabs--center { justify-content: center; gap: 40px; padding: 0 0 14px; }
.el-tabs--center .el-tab { font-size: 16px; position: relative; }
.el-tabs--center .el-tab.is-on {
    border: 0; border-radius: 0; padding: 0; font-weight: 700;
}
.el-tabs--center .el-tab.is-on::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -14px;
    height: 2px; background: var(--el-accent);
}
.el-tabs--center .el-tab.is-on::before {
    content: ""; position: absolute; left: 50%; bottom: -20px;
    width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
    background: var(--el-accent);
}
.el-tabwrap { border-bottom: 1px solid var(--el-line); margin-bottom: 22px; }

/* arrows */
.el-arrows { display: flex; align-items: center; gap: 4px; }
.el-arrow {
    width: 18px; height: 34px; border: 0; background: none; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.el-arrow svg { width: 8px; height: 14px; stroke: var(--el-ink); fill: none; stroke-width: 2; }
.el-arrow:disabled svg { stroke: #b7cadb; }
.el-textarrow { display: flex; align-items: center; gap: 10px; font-size: 14px; }

/* --------------------------------------------------------- product cards */
.el-grid { display: flex; flex-wrap: wrap; }
.el-grid--3 > .el-card { width: 33.3333%; }
.el-grid--4 > .el-card { width: 25%; }
.el-card {
    padding: 20px 20px 24px; position: relative;
    border-right: 1px solid var(--el-line-soft);
    border-bottom: 1px solid var(--el-line-soft);
}
.el-grid--3 > .el-card:nth-child(3n), .el-grid--4 > .el-card:nth-child(4n) { border-right: 0; }
.el-card__cats {
    font-size: 12px; line-height: 18px; color: var(--el-ink);
    height: 18px; overflow: hidden; margin-bottom: 4px;
}
.el-card__cats a { color: var(--el-ink); }
.el-card__title {
    font-size: 14px; line-height: 18px; font-weight: 700; color: var(--el-blue);
    min-height: 36px; margin-bottom: 12px;
}
.el-card__title a { color: var(--el-blue); }
.el-card__thumb {
    height: 190px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.el-card__thumb img { max-height: 190px; width: auto; }
.el-card__foot { display: flex; align-items: center; justify-content: space-between; }
.el-price { font-size: 20px; line-height: 26px; color: var(--el-ink); }
.el-price small { font-size: 12px; color: var(--el-del); }
.el-price ins { color: var(--el-price-hi); text-decoration: none; }
.el-price del { color: var(--el-del); font-size: 14px; margin-left: 6px; }
.el-price.is-sale { color: var(--el-price-hi); }
.el-atc {
    width: 34px; height: 34px; border-radius: 50%; border: 0;
    background: var(--el-grey); color: var(--el-ink);
    display: flex; align-items: center; justify-content: center; flex: 0 0 34px;
}
.el-atc svg { width: 16px; height: 16px; stroke: var(--el-ink); fill: none; stroke-width: 1.6; }
.el-atc:hover { background: var(--el-accent); }
.el-atc:hover svg { stroke: var(--el-on-accent); }
.el-stars { color: var(--el-accent); font-size: 12px; letter-spacing: 2px; margin-bottom: 6px; }

/* horizontal "bestseller" card */
.el-hcards { display: flex; }
.el-hcard {
    width: 33.3333%; display: flex; gap: 16px; padding: 20px 20px 20px 0;
    border-right: 1px solid var(--el-line-soft);
}
.el-hcard:nth-child(3n) { border-right: 0; }
.el-hcard__thumb { flex: 0 0 70px; }
.el-hcard__thumb img { max-height: 90px; width: auto; margin: 0 auto; }
.el-hcard__body { flex: 1 1 auto; min-width: 0; }

/* --------------------------------------------------- deal-ad promo cards */
.el-promos { display: flex; gap: 30px; margin: 30px 0; }
.el-promo {
    flex: 1 1 0; height: 203px; background: var(--el-grey);
    display: flex; align-items: center; gap: 10px; padding: 0 26px 0 10px;
}
.el-promo__img { flex: 0 0 190px; display: flex; align-items: center; justify-content: center; height: 100%; }
.el-promo__img img { max-height: 150px; max-width: 170px; width: auto; object-fit: contain; }
.el-promo__txt { font-size: 18px; line-height: 23px; text-transform: uppercase; }
.el-promo__txt b { font-weight: 700; }
.el-promo__from { font-size: 12px; text-transform: uppercase; color: var(--el-ink); }
.el-promo__price { font-size: 26px; font-weight: 700; }
.el-promo__price sup { font-size: 14px; }
.el-promo__more {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; margin-top: 6px; text-transform: none;
}
.el-godot {
    width: 20px; height: 20px; border-radius: 50%; background: var(--el-accent);
    display: inline-flex; align-items: center; justify-content: center;
}
.el-godot svg { width: 6px; height: 10px; stroke: var(--el-on-accent); fill: none; stroke-width: 2.4; }

/* full-width strip banner */
.el-strip {
    height: 89px; background: var(--el-grey); display: flex; align-items: center;
    justify-content: center; gap: 22px; margin: 30px 0; overflow: hidden;
    position: relative;
}
.el-strip__txt { font-size: 20px; text-transform: uppercase; letter-spacing: .2px; }
.el-strip__txt b { font-weight: 700; }
.el-strip__chip {
    background: var(--el-accent); color: var(--el-on-accent);
    border-radius: 3px; padding: 6px 14px; text-align: center; line-height: 1.1;
}
.el-strip__chip span { display: block; font-size: 9px; text-transform: uppercase; }
.el-strip__chip b { font-size: 19px; }
/* multiply so the tablet shot's white backing disappears into the tinted strip */
.el-strip img {
    position: absolute; right: 40px; bottom: 0; top: 0; margin: auto 0;
    max-height: 78px; width: auto; object-fit: contain;
}

/* two small banners */
.el-banners { display: flex; gap: 30px; margin: 28px 0; }
.el-banner {
    flex: 1 1 0; height: 120px; background: var(--el-grey);
    display: flex; align-items: center; padding: 0 24px; gap: 18px; overflow: hidden;
}
.el-banner__txt { font-size: 17px; line-height: 22px; }
.el-banner__txt b { font-weight: 700; }
.el-banner__txt span { color: var(--el-blue); }
.el-banner__txt { flex: 1 1 auto; }
.el-banner img {
    flex: 0 0 110px; width: 110px; height: 96px;
    object-fit: contain; object-position: center; margin-left: auto;
}

/* ------------------------------------------------------- deal of the week */
.el-deal {
    border: 1px solid var(--el-accent); border-radius: 8px;
    display: flex; padding: 22px 26px 26px; gap: 24px; position: relative;
}
.el-deal__figure { flex: 0 0 400px; display: flex; gap: 18px; position: relative; }
.el-deal__save {
    position: absolute; left: 0; top: 6px; z-index: 2;
    width: 78px; height: 78px; border-radius: 50%; background: var(--el-accent);
    color: var(--el-on-accent);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1.1;
}
.el-deal__save span { font-size: 12px; }
.el-deal__save b { font-size: 17px; }
.el-deal__main { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.el-deal__main img { max-height: 290px; width: auto; }
.el-deal__thumbs { flex: 0 0 62px; display: flex; flex-direction: column; gap: 18px; }
.el-deal__thumbs div {
    width: 62px; height: 62px; border: 1px solid var(--el-line);
    display: flex; align-items: center; justify-content: center; padding: 4px;
}
.el-deal__body { flex: 1 1 auto; text-align: center; }
.el-deal__nav {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--el-line); padding-bottom: 14px; margin-bottom: 26px;
}
.el-deal__title {
    font-size: 16px; font-weight: 700; color: var(--el-blue); line-height: 22px;
    margin-bottom: 24px;
}
.el-deal__price { font-size: 34px; line-height: 40px; color: var(--el-price-hi); font-weight: 700; }
.el-deal__price del { font-size: 20px; color: var(--el-del); margin-left: 10px; }
.el-deal__hurry { margin: 26px 0 12px; font-size: 14px; }
.el-countdown { display: flex; align-items: flex-start; justify-content: center; gap: 8px; }
.el-countdown__u { text-align: center; }
.el-countdown__u b {
    display: block; width: 56px; height: 42px; border-radius: 4px;
    background: var(--el-grey); font-size: 26px; font-weight: 400; line-height: 42px;
}
.el-countdown__u span {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px;
    margin-top: 8px; text-transform: uppercase;
}
.el-countdown__s { font-size: 20px; line-height: 42px; }

/* --------------------------------------- category block with side banner */
.el-catblock { display: flex; margin: 0 -15px; }
.el-catblock__img { flex: 0 0 243px; padding: 0 15px; }
.el-catblock__panel {
    height: 300px; background: var(--el-blue-light); color: #fff; padding: 26px 22px;
    display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.el-catblock__panel h4 { color: #fff; font-size: 21px; line-height: 27px; font-weight: 300; }
.el-catblock__panel h4 b { display: block; font-weight: 700; }
.el-catblock__panel img {
    position: absolute; right: -30px; bottom: -20px; max-height: 210px; width: auto;
}
.el-catblock__shop {
    margin-top: auto; align-self: flex-start; position: relative; z-index: 2;
    background: #fff; color: var(--el-accent);
    border-radius: 18px; padding: 9px 22px; font-size: 14px; font-weight: 700;
}
.el-catblock__products { flex: 1 1 auto; padding: 0 15px; }

/* --------------------------------------------------------------- sidebar */
.el-widget { margin-bottom: 46px; }
.el-widget__title {
    font-size: 20px; line-height: 28px; font-weight: 500; position: relative;
    padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--el-line);
    display: flex; align-items: center; justify-content: space-between;
}
.el-widget__title::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 66px; height: 2px; background: var(--el-accent);
}
.el-widget__title .el-arrows { margin-bottom: -2px; }

.el-wproducts li { display: flex; gap: 16px; padding: 8px 0 22px; }
.el-wproducts .thumb { flex: 0 0 70px; height: 70px; display: flex; align-items: center; justify-content: center; }
.el-wproducts .thumb img { max-height: 70px; width: auto; }
.el-wproducts .name { font-size: 14px; line-height: 17px; color: var(--el-ink); display: block; }
.el-wproducts .el-price { font-size: 15px; font-weight: 700; margin-top: 10px; }
.el-wproducts .el-stars { margin: 6px 0 0; }

.el-adbox { position: relative; overflow: hidden; background: var(--el-ink); height: 428px; display: block; }
/* Contained, not cropped: these are cut-out product PNGs, so cover would slice
   the device in half. */
.el-adbox img {
    position: absolute; right: -34px; bottom: -20px;
    width: auto; height: 250px; object-fit: contain; opacity: .95;
}
.el-adbox__in {
    position: relative; z-index: 2; height: 100%; padding: 26px 22px;
    display: flex; flex-direction: column; color: #fff;
}
.el-adbox__kicker { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.el-adbox__big { font-size: 40px; font-weight: 700; color: var(--el-accent-lite); line-height: 1.1; margin-top: 4px; }
.el-adbox__from { font-size: 11px; text-transform: uppercase; margin-top: 12px; opacity: .9; }
.el-adbox__price { font-size: 26px; font-weight: 700; }
.el-adbox__btn {
    margin-top: auto; align-self: stretch; text-align: center;
    background: var(--el-accent-lite); color: var(--el-ink);
    border-radius: 4px; padding: 12px 0; font-weight: 700;
}

.el-features { border: 1px solid var(--el-line); padding: 0 22px; }
.el-features li { display: flex; align-items: center; gap: 18px; padding: 22px 0; }
.el-features li + li { border-top: 1px solid var(--el-line-soft); }
.el-features svg { width: 34px; height: 34px; flex: 0 0 34px; stroke: var(--el-accent); fill: none; stroke-width: 1.5; }
.el-features b { display: block; font-size: 14px; }
.el-features span { font-size: 14px; }
.el-features .txt { text-align: center; flex: 1 1 auto; }

.el-wfeature { text-align: center; }
.el-wfeature__thumb { height: 300px; display: flex; align-items: center; justify-content: center; }
.el-wfeature__thumb img { max-height: 300px; width: auto; }
.el-wfeature__cats { font-size: 12px; color: var(--el-ink); margin-top: 18px; }
.el-wfeature__title { font-size: 14px; font-weight: 700; color: var(--el-blue); line-height: 20px; margin: 8px 0 26px; }
.el-wfeature .el-price { font-size: 20px; }


/* ---------------------------------------------------------------- footer */
.el-footer { margin-top: 30px; }
.el-footlists { display: flex; margin: 0 -15px 46px; }
.el-footlists__col { flex: 1 1 0; padding: 0 15px; }
.el-footlists__col--ad { flex: 0 0 300px; }
.el-footlists .el-widget__title { font-size: 20px; }
.el-footad { background: var(--el-grey); height: 290px; display: flex; align-items: center; justify-content: center; padding: 20px; }
.el-footad img { max-height: 250px; width: auto; object-fit: contain; }

.el-newsletter { background: var(--el-accent); color: var(--el-on-accent); padding: 8px 0; }
.el-newsletter__inner { display: flex; align-items: center; height: 50px; gap: 30px; }
.el-newsletter__icon { width: 26px; height: 26px; stroke: var(--el-on-accent); fill: none; stroke-width: 1.6; }
.el-newsletter__h { font-size: 20px; font-weight: 500; }
.el-newsletter__sub { font-size: 14px; }
.el-newsletter__sub b { font-weight: 700; }
.el-newsletter__form { margin-left: auto; display: flex; height: 40px; width: 478px; }
.el-newsletter__form input {
    flex: 1 1 auto; border: 0; outline: 0; padding: 0 20px; font-family: inherit;
    font-size: 14px; color: var(--el-ink); min-width: 0; background: #fff;
}
.el-newsletter__form input::placeholder { color: #8c98a4; }
.el-newsletter__form button {
    flex: 0 0 106px; border: 0; background: var(--el-dark); color: #fff;
    font-size: 14px; font-weight: 700;
}

.el-footmain { background: var(--el-grey-2); padding: 60px 0 62px; }
.el-footmain__inner { display: flex; margin: 0 -15px; }
.el-footmain__brand { flex: 0 0 41.6667%; padding: 0 15px; }
.el-footmain__brand img.el-footlogo { height: 38px; width: auto; }
.el-footcall { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.el-footcall svg { width: 46px; height: 46px; stroke: var(--el-accent); fill: none; stroke-width: 1.5; }
.el-footcall__k { font-size: 14px; }
.el-footcall__n { font-size: 22px; font-weight: 700; line-height: 30px; }
.el-footinfo { margin-top: 34px; }
.el-footinfo b { display: block; font-size: 14px; margin-bottom: 4px; }
.el-social { display: flex; gap: 26px; margin-top: 30px; }
.el-social svg { width: 20px; height: 20px; stroke: var(--el-ink); fill: none; stroke-width: 1.5; }

.el-footcol { flex: 1 1 0; padding: 0 15px; }
.el-footcol h5 { font-size: 18px; font-weight: 700; margin-bottom: 26px; }
.el-footcol--split { display: flex; gap: 30px; }
.el-footcol ul li { margin-bottom: 12px; }
.el-footcol ul a { font-size: 14px; }

.el-copyright { background: var(--el-bar); height: 45px; font-size: 14px; }
.el-copyright__inner { display: flex; align-items: center; justify-content: space-between; height: 45px; }
.el-copyright b { font-weight: 700; }
.el-pay { display: flex; gap: 24px; color: #6d8399; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }

/* -------------------------------------------------------------- carousel */
.el-carousel { overflow: hidden; }
.el-carousel__track { display: flex; transition: transform .35s ease; }
.el-carousel__page { flex: 0 0 100%; }
.el-dots { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.el-dots button {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
    background: #c3d4e2;
}
.el-dots button.is-on { width: 22px; border-radius: 4px; background: var(--el-accent); }

.el-hide { display: none !important; }

/* ------------------------------------------------------- cookie consent */
.el-cookie[hidden], .el-cookie-overlay[hidden], .el-cookie-modal[hidden] { display: none !important; }
.el-cookie {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: var(--el-ink); color: #fff; padding: 18px 24px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
    font-size: 14px; line-height: 1.5;
}
.el-cookie__msg { max-width: 760px; color: #dbe6f0; }
.el-cookie__msg strong { color: #fff; }
.el-cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.el-cbtn {
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    padding: 11px 20px; border-radius: 999px; border: 2px solid transparent;
}
.el-cbtn--solid { background: var(--el-accent); color: var(--el-on-accent); }
.el-cbtn--solid:hover { background: var(--el-accent-d); }
.el-cbtn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.el-cbtn--ghost:hover { background: #fff; color: var(--el-ink); }
.el-cbtn--outline { background: transparent; color: var(--el-accent); border-color: var(--el-accent); }
.el-cbtn--outline:hover { background: var(--el-accent); color: var(--el-on-accent); }
.el-cookie-overlay { position: fixed; inset: 0; background: rgba(8, 14, 33, .55); z-index: 210; }
.el-cookie-modal {
    position: fixed; z-index: 220; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(520px, 92vw); background: #fff; color: var(--el-body); padding: 30px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .3); max-height: 90vh; overflow: auto;
}
.el-cookie-modal h3 { font-size: 22px; font-weight: 700; color: var(--el-ink); margin-bottom: 8px; }
.el-cookie-modal > p { color: var(--el-del); font-size: 14px; margin: 0 0 18px; }
.el-ck {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border: 1px solid var(--el-line); padding: 14px 16px; margin-bottom: 10px;
}
.el-ck small { color: var(--el-del); }
.el-ck input { width: 20px; height: 20px; accent-color: var(--el-accent); flex: 0 0 auto; -webkit-appearance: auto; appearance: auto; }
.el-cookie-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 600px) { .el-cookie { flex-direction: column; align-items: flex-start; } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1240px) {
    .el-container { width: 100%; }
    .el-content { flex: 1 1 auto; width: auto; }
    .el-hero__text { margin-left: 300px; width: auto; padding-right: 40px; }
}
@media (max-width: 991px) {
    .el-row { flex-wrap: wrap; }
    .el-sidebar { flex: 0 0 100%; width: 100%; order: 2; padding-top: 0; }
    .el-content { flex: 0 0 100%; width: 100%; }
    .el-mainnav, .el-support { display: none; }
    /* The department list becomes an in-flow panel opened by the toggle rather
       than a dropdown pinned to the bar. */
    .el-deptmenu { position: static; left: auto; top: auto; width: 100%; display: none; border-top: 1px solid var(--el-accent); }
    .el-deptmenu.is-open { display: block; }
    .el-hero__text { margin-left: 0; }
    .el-hero__fig { width: 45%; opacity: .35; }
    .el-search { flex: 1 1 auto; }
    .el-dept-toggle { width: auto; flex: 0 0 auto; margin-right: 20px; }
    .el-deal { flex-direction: column; }
    .el-deal__figure { flex: 0 0 auto; }
    .el-catblock { flex-wrap: wrap; }
    .el-catblock__img { flex: 0 0 100%; }
    .el-footmain__inner, .el-footlists { flex-wrap: wrap; }
    .el-footmain__brand, .el-footcol, .el-footlists__col { flex: 0 0 100%; margin-bottom: 34px; }
}
@media (max-width: 767px) {
    .el-topbar { height: auto; }
    .el-topbar__inner { height: auto; padding: 8px 0; gap: 12px; }
    .el-topbar__links a:not(:last-child) { display: none; }
    .el-header__inner { height: 74px; }
    .el-logo img { height: 38px; }
    .el-burger { margin-right: 0; margin-left: auto; }
    /* Bar stacks: label + icons on one line, search full width beneath. */
    .el-deptbar { height: auto; }
    .el-deptbar__inner { flex-wrap: wrap; height: auto; padding: 10px 15px 12px; row-gap: 10px; }
    .el-dept-toggle { height: 30px; }
    .el-headicons { gap: 20px; }
    .el-search { order: 3; flex: 0 0 100%; }
    .el-deptmenu { order: 4; }
    .el-hero { height: auto; padding: 40px 0; }
    .el-hero__inner { height: auto; }
    .el-hero__title { font-size: 30px; line-height: 40px; }
    .el-hero__fig { display: none; }
    .el-grid--3 > .el-card, .el-grid--4 > .el-card, .el-hcard { width: 50%; }
    .el-promos, .el-banners { flex-direction: column; }
    .el-newsletter__inner { height: auto; flex-wrap: wrap; padding: 14px 0; gap: 14px; }
    .el-newsletter__form { width: 100%; margin-left: 0; }
    .el-search select { display: none; }
}