/* ==========================================================================
   home.css — homepage (WS1). Consumes design-tokens.css + components.css
   (.sw-* / .mz-* kit) + product_card.css (the final deal card). Only rules with
   NO kit equivalent live here. Loaded page-scoped from index_new.php.

   Reused straight from the kit (no CSS here): reasons lane (partial),
   category tiles (.sw-faq-tab), store cards (.mz-card), discovery (.sw-pill),
   value cards (.mz-service), buttons (.sw-btn), section chrome (.sw-section/
   -title/-eyebrow).
   ========================================================================== */

/* Section header → kit .sw-sectionhead (components.css). home-specific extras below. */
.home-sub {
     text-align: center; max-width: 620px; margin: 14px auto 0;
     color: var(--sw-grey, #6b7280); font-size: 16px; line-height: 1.6;
}
.home-sub b { color: var(--sw-ink, #1a1a1a); font-weight: 700; }
.home-more { text-align: center; margin-top: 34px; }

/* ---- Категории — photo tiles (Back Market / Swappie style) ---------------
   NOTE (2026-07-15): this is the owner-APPROVED version. It was reworked four
   times in one session trying to fix "the tiles look like the product cards"
   (tinted tiles = grey-on-grey on the soft-grey section; portrait 4:5 = dead
   white space; scale(1.42) = cropped the devices, because the thumbs are 400x400
   with the product already filling the frame). Every attempt was rejected and
   this is what we came back to. If you touch it again, the problem to solve is
   the shared SILHOUETTE with the §V6 product cards below — not colour, not
   polish — and it is worth agreeing the direction before writing CSS. */
.home-catgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.home-cat {
     display: flex; flex-direction: column; text-decoration: none;
     background: var(--sw-bg, #fff); border: 1px solid var(--sw-line, #eaeaea);
     border-radius: var(--sw-r-card, 16px); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* text-decoration:none must apply on ALL devices (kills the legacy global a:hover
   underline on tap); only the visual lift is hover-gated so touch doesn't latch it. */
.home-cat, .home-cat:hover, .home-cat:active, .home-cat:focus { text-decoration: none !important; }
@media (hover: hover) { .home-cat:hover { transform: translateY(-4px); border-color: var(--sw-teal-ink, #2bbbbc); box-shadow: 0 10px 26px rgba(0,0,0,.08); } }
.home-cat__img {
     aspect-ratio: 4 / 3; padding: 18px; overflow: hidden;   /* overflow:hidden = hard clip; iOS Safari doesn't resolve max-height:100% against an aspect-ratio height, so the image was spilling over the divider + title */
     background: #fff; border-bottom: 1px solid var(--sw-line, #eaeaea);
}
.home-cat__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.home-cat__label {
     display: flex; align-items: center; justify-content: space-between; gap: 8px;
     padding: 14px 16px; font-weight: 700; color: var(--sw-ink, #1a1a1a); font-size: .98rem;
}
.home-cat__label i { color: var(--sw-teal-ink, #2bbbbc); font-size: 12px; transition: transform .2s ease; }
.home-cat:hover .home-cat__label i { transform: translateX(3px); }
@media (max-width: 991px) { .home-catgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .home-catgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .home-cat__img { padding: 14px; } }

/* ---- Hero proof row — OPTION C (white pills, colour icons, ink text) ----
   Structure is `.rv-chip` from /otzivi (templates/page/reviews.php): same pill, same
   size, same 5-star lead. Mirrored rather than imported because that component lives in
   a page-scoped <style> block, not the kit; if a third page needs it, promote it to
   components.css instead of copying it a third time.

   Three attempts at this slot, for whoever touches it next:
     A — `.pi-proof` from /prodai: quiet 14px grey text, no container. Recedes politely
         but reads as leftover.
     B — `.rv-chip` verbatim: purple tint on purple text. Looks designed, but it put a
         third purple element directly under a purple ПРОДАЙ button.
     C — this: WHITE pill, INK text, colour reserved for the icons. Keeps B's
         containment, drops B's purple pile-up, and lets the gold stars be the only
         saturated thing in the left column.
   Before any of them there was a full-width white stats band. Don't go back: two
   numbers cannot fill a band, so they read as lost however they are styled, and every
   attempt to give them presence only made it taller.

   The white pill needs the hairline — the hero surface is only slightly grey, so
   without a border the pill edge dissolves. Colour split is deliberate: gold = rating
   (stars read gold everywhere), teal = the buy side of the business, and purple is left
   alone so the ПРОДАЙ button keeps it. */
.home-hero__proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.home-hero__proof-item {
     display: inline-flex; align-items: center; gap: 8px;
     background: var(--sw-bg, #fff);
     border: 1px solid var(--sw-line, #eaeaea);
     border-radius: var(--sw-r-pill, 100px);
     box-shadow: 0 1px 3px rgba(0,0,0,.04);
     padding: 9px 16px;
     font-size: 13px; font-weight: 600; white-space: nowrap;
     color: var(--sw-ink, #1a1a1a);
}
.home-hero__proof-item i { font-size: 13px; color: var(--sw-teal-ink, #2bbbbc); }
.home-hero__proof-item b {
     font-weight: 800;
     word-spacing: -.12em;   /* keeps "30 000+" from gapping at this weight */
}
.home-hero__stars { color: #f5a623; font-size: 11px; letter-spacing: 1.5px; white-space: nowrap; }
@media (max-width: 575px) {
     /* Pills must never wrap mid-fact, so let them stack rather than squeeze. */
     .home-hero__proof { margin-top: 20px; gap: 7px; }
     .home-hero__proof-item { font-size: 12px; padding: 8px 14px; }
}

/* ---- Сервиз — the third business, dark twin of the Продай band ------------
   Mirrors .home-sell exactly (dark surface, centred, eyebrow > title > sub > 3 chips > CTA)
   so the two "services" bands read as a matched pair. It sits AFTER Защо Swipe precisely so
   it can be dark — see the note in index_new.php.
   NO gradient top edge, unlike .home-sell. Per the design roadmap that 3px --sw-grad edge
   marks bands where MONEY changes hands; Продай is one (we pay you), a repair quote is not.
   Icons are teal-BRIGHT here, not teal-ink: on near-black it's the readable one, and it's
   the same teal the Гаранции lane uses on the same surface. (On the earlier white version
   this was teal-ink, because teal-bright goes to pale mint on light.) */
.home-serviz {
     position: relative; background: var(--sw-surface-dark, #0c0c0c);
     padding: 76px 0; text-align: center; overflow: hidden;
}
.home-serviz .container { position: relative; z-index: 1; }
.home-serviz .sw-sectionhead { margin-bottom: 26px; }
.home-serviz__eyebrow { color: #d7d2e8; justify-content: center; display: inline-flex; }
.home-serviz__title { font-weight: 800; font-size: clamp(1.75rem, 4.2vw, 2.9rem); letter-spacing: -.03em; color: #fff; margin: 0 0 14px; }
.home-serviz__sub {
     max-width: 620px; margin: 0 auto;
     color: rgba(255,255,255,.72); font-size: 1.05rem; line-height: 1.65;
}
.home-serviz__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-bottom: 34px; }
.home-serviz__points span { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.9); font-size: 15px; font-weight: 600; }
.home-serviz__points i { color: var(--sw-teal-bright, #00dfcd); font-size: 15px; flex: none; }
@media (max-width: 575px) {
     .home-serviz { padding: 56px 0; }
     .home-serviz__sub { font-size: .98rem; }
     .home-serviz__points { gap: 10px 20px; margin-bottom: 26px; }
     .home-serviz__points span { font-size: 13.5px; }
}

/* ==========================================================================
   Shared slider chrome (Топ предложения + Отзиви) — add class `home-owl` to
   the owl carousel. FA-chevron nav in circular buttons + pager dots. --------- */
/* CONTROL BAR under the slider: dots left, arrows together right.
   The point is MOBILE. The arrows used to be discs floating over the artwork at
   `left/right: -46px` and were `display: none` under 767px — so 85% of traffic had no
   buttons at all, only swipe, and swipe is invisible to anyone who doesn't try it.
   Side arrows can't work on a phone (no gutter to sit in — they'd cover the cards), so
   the only way to give mobile arrows is to move both controls out from over the content
   and into one row underneath. Desktop gets a bonus: nothing hangs outside the container
   any more, so the arrows can't collide with the viewport edge at narrow widths.
   `padding-bottom` on the carousel reserves the row; .owl-stage-outer owns the overflow,
   so padding here is safe. */
.home-owl { position: relative; padding-bottom: 56px; }
/* `right` is what stops the dots ever reaching the arrows: the two are absolutely
   positioned siblings, so without a bound the dot row grows under them and wraps. The
   Отзиви slider is the worst case — 15 reviews at slideBy 1 on mobile means FIFTEEN dots,
   which at the old 10px+7px was ~270px on a ~360px row. `nowrap` keeps them on one line;
   the mobile block below shrinks them enough to fit inside that bound. */
.home-owl .owl-dots {
     position: absolute; bottom: 0; left: 0; right: 110px; margin: 0;
     display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; height: 40px;
}
/* SHAPE only, never colour. black.css:2529 owns the active dot's colour site-wide
   (`.owl-theme .owl-dots .owl-dot.active span { background: #00dfcd !important }`) — that's
   the site's teal and it beats anything set here, so don't try. Width and border-radius
   carry no !important, which is why the pill below works and a colour override wouldn't:
   we'd win the shape, lose the fill, and ship a half-applied dot.
   Base dot is 10x10 from owl.theme.default.min.css. The active one stretches to a 24x10
   pill — same teal, just unmistakable at a glance, which matters most on mobile where the
   dots are the primary position cue. Applies at every width; no breakpoint needed.
   `margin: 0` kills owl's default per-span margins, which would otherwise double up
   against the flex gap on the control bar. */
.home-owl .owl-dots .owl-dot span { margin: 0; transition: width .18s ease, background .18s ease; }
.home-owl .owl-dots .owl-dot.active span { width: 24px; border-radius: 100px; }
/* `display: flex !important` is fighting mobile.css:621, which kills EVERY owl-nav on the
   site under 550px (`.owl-nav { display: none !important }`) — written back when arrows
   floated over the artwork and were genuinely unusable on a phone. They aren't any more:
   they live under the slider now. The override is scoped to `.home-owl` on purpose, so the
   blast radius is these two homepage sliders only; loosening mobile.css itself would
   un-hide arrows on every carousel on the site, which is not what we're asking for. */
.home-owl .owl-nav {
     position: absolute; bottom: 0; right: 0; margin: 0;
     display: flex !important; gap: 8px;
}
/* DARK ROUNDED RECTS, not white circles. The circle+shadow was designed for a button
   floating OVER the artwork, where it had to read as a thing sitting on top of the photos.
   Down here in a control bar it isn't floating over anything, so the lift is fake and the
   circle just looks like a leftover. A solid dark rect reads as a control, pairs with the
   dot pill next to it, and gives a far better tap target on the section's grey background
   than a white disc did. */
.home-owl .owl-nav button.owl-prev,
.home-owl .owl-nav button.owl-next {
     position: static; transform: none;
     width: 46px; height: 40px; border-radius: 10px;
     background: var(--sw-surface-dark, #0c0c0c) !important; border: 0 !important;
     box-shadow: none; display: grid; place-items: center;
     transition: background .15s ease;
}
.home-owl .owl-nav button.owl-prev i,
.home-owl .owl-nav button.owl-next i { font-size: 14px; color: #fff; transition: color .15s ease; }
.home-owl .owl-nav button.owl-prev:hover,
.home-owl .owl-nav button.owl-next:hover { background: #1a1a1a !important; }
.home-owl .owl-nav button:hover i { color: var(--sw-teal-bright, #00dfcd); }
/* Both sliders are loop:true so this never fires today — but if loop is ever turned off,
   fade rather than hide: a missing button leaves a hole in the bar. */
.home-owl .owl-nav button.disabled { opacity: .35; pointer-events: none; }
@media (max-width: 575px) {
     /* Sized so the worst case FITS: Отзиви is 15 dots at slideBy 1. At 7px + 4px gap
        that's ~161px (+13 for the active pill) inside a ~250px bound — comfortable. The
        old 10px + 7px was ~270px and wrapped under the arrows. If the review count ever
        grows well past 15, shrink the dots again or raise slideBy — do NOT drop `right`,
        that bound is the only thing keeping the two rows apart. */
     .home-owl { padding-bottom: 50px; }
     .home-owl .owl-nav button.owl-prev,
     .home-owl .owl-nav button.owl-next { width: 42px; height: 36px; }
     .home-owl .owl-dots { height: 36px; right: 100px; gap: 4px; }
     .home-owl .owl-dots .owl-dot span { width: 7px; height: 7px; }
     .home-owl .owl-dots .owl-dot.active span { width: 18px; }
}

/* ---- Топ предложения — frozen §V6 cards: equal heights + legacy img fix --- */
.owl-products .owl-stage { display: flex; }
.owl-products .owl-item { display: flex; height: auto; }
.owl-products .owl-item .pcard { display: block; width: 100%; }   /* fills the item; §V6 .p3-in is height:100% */
/* black.css:3688 forces `.owl-products .owl-item img { width:auto !important }`
   for the OLD card — restore full width for the §V6 image inside the slider. */
.owl-products .owl-item img.pcard-img { width: 100% !important; height: auto; }

/* ---- Отзиви — review cards in the slider: equal heights, fill the item ---- */
.owl-reviews .owl-stage { display: flex; }
.owl-reviews .owl-item { display: flex; height: auto; }
.owl-reviews .owl-item .sw-review { width: 100%; }

/* ---- Разгледай по нужда — rich value collection cards (photo + benefit + count).
   Deliberately landscape + accented so they DON'T read like the square Категории tiles. */
.home-collgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.home-coll {
     position: relative; flex: 0 1 342px; display: flex; align-items: stretch; min-height: 156px;
     overflow: hidden; text-decoration: none; background: var(--sw-bg, #fff);
     border: 1px solid var(--sw-line, #eaeaea); border-radius: var(--sw-r-card, 16px);
     transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-coll::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--acc, #7735d5); z-index: 2; }
.home-coll, .home-coll:hover, .home-coll:active, .home-coll:focus { text-decoration: none !important; }
@media (hover: hover) { .home-coll:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.08); border-color: var(--acc, #7735d5); } }
.home-coll__body { flex: 1; display: flex; flex-direction: column; padding: 22px 8px 20px 26px; min-width: 0; }
.home-coll__title { font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; color: var(--sw-ink, #1a1a1a); }
.home-coll__desc { color: var(--sw-grey, #6b7280); font-size: .9rem; line-height: 1.45; margin-top: 6px; flex: 1; }
.home-coll__foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.home-coll__go { font-weight: 700; font-size: .86rem; color: var(--acc, #7735d5); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.home-coll__go i { font-size: 11px; transition: transform .2s ease; }
.home-coll:hover .home-coll__go i { transform: translateX(3px); }
.home-coll__media { flex: 0 0 40%; position: relative; display: block; background: var(--acc-tint, #f0e6ff); }
.home-coll__media img {
     position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
     max-height: 84%; max-width: 92%; width: auto; object-fit: contain; mix-blend-mode: multiply;
}
/* accents — teal (value) · teal-bright (battery) · purple (premium) · orange (deal) */
.home-coll--budget { --acc: #2bbbbc; --acc-tint: #e7fdfc; }
.home-coll--mid    { --acc: #2bbbbc; --acc-tint: #e7fdfc; }
.home-coll--batt   { --acc: #2bbbbc; --acc-tint: #e7fdfc; }
.home-coll--flag   { --acc: #7735d5; --acc-tint: #f0e6ff; }
.home-coll--outlet { --acc: #fb7b24; --acc-tint: #fdeee2; }
@media (max-width: 767px) {
     .home-coll { flex: 1 1 100%; min-height: 132px; }
     .home-coll__title { font-size: 1.15rem; }
     .home-coll__body { padding: 18px 8px 16px 22px; }
}

/* ---- Защо Swipe — benefit cards. OWN component, deliberately NOT .mz-service
   (that's the tall magazini card built for icon+title+list+CTA; with only a
   title + 2 lines it read under-filled and its 32px button-reserve padding left
   dead space, worst on mobile). Here: icon sits inline to the RIGHT of the title,
   a 3px teal-bright LEFT bar is the grid's signature so it stops reading like the
   §V6 product cards below. Teal, not the money gradient — this is the value/buy
   side, and it echoes the teal accents on the /prodai store cards. --------- */
.home-why {
     position: relative; height: 100%; overflow: hidden;
     display: flex; flex-direction: column;
     background: var(--sw-bg, #fff); border: 1px solid var(--sw-line, #eaeaea);
     border-radius: var(--sw-r-card, 16px); padding: 22px 22px 22px 26px;
     box-shadow: 0 2px 8px rgba(0,0,0,.04);
     transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-why::before {   /* teal-bright signature bar (NOT the --sw-grad money edge) */
     content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
     background: var(--sw-teal-bright, #00dfcd);
}
@media (hover: hover) { .home-why:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.08); border-color: var(--sw-teal-ink, #2bbbbc); } }
.home-why__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.home-why__title { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--sw-ink, #1a1a1a); margin: 0; }
.home-why__ico {   /* soft teal tint square + teal-ink glyph, echoing .mz-service-icon language */
     flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
     background: var(--sw-tint-teal, #e7fdfc); color: var(--sw-teal-ink, #2bbbbc); font-size: 18px;
     transition: transform .2s ease;
}
.home-why:hover .home-why__ico { transform: scale(1.06); }
.home-why__text { color: var(--sw-grey, #6b7280); font-size: .92rem; line-height: 1.55; margin: 0; }
/* Mobile: single column = card is content-height, so the old .mz-service 32px
   bottom padding was pure dead space. Tighter all round here. */
@media (max-width: 767px) { .home-why { padding: 18px 18px 18px 20px; } }
/* Защо Swipe grid → 16px gutters, matching the category/collection grids
   (bootstrap's default ~30px read as "bigger" than the rest of the page). */
.home-why-row { margin-left: -8px; margin-right: -8px; }
.home-why-row > [class*="col-"] { padding-left: 8px; padding-right: 8px; margin-bottom: 16px; }

/* ---- Mobile vertical rhythm — desktop section padding (.sw-section 56px,
   Продай/Сервиз 76px) feels airy on a 12-section phone page. home.css is
   page-scoped, so overriding .sw-section here tightens the homepage only. ---- */
@media (max-width: 767px) {
     .sw-section { padding: 40px 0; }
     .home-sell, .home-serviz { padding: 46px 0; }
}

/* ---- Hero — kit .sw-hero split in two: copy left, campaign slider right ----
   Copy leads on desktop because the side read first should be the side making the
   argument; the slider is loud enough to win attention without winning position.
   Slider takes the wider column: the banners are landscape artwork with baked-in
   type, and they need the width to stay readable. */
.home-hero { padding: 44px 0 48px; }
.home-hero__grid { display: grid; grid-template-columns: .68fr 1fr; gap: 40px; align-items: center; }
/* min-width:0 on BOTH columns. Grid items default to min-width:auto, so the
   slider's intrinsic image width refuses to shrink and eats the copy column down
   to ~230px (title wrapping to 5 lines). This is the fix, not a column ratio. */
.home-hero__copy, .home-hero__media { min-width: 0; }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Twin CTAs: same size, same weight, one solid colour each — teal buys, purple
   sells. Restores the colour coding customers already learned from the old
   КУПИ / ПРОДАЙ banners. Equal weight is deliberate: buying and selling are two
   equal businesses here, so neither gets demoted to a ghost button. */
.home-hero__cta .sw-btn { flex: 0 1 auto; min-width: 208px; }
.home-hero__media .one-slide img,
.home-hero__media img { width: 100%; height: auto; border-radius: var(--sw-r-card, 16px); display: block; }
/* 1px sliver of the NEIGHBOURING slide at some browser zoom levels — owl 2.3.4 bug.
   owl.carousel.js:303 sizes each item to (containerWidth / items).toFixed(3), i.e. a
   FRACTIONAL px width, but coordinates() (line 1218) does `Math.ceil(coordinate)` on the
   stage transform. So the stage lands up to 1px short of where the slide actually starts
   and the previous slide's trailing edge stays inside .owl-stage-outer's clip rect.
   Measured 0.27px of bleed at a 571.42px column — invisible at 100% zoom, painted as a
   full pixel column at the device-pixel ratios other zoom levels produce.
   Fix: a 1px gutter inside each item (border-box, so it eats from the image, not the
   item's width — owl's translate math is untouched). Any sub-pixel residue now lands in
   transparent gutter instead of on the next banner. The active image loses 1px per side,
   which is imperceptible under a 16px radius.
   Hero only on purpose: .owl-products / .owl-reviews show a deliberate peek anyway. */
.home-hero__media .owl-slider .owl-item { padding: 0 1px; }
/* Same active-dot pill as the Топ предложения / Отзиви sliders, so all three read alike.
   The hero uses `.owl-slider`, a DIFFERENT component from `.home-owl` — its dots sit in a
   translucent capsule over the banner (black.css:2508) rather than in a control bar — which
   is why it didn't inherit the pill. Scoped to `.home-hero__media` on purpose: `.owl-slider`
   is global in black.css and used on other pages, and this is a homepage decision.
   SHAPE only — black.css:2524 owns the colour with !important, same as everywhere else. */
.home-hero__media .owl-slider .owl-dots .owl-dot span { transition: width .18s ease, background .18s ease; }
.home-hero__media .owl-slider .owl-dots .owl-dot.active span { width: 24px; border-radius: 100px; }
/* Tablet down: stack, and the SLIDER GOES FIRST. Reading order only protects the
   copy while the two sit side by side; stacked, a wall of text above the artwork
   is what read as "weird" on a phone. Source order stays copy-first (desktop +
   screen readers get the argument first); `order` only flips the visual stack. */
@media (max-width: 991px) {
     .home-hero { padding: 32px 0 36px; }
     .home-hero__grid { grid-template-columns: 1fr; gap: 26px; }
     .home-hero__media { order: -1; }
}
@media (max-width: 767px) {
     .home-hero { padding: 24px 0 28px; }
     /* 50/50 side by side, NOT stacked. The kit sends every .sw-btn to `width: 100%` under
        767px (components.css:114), which stacked these into two full-width bars and pushed
        everything below the fold. КУПИ and ПРОДАЙ are the two halves of the business and
        the h1 names them as a pair — stacked, they read as a primary and an afterthought.
        `flex: 1 1 0` + `width: auto` splits the row evenly; `nowrap` stops a long label
        wrapping one of them onto its own line. Beats the kit on specificity (0,2,0 vs
        0,1,0), so no !important needed — do not add one. */
     .home-hero__cta { gap: 10px; margin-top: 22px; flex-wrap: nowrap; }
     .home-hero__cta .sw-btn { flex: 1 1 0; width: auto; min-width: 0; padding-left: 12px; padding-right: 12px; }
}

/* ---- Гаранции — slim dark trust lane (homepage-only; the shared `reasons`
   multicolor partial is untouched site-wide). Design-system tokens + FA icons,
   teal accent. Deliberately SLIM so it reads as a strip, not a tall band.
   Sits straight under the hero, whose own padding-bottom supplies the gap — no
   margin needed (the old `mt-4`-matching margin belonged to the bare slider). */
.home-guarantees { background: var(--sw-surface-dark, #0c0c0c); padding: 30px 0; }
.home-guarantees__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
/* each item centred in its own equal column: the slack splits evenly either side
   instead of piling up as dead space on the right, and the dividers land exactly
   on the column boundaries. The solid teal chips carry the rhythm. */
.home-guarantees__item {
     position: relative; display: flex; align-items: center; justify-content: center;
     gap: 14px; padding: 4px 16px; text-decoration: none;
}
.home-guarantees__item:hover { text-decoration: none; }
/* hairline dividers -> reads as ONE structured band, not 4 floating bits.
   .12 was doing no work; .18 is visible without competing with the chips. */
.home-guarantees__item + .home-guarantees__item::before {
     content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
     width: 1px; height: 44px; background: rgba(255,255,255,.18);
}
/* solid teal chip: the circle carries the visibility, the glyph reads as a crisp
   knocked-out mark on top of it */
.home-guarantees__ico {
     width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
     background: var(--sw-teal-bright, #00dfcd); border: none;
     transition: transform .15s ease, box-shadow .15s ease;
}
/* FA solid glyphs knocked out of the chip: filled silhouettes stay legible at this
   size, where the brand PNGs (thin outlines) read as noise inside the disc */
.home-guarantees__ico i { color: var(--sw-surface-dark, #0c0c0c); font-size: 19px; line-height: 1; }
.home-guarantees__item span { color: rgba(255,255,255,.6); font-size: .85rem; line-height: 1.4; }
.home-guarantees__item b { display: block; color: #fff; font-weight: 700; font-size: .95rem; transition: color .15s ease; }
/* Persistent chevron: without it these read as static badges and the only hint that
   they navigate is :hover — which doesn't exist on touch. Teal so it's a link cue,
   not a decoration. Sits inline after the title so the 4 stay parallel. */
.home-guarantees__item b::after {
     content: '\f054';                                    /* fa-chevron-right */
     font-family: 'Font Awesome 5 Free'; font-weight: 900;
     font-size: .62em; margin-left: 7px; vertical-align: 1px;
     color: var(--sw-teal-bright, #00dfcd);
     transition: transform .15s ease, opacity .15s ease;
     display: inline-block; opacity: .75;
}
/* hover: the chip lifts with a teal halo, the chevron nudges forward */
.home-guarantees__item:hover .home-guarantees__ico { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(0,223,205,.16); }
.home-guarantees__item:hover b { color: var(--sw-teal-bright, #00dfcd); }
.home-guarantees__item:hover b::after { transform: translateX(3px); opacity: 1; }
/* Keyboard focus: the UA default outline is near-invisible on #0c0c0c. Ring the
   whole cell (radius matches nothing else here on purpose — it frames, not decorates). */
.home-guarantees__item:focus-visible {
     outline: 2px solid var(--sw-teal-bright, #00dfcd); outline-offset: 3px; border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
     .home-guarantees__ico, .home-guarantees__item b::after { transition: none; }
     .home-guarantees__item:hover .home-guarantees__ico { transform: none; }
     .home-guarantees__item:hover b::after { transform: none; }
}
/* 2-up: centring only balances a single row — stacked cells scan better left-aligned */
@media (max-width: 991px) {
     .home-guarantees__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 8px; }
     .home-guarantees__item { justify-content: flex-start; padding: 0 8px; }
     .home-guarantees__item + .home-guarantees__item::before { display: none; }   /* dividers only make sense in one row */
}
/* Mobile: stay 2-up (keeps the band short). Measured at 380px the text column was
   ~132px and "Доставка до 1 ден" + chevron sat exactly on it — one font-rendering
   hair from wrapping (and it did wrap at 360). Everything below buys that column
   back: smaller chip, tighter gaps, no cell padding, leaner chevron. ~143px now. */
@media (max-width: 767px) {
     .home-guarantees { padding: 22px 0; }
     .home-guarantees__grid { grid-template-columns: repeat(2, 1fr); gap: 18px 2px; }
     .home-guarantees__item { padding: 0; gap: 8px; }
     .home-guarantees__ico { width: 34px; height: 34px; }
     .home-guarantees__ico i { font-size: 15px; }
     .home-guarantees__item b { font-size: .8rem; }
     .home-guarantees__item span { font-size: .72rem; }   /* no nowrap: on a 320px phone it must wrap, not overflow */
     /* An inline-block is an atomic inline = a legal break opportunity, so the chevron
        could orphan onto its own line while the title above it fit fine. Plain `inline`
        has no such break: line breaks need whitespace, and there is none between the
        last word and generated content — so margin-left still buys the gap safely.
        Costs the hover nudge — moot on a touch viewport. */
     .home-guarantees__item b::after { display: inline; font-size: .58em; margin-left: 5px; }
}
/* 320px (SE-class): the column drops to ~117px. Last notch of type rather than a
   3rd layout — the delivery title still wraps here, but cleanly, chevron attached. */
@media (max-width: 359px) {
     .home-guarantees__item b { font-size: .74rem; }
     .home-guarantees__item span { font-size: .68rem; }
}

/* ---- Магазини — dark editorial moat band (breaks the grey/white rhythm) -- */
.home-stores {
     position: relative; background: var(--sw-surface-dark, #0c0c0c);
     padding: 60px 0; overflow: hidden;
}
/* deal edge → kit .sw-deal-edge (added on the <section> in index_new.php) */
.home-stores__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.home-stores__eyebrow { color: #d7d2e8; }
.home-stores__title {
     font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -.02em;
     color: #fff; margin: 12px 0 14px;
}
.home-stores__sub { color: rgba(255,255,255,.6); font-size: 1.02rem; line-height: 1.65; max-width: 520px; margin: 0 0 22px; }
.home-stores__cities { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.home-stores__chip {
     display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
     color: rgba(255,255,255,.9); background: rgba(255,255,255,.08);
     border: 1px solid rgba(255,255,255,.14); border-radius: var(--sw-r-pill, 100px); padding: 7px 13px;
}
.home-stores__chip i { color: var(--sw-teal-bright, #00dfcd); font-size: 11px; }
.home-stores__cta { align-self: flex-start; }
.home-stores__media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-stores__photo {
     display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3;
     border: 1px solid rgba(255,255,255,.1);
}
.home-stores__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991px) {
     .home-stores__grid { grid-template-columns: 1fr; gap: 30px; }
     .home-stores__sub { max-width: none; }
}
@media (max-width: 767px) { .home-stores { padding: 44px 0; } .home-stores__media { gap: 8px; } }

/* ---- Продай (dark deal band; no direct kit component) ------------------- */
.home-sell {
     position: relative; background: var(--sw-surface-dark, #0c0c0c);
     padding: 76px 0; text-align: center; overflow: hidden;   /* was 60 — this band earns the room; see the note on __title */
}
/* deal edge → kit .sw-deal-edge (added on the <section> in index_new.php) */
.home-sell .container { position: relative; z-index: 1; }
.home-sell__eyebrow { color: #d7d2e8; justify-content: center; display: inline-flex; }
/* Bigger than the old 2.4rem cap, and the sub is lifted from .55 to .72 alpha and given
   room to breathe: this band carries the SELL side, which is where our inventory comes
   from, and it was reading like a footer CTA next to the sections around it. The extra
   presence is deliberate and comes from type + space rather than from more copy. */
.home-sell__title { font-weight: 800; font-size: clamp(1.75rem, 4.2vw, 2.9rem); letter-spacing: -.03em; color: #fff; margin: 0 0 14px; }
.home-sell__sub { color: rgba(255,255,255,.72); font-size: 1.05rem; line-height: 1.65; max-width: 620px; margin: 0 auto 26px; }
/* Three chips only — see the note in index_new.php. Flex-wrap is correct at three (they
   centre and wrap cleanly); it was only wrong at six, where it left a ragged 4+2.
   Given more weight than the old 14px inline text: this band sells the SUPPLY side, and
   supply is the bottleneck on the whole business, so it should not read as a footnote.
   The presence comes from size and space, not from more bullets. */
.home-sell__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-bottom: 34px; }
.home-sell__points span { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.9); font-size: 15px; font-weight: 600; }
.home-sell__points i { color: var(--sw-teal-bright, #00dfcd); font-size: 15px; flex: none; }
@media (max-width: 575px) {
     .home-sell__points { gap: 10px 20px; margin-bottom: 26px; }
     .home-sell__points span { font-size: 13.5px; }
}

/* ==========================================================================
   .sw-review — review card, still staged here (not yet in the kit). Marquee +
   deal-edge + section-header already migrated to components.css. Promote this
   to the kit in a later pass together with prodai's near-identical .pl-review
   (kept out of the homepage deploy so that ships home-scoped files only).
   ========================================================================== */

/* ---- Review card (used inside the .owl-reviews slider; owl controls width) -
   Tried as a chrome-less dark editorial band 2026-07-15 and reverted: with no
   photography to carry it, removing the panel left grey text floating on black,
   ragged quote lengths exposed, and the slider's peeked card reading as broken
   rather than as deliberate. The card is what was holding all three together. */
.sw-review {
     display: flex; flex-direction: column;
     background: var(--sw-bg, #fff); border: 1px solid var(--sw-line, #eaeaea);
     border-radius: var(--sw-r-card, 16px); padding: 24px 22px; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.sw-review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sw-review-stars { color: #f5a623; font-size: 13px; letter-spacing: 3px; }
.sw-review-src { color: var(--sw-muted, #9ca3af); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.sw-review-text {
     color: #374151; font-size: .95rem; line-height: 1.6; margin-bottom: 18px; flex: 1;
     display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.sw-review-who { display: flex; align-items: center; gap: 12px; }
.sw-review-av {
     width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
     background: var(--sw-tint-purple, #f0e6ff); color: var(--sw-purple, #7735d5); font-weight: 800; font-size: 16px;
}
.sw-review-meta { display: flex; flex-direction: column; line-height: 1.25; }
.sw-review-name { font-weight: 700; color: var(--sw-ink, #1a1a1a); font-size: .92rem; }
.sw-review-meta small { font-size: .8rem; color: var(--sw-muted, #9ca3af); }

/* ---- Media marquee → kit .sw-marquee (components.css) --------------------
   Desktop uses the kit's CSS animation; on mobile the kit disables it and a JS
   finger-drag driver (in index_new.php, ported from /prodai) takes over —
   auto-scroll + swipe. No CSS mobile override here, or it would fight the JS. */

/* ---- SEO internal links ------------------------------------------------- */
.home-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 34px; }
.home-links a {
     font-size: 13px; font-weight: 600; color: var(--sw-grey, #6b7280);
     background: var(--sw-bg, #fff); border: 1px solid var(--sw-line, #eaeaea);
     border-radius: var(--sw-r-pill, 100px); padding: 8px 15px; text-decoration: none; transition: all .2s ease;
}
.home-links a:hover { color: var(--sw-teal-ink, #2bbbbc); border-color: var(--sw-teal-ink, #2bbbbc); text-decoration: none; }