/*
 * fauna — redesign layer.
 *
 * Loaded AFTER the theme's own bundle, so it restyles the existing (working)
 * markup instead of rewriting 569 templates at once — the same strategy the admin
 * redesign used (`redesign.css` over legacy markup). Every value comes from the
 * handoff (design_handoff_faunamarket/README.md) and is expressed through the
 * tokens in tokens.css; no raw hex here either.
 *
 * Step 2 of the theme plan: the SHELL — top strip, sticky header (logo, search,
 * icon actions), navigation bar + mega menu, mobile drawer, footer.
 * One responsive tree, breakpoint 768px, 44px tap targets.
 */

/* ------------------------------------------------------------------ base -- */

body.page {
    color: var(--fa-ink-900);
    background: var(--fa-surface-0);
    /* the bundle sets "Open Sans"; the redesign is Manrope (tokens.css) */
    font-family: var(--fa-font);
    font-size: var(--fa-fs-body);
    line-height: var(--fa-lh-body);
}

.page input,
.page select,
.page textarea,
.page button { font-family: inherit; }

.page h1, .page h2, .page h3,
.page .fa-h1, .page .fa-h2, .page .fa-h3 {
    font-weight: 800;
    letter-spacing: var(--fa-ls-title);
    line-height: var(--fa-lh-title);
    color: var(--fa-ink-900);
}

/* --- rules that used to live in a <style> block inside main.twig ---------- *
 * They were client patches pasted into the head; they belong to the theme, not
 * to the layout file. Kept verbatim in behaviour.
 */
.chosen-container.chosen-with-drop .chosen-drop { width: 200px; }
.chosen-container-single .chosen-single { width: 200px; }
.user-panel__drop { right: 60px; }
.pointt:hover { cursor: pointer; }
.middle_mob_header,
.top_mob_header { display: inline-block; }

/* The bundle pins a FIXED width per breakpoint (…1230px at ≥1260px), so a bare
   max-width never wins — the page stayed 1230px wide instead of the handoff's
   1280px. width:auto hands control back to max-width. */
.page__container,
.content__container {
    width: auto;
    max-width: var(--fa-container);
    margin-inline: auto;
    padding-inline: var(--fa-page-pad);
}

@media (max-width: 767px) {
    .page__container,
    .content__container { padding-inline: var(--fa-page-pad-sm); }
}

.page a { color: var(--fa-green-500); }
.page a:hover { color: var(--fa-green-600); }

/* --------------------------------------------------------- top strip ------ */
/* handoff: #22302B, height ~38px, 13px/500; service links left, lang + phone right.
   Content is the CMS `info_header` menu — the same menu that used to be rendered
   as the main horizontal nav, which is why the category tree had no desktop
   entry point. */

.fa-topbar {
    background: var(--fa-ink-900);
    color: var(--fa-surface-0);
    font-size: 13px;
    font-weight: 500;
}

.fa-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fa-gap-md);
    min-height: 38px;
}

.fa-topbar__nav .list-nav__items {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fa-topbar__nav .list-nav__item { margin: 0; }

.fa-topbar a,
.fa-topbar .list-nav__link {
    color: var(--fa-surface-0);
    opacity: .82;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--fa-dur-fast) var(--fa-ease);
}

.fa-topbar a:hover,
.fa-topbar .list-nav__link:hover { opacity: 1; color: var(--fa-surface-0); }

.fa-topbar__aside {
    display: flex;
    align-items: center;
    gap: 18px;
}

.fa-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fa-topbar__link--phone { font-weight: 700; opacity: 1; }
.fa-topbar__icon { width: 15px; height: 15px; flex: none; }

/* language pills (handoff: УК / РУ, 999px radius) */
.fa-langs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12.5px;
    font-weight: 700;
}

.fa-langs__item {
    padding: 3px 8px;
    border-radius: var(--fa-radius-pill);
    color: var(--fa-surface-0);
    opacity: .72;
}

.fa-langs__item.is-active {
    background: var(--fa-mint-100);
    color: var(--fa-ink-900);
    opacity: 1;
}

/* ------------------------------------------------------------- header ----- */
/* handoff: white, sticky; logo 44px · search flex:1 max 560px · icon actions */

/* The ported theme paints the header group with the other client's blue-grey
   gradient (linear-gradient(90deg,#405363 …)) — that is what framed the header in
   a dark band on the first screenshot pass. faunamarket's header is white. */
.page__hgroup {
    background-image: none;
    background-color: var(--fa-surface-0);
}

/* Sticky + shadow belong to the full-bleed band (.page__hgroup), not to an inner
   container — a shadow on the inner one drew a 1200px-wide box floating in the
   middle of the viewport. */
.page__hgroup {
    position: sticky;
    top: 0;
    /* above the category bar, which the bundle pins at z-index 99 as a SIBLING of
       the header: with the header below it, the profile menu dropped out of the
       header band and the nav strip painted straight over it. */
    z-index: 100;
    padding-block: 0;
    /* the bundle pins `min-height:285px` on the header band (it had to fit the old
       background photo); the redesigned header is content-height */
    min-height: 0;
    box-shadow: var(--fa-shadow-header);
}

.fa-header { background: var(--fa-surface-0); }

/* The bundle's clearfix (`.page__container::before/after { content:" " }`) is a
   FLEX ITEM inside the header row: it contributed one 24px gap before the logo,
   so the logo sat 24px right of the content edge the nav bar starts at. */
.fa-header__inner::before,
.fa-header__inner::after,
/* same clearfix, same damage one row up: with space-between it took the two
   end slots, so the top bar's menu and its profile/language/phone group were
   squeezed ~160px inwards instead of sitting on the container edges. */
.fa-topbar__inner::before,
.fa-topbar__inner::after { display: none; }

.fa-header__inner {
    display: flex;
    align-items: center;
    gap: var(--fa-gap-lg);
    padding-block: var(--fa-gap-md);
}

.fa-header__logo { flex: none; }

.fa-header__search {
    /* 560px is the handoff width; it stays that wide and the actions row takes
       what is left (the counters sit next to it, the cart on the right edge).
       Below ~1280 the row no longer fits at 240 — the search is the element that
       gives way (the icons must not), so the floor is 200. */
    flex: 1 1 560px;
    min-width: 200px;
    max-width: 560px;
}

/* the autocomplete component ships with its own width from the bundle */
.fa-header__search .autocomplete,
.fa-header__search .autocomplete__input-group { width: 100%; }

/* Wishlist and compare follow the search; the cart keeps the right edge on its
   own. They used to be bunched against the cart with the whole group pushed
   right, which read as one four-item cluster. */
/* flex: 0 0 auto, not 1 1 auto: this box shrank together with the search below
   ~1280, but its own children (the counter labels are nowrap, the icons are
   fixed boxes) cannot follow — so they overflowed the header and the icons were
   squeezed to slivers. The search absorbs the shrinking instead. */
.fa-header__actions {
    display: flex;
    align-items: center;
    gap: var(--fa-gap-sm);
    margin-left: var(--fa-gap-xl);
    flex: 0 0 auto;
    min-width: 0;
}

.fa-header__actions .fa-header__cart {
    margin-left: auto;
    /* a guaranteed gap: at 1440 the row is tight, and without it the cart ends
       up glued to "Порівняння" again */
    padding-left: var(--fa-gap-lg);
}

.fa-header__burger,
.fa-header__call,
.fa-header__cart {
    min-width: var(--fa-tap-target);
    min-height: var(--fa-tap-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fa-header__call { color: var(--fa-green-500); }
.fa-header__call svg { width: 22px; height: 22px; }

/* The bundle adds `.logo__img{padding-bottom:50px}` under 992px (it made room for
   the old absolutely-positioned phone block) and caps the image by its parent —
   on mobile that collapsed the logo to 0×50 and the header showed no logo at all. */
.fa-header__logo img,
.logo img,
.logo2 img {
    height: 44px;
    width: auto;
    max-width: 100%;
    max-height: 44px;
    padding-bottom: 0;
    object-fit: contain;
}

/* The header wordmark is wider per unit of height than the handoff's mock-up
   (505.9×72.8 in the SVG vs 6.15:1 in the mock), so at the shared 44px it read
   ~25px wider than designed and filled the row edge to edge. 40px puts it back
   at the handoff's ~283px width and leaves air above and below. */
.fa-header__logo img { height: 40px; max-height: 40px; }

/* The bundle's `.logo{padding-top:13px}` (it used to clear the old phone block)
   pushed the image 13px down inside its box, so the wordmark sat below the
   optical centre of the row — off against the search field and the counters. */
.fa-header__logo .logo {
    padding-top: 0;
    display: flex;
    align-items: center;
}

@media (max-width: 767px) {
    /* Balance the 90px call+cart cluster with an equally wide burger slot.
       The logo is then centred against the viewport, not merely in the space
       left between one 44px button and two buttons. */
    .fa-header__burger {
        flex: 0 0 90px;
        justify-content: flex-start;
    }
    .fa-header__actions { flex: 0 0 90px; }

    .fa-header__logo img,
    .logo img {
        width: auto;
        height: 25px;
        max-width: 176px;
        max-height: 25px;
    }
    .logo { padding-top: 0; }
}

@media (max-width: 380px) {
    .fa-header__logo img,
    .logo img { height: 22px; max-width: 150px; max-height: 22px; }
}

/* Mobile header composition (handoff): burger · logo · call · cart in one 44px
   row, search on the second row. */
@media (max-width: 1199px) {
    .fa-header__inner {
        flex-wrap: wrap;
        gap: var(--fa-gap-sm);
        padding-block: var(--fa-gap-sm);
    }

    .fa-header__logo { flex: 1 1 auto; min-width: 0; text-align: center; }
    .fa-header__search { order: 5; flex: 1 0 100%; max-width: none; }

    /* the desktop rule lets the actions row GROW (so the counters can sit next
       to the search); on a phone that growth pushed the cart onto a line of its
       own, taking the call button with it */
    .fa-header__actions {
        flex: none;
        margin-left: auto;
        gap: 2px;
    }

    .fa-header__actions .fa-header__cart { padding-left: 0; }

    /* Bootstrap considers 992–1259px `md`, while this design already needs its
       compact navigation on iPad Pro. Override the utility classes so the
       drawer controls replace the wrapping desktop category bar. */
    .fa-topbar { display: none !important; }
    .page__mainnav-hor { display: none !important; }
    .fa-header__burger.hidden-md,
    .fa-header__call.hidden-md { display: inline-flex !important; }
    .fa-header__user { display: none !important; }

    .fa-header__burger {
        flex: 0 0 90px;
        justify-content: flex-start;
    }
    .fa-header__actions { flex: 0 0 90px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .fa-header__inner { position: relative; }
    .fa-header__logo {
        position: absolute;
        top: 15.5px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }

    .fa-header__logo img,
    .logo img {
        width: auto;
        height: 29px;
        max-width: 200px;
        max-height: 29px;
    }
}

/* ------------------------------------------------- category bar + mega ---- */
/* handoff: horizontal root categories; hover opens a mega panel of columns */

.page__mainnav-hor {
    background: var(--fa-surface-0);
    border-top: 1px solid var(--fa-border-100);
    position: relative;
}

/* The handoff bar holds 10 root categories on one line; this shop has 16 (three
   of them duplicates left over from the old catalogue), so the row is allowed to
   wrap instead of pushing the page 300px wider than the viewport. Tidying the
   duplicates in admin brings it back to a single line. */
.fa-nav__items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 2px;
    margin: 0 auto;
    padding: 0 var(--fa-page-pad);
    max-width: var(--fa-container);
    list-style: none;
}

.fa-nav__item { position: static; }

.fa-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* RU category names are longer than UA ones: at 10px side padding the 11
       roots measured 1247px + 40px of gaps against a 1280px container, so
       "Ветаптека" wrapped onto a second line. Tighter here, tighter still on
       narrow desktops — the bar must stay ONE line. */
    padding: 12px 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--fa-ink-900);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.fa-nav__link:hover,
.fa-nav__item:hover > .fa-nav__link {
    color: var(--fa-green-500);
    border-bottom-color: var(--fa-green-500);
}

.fa-nav__chevron { width: 13px; height: 13px; opacity: .55; }

/* The panel is full-bleed under the bar: the <li> is `position:static`, so it
   anchors to .page__mainnav-hor rather than to the item. */
.fa-mega {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 70;
    background: var(--fa-surface-0);
    border-radius: 0 0 var(--fa-radius-lg) var(--fa-radius-lg);
    box-shadow: var(--fa-shadow-mega);
    padding: 22px 0 26px;
    /* The panel, not the column box, is the scroller — vertical, like any
       page. Capping the column box instead made overgrown panels (Собаки)
       spill into extra columns off the right edge, where nothing hints that
       sideways content exists (owner, 07.08). */
    max-height: min(72vh, 660px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.fa-nav__item:hover > .fa-mega,
.fa-nav__item:focus-within > .fa-mega {
    display: block;
    animation: fa-mega-in .16s ease;
}

@keyframes fa-mega-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* "Собаки" alone has 26 second-level categories, so the panel holds far more
   than the four tidy columns of the handoff mock.

   Multi-column, not grid: the groups differ wildly in height (one child vs
   nine), and a grid puts each group in a fixed row-major cell — so a row was
   as tall as its tallest group and every shorter group in that row left a
   hole. Column flow packs them one after another instead, and column-fill
   balances the four columns; break-inside keeps a group whole. */
.fa-mega__cols {
    columns: 4;
    column-gap: 24px;
    column-fill: balance;
}

.fa-mega__col {
    /* inline-block + width:100% is what makes break-inside stick in a
       multi-column box in Chrome; on its own the rule is ignored there. */
    display: inline-block;
    width: 100%;
    margin-bottom: 18px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.fa-mega__title {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--fa-ink-900);
    margin-bottom: 6px;
}

/* A second-level category with no children keeps the tight spacing (Ветаптека
   is 39 of them in a row) but stays as bold as every other column title —
   owner 07.08: «головні категорії мають бути теж жирні», as on production. */
.fa-mega__col:not(:has(.fa-mega__link)) {
    margin-bottom: 0;
}

.fa-mega__col:not(:has(.fa-mega__link)) .fa-mega__title {
    margin-bottom: 0;
    padding: 3px 0;
}

.fa-mega__title:hover { color: var(--fa-green-500); }

.fa-mega__list { list-style: none; margin: 0; padding: 0; }

.fa-mega__link {
    display: block;
    padding: 3px 0;
    font-size: 13px;
    color: var(--fa-ink-500);
}

.fa-mega__link:hover { color: var(--fa-green-500); }

/* Closing "view all" row of a mega column (prod parity). */
.fa-mega__link--all { color: var(--fa-green-500); }
.fa-mega__link--all:hover { color: var(--fa-green-600); }

.fa-header__search input[type="text"],
.fa-header__search input[type="search"] {
    width: 100%;
    min-height: var(--fa-tap-target);
    padding: 0 var(--fa-gap-md);
    border: 1px solid var(--fa-border-200);
    border-radius: var(--fa-radius-md);
    background: var(--fa-surface-150);
    font-size: 14px;
    transition: border-color var(--fa-dur-fast) var(--fa-ease), background var(--fa-dur-fast) var(--fa-ease);
}

.fa-header__search input:focus {
    outline: none;
    border-color: var(--fa-green-500);
    background: var(--fa-surface-0);
}

.fa-header__search button,
.fa-header__search [type="submit"] {
    min-height: var(--fa-tap-target);
    min-width: var(--fa-tap-target);
    border-radius: var(--fa-radius-md);
    background: var(--fa-green-500);
    border: 0;
    color: var(--fa-surface-0);
    transition: background var(--fa-dur-fast) var(--fa-ease);
}

.fa-header__search button:hover { background: var(--fa-green-600); }

/* --- autocomplete search (shop/includes/search_and_brand/autocomplete.twig) --
 * The bundle styles this component for the old dark header: white input text on a
 * white border, and an absolutely positioned button with no positioned ancestor.
 * Both are fixed here, and the field takes the handoff shape (12px radius,
 * surface-150 fill, green submit inside on the right).
 */
.autocomplete { position: relative; }

.autocomplete__input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.fa-header__search .autocomplete__input {
    color: var(--fa-ink-900);
    background: var(--fa-surface-150);
    border: 1px solid var(--fa-border-200);
    border-radius: var(--fa-radius-md);
    height: var(--fa-tap-target);
    line-height: var(--fa-tap-target);
    padding: 0 calc(var(--fa-tap-target) + var(--fa-gap-sm)) 0 var(--fa-gap-md);
}

.fa-header__search .autocomplete__input::placeholder { color: var(--fa-ink-400); }

.fa-header__search .autocomplete__button {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--fa-tap-target);
    height: var(--fa-tap-target);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 var(--fa-radius-md) var(--fa-radius-md) 0;
}

.autocomplete__button-ico { width: 18px; height: 18px; display: block; }
.autocomplete__button-ico .svg-icon { width: 18px; height: 18px; }

.autocomplete__frame {
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-md);
    box-shadow: var(--fa-shadow-mega);
    margin-top: var(--fa-gap-xs);
    overflow: hidden;
}

.autocomplete__item {
    color: var(--fa-ink-900);
    padding: var(--fa-gap-sm) var(--fa-gap-md);
    border-bottom: 1px solid var(--fa-border-100);
}

.autocomplete__item:last-child { border-bottom: 0; }
.autocomplete__item:hover { background: var(--fa-mint-50); }
.autocomplete__product-title { font-size: 13.5px; font-weight: 700; }
.autocomplete__message { padding: var(--fa-gap-md); color: var(--fa-ink-500); }
.autocomplete__readmore { padding: var(--fa-gap-sm) var(--fa-gap-md); background: var(--fa-surface-50); }

/* Icon actions (handoff: wishlist · profile · cart, 44×44).
   The included partials are the ones the bundle re-renders over AJAX
   (`data-ajax-inject="wishlist-total"` …), so their markup stays untouched and
   the icon-only look is done here: the item becomes a 44px box, its label is
   collapsed and the link is stretched over the icon so the whole box stays
   clickable. The shop e-mail and the textual Sign in / Sign up pair are hidden —
   the dark top bar already carries the profile entry. */
.fa-header__user .user-panel {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* icon + its label ("Обране (2)", "Порівняння (0)") — the label was collapsed to
   nothing while the profile icon lived here too and space was tight; the profile
   entry moved to the top bar, so the pair reads properly now. */
.fa-header__user .user-panel__item {
    position: relative;
    min-height: var(--fa-tap-target);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    color: var(--fa-ink-900);
}

.fa-header__user .user-panel__item:hover { color: var(--fa-green-500); }

/* the wrapper the bundle sizes as 1.5em × 1em, and .svg-icon is capped by
   max-width:100% — so the icon inside it never grew past ~14px */
.fa-header__user .user-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* no shrinking: as flex items these boxes were squeezed to 9-11px and the
       heart / compare glyphs came out as thin slivers (same defect the cart had) */
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
}

/* 26px, the size the cart icon next to them already renders at (the bundle gives
   .cart-header__icon 33px) — at 22 they read as a different, smaller set. */
.fa-header__user .user-panel__icon .svg-icon { width: 26px; height: 26px; }

/* The <a> around the cart svg is a flex item of .cart-header with no size of its
   own, and the bundle caps every .svg-icon at max-width:100% — so the icon's
   26px was clamped by the anchor, which shrank to ~5.6px and the cart read as a
   sliver next to the counter. Give the anchor the same 26px box the wishlist /
   compare icons get, and keep it out of the flex shrink. */
.fa-header__cart .cart-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
}

.fa-header__cart .cart-header__icon > .svg-icon { width: 26px; height: 26px; flex: 0 0 auto; }

/* The user menu drops out of the header band, which is a stacking context at
   z-index 60, while the category bar's mega panel sits at 70 — so the panel
   painted OVER the open menu and its links landed under the nav strip. The menu
   belongs above both. */
.fa-header__user .user-panel__item:hover,
.fa-header__user .user-panel__item:focus-within { z-index: 90; }

.fa-header__user .user-panel__drop,
.user-panel__drop { z-index: 90; }

/* ---- profile menu in the top bar ---- */

/* The top bar is a SIBLING of the category strip (which the bundle pins at
   z-index 99), not a child of the header band — so without its own stacking
   position the profile menu opened behind that strip. */
.fa-topbar {
    position: relative;
    z-index: 101;
}

.fa-topbar__profile {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.fa-topbar__profile .fa-topbar__link { display: inline-flex; align-items: center; gap: 6px; }
.fa-topbar__caret { width: 12px; height: 12px; opacity: .8; }

.fa-topbar__profile .user-panel__drop {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    padding-top: 8px;
    z-index: 95;
}

.fa-topbar__profile .overlay {
    min-width: 220px;
    padding: 6px 0;
    border-radius: var(--fa-radius-md);
    background: var(--fa-surface-0);
    box-shadow: var(--fa-shadow-mega);
}

.fa-topbar__profile .overlay__item { padding: 0; }

.fa-topbar__profile .overlay__link {
    display: block;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fa-ink-900);
    text-decoration: none;
    white-space: nowrap;
}

.fa-topbar__profile .overlay__link:hover {
    background: var(--fa-mint-50);
    color: var(--fa-green-500);
}

.fa-header__user .user-panel__link {
    position: static;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.fa-header__user .user-panel__item:hover .user-panel__link { color: var(--fa-green-500); }

.fa-header__user .user-panel__item--email,
.fa-header__user .user-panel__item--separated:not([data-ajax-inject]):not(:has(.user-panel__icon)) {
    display: none;
}

/* cart counter — coral pill (handoff: coral-500 for the cart counter).
   The live class is .cart-header__badge (the bundle paints it #1963ab, the other
   client's blue); .cart-count is the aurora name. */
.cart-header__badge,
.cart-header__badge--empty,
.fa-header__cart .cart-count,
.fa-header__cart [class*="count"] {
    background: var(--fa-coral-500);
    color: var(--fa-surface-0);
    border-radius: var(--fa-radius-pill);
    font-size: 11px;
    font-weight: 800;
    min-width: 18px;
    padding: 0 5px;
    line-height: 18px;
    text-align: center;
}

/* the bundle sizes the badge 27×25 with line-height 27 for the old header */
.cart-header__badge {
    width: auto;
    height: auto;
    min-height: 18px;
}

/* the cart/user icons are painted #fff for the old dark header → invisible now */
.cart-header__icon,
.user-panel__icon,
.toolbar-element__icon,
.site-info__icon > .svg-icon { color: var(--fa-ink-900); }

.cart-header:hover .cart-header__icon { color: var(--fa-green-500); }

/* --------------------------------------------------- navigation + mega ---- */

.page__mainnav-hor {
    background: var(--fa-surface-0);
    border-top: 1px solid var(--fa-border-100);
    border-bottom: 1px solid var(--fa-border-100);
}

.page__mainnav-hor > .page__container > ul,
.page__mainnav-hor ul.nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fa-gap-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Only the bar's own links: a bare `.page__mainnav-hor a` also matched every
   link inside the mega panel and flattened its title/sub-link hierarchy
   (ink-900 + 700 everywhere) — the .fa-mega__* rules could never win.
   Colors are restated here because the single-class fa-nav / fa-mega
   rules lose to `.page a` (green) on specificity. */
.page__mainnav-hor .fa-nav__link {
    min-height: var(--fa-tap-target);
    color: var(--fa-ink-900);
    text-decoration: none;
}

.page__mainnav-hor .fa-nav__link:hover,
.page__mainnav-hor .fa-nav__item:hover > .fa-nav__link,
.page__mainnav-hor .active > .fa-nav__link {
    color: var(--fa-green-500);
}

.page__mainnav-hor .fa-mega__title,
.page__mainnav-hor .fa-mega__link {
    text-decoration: none;
}

.page__mainnav-hor .fa-mega__title { color: var(--fa-ink-900); }
.page__mainnav-hor .fa-mega__title:hover { color: var(--fa-green-500); }
.page__mainnav-hor .fa-mega__link { color: var(--fa-ink-500); }
.page__mainnav-hor .fa-mega__link:hover,
.page__mainnav-hor .fa-mega__link--all { color: var(--fa-green-500); }
.page__mainnav-hor .fa-mega__link--all:hover { color: var(--fa-green-600); }

/* the dropdown of a category becomes the mega panel */
.page__mainnav-hor li > ul {
    background: var(--fa-surface-0);
    border-radius: var(--fa-radius-lg);
    box-shadow: var(--fa-shadow-mega);
    padding: var(--fa-gap-lg);
    animation: fa-mega-in var(--fa-dur-fast) var(--fa-ease);
}

/* ------------------------------------------------------ mobile drawer ---- */
/* handoff: 318px panel from the left, overlay fade, close by X or overlay */

/* The theme parks the drawer at left:-250px and opens it with translateX(250px).
   Widening it to the handoff's 318px means moving BOTH numbers — changing only the
   width leaves 68px of the panel on screen and shoves the whole page right
   (caught on the first screenshot pass). */
.page__mobile {
    width: 318px;
    left: -318px;
    background: var(--fa-surface-0);
    color: var(--fa-ink-900);
    box-shadow: var(--fa-shadow-mega);
}

.page__mobile--js-open {
    transform: translateX(318px);
    -webkit-transform: translateX(318px);
}

@media (max-width: 380px) {
    .page__mobile { width: 88vw; left: -88vw; }
    .page__mobile--js-open {
        transform: translateX(88vw);
        -webkit-transform: translateX(88vw);
    }
}

.page__mobile a {
    display: flex;
    align-items: center;
    min-height: var(--fa-tap-target);
    color: var(--fa-ink-900);
    text-decoration: none;
}

.page__mobile a:hover { color: var(--fa-green-500); }

.page__overlay:not(.hidden) {
    background: rgba(34, 48, 43, .48);
    animation: fa-fade-in .2s var(--fa-ease);
}

/* ------------------------------------------------------------- footer ----- */
/* handoff: surface-200 — logo, copyright, Catalog/User/Contacts columns, socials */

.page__fgroup,
.page__footer {
    background: var(--fa-surface-200);
    color: var(--fa-ink-500);
}

.fa-footer {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
    gap: var(--fa-gap-lg);
    padding-block: var(--fa-gap-2xl);
    border-top: 1px solid var(--fa-border-300);
}

.fa-footer a {
    color: var(--fa-ink-500);
    text-decoration: none;
}

.fa-footer a:hover { color: var(--fa-green-500); }

.fa-footer__brand img { height: 34px; max-height: 34px; }

.fa-footer__copy {
    margin-top: var(--fa-gap-sm);
    font-size: 12.5px;
    color: var(--fa-ink-400);
    max-width: 240px;
}

.fa-footer__phone {
    font-weight: 700;
    color: var(--fa-ink-900) !important;
    font-size: 14px;
}

.fa-footer__phone:hover { color: var(--fa-green-500) !important; }

.fa-footer__title--sub { margin-top: var(--fa-gap-md); }

/* payment badges (handoff: VISA #1a1f71, Mastercard coral/amber) */
.fa-pay {
    display: flex;
    gap: 8px;
    margin-top: var(--fa-gap-md);
}

.fa-pay__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 26px;
    padding: 0 8px;
    border-radius: var(--fa-radius-sm);
    background: var(--fa-surface-0);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}

.fa-pay__badge--visa { color: #1a1f71; }
.fa-pay__badge--mc { color: #eb001b; }

@media (max-width: 991px) {
    .fa-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575px) {
    .fa-footer { grid-template-columns: 1fr; gap: var(--fa-gap-md); }
}

/* The column headings are `.footer__title`, painted #fff by the bundle for the old
   dark footer — invisible on surface-200 (screenshot showed empty column heads). */
.footer__title,
.footer__column-wrap b,
.footer__column-wrap strong,
.footer h3, .footer h4 {
    color: var(--fa-ink-900);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: var(--fa-gap-sm);
}

/* the phone/email rows use an icon + white text from the same dark-footer era */
.footer__item,
.footer__item a,
.footer__link { color: var(--fa-ink-500); }
.footer__item-ico { color: var(--fa-green-500); }
.footer__items { list-style: none; margin: 0; padding: 0; }
.footer__item { padding: 2px 0; }

.basement {
    border-top: 1px solid var(--fa-border-100);
    padding-block: var(--fa-gap-lg);
    font-size: 12.5px;
    color: var(--fa-ink-400);
}

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 767px) {
    .logo2 img { height: 31px; }

    /* every interactive target in the shell stays 44px on touch */
    .fa-header a,
    .fa-header button,
    .page__mobile a { min-height: var(--fa-tap-target); }
}

/* =====================================================================
 * HOME — sections of the redesigned start page (shop/start_page.twig).
 * Composition per the handoff: hero pair, advantages, promo pair, product
 * grids, brand chips, reviews on mint, article cards, collapsible SEO block.
 * ===================================================================== */

.fa-section { padding-block: var(--fa-gap-2xl); }
.fa-section--mint { background: var(--fa-mint-50); }

.fa-h2 {
    font-size: var(--fa-fs-h2);
    font-weight: 800;
    letter-spacing: var(--fa-ls-title);
    color: var(--fa-ink-900);
    margin: 0 0 var(--fa-gap-lg);
}

/* section heading row: title left, "see all" right (handoff) */
.fa-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--fa-gap-md);
    margin-bottom: 22px;
}

.fa-section__head .fa-h2 { margin: 0; }

.fa-section__all {
    font-size: 14px;
    font-weight: 700;
    color: var(--fa-green-500);
    text-decoration: none;
    white-space: nowrap;
}

.fa-section__all::after { content: " →"; }
.fa-section { padding-block: var(--fa-section-gap); }

.fa-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--fa-gap-sm);
    min-height: var(--fa-tap-target);
    padding: 0 var(--fa-gap-lg);
    border-radius: var(--fa-radius-md);
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
}

.fa-btn--white { background: var(--fa-surface-0); color: var(--fa-ink-900); }
.fa-btn--white:hover { background: var(--fa-surface-100); }

/* ------------------------------------------------------------- hero ----- */

/* Two hero cards side by side (handoff §4). The banner images ARE the creatives
   in this shop (text is baked into them), so the card is the image plus the
   optional caption the client typed on the banner. */
.fa-hero__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fa-gap-lg);
}

/* The card is a tinted panel with the copy on one side and the photo on the
   other (handoff §4) — text and picture are separate fields of the banner, so
   the headline is real, selectable, translatable text instead of lettering
   baked into a JPEG. */
.fa-hero__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 28px;
    border-radius: var(--fa-radius-xl);
    overflow: hidden;
    background: var(--fa-surface-150);
    min-height: 196px;
    text-decoration: none;
    color: var(--fa-ink-900);
}

/* the pack's pair of card tints */
.fa-hero__card--t0 { background: #E9F3FA; }
.fa-hero__card--t1 { background: #FBEDE9; }
.fa-hero__card--t0 .fa-hero__cta { background: var(--fa-green-500); }
.fa-hero__card--t1 .fa-hero__cta { background: var(--fa-coral-500); }
.fa-hero__card--t0:hover .fa-hero__cta { background: var(--fa-green-600); }
.fa-hero__card--t1:hover .fa-hero__cta { background: var(--fa-coral-600); }

.fa-hero__card--wide { grid-column: 1 / -1; }

.fa-hero__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.fa-hero__title {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.08;
    color: var(--fa-ink-900);
    text-wrap: balance;
}

.fa-hero__sub {
    font-size: 15px;
    line-height: 1.35;
    color: var(--fa-ink-500);
    max-width: 34ch;
}

.fa-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 2px;
    padding: 0 20px;
    border-radius: var(--fa-radius-btn);
    background: var(--fa-green-500);
    color: var(--fa-surface-0);
    font-size: 14px;
    font-weight: 800;
    transition: background-color .15s;
}

.fa-hero__cta svg { width: 16px; height: 16px; }

/* A glare that sweeps across the button every few seconds — enough movement to
   catch the eye, short enough not to nag. The two cards are offset so they do
   not flash in unison. */
.fa-hero__cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.fa-hero__cta::after {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
    transform: translateX(-260%) rotate(14deg);
    animation: fa-shine 5s ease-in-out infinite;
    pointer-events: none;
}

.fa-hero__card--t1 .fa-hero__cta::after { animation-delay: 2.4s; }

@keyframes fa-shine {
    0%, 62%  { transform: translateX(-260%) rotate(14deg); }
    100%     { transform: translateX(420%) rotate(14deg); }
}

/* the sweep is decoration; anyone who asked for less motion gets none */
@media (prefers-reduced-motion: reduce) {
    .fa-hero__cta::after { animation: none; opacity: 0; }
}

.fa-hero__photo {
    flex: 0 0 auto;
    width: 190px;
    height: 150px;
    border-radius: var(--fa-radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fa-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* a creative with no headline is artwork: it fills the card as before, and the
   card drops its padding so nothing frames it */
.fa-hero__card--plain {
    display: block;
    padding: 0;
}

.fa-hero__card--plain img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
}

/* -------------------------------------------------------- advantages --- */

.fa-adv__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--fa-gap-md);
}

.fa-adv__item {
    display: flex;
    gap: var(--fa-gap-md);
    align-items: flex-start;
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    padding: var(--fa-gap-md);
}

/* `.fa-adv__icon` alone loses to a bundle rule that makes the span display:block,
   which broke the centring (the glyph sat in the tile's top-left corner) — the
   two-class selector below is what actually applies. */
.fa-adv__item .fa-adv__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fa-adv__icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: var(--fa-radius-md);
    background: var(--fa-mint-100);
    color: var(--fa-green-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;   /* the inline SVG sat on the text baseline, i.e. low in the tile */
}

/* the SVGs carry width/height attributes (20px) — too small for a 52px tile */
.fa-adv__icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

.fa-adv__item b {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--fa-ink-900);
}

.fa-adv__item span {
    display: block;
    font-size: 12.5px;
    color: var(--fa-ink-400);
    margin-top: 2px;
}

/* --------------------------------------------------------- promo pair -- */

.fa-promo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fa-gap-lg);
}

.fa-promo__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fa-gap-sm);
    border-radius: var(--fa-radius-xl);
    padding: var(--fa-gap-xl);
    min-height: 150px;
    color: var(--fa-surface-0);
    text-decoration: none;
}

/* handoff gradients are 120deg, not 135 */
.fa-promo__card--green { background: var(--fa-gradient-green); }
.fa-promo__card--coral { background: var(--fa-gradient-coral); }
.fa-promo__card:hover { color: var(--fa-surface-0); filter: brightness(1.03); }

/* The promo text was dark-on-gradient: `.page a { color: green }` and the
   generic heading colour outrank a bare `.fa-promo__card { color: #fff }`
   inherited value. State it on the children. */
.fa-promo__card,
.fa-promo__card .fa-promo__title,
.fa-promo__card .fa-promo__sub { color: var(--fa-surface-0); }

.fa-promo__title { font-size: 22px; font-weight: 800; }
.fa-promo__sub { font-size: 13.5px; opacity: .92; margin-bottom: var(--fa-gap-sm); }

/* ------------------------------------------------- grids (products) ---- */
/* The widgets render the theme's own product markup; the grid is ours. */

/* =====================================================================
 * home page sections (S2): pets, brands, reviews, articles.
 * The card grids live in cards.css; the widget templates in themes/fauna/widgets
 * render the markup these rules target.
 * ===================================================================== */

/* ------------------------------------------------- pick a category ------- */

.fa-pets__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--fa-gap-md);
}

.fa-pet {
    display: flex;
    flex-direction: column;
    gap: var(--fa-gap-sm);
    padding: var(--fa-gap-md);
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    box-shadow: var(--fa-shadow-card);
    transition: transform var(--fa-dur-micro) var(--fa-ease),
                box-shadow var(--fa-dur-micro) var(--fa-ease);
}

.fa-pet:hover { transform: translateY(-4px); box-shadow: var(--fa-shadow-hover); }

.fa-pet__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--fa-ink-900);
}

.fa-pet__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px;
    border-radius: var(--fa-radius-md);
    background: var(--fa-mint-50);
    overflow: hidden;
}

/* The shop's category pictures are wide banners (190×95). `contain` letterboxed
   them inside the mint plate — dark ones read as black bars. Fill the plate
   instead, cropping the sides, which is how the pack draws this tile. */
.fa-pet__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fa-pet__name { font-size: 16px; font-weight: 800; text-align: center; }
.fa-pet__price,
.fa-pet__count { font-size: 12.5px; font-weight: 600; color: var(--fa-ink-400); }

.fa-pet__links { list-style: none; margin: 0; padding: 0; }

.fa-pet__links a {
    display: block;
    padding: 2px 0;
    font-size: 12.5px;
    color: var(--fa-ink-500);
    text-decoration: none;
}

.fa-pet__links a:hover { color: var(--fa-green-500); }

/* ------------------------------------------------------------ brands --- */

.fa-brands__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.fa-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
    padding: var(--fa-gap-md);
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color var(--fa-dur-fast) var(--fa-ease);
}

.fa-brand:hover { border-color: var(--fa-green-500); }
.fa-brand img { max-width: 100%; max-height: 56px; object-fit: contain; }

.fa-brand__name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--fa-ink-500);
    text-align: center;
}

/* ----------------------------------------------------------- reviews --- */

.fa-reviews__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.fa-review {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--fa-gap-lg);
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-mint);
    border-radius: var(--fa-radius-lg);
}

/* Real reviews here run to 1 100 characters; the handoff card is a short quote.
   Clamped rather than truncated server-side so the full text stays in the DOM
   (and on the product page the same comment renders in full). */
.fa-review__text {
    flex: 1;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fa-ink-700);
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* rating stars (handoff: amber-500) */
.fa-stars { display: inline-flex; gap: 2px; }

.fa-star {
    width: 15px;
    height: 15px;
    fill: var(--fa-border-200);
}

.fa-star.is-on { fill: var(--fa-amber-500); }

.fa-review__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}

.fa-review__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fa-mint-100);
    color: var(--fa-green-500);
    font-weight: 800;
}

.fa-review__who { display: flex; flex-direction: column; flex: 1; }
.fa-review__who b { font-size: 13.5px; font-weight: 800; }
.fa-review__who time { font-size: 12px; color: var(--fa-ink-400); }
.fa-review__link { font-size: 18px; text-decoration: none; }

/* ---------------------------------------------------------- articles --- */

.fa-articles__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.fa-article {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    box-shadow: var(--fa-shadow-card);
    overflow: hidden;
    transition: transform var(--fa-dur-micro) var(--fa-ease),
                box-shadow var(--fa-dur-micro) var(--fa-ease);
}

.fa-article:hover { transform: translateY(-4px); box-shadow: var(--fa-shadow-hover); }

.fa-article__link {
    display: block;
    padding: var(--fa-gap-lg);
    text-decoration: none;
    color: var(--fa-ink-900);
}

.fa-article__meta {
    display: flex;
    align-items: center;
    gap: var(--fa-gap-sm);
    margin-bottom: var(--fa-gap-sm);
    font-size: 12px;
    color: var(--fa-ink-400);
}

.fa-article__badge {
    padding: 3px 9px;
    border-radius: var(--fa-radius-xs);
    background: var(--fa-mint-100);
    color: var(--fa-green-500);
    font-weight: 700;
}

.fa-article__title { margin: 0 0 6px; font-size: 16px; font-weight: 800; line-height: 1.3; }
.fa-article__lead { margin: 0; font-size: 13.5px; color: var(--fa-ink-500); line-height: 1.5; }

@media (max-width: 991px) {
    .fa-pets__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fa-articles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .fa-section { padding-block: var(--fa-section-gap-sm); }
    .fa-hero__grid { grid-template-columns: 1fr; }
    .fa-hero__card { padding: 20px; gap: 14px; min-height: 168px; }
    .fa-hero__photo { width: 130px; height: 120px; }
    .fa-hero__sub { font-size: 14px; }
    .fa-pets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fa-pet__photo { height: 96px; }
    .fa-articles__grid { grid-template-columns: 1fr; }
    .fa-brands__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* --------------------------------------------------------- seo block --- */
/* The shop ships a very long SEO text; the handoff collapses it behind
   "Читати більше" instead of letting it dominate the page. */

.fa-seo {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    padding: var(--fa-gap-xl);
}

.fa-seo__body {
    max-height: 190px;
    overflow: hidden;
    position: relative;
    color: var(--fa-ink-500);
    font-size: 14px;
}

.fa-seo__body::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--fa-surface-0));
}

.fa-seo--open .fa-seo__body { max-height: none; }
.fa-seo--open .fa-seo__body::after { display: none; }

.fa-seo__more {
    margin-top: var(--fa-gap-md);
    background: none;
    border: 0;
    padding: 0;
    color: var(--fa-green-500);
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
    min-height: var(--fa-tap-target);
}

/* -------------------------------------------------------- responsive --- */

@media (max-width: 1023px) {
    .fa-adv__grid { grid-template-columns: repeat(2, 1fr); }
}

/* The theme's `.page__container` carries Bootstrap-style clearfix pseudo
   elements; when a grid class landed on the same element those ::before/::after
   became grid items and pushed every card one cell right (caught on screenshot).
   Grids now live on an inner div, and pseudo elements are neutralised anyway. */
.fa-adv__grid::before, .fa-adv__grid::after,
.fa-promo::before, .fa-promo::after,
.fa-grid::before, .fa-grid::after,
.fa-reviews::before, .fa-reviews::after,
.fa-articles::before, .fa-articles::after { display: none; }

/* Theme typography colours these spans; the promo cards are dark-on-dark without
   an explicit override (screenshot: title barely readable on the gradient). */
.fa-promo__card .fa-promo__title,
.fa-promo__card .fa-promo__sub { color: var(--fa-surface-0); }
.fa-promo__card .fa-promo__sub { opacity: .92; }

/* --- pieces freed from inline styles in includes/header*.twig -------------- *
 * Those inline rules were written for the old dark photo header (white text,
 * text-shadow, pixel margins) and could not be overridden from a stylesheet.
 */
.site-info--schedule {
    font-weight: 600;
    font-size: 13px;
    color: var(--fa-ink-500);
    text-align: left;
    justify-content: flex-start;
    padding-left: 0;
}

.header__lang { margin-left: var(--fa-gap-sm); }
.header__lang .chosen-container { font-size: 13px; }

/* =====================================================================
 * S3 — category / search / brand / bestseller listing.
 * Same markup, new layout: 280px sticky filter rail + card grid, styled
 * filter panels, sorting select, pagination, mobile filter sheet.
 * ===================================================================== */

.fa-cat__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--fa-gap-md);
    margin-bottom: var(--fa-gap-lg);
}

.fa-cat__head .content__col:first-child { flex: 1; }
.fa-cat__head .content__title { margin: 0; font-size: var(--fa-fs-h1-cat); }

.fa-cat__tools {
    display: flex;
    align-items: center;
    gap: var(--fa-gap-md);
}

.fa-cat__count { margin: 0; font-size: 13px; color: var(--fa-ink-400); white-space: nowrap; }
.fa-cat__count b { color: var(--fa-ink-900); font-weight: 800; }

/* --- layout --------------------------------------------------------- */

.fa-cat {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--fa-gap-lg);
    margin: 0;
}

.fa-cat::before,
.fa-cat::after { content: none; display: none; }

/* the col-* classes stay on the children for other consumers; the grid owns
   width and float here */
.fa-cat > .content__sidebar,
.fa-cat > .content__content {
    width: auto;
    max-width: none;
    float: none;
    padding: 0;
    min-width: 0;
}

/* Sticky rail WITHOUT an inner scroll: an inner max-height clipped the filter
   panels below a long subcategory list, so the filters were unreachable. A rail
   taller than the viewport simply scrolls with the page. */
.fa-cat__rail {
    position: sticky;
    top: 96px;
    align-self: start;
}

.sidebar__item:not(:last-child) { margin-bottom: var(--fa-gap-md); }

/* Every list in the rail is capped and scrolls inside its own card: this shop
   has 25 subcategories under "Собаки", ~40 brands and ~60 filter categories, so
   an uncapped rail ran 1 900px and the product grid started next to blank space
   (handoff caps each card at roughly nine rows). */
/* `.filter__checkgroup` is ONE checkbox row, not the list — capping it caps
   nothing. The scroll belongs to `.filter__inner`, the box that holds the rows;
   the price panel keeps its slider visible, so it is excluded. */
.sidebar-nav__list,
.fa-cat__rail .filter__item:not([data-filter-name="price"]) .filter__inner {
    max-height: 268px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* --- subcategory nav ------------------------------------------------ */

.sidebar-nav {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    overflow: hidden;
}

.sidebar-nav__header { padding: 14px 18px 6px; }

.sidebar-nav__title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--fa-ink-900);
}

.sidebar-nav__list { list-style: none; margin: 0; padding: 0 8px 12px; }
.sidebar-nav__item { border: 0; }

.sidebar-nav__link {
    display: block;
    padding: 7px 10px;
    border-radius: var(--fa-radius-sm);
    font-size: 13.5px;
    color: var(--fa-ink-500);
    text-decoration: none;
}

.sidebar-nav__link:hover { background: var(--fa-mint-50); color: var(--fa-green-500); }
.sidebar-nav__item--active > .sidebar-nav__link { background: var(--fa-mint-100); color: var(--fa-green-500); font-weight: 700; }

/* --- filter panels -------------------------------------------------- */

.filter { display: flex; flex-direction: column; gap: var(--fa-gap-md); }

.filter__item {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    overflow: hidden;
}

.filter__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fa-gap-sm);
    padding: 14px 18px;
    cursor: pointer;
}

.filter__title { font-size: 15px; font-weight: 800; color: var(--fa-ink-900); }

.filter__handle .filter__icon { width: 14px; height: 14px; color: var(--fa-ink-400); }
.filter__icon.is-hidden { display: none; }

.filter__inner { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 11px; }
.filter__inner--js-hidden { display: none; }
.filter__inner--scroll { max-height: 260px; overflow-y: auto; }

.filter__checkgroup { margin: 0; }

.checkgroup { display: flex; align-items: center; }

.checkgroup__checkbox { accent-color: var(--fa-green-500); width: 17px; height: 17px; flex: 0 0 17px; }

.checkgroup__label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-height: 34px;
    margin: 0 0 0 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fa-ink-700);
    cursor: pointer;
}

.checkgroup__link,
.filter__checkgroup-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fa-gap-sm);
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.checkgroup__count { font-size: 12px; font-weight: 600; color: var(--fa-ink-200); }
.checkgroup__link.disabled,
.filter__checkgroup-title.disabled { color: var(--fa-ink-200); pointer-events: none; }

/* price */
.filter-price { display: flex; flex-direction: column; gap: var(--fa-gap-md); }
.filter-price__row--flex { display: flex; gap: var(--fa-gap-sm); }
.filter-price__cell { flex: 1; min-width: 0; }
.filter-price__form-group { display: flex; align-items: center; gap: 6px; }
.filter-price__label { font-size: 12.5px; color: var(--fa-ink-400); }

.filter-price__input {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0 10px;
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-btn);
    background: var(--fa-surface-0);
    color: var(--fa-ink-900);
    font-size: 13px;
    font-weight: 600;
}

.filter-price__input:focus { outline: none; border-color: var(--fa-green-500); }

/* The bundle turns [data-range-slider] into a jQuery-UI slider, so the parts are
   .ui-slider-range (the selected band — painted the other client's #1963ab blue)
   and .ui-slider-handle (black squares). */
.range-slider__wrapper { padding: 8px 2px 0; }

.range-slider__control.ui-slider {
    position: relative;
    border: 0;
    box-shadow: none;
    background: var(--fa-border-200);
    height: 4px;
    border-radius: var(--fa-radius-pill);
}

.range-slider__control .ui-slider-range {
    background: var(--fa-green-500);
    border: 0;
    border-radius: var(--fa-radius-pill);
}

.range-slider__control .ui-slider-handle {
    width: 18px;
    height: 18px;
    top: -7px;
    margin-left: -9px;
    border: 2px solid var(--fa-green-500);
    border-radius: 50%;
    background: var(--fa-surface-0);
    box-shadow: var(--fa-shadow-card);
    cursor: grab;
}

.range-slider__control .ui-slider-handle:focus { outline: none; box-shadow: 0 0 0 4px var(--fa-mint-100); }

/* --- sorting select ------------------------------------------------- */

.catalog-toolbar { display: flex; align-items: center; gap: var(--fa-gap-sm); }

.catalog-toolbar__item { display: flex; align-items: center; gap: 8px; }

.catalog-toolbar__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--fa-ink-400);
    white-space: nowrap;
}

.catalog-toolbar__field select,
.catalog-toolbar select.form-control {
    min-height: var(--fa-tap-target);
    padding: 0 var(--fa-gap-md);
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-btn);
    background: var(--fa-surface-0);
    color: var(--fa-ink-900);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

/* --- pagination ----------------------------------------------------- */

/* handoff: pagination centred under the grid */
.content__pagination {
    margin-top: var(--fa-gap-xl);
    display: flex;
    justify-content: center;
}

/* SEO copy under the listing is a card in the handoff, and its link list runs in
   columns instead of one 60-item ladder. */
.fa-seo-card {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    padding: var(--fa-gap-xl);
}

.fa-seo-card ul {
    columns: 4 220px;
    column-gap: var(--fa-gap-lg);
    list-style: none;
    padding: 0;
}

.fa-seo-card ul li { break-inside: avoid; padding: 3px 0; }

@media (max-width: 767px) {
    .fa-seo-card { padding: var(--fa-gap-md); }
    .fa-seo-card ul { columns: 1; }
}

.paginator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.paginator__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--fa-tap-target);
    min-height: var(--fa-tap-target);
    padding: 0 10px;
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-btn);
    background: var(--fa-surface-0);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--fa-ink-700);
}

.paginator__item a { color: inherit; text-decoration: none; }
.paginator__item:hover { border-color: var(--fa-green-500); color: var(--fa-green-500); }

.paginator__item--active {
    background: var(--fa-green-500);
    border-color: var(--fa-green-500);
    color: var(--fa-surface-0);
}

.paginator__item--dots { border: 0; background: none; min-width: auto; padding: 0 2px; }
.paginator__arrow { width: 14px; height: 14px; display: block; }

/* --- catalog button (left rail on inner pages) ---------------------- */

.catalog-btn__button {
    background: var(--fa-green-500);
    border-radius: var(--fa-radius-md);
    min-height: var(--fa-tap-target);
    padding: 0 var(--fa-gap-md);
}

.catalog-btn__button:hover { background: var(--fa-green-600); }
.catalog-btn__label { font-size: 13.5px; font-weight: 800; }

.catalog-btn__drop,
.catalog-btn__menu {
    background: var(--fa-surface-0);
    border-radius: var(--fa-radius-lg);
    box-shadow: var(--fa-shadow-mega);
    overflow: hidden;
}

/* --- mobile: filters as a bottom sheet ------------------------------ */

@media (max-width: 767px) {
    .fa-cat { grid-template-columns: 1fr; gap: var(--fa-gap-md); }
    .fa-cat__rail { position: static; max-height: none; overflow: visible; }
    .fa-cat__head { flex-wrap: wrap; }
    .fa-cat__head .content__title { font-size: 23px; }

    [data-filter-toggle--btn] {
        width: 100%;
        min-height: var(--fa-tap-target);
        border: 1.5px solid var(--fa-border-200);
        border-radius: var(--fa-radius-btn);
        background: var(--fa-surface-0);
        color: var(--fa-ink-900);
        font-weight: 800;
        font-size: 13.5px;
    }

    /* the bundle slideToggle()s this block; when open it becomes the sheet */
    [data-filter-toggle--filter] {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 90;
        max-height: 78vh;
        overflow-y: auto;
        margin: 0;
        padding: var(--fa-gap-md) var(--fa-page-pad-sm) var(--fa-gap-xl);
        background: var(--fa-surface-100);
        border-radius: var(--fa-radius-sheet);
        box-shadow: var(--fa-shadow-sheet);
        animation: fa-sheet-up var(--fa-dur-slow) var(--fa-ease);
    }

    [data-filter-toggle--filter]::before {
        content: "";
        display: block;
        width: 44px;
        height: 4px;
        margin: 0 auto var(--fa-gap-md);
        border-radius: var(--fa-radius-pill);
        background: var(--fa-border-200);
    }
}

/* --- subcategory pills (under the listing) -------------------------------- */

.fa-subcats .sidebar-nav {
    background: none;
    border: 0;
    border-radius: 0;
}

.fa-subcats .sidebar-nav__header { padding: 0 0 var(--fa-gap-sm); }
.fa-subcats .sidebar-nav__title { font-size: 16px; }

.fa-subcats .sidebar-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fa-gap-sm);
    padding: 0;
}

.fa-subcats .sidebar-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--fa-border-200);
    border-radius: var(--fa-radius-pill);
    background: var(--fa-surface-0);
    color: var(--fa-ink-700);
    font-size: 13px;
    font-weight: 600;
}

.fa-subcats .sidebar-nav__link:hover {
    border-color: var(--fa-green-500);
    background: var(--fa-mint-50);
    color: var(--fa-green-500);
}

/* --- active filter chips + reset ----------------------------------------- */

.active-filters__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fa-gap-sm);
    list-style: none;
    margin: 0 0 var(--fa-gap-md);
    padding: 0;
}

.active-filters__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--fa-border-mint);
    border-radius: var(--fa-radius-pill);
    background: var(--fa-mint-50);
    color: var(--fa-green-500);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.active-filters__btn:hover { background: var(--fa-mint-100); }
.active-filters__btn-ico { width: 10px; height: 10px; display: block; }

/* --- empty state ---------------------------------------------------------- */

.fa-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fa-gap-sm);
    padding: var(--fa-gap-2xl) var(--fa-gap-lg);
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    text-align: center;
}

.fa-empty__icon { color: var(--fa-ink-200); }
.fa-empty__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--fa-ink-900); }
.fa-empty__text { margin: 0; font-size: 14px; color: var(--fa-ink-500); max-width: 460px; }

.fa-btn--reset {
    margin-top: var(--fa-gap-sm);
    background: var(--fa-green-500);
    color: var(--fa-surface-0);
}

.fa-btn--reset:hover { background: var(--fa-green-600); color: var(--fa-surface-0); }

/* =====================================================================
 * S4 — product page.
 * Gallery + info two-column, mint price block, variant chips, tabs,
 * store-availability list, sticky mobile buy bar.
 * ===================================================================== */

.content__row.row[data-product-scope] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--fa-gap-2xl);
    margin: 0 0 var(--fa-gap-xl);
}

.content__row.row[data-product-scope]::before,
.content__row.row[data-product-scope]::after { content: none; display: none; }

.content__row.row[data-product-scope] > [class*="col-"] {
    width: auto;
    float: none;
    padding: 0;
    min-width: 0;
}

/* --- gallery -------------------------------------------------------- */

[data-product-photo-scope] {
    position: sticky;
    top: 96px;
    /* the gallery fills its column — the 520px cap left dead space beside it on
       a 1440px screen (owner's call) */
    max-width: 100%;
}

/* The bundle builds the square photo box with `padding-bottom:100%` and pins the
   image absolutely inside it. Turning the box into a flexbox without undoing that
   collapsed the gallery to a 40px strip (screenshot). Explicit height + a static
   image instead. */
[data-product-photo-scope] .product-photo__item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 440px;
    padding: var(--fa-gap-lg);
    padding-bottom: var(--fa-gap-lg);
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-xl);
    overflow: hidden;
}

[data-product-photo-scope] .product-photo__img {
    position: static;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    [data-product-photo-scope] .product-photo__item { height: 300px; padding: var(--fa-gap-md); }
}

.product-photo__thumbs,
[data-product-photo-scope] .product-thumbs { margin-top: var(--fa-gap-sm); }

/* --- title block ---------------------------------------------------- */

.product-intro .content__title,
[data-product-scope] .content__title {
    font-size: clamp(22px, 2.4vw, 29px);
    margin: 0 0 var(--fa-gap-sm);
}

[data-product-scope] .content__subtitle {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fa-ink-400);
}

.product-intro__row--dashed {
    border-bottom: 1px solid var(--fa-border-100);
    padding-bottom: var(--fa-gap-sm);
    margin-bottom: var(--fa-gap-md);
}

/* --- price + buy ---------------------------------------------------- */

.product-purchase {
    background: var(--fa-mint-50);
    border: 1px solid var(--fa-border-mint);
    border-radius: var(--fa-radius-lg);
    padding: var(--fa-gap-lg);
    display: flex;
    flex-direction: column;
    gap: var(--fa-gap-md);
}

.product-purchase__row { margin: 0; }
.product-purchase__row--flex { display: flex; align-items: center; gap: var(--fa-gap-md); flex-wrap: wrap; }
.product-purchase__label { margin: 0; font-size: 13px; font-weight: 600; color: var(--fa-ink-400); }

.product-purchase .product-price {
    display: flex;
    align-items: baseline;
    gap: var(--fa-gap-sm);
    font-size: 1rem;
}

.product-purchase .product-price__old {
    order: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--fa-ink-200);
    text-decoration: line-through;
}

.product-purchase .product-price__main {
    order: 2;
    display: flex;
    align-items: baseline;
    float: none;
    font-size: var(--fa-fs-price-lg);
    font-weight: 800;
    line-height: 1.1;
    color: var(--fa-ink-900);
}

.product-purchase .product-price__main-value,
.product-purchase .product-price__main-coins,
.product-purchase .product-price__main-cur,
.product-purchase .product-price__old-value,
.product-purchase .product-price__old-cur { float: none; }

.product-purchase .product-price__main-cur {
    padding-left: 5px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fa-ink-400);
}

/* quantity + add to cart */
.product-buy,
.product-buy__row { display: flex; align-items: center; gap: var(--fa-gap-sm); flex-wrap: wrap; }

.product-buy input[type="text"],
.product-buy input[type="number"],
[data-product-quantity] {
    width: 72px;
    min-height: var(--fa-tap-target);
    padding: 0 10px;
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-btn);
    background: var(--fa-surface-0);
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--fa-ink-900);
}

[data-product-scope] .product-buy .btn,
[data-product-scope] [data-product-button--add] .btn {
    min-height: var(--fa-tap-target);
    padding: 0 var(--fa-gap-xl);
    border: 0;
    border-radius: var(--fa-radius-md);
    background: var(--fa-green-500);
    color: var(--fa-surface-0);
    font-size: 15px;
    font-weight: 800;
}

[data-product-scope] .product-buy .btn:hover { background: var(--fa-green-600); }

/* the hero/listing glare, on the product page's own "add to cart" */
[data-product-scope] .product-buy .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

[data-product-scope] .product-buy .btn::after {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .5) 50%, transparent 100%);
    transform: translateX(-260%) rotate(14deg);
    animation: fa-shine 6s ease-in-out infinite;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-product-scope] .product-buy .btn::after { animation: none; opacity: 0; }
}

.product-actions__list { display: flex; align-items: center; gap: var(--fa-gap-md); flex-wrap: wrap; }
.product-actions__link { font-size: 13px; font-weight: 600; color: var(--fa-ink-500); text-decoration: none; }
.product-actions__link:hover { color: var(--fa-green-500); }

/* --- variant chips (product-extras.js) ------------------------------ */

.fa-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.fa-chips { display: flex; flex-wrap: wrap; gap: var(--fa-gap-sm); }

.fa-chip {
    /* 44px on touch: the variant chips were a 38px target */
    min-height: 38px;
    padding: 0 14px;
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-pill);
    background: var(--fa-surface-0);
    color: var(--fa-ink-900);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--fa-dur-micro) var(--fa-ease), background var(--fa-dur-micro) var(--fa-ease);
}

.fa-chip:hover { border-color: var(--fa-green-500); }

/* handoff: the active variant is amber */
.fa-chip.is-active {
    border-color: var(--fa-amber-500);
    background: var(--fa-amber-500);
    color: var(--fa-surface-0);
}

.fa-chip.is-disabled,
.fa-chip:disabled {
    color: var(--fa-ink-200);
    background: var(--fa-surface-100);
    border-color: var(--fa-border-100);
    cursor: not-allowed;
    text-decoration: line-through;
}

/* --- tabs (handoff: product page) ------------------------------------ *
 * Underline tabs over one white panel — bar with a 1.5px rule, active tab in
 * green with a 2.5px green underline, panel 32px padding with no top border.
 * The theme shipped green pills over a rounded box instead. */
.fa-tabs__bar {
    display: flex;
    gap: 4px;
    border-bottom: 1.5px solid var(--fa-border-200);
    overflow-x: auto;
    scrollbar-width: none;
}

.fa-tabs__bar::-webkit-scrollbar { display: none; }

.fa-tabs .intro-tab__button {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    border-radius: 0;
    padding: 14px 18px;
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--fa-ink-400);
    text-decoration: none;
    cursor: pointer;
    min-height: var(--fa-tap-target);
}

.fa-tabs .intro-tab__button:hover { color: var(--fa-ink-900); }

.fa-tabs .intro-tab__button.is-active {
    color: var(--fa-green-500);
    background: none;
    box-shadow: inset 0 -2.5px 0 var(--fa-green-500);
}

.fa-tabs .intro-tab__icon { display: none; }

/* The bundle's tab script HOISTS the panels out of their wrapper at runtime, so
   the card chrome lives on the panel itself — put on the wrapper it produced an
   empty 65px strip under the bar and left the visible panel unstyled. */
.fa-tabs__panels { display: contents; }

.fa-tabs .intro-tab__content {
    display: none;
    margin: 0;
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-top: none;
    border-radius: 0 0 var(--fa-radius-lg) var(--fa-radius-lg);
    padding: 32px;
    font-size: 15px;
    color: var(--fa-ink-500);
}

.fa-tabs .intro-tab__content.is-active { display: block; }

/* MlsTab changes the product tabs into an accordion below 992px and uses
   slideToggle(), which writes display/height inline. If navigation happens
   while that animation state is being restored, an inactive panel can reserve
   a very tall empty box until reload. The class is the source of truth. */
@media (max-width: 991px) {
    .fa-product-tabs .intro-tab__content:not(.is-active) {
        display: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding-top: 0;
        padding-bottom: 0;
        border: 0;
        overflow: hidden;
    }

    .fa-product-tabs .intro-tab__content.is-active {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }
}

/* the pack sets a reading measure on the description panel */
.fa-tabs__prose { max-width: 820px; }
.fa-tabs__prose .typo { font-size: 15px; line-height: 1.65; color: var(--fa-ink-500); }
.fa-tabs__prose .typo h2,
.fa-tabs__prose .typo h3 { margin: 22px 0 10px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--fa-ink-900); }
.fa-tabs__prose .typo p { margin: 0 0 12px; }
.fa-tabs__prose .typo ul,
.fa-tabs__prose .typo ol { margin: 0 0 14px; padding-left: 20px; }
.fa-tabs__prose .typo li { margin: 6px 0; }

/* features table, folded into the description panel */
.fa-tabs__props { margin-top: 22px; }

.fa-tabs__props-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 800;
    color: var(--fa-ink-900);
}

.fa-tabs__props .info-table,
.fa-tabs__props table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fa-tabs__props td,
.fa-tabs__props th {
    padding: 9px 0;
    border-bottom: 1px solid var(--fa-surface-150);
    text-align: left;
    vertical-align: top;
    color: var(--fa-ink-700);
}
.fa-tabs__props td:first-child,
.fa-tabs__props th:first-child { color: var(--fa-ink-400); width: 42%; }

/* delivery & payment: two columns with icon headings (pack §Товар, tab 4) */
.fa-tabs .product-shipping {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}

.fa-tabs .product-shipping__row { margin: 0; }

.fa-tabs .product-shipping__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.fa-tabs .product-shipping__icon { color: var(--fa-green-500); display: inline-flex; }
.fa-tabs .product-shipping__icon .svg-icon { width: 20px; height: 20px; }
.fa-tabs .product-shipping__title { font-size: 16px; font-weight: 800; color: var(--fa-ink-900); }
.fa-tabs .product-shipping__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fa-tabs .product-shipping__item { font-size: 14px; color: var(--fa-ink-500); }
.fa-tabs .product-shipping__item::before { content: "— "; color: var(--fa-ink-300); }

@media (max-width: 767px) {
    .fa-tabs__panels { padding: var(--fa-gap-md); border-radius: 0 0 var(--fa-radius-md) var(--fa-radius-md); }
    .fa-tabs .intro-tab__button { padding: 12px 14px; font-size: 14px; }
}

/* --- store availability (product-extras.js) ------------------------- *
 * Handoff row: a mint pin tile, the address with its hours, and the status on
 * the right. The theme had a bare text line with a ✓/— glyph. */
.fa-stock__city:not(:last-child) { margin-bottom: var(--fa-gap-lg); }

.fa-stock__city-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--fa-ink-900);
    margin-bottom: 10px;
}

.fa-stock__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.fa-stock__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-md);
    font-size: 14.5px;
    color: var(--fa-ink-900);
}

.fa-stock__pin {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: var(--fa-radius-btn);
    background: var(--fa-mint-100);
    color: var(--fa-green-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fa-stock__pin svg { width: 22px; height: 22px; }

.fa-stock__body { flex: 1; min-width: 0; }
.fa-stock__addr { display: block; font-weight: 700; font-size: 14.5px; }
.fa-stock__hours { display: block; font-size: 13px; color: var(--fa-ink-400); margin-top: 2px; }

.fa-stock__badge {
    flex: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--fa-ink-300);
    white-space: nowrap;
}

.fa-stock__item.is-in .fa-stock__badge { color: var(--fa-green-500); }
.fa-stock__loading,
.fa-stock__empty { margin: 0; font-size: 14px; color: var(--fa-ink-400); }

/* Prod parity (delivery_address show_map): address sidebar + Leaflet map.
 * The list doubles as the map's sidebar — a row click centres its marker. */
.fa-stock__grid { display: flex; gap: var(--fa-gap-md); align-items: stretch; }

.fa-stock__side {
    flex: 0 0 340px;
    max-width: 340px;
    max-height: 480px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.fa-stock__city-select {
    width: 100%;
    margin-bottom: var(--fa-gap-md);
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--fa-ink-900);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-btn);
    background: var(--fa-surface-0, #fff);
}

.fa-stock__item[data-fa-stock-point] { cursor: pointer; }
.fa-stock__item[data-fa-stock-point]:hover { border-color: var(--fa-green-500); }

.fa-stock__map {
    flex: 1;
    min-width: 0;
    height: 480px;
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-md);
    /* Leaflet panes are z-indexed into the hundreds; without a local stacking
       context they float above the sticky header and the mega menu. */
    position: relative;
    z-index: 0;
    overflow: hidden;
}

@media (max-width: 767px) {
    .fa-stock__grid { flex-direction: column; }
    .fa-stock__side { flex: none; max-width: none; max-height: 300px; }
    .fa-stock__map { height: 320px; }
}

/* --- warehouse availability (handoff: card per warehouse) ------------ */
.fa-wh__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.fa-wh__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-md);
    font-size: 14.5px;
}

.fa-wh__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fa-ink-200);
}

.fa-wh__dot.is-in { background: var(--fa-green-500); }
.fa-wh__name { flex: 1; font-weight: 700; color: var(--fa-ink-900); }
.fa-wh__state { font-size: 13px; font-weight: 700; color: var(--fa-ink-300); white-space: nowrap; }
.fa-wh__item .fa-wh__dot.is-in ~ .fa-wh__state { color: var(--fa-green-500); }

/* --- reviews panel (handoff: avatar · name · stars, then the form) --- */
/* the pack constrains the review COLUMN, not the panel card */
.fa-tabs #productReview > [data-comments] { max-width: 760px; }

.fa-tabs #productReview .comment-form,
.fa-tabs #productReview form {
    background: var(--fa-surface-50);
    border-radius: var(--fa-radius-lg);
    padding: 22px;
    margin-top: 18px;
}

.fa-tabs #productReview input[type="text"],
.fa-tabs #productReview input[type="email"],
.fa-tabs #productReview textarea {
    width: 100%;
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-btn);
    padding: 11px 14px;
    font-size: 14px;
}

.fa-tabs #productReview input:focus,
.fa-tabs #productReview textarea:focus { outline: none; border-color: var(--fa-green-500); }

/* --- sticky mobile buy bar (product-extras.js) ---------------------- */

.fa-buybar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--fa-gap-md);
    padding: 10px var(--fa-page-pad-sm);
    background: var(--fa-surface-0);
    box-shadow: var(--fa-shadow-sticky);
}

.fa-buybar.is-visible { display: flex; }
.fa-buybar__price { font-size: 18px; font-weight: 800; color: var(--fa-ink-900); }

.fa-buybar__btn {
    flex: 0 0 auto;
    min-height: var(--fa-tap-target);
    padding: 0 var(--fa-gap-lg);
    border: 0;
    border-radius: var(--fa-radius-md);
    background: var(--fa-green-500);
    color: var(--fa-surface-0);
    font-size: 14px;
    font-weight: 800;
}

@media (min-width: 768px) { .fa-buybar { display: none !important; } }

@media (max-width: 767px) {
    .content__row.row[data-product-scope] { grid-template-columns: 1fr; gap: var(--fa-gap-lg); }
    [data-product-photo-scope] { position: static; max-width: none; }
    .product-purchase { padding: var(--fa-gap-md); }
    .product-purchase .product-price__main { font-size: 27px; }
}

/* out of stock on the product page: the markup reuses `.btn btn-default btn-lg`
   for a NON-interactive label, so without this it looks like a green button the
   visitor should press */
[data-product-scope] [data-product-unavailable] .btn--disabled {
    background: var(--fa-surface-100);
    border: 1px dashed var(--fa-border-200);
    color: var(--fa-ink-400);
    font-weight: 700;
    cursor: default;
    pointer-events: none;
}

[data-product-scope] [data-product-unavailable] .link--js {
    color: var(--fa-green-500);
    font-weight: 700;
    font-size: 13.5px;
}

/* labels in the price block ("Стоимость" / "Варианты") share one column so the
   values line up. The width sits on the LABEL, not on the column: the same rule
   on `.product-purchase__col:first-child` also caught the column that holds the
   quantity field and the cart button, squeezed it to 96px and dropped "В
   корзину" onto its own line under the quantity. */
.product-purchase__row--flex > .product-purchase__col:first-child > .product-purchase__label { width: 96px; }

/* =====================================================================
 * S5 — cart / one-step checkout / order view.
 * The live checkout is shop/includes/cart/cart_checkout.twig
 * (cart_checkout2 / cart_checkoutnorm are unused leftovers).
 * The <form> structure is NOT touched: validateForm() + reCAPTCHA in main.twig
 * hang off [data-cart-checkout-form] and deliveryMethod_63.
 * ===================================================================== */

[data-cart-scope] .content__title { font-size: var(--fa-fs-h1-cat); margin: 0 0 var(--fa-gap-lg); }

/* layout: form + sticky summary. The markup uses Bootstrap push/pull to put the
   summary first on desktop and last on mobile — grid + order does it without
   floats, and `direction` tricks are not needed. */
[data-cart-scope] > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--fa-gap-xl);
    margin: 0;
}

[data-cart-scope] > .row::before,
[data-cart-scope] > .row::after { content: none; display: none; }

[data-cart-scope] > .row > [class*="col-"] {
    width: auto;
    float: none;
    left: auto;
    right: auto;
    padding: 0;
    min-width: 0;
}

/* the summary column is the second grid cell on desktop, the first on mobile */
[data-cart-scope] > .row > [class*="col-md-push-6"] { order: 2; }
[data-cart-scope] > .row > [class*="col-md-pull-6"] { order: 1; }

/* --- form sections -------------------------------------------------- */

.frame-content {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    padding: var(--fa-gap-lg);
    margin-bottom: var(--fa-gap-md);
}

.frame-content__header { margin-bottom: var(--fa-gap-md); }

.frame-content__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--fa-ink-900);
}

.form__field { display: block; margin-bottom: var(--fa-gap-md); }

.form__label {
    /* the bundle pins every label to width:100px (150 in a --lg field) for its
       old two-column form; in this theme the label sits ABOVE the input, so that
       width chopped "Введите текущий пароль" into three lines and pushed the
       required asterisk onto a line of its own */
    width: auto;
    max-width: 100%;
    margin: 0 0 6px;
    padding-bottom: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fa-ink-400);
}

.form__field--lg .form__label { width: auto; }

/* keep the asterisk on the label's last line */
.form__label--required::after { white-space: nowrap; }

.form__label--required::after { content: " *"; color: var(--fa-coral-500); }

.form-control,
.form__inner input[type="text"],
.form__inner input[type="email"],
.form__inner input[type="tel"],
.form__inner textarea,
.form__inner select {
    width: 100%;
    min-height: var(--fa-tap-target);
    padding: 0 var(--fa-gap-md);
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-md);
    background: var(--fa-surface-0);
    color: var(--fa-ink-900);
    font-size: 14px;
}

.form__inner textarea { min-height: 96px; padding: 10px var(--fa-gap-md); }

.form-control:focus,
.form__inner input:focus,
.form__inner textarea:focus,
.form__inner select:focus { outline: none; border-color: var(--fa-green-500); }

.form__info--help { margin-top: 4px; font-size: 12px; color: var(--fa-ink-400); }
.form__info--error { margin-top: 4px; font-size: 12px; color: var(--fa-coral-500); }
.message--error {
    padding: 10px var(--fa-gap-md);
    border-radius: var(--fa-radius-btn);
    background: #FDECE8;
    color: var(--fa-coral-700);
    font-size: 13.5px;
}

/* --- delivery / payment radio cards --------------------------------- */

.cart-delivery__row,
.cart-payment__row { margin: 0 0 var(--fa-gap-sm); }

.radiogroup__input { position: absolute; opacity: 0; pointer-events: none; }

.radiogroup__label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px var(--fa-gap-md);
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-md);
    background: var(--fa-surface-0);
    cursor: pointer;
    transition: border-color var(--fa-dur-micro) var(--fa-ease), background var(--fa-dur-micro) var(--fa-ease);
}

.radiogroup__label:hover { border-color: var(--fa-green-500); }

.radiogroup__input:checked + .radiogroup__label {
    border-color: var(--fa-green-500);
    background: var(--fa-mint-50);
}

.radiogroup__radio {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 2px solid var(--fa-border-200);
    border-radius: 50%;
    background: var(--fa-surface-0);
    position: relative;
}

.radiogroup__input:checked + .radiogroup__label .radiogroup__radio {
    border-color: var(--fa-green-500);
}

.radiogroup__input:checked + .radiogroup__label .radiogroup__radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--fa-green-500);
}

.radiogroup__content { flex: 1; min-width: 0; }

.delivery-radio {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fa-gap-md);
    flex-wrap: wrap;
}

.delivery-radio__title { font-size: 14px; font-weight: 700; color: var(--fa-ink-900); }
.delivery-radio__price,
.delivery-radio__desc { font-size: 13px; color: var(--fa-ink-500); text-align: right; }
.delivery-radio__spoiler { flex-basis: 100%; margin-top: var(--fa-gap-sm); }

/* On a phone the two-column row leaves the price/description column ~90px wide,
   so "Безкоштовна доставка замовлень до 30 кг…" came out one word per line. The
   row stacks instead: title, then its note, both full width and left-aligned. */
@media (max-width: 767px) {
    .delivery-radio {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .delivery-radio > * { width: 100%; }
    .delivery-radio__info { min-width: 0; }

    /* the price/notes column: the bundle indents it 1em and right-aligns the
       price, which on a 390px screen left ~90px for a full sentence */
    /* plain block: as a flex container its spans were sized as flex items and
       the note wrapped at ~119px ("Безкоштовна / доставка / замовлень до 30…") */
    .delivery-radio__add-info {
        margin-left: 0;
        display: block;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .delivery-radio__add-info { text-align: left; }
    .delivery-radio__add-info span { display: inline; text-align: left; }
    .delivery-radio__add-info .delivery-radio__price { display: inline-block; margin-right: 8px; }

    .delivery-radio__price,
    .delivery-radio__desc,
    .delivery-radio__add-info span {
        text-align: left;
        max-width: none;
    }

    /* the quantity stepper in the cart summary was a 33px box */
    .cart-summary input[type="number"],
    .cart-summary input[type="text"],
    .cart-summary .form-input__control {
        min-height: var(--fa-tap-target);
    }
}

.tooltip__icon { width: 14px; height: 14px; color: var(--fa-ink-300); }

/* --- summary -------------------------------------------------------- */

.cart-frame {
    position: sticky;
    top: 96px;
}

.cart-frame__inner,
.cart-summary {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    overflow: hidden;
}

.cart-prod-table__row {
    display: flex;
    align-items: flex-start;
    gap: var(--fa-gap-sm);
    padding: var(--fa-gap-md);
    border-bottom: 1px solid var(--fa-border-100);
}

.cart-prod-table__delete { order: 3; color: var(--fa-ink-100); }
.cart-prod-table__delete:hover { color: var(--fa-coral-500); }
.cart-prod-table__delete .svg-icon { width: 12px; height: 12px; }
.cart-prod-table__info { flex: 1; min-width: 0; }
.cart-prod-table__purchase { display: flex; align-items: center; gap: var(--fa-gap-sm); }

.cart-product { display: flex; align-items: flex-start; gap: 10px; }
.cart-product__photo { flex: 0 0 56px; }
.cart-product__photo img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--fa-radius-sm); }
.cart-product__title { font-size: 13px; font-weight: 700; line-height: 1.35; }
.cart-product__title a { color: var(--fa-ink-900); text-decoration: none; }
.cart-product__brand,
.cart-product__variant { font-size: 12px; color: var(--fa-ink-400); }

.cart-summary__coupon,
.cart-summary__promo {
    padding: var(--fa-gap-md);
    border-bottom: 1px solid var(--fa-border-100);
    font-size: 13.5px;
}

.cart-total,
.cart-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fa-gap-md);
    padding: var(--fa-gap-md);
    background: var(--fa-mint-50);
}

.cart-total__title,
.cart-summary__total-label { font-size: 16px; font-weight: 800; color: var(--fa-ink-900); }
.cart-total__price,
.cart-summary__total-value { font-size: 22px; font-weight: 800; color: var(--fa-ink-900); }

/* the order button lives inside the form, under the payment block */
[data-cart-checkout-form] .btn-primary,
[data-cart-checkout-form] button[type="submit"] {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: var(--fa-radius-md);
    background: var(--fa-green-500);
    color: var(--fa-surface-0);
    font-size: 15px;
    font-weight: 800;
}

[data-cart-checkout-form] .btn-primary:hover { background: var(--fa-green-600); }

/* --- select2 (NP city / warehouse pickers) -------------------------- */

.np-delivery .select2-selection--single,
.select2-container--default .select2-selection--single {
    min-height: 40px;
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-btn);
    background: var(--fa-surface-0);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--fa-green-500); }

@media (max-width: 991px) {
    [data-cart-scope] > .row { grid-template-columns: 1fr; }
    .cart-frame { position: static; }

    /* One column: what you are buying comes FIRST, the checkout form after it.
       Stacked the other way round the shopper filled in name, phone, delivery
       and payment before ever seeing the items or the total. */
    [data-cart-scope] > .row > [class*="col-md-push-6"] { order: 1; }
    [data-cart-scope] > .row > [class*="col-md-pull-6"] { order: 2; }

    /* the cart line: photo, then title over the quantity+price line, and the
       remove ✕ as a real 32px target instead of a 12px glyph */
    .cart-prod-table__row { gap: 12px; padding: 14px; }
    .cart-product__photo { flex: 0 0 64px; }
    .cart-product__photo img { width: 64px; height: 64px; }

    .cart-prod-table__delete {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 32px;
    }

    .cart-prod-table__delete .svg-icon { width: 14px; height: 14px; }

    /* quantity on the left, line total on the right — they were stacked */
    .cart-prod-table__purchase {
        flex-wrap: wrap;
        row-gap: 8px;
        width: 100%;
        justify-content: space-between;
    }

    /* the delivery tooltips are absolutely positioned and sized for a desktop
       column — on a phone they ran ~200px past the screen edge */
    .tooltip__message {
        max-width: min(280px, calc(100vw - 48px));
        left: auto;
        right: 0;
    }
}

/* --- order view (thank-you page) ------------------------------------ */

.cart-frame__header {
    padding: var(--fa-gap-md);
    border-bottom: 1px solid var(--fa-border-100);
}

.cart-frame__title { font-size: 16px; font-weight: 800; color: var(--fa-ink-900); }

.cart-order {
    display: grid;
    gap: var(--fa-gap-sm);
    padding: var(--fa-gap-md);
    font-size: 13.5px;
    color: var(--fa-ink-700);
}

/* No sticky "place order" bar on mobile ON PURPOSE: the submit path runs
   validateForm() + reCAPTCHA v3 off the real button (main.twig), and a second
   trigger risks a double submit. The button sits at the end of the form. */

/* --- blog listing --------------------------------------------------- */

.fa-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.fa-article--blog .fa-article__photo {
    display: block;
    height: 168px;
    margin: calc(var(--fa-gap-lg) * -1) calc(var(--fa-gap-lg) * -1) var(--fa-gap-md);
    background: var(--fa-surface-150);
    overflow: hidden;
}

.fa-article--blog .fa-article__photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 991px) { .fa-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .fa-blog__grid { grid-template-columns: 1fr; } }

/* =====================================================================
 * S6 — content pages: article, contacts, static page, auth, profile.
 * ===================================================================== */

/* --- typography for CMS body copy ----------------------------------- */

.typo { font-size: 14.5px; line-height: 1.65; color: var(--fa-ink-500); }
.typo h2, .typo h3, .typo h4 { color: var(--fa-ink-900); margin: 1.4em 0 .5em; }
.typo h2 { font-size: 22px; font-weight: 800; }
.typo h3 { font-size: 18px; font-weight: 800; }
.typo p { margin: 0 0 1em; }
.typo ul, .typo ol { margin: 0 0 1em; padding-left: 1.3em; }
.typo li { margin-bottom: .35em; }
.typo a { color: var(--fa-green-500); }
.typo img { max-width: 100%; height: auto; border-radius: var(--fa-radius-md); }

/* A table the editor pasted with its own column widths cannot always fit 366px;
   let it scroll inside its own box instead of pushing the page sideways. */
.typo :is(table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 1em;
    font-size: 13.5px;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    /* on a wide screen it is a normal table again */
    .typo :is(table) { display: table; }
}

.typo th,
.typo td { padding: 8px 10px; border: 1px solid var(--fa-border-100); text-align: left; }
.typo th { background: var(--fa-surface-50); font-weight: 700; color: var(--fa-ink-900); }

/* wide content must scroll inside itself, never the page */
.typo { overflow-wrap: break-word; }

/* --- article / static page ------------------------------------------ */

.post {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    padding: var(--fa-gap-xl);
}

.post__title { margin: 0 0 var(--fa-gap-sm); font-size: 20px; font-weight: 800; }
.post__desc { margin-top: var(--fa-gap-sm); }

.post__footer {
    margin-top: var(--fa-gap-lg);
    padding-top: var(--fa-gap-md);
    border-top: 1px solid var(--fa-border-100);
}

.post__footer-row { display: flex; flex-wrap: wrap; gap: var(--fa-gap-lg); }
.post__footer-cell { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fa-ink-400); }
.post__footer-icon { width: 14px; height: 14px; color: var(--fa-ink-300); }
.post__image img { border-radius: var(--fa-radius-md); }

/* the article body page (blog_page / page_full) keeps a sidebar column */
.content__row + .content__row { margin-top: var(--fa-gap-lg); }

/* --- contacts ------------------------------------------------------- */

.contacts__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--fa-gap-md);
}

.contacts__item {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    padding: var(--fa-gap-lg);
}

.contacts-info { display: flex; align-items: flex-start; gap: var(--fa-gap-md); }
.contacts-info__icon { width: 22px; height: 22px; color: var(--fa-green-500); display: block; }
.contacts-info__title { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--fa-ink-900); }
.contacts-info a { color: var(--fa-ink-900); font-weight: 700; text-decoration: none; }
.contacts-info a:hover { color: var(--fa-green-500); }

/* --- auth / profile forms ------------------------------------------- */

.login,
.register,
.profile__section,
[class*="auth"] form {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    padding: var(--fa-gap-xl);
}

.btn-primary,
.btn-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fa-gap-sm);
    min-height: var(--fa-tap-target);
    padding: 0 var(--fa-gap-lg);
    border: 0;
    border-radius: var(--fa-radius-md);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.btn-primary { background: var(--fa-green-500); color: var(--fa-surface-0); }
.btn-primary:hover { background: var(--fa-green-600); color: var(--fa-surface-0); }
.btn-default { background: var(--fa-mint-100); color: var(--fa-green-500); }
.btn-default:hover { background: var(--fa-green-500); color: var(--fa-surface-0); }

/* --- breadcrumbs ---------------------------------------------------- */

.breadcrumbs,
.b-breadcrumbs { padding-block: var(--fa-gap-md); font-size: 12.5px; }
.breadcrumbs a { color: var(--fa-ink-400); text-decoration: none; }
.breadcrumbs a:hover { color: var(--fa-green-500); }

/* --- 404 ------------------------------------------------------------ */

.error-page,
.page-404 { text-align: center; padding-block: var(--fa-gap-2xl); }

/* =====================================================================
 * PRODUCT — FAQ accordion (handoff §3). Ported from the block the live
 * faunamarket theme already renders; <details>/<summary> keeps it working
 * without the bundle's JS.
 * ===================================================================== */

.fa-faq { margin-top: var(--fa-gap-2xl); }
.fa-faq__title { text-align: center; margin-bottom: var(--fa-gap-lg); }

.fa-faq__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 860px;
    margin-inline: auto;
}

.fa-faq__item {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-md);
}

.fa-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fa-gap-md);
    padding: 16px var(--fa-gap-lg);
    font-size: 15px;
    font-weight: 800;
    color: var(--fa-ink-900);
    cursor: pointer;
    list-style: none;
    min-height: var(--fa-tap-target);
}

.fa-faq__q::-webkit-details-marker { display: none; }

.fa-faq__sign {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--fa-green-500);
    transition: transform var(--fa-dur-fast) var(--fa-ease);
}

.fa-faq__item[open] .fa-faq__sign { transform: rotate(45deg); }

.fa-faq__a {
    padding: 0 var(--fa-gap-lg) var(--fa-gap-lg);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fa-ink-500);
}

.fa-faq__a p { margin: 0; }

/* SEO chip row above the product H1 (handoff §3): brand + the product's
   categories, as pale plates rather than a sentence of links. */
.fa-chips-seo {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--fa-gap-sm);
}

.fa-chip-seo {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-xs);
    background: var(--fa-surface-50);
    font-size: 12px;
    font-weight: 600;
    color: var(--fa-ink-400);
    text-decoration: none;
}

.fa-chip-seo:hover { color: var(--fa-green-500); border-color: var(--fa-border-mint); }
.fa-chip-seo--brand { color: var(--fa-green-500); background: var(--fa-mint-50); border-color: var(--fa-border-mint); }

/* --------------------------------------------------- pick-up points ------- */
/* handoff §7: a card per location — address with a pin, opening hours, map link */

.fa-points {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--fa-gap-md);
    margin-bottom: var(--fa-gap-lg);
}

.fa-points__city {
    font-size: 17px;
    font-weight: 800;
    margin: var(--fa-gap-md) 0 var(--fa-gap-sm);
}

.fa-point {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    padding: var(--fa-gap-lg);
}

.fa-point__title { font-size: 15px; font-weight: 800; margin: 0 0 8px; }

.fa-point__addr {
    display: flex;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--fa-ink-700);
}

.fa-point__addr svg { width: 18px; height: 18px; flex: none; color: var(--fa-green-500); }
.fa-point__hours { margin: 0 0 10px; font-size: 13px; color: var(--fa-ink-400); }
.fa-point__map { font-size: 13px; font-weight: 700; }

/* ------------------------------------------------ product row (scroll) ---- */
/* "Вам може сподобатися" / "Ви переглядали": handoff shows a scrollable row.
   Replaces the slick carousel the ported widget used — see widget_row.twig. */

.fa-row { margin-block: var(--fa-gap-2xl); }
.fa-row__head { margin-bottom: var(--fa-gap-md); }

.fa-row__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    gap: var(--fa-gap-lg);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.fa-row__item { scroll-snap-align: start; min-width: 0; }

@media (min-width: 1200px) {
    /* Desktop: the handoff's own grid — repeat(auto-fill, minmax(160px, 1fr)),
       no scrolling. `grid-auto-columns: minmax(0, 1fr)` squeezed however many
       products the widget returned into one row (eight cards at 133px), which
       is neither the handoff's card size nor its count. The widgets that feed
       this row are capped at 5 products, so five ~160px cards is what lands. */
    .fa-row__track {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--fa-gap-md); /* 16px, as in the handoff grid */
        overflow-x: visible;
    }
}

@media (max-width: 767px) {
    .fa-row__track { grid-auto-columns: 62%; gap: 10px; }
}

/* secondary actions under the buy button: 1-click, wishlist, price watch */
.fa-oneclick,
.product-actions__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fa-ink-500);
    text-decoration: none;
}

.fa-oneclick svg,
.product-actions__icon .svg-icon { width: 16px; height: 16px; }
.fa-oneclick:hover,
.product-actions__link:hover { color: var(--fa-green-500); }

.product-actions__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fa-gap-md);
}

.product-actions__item { display: inline-flex; align-items: center; gap: 6px; }
.product-actions__item:empty { display: none; }

/* checkout: the JS error slot takes no space until it has something to say */
.cart-orderinfo:empty { display: none; }

.cart-orderinfo {
    margin-bottom: var(--fa-gap-md);
    padding: 12px var(--fa-gap-md);
    border-radius: var(--fa-radius-md);
    background: var(--fa-mint-50);
    border: 1px solid var(--fa-border-mint);
    font-size: 14px;
}

.cart-submit .btn-primary { width: 100%; }

/* ------------------------------------------------------- empty states ----- */
/* handoff §4: one centred card — glyph, headline, one line, way back. Reusable
   for the other empty screens (wishlist, compare, no search results). */

.fa-empty {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-xl);
    padding: 70px var(--fa-gap-lg);
    text-align: center;
    margin-bottom: var(--fa-gap-2xl);
}

.fa-empty__icon {
    width: 60px;
    height: 60px;
    color: var(--fa-ink-100);
    margin: 0 auto 18px;
    display: block;
}

.fa-empty__title {
    font-size: 19px;
    font-weight: 800;
    color: var(--fa-ink-900);
    margin: 0 0 8px;
}

.fa-empty__sub {
    font-size: 14.5px;
    color: var(--fa-ink-400);
    margin: 0 0 22px;
}

.fa-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--fa-tap-target);
    padding: 13px 26px;
    border-radius: var(--fa-radius-md);
    background: var(--fa-green-500);
    color: var(--fa-surface-0) !important;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: background var(--fa-dur-fast) var(--fa-ease);
}

.fa-empty__btn:hover { background: var(--fa-green-600); }
.fa-empty__btn svg { width: 16px; height: 16px; }

@media (max-width: 767px) {
    .fa-empty { padding: 44px var(--fa-gap-md); }
    .fa-empty__icon { width: 48px; height: 48px; }
}

/* "Популярні категорії" link cloud under the category text (handoff §2) */
.fa-popcat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px 24px;
    margin-top: var(--fa-gap-md);
}

.fa-popcat__link {
    font-size: 14px;
    font-weight: 500;
    color: var(--fa-ink-500);
    padding: 4px 0;
    text-decoration: none;
}

.fa-popcat__link:hover { color: var(--fa-green-500); }

/* The bundle paints `.btn__label` in the brand green for its own button styles.
   Inside a filled primary button that is green text on a green fill — the cart
   modal's "Оформить заказ" looked like an empty green rectangle. */
.btn-primary .btn__label,
.btn-primary .btn__icon,
.btn-primary .btn__icon .svg-icon {
    color: var(--fa-surface-0);
    fill: currentColor;
}

/* The subtotal box keeps its padding and border even when there is nothing to
   put in it (no discount, no delivery chosen yet) — in the cart modal that drew
   a blank white strip between the item and the total. */
.cart-summary__subtotal:not(:has(.cart-subtotal__row)) { display: none; }

/* ------------------------------------------- warehouse availability tab --- */
/* handoff: "Наявність на складах" — the shop's own stock per storage location
   (the pick-up POINTS tab above answers a different question).
   The component itself is styled higher up (search .fa-wh__item): a card per
   warehouse. A second, older copy of the same rules used to live here and won
   on source order for whatever the two blocks disagreed about — the row kept
   the card's border and radius but took `padding: 9px 0` from this block, so
   the dot and the "Есть в наличии" label sat flush against the border. */
.fa-wh__list.hidden { display: none; }

/* ------------------------------------------------------ mobile drawer ----- */
/* handoff: category list with chevrons, service links, language pills and the
   phones on a tinted footer. The bundle paints the section headers with the
   other client's blue (#1963ab) and pushes them 50px down. */

.mobile-nav__item--separator {
    background: var(--fa-surface-150);
    color: var(--fa-ink-400);
    margin-top: var(--fa-gap-lg);
    padding: 8px var(--fa-gap-lg);
    font-size: 12px;
    letter-spacing: .05em;
}

.mobile-nav__item--active > .mobile-nav__link,
.mobile-nav__item--active {
    background: var(--fa-mint-100);
    color: var(--fa-ink-900);
}

/* Core marks the current route with `is-active`; the old bundle painted that
   whole <li> #414141 while the redesigned drawer kept its link dark. Keep the
   active cue, but use the accessible mint/accent pair from the default theme. */
.page__mobile .mobile-nav__item.is-active { background: transparent; }
.page__mobile .mobile-nav__item.is-active > .mobile-nav__link {
    background: var(--fa-mint-100);
    color: var(--fa-green-600);
    font-weight: 700;
}

/* Catalog links and the ready-made info menu use different classes. They must
   still share one readable, padded row contract (default-theme behaviour). */
.page__mobile .mobile-nav__link,
.page__mobile .menu__link {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 52px;
    padding: 12px 24px;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.page__mobile .menu__item { border-bottom: 1px solid var(--fa-border-100); }
.page__mobile .mobile-nav__has-children { right: 16px; }

/* "Назад" is a <button>, and the bundle leaves buttons white — on the white
   drawer the whole row read as an empty strip above "Смотреть все". */
.mobile-nav__link--go-back,
.mobile-nav__link--go-back span {
    color: var(--fa-ink-900);
    font-weight: 700;
    text-align: left;
    width: 100%;
}

.mobile-nav__link--go-back .svg-icon { color: var(--fa-ink-400); }
.mobile-nav__link--go-back:hover,
.mobile-nav__link--go-back:hover span { color: var(--fa-green-500); }

/* phones at the foot of the drawer (handoff) */
.fa-drawer-phones {
    margin-top: var(--fa-gap-lg);
    padding: var(--fa-gap-md) var(--fa-gap-lg);
    background: var(--fa-mint-50);
    border-top: 1px solid var(--fa-border-mint);
    list-style: none;
}

.fa-drawer-phones__item { padding: 4px 0; }

.fa-drawer-phones__link {
    font-size: 15px;
    font-weight: 700;
    color: var(--fa-ink-900);
    text-decoration: none;
    min-height: var(--fa-tap-target);
    display: inline-flex;
    align-items: center;
}

.fa-drawer-phones__link:hover { color: var(--fa-green-500); }

/* "Інші товари бренду" link under the price (ported from the live theme) */
.fa-brand-landing {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--fa-ink-500);
}

.fa-brand-landing a {
    color: var(--fa-ink-900);
    border-bottom: 1px dashed var(--fa-border-200);
    text-decoration: none;
}

.fa-brand-landing a:hover { color: var(--fa-green-500); border-bottom-color: var(--fa-green-500); }

/* ------------------------------------------------------------------ 404 ---- *
 * P1-12: screens the design pack does not cover, built from its tokens.
 * A miss used to render CI4's bare error view (white box, English, no shell);
 * this is the shop's own page, with three ways out: search, categories, home. */
.fa-404 {
    max-width: 640px;
    margin: 0 auto;
    padding: 48px 0 64px;
    text-align: center;
}

.fa-404__code {
    margin: 0 0 6px;
    font-size: clamp(72px, 14vw, 132px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    background: var(--fa-gradient-green);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fa-404__title {
    margin: 0 0 10px;
    font-size: clamp(21px, 2.6vw, 27px);
    font-weight: 800;
    letter-spacing: var(--fa-ls-title);
}

.fa-404__sub {
    margin: 0 auto 26px;
    max-width: 46ch;
    font-size: 15px;
    color: var(--fa-ink-500);
}

.fa-404__search {
    display: flex;
    gap: 8px;
    margin: 0 auto 34px;
    max-width: 480px;
}

.fa-404__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-md);
    padding: 13px 16px;
    font-size: 15px;
    color: var(--fa-ink-900);
    background: var(--fa-surface-0);
}

.fa-404__input:focus { outline: none; border-color: var(--fa-green-500); }
.fa-404__input::placeholder { color: var(--fa-ink-400); }

.fa-404__submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: var(--fa-radius-md);
    padding: 13px 22px;
    background: var(--fa-green-500);
    color: var(--fa-surface-0);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    min-height: var(--fa-tap-target);
}

.fa-404__submit:hover { background: var(--fa-green-600); }
.fa-404__submit svg { width: 17px; height: 17px; }

.fa-404__cats { margin-bottom: 30px; }

.fa-404__cats-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fa-ink-400);
}

.fa-404__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.fa-404__chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--fa-border-200);
    border-radius: var(--fa-radius-pill);
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fa-ink-900) !important;
    background: var(--fa-surface-0);
    text-decoration: none;
}

.fa-404__chip:hover {
    border-color: var(--fa-green-500);
    color: var(--fa-green-500) !important;
    background: var(--fa-mint-50);
}

.fa-404__home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--fa-tap-target);
    padding: 12px 26px;
    border: 1px solid var(--fa-border-200);
    border-radius: var(--fa-radius-md);
    font-size: 14px;
    font-weight: 700;
    color: var(--fa-ink-900) !important;
    text-decoration: none;
}

.fa-404__home:hover { border-color: var(--fa-green-500); color: var(--fa-green-500) !important; }

@media (max-width: 640px) {
    .fa-404 { padding: 32px 0 44px; }
    .fa-404__search { flex-direction: column; }
    .fa-404__submit { justify-content: center; }
}

/* -------------------------------------------------------------- account --- *
 * Personal cabinet, handoff "Профіль": two cards (personal data / discounts)
 * over a full-width order table. Before the rebuild this page carried the
 * ported unishop markup — a half-width form and a bare order frame. */
.fa-account { padding-bottom: 20px; }

.fa-account__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 34px;
}

.fa-account__card {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    padding: 26px;
}

.fa-account__card--form  { flex: 1 1 420px; min-width: 300px; }
.fa-account__card--aside { flex: 1 1 300px; min-width: 280px; }

.fa-account__card-title,
.fa-account__section-title {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: var(--fa-ls-title);
    color: var(--fa-ink-900);
}

.fa-account__section-title { font-size: 20px; margin-bottom: 16px; }

/* the form inside the card: the pack's stacked label + full-width control */
.fa-account__card--form .form__field { display: block; margin-bottom: 14px; }
.fa-account__card--form .form__label,
.fa-account__card--form .form__label p {
    display: block;
    width: auto;
    padding: 0 0 6px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--fa-ink-400);
}
.fa-account__card--form .form__inner { width: 100%; padding: 0; }
.fa-account__card--form .form-control {
    width: 100%;
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-btn);
    padding: 12px 14px;
    font-size: 14.5px;
}
.fa-account__card--form .form-control:focus { border-color: var(--fa-green-500); outline: none; }
.fa-account__card--form .form-control--disabled {
    background: var(--fa-surface-50);
    color: var(--fa-ink-400);
    display: block;
}

/* Read-only value (the account e-mail): real text colour so it does not read as
   an empty placeholder, with a lock to say why it cannot be edited. */
.form-control--readonly {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--fa-tap-target);
    padding: 0 var(--fa-gap-md);
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-md);
    background: var(--fa-surface-50);
    color: var(--fa-ink-900);
    font-size: 14px;
    font-weight: 600;
}

.form-control__lock {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--fa-ink-300);
}

.form-control__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fa-account__card--form .btn {
    background: var(--fa-green-500);
    border: none;
    border-radius: var(--fa-radius-btn);
    padding: 13px 26px;
    font-size: 14px;
    font-weight: 800;
    color: var(--fa-surface-0);
    min-height: var(--fa-tap-target);
}
.fa-account__card--form .btn:hover { background: var(--fa-green-600); }

.fa-account__balance {
    background: var(--fa-mint-50);
    border-radius: var(--fa-radius-md);
    padding: 20px;
}

.fa-account__balance-title {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fa-ink-400);
}

.fa-account__balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 13.5px;
    color: var(--fa-ink-500);
    border-top: 1px solid var(--fa-border-mint);
}

.fa-account__balance-row:first-of-type { border-top: none; padding-top: 0; }
.fa-account__balance-row strong { font-size: 16px; font-weight: 800; color: var(--fa-ink-900); }
.fa-account__accent { color: var(--fa-green-500) !important; }

.fa-account__bonus { margin-top: 16px; }

.fa-account__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--fa-border-100);
    font-size: 14px;
    font-weight: 600;
}

/* the account links were four bare inline links in a row, which read as body
   text rather than as the account menu they are */
.fa-account__links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-btn);
    color: var(--fa-ink-900);
    font-size: 13.5px;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.fa-account__links a:hover {
    border-color: var(--fa-green-500);
    color: var(--fa-green-500);
}

@media (max-width: 767px) {
    .fa-account__links a { min-height: var(--fa-tap-target); flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* order table — the pack's grid with an uppercase head row */
.fa-orders {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    overflow: hidden;
    overflow-x: auto;
}

.fa-orders__head,
.fa-orders__row {
    display: grid;
    grid-template-columns: 1.2fr 1.4fr 1.4fr 1fr;
    gap: 12px;
    align-items: center;
    min-width: 560px;
}

.fa-orders__head {
    padding: 16px 22px;
    background: var(--fa-surface-50);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fa-ink-400);
}

.fa-orders__row {
    padding: 15px 22px;
    border-top: 1px solid var(--fa-surface-150);
    font-size: 14px;
    color: var(--fa-ink-900) !important;
    text-decoration: none;
}

.fa-orders__row:hover { background: var(--fa-surface-50); }


.fa-orders__no { font-weight: 700; }
.fa-orders__date { color: var(--fa-ink-500); }

.fa-orders__status { display: flex; flex-direction: column; gap: 3px; }

.fa-orders__badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--fa-radius-pill);
    background: var(--fa-surface-150);
    font-size: 12.5px;
    font-style: normal;
    font-weight: 700;
    color: var(--fa-ink-700);
}

.fa-orders__badge--paid { background: var(--fa-mint-100); color: var(--fa-green-500); }
.fa-orders__paid { font-size: 12px; font-style: normal; color: var(--fa-ink-400); }

.fa-orders__sum { text-align: right; font-weight: 800; }
.fa-orders__sum-cur { font-weight: 600; color: var(--fa-ink-400); font-size: 12.5px; }

@media (max-width: 768px) {
    .fa-account__card { padding: 20px; }
    .fa-account__cols { gap: 16px; }
}

/* -------------------------------------------------------------- compare --- *
 * Comparison matrix (P1-12). One grid: a sticky attribute column plus one
 * column per product, so values line up on the same row no matter how many
 * products are in the set. Wide sets scroll INSIDE the card. */
.fa-compare-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.fa-compare-count {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: var(--fa-radius-pill);
    background: var(--fa-mint-100);
    color: var(--fa-green-500);
    font-size: 14px;
    font-weight: 800;
    vertical-align: middle;
}

.fa-compare-clear { font-size: 14px; font-weight: 600; color: var(--fa-ink-500) !important; }
.fa-compare-clear:hover { color: var(--fa-coral-500) !important; }

.fa-compare {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    overflow: hidden;
}

.fa-compare__scroll { overflow-x: auto; }

.fa-compare__head,
.fa-compare__row {
    display: grid;
    /* the product columns cap at 280px: with one or two products in a group the
       row used to spread them across the full width, leaving a photo floating in
       ~900px of white */
    grid-template-columns: minmax(190px, 220px) repeat(var(--fa-compare-cols, 1), minmax(200px, 280px));
    align-items: stretch;
    /* as wide as its columns: with one or two products the table used to stretch
       across the page and leave a wide empty tail beside every value */
    width: max-content;
    min-width: min-content;
    max-width: 100%;
}

.fa-compare__corner { padding: 20px; display: flex; align-items: flex-end; }

.fa-compare__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fa-ink-500);
    cursor: pointer;
    margin: 0;
}

.fa-compare__toggle input { accent-color: var(--fa-green-500); width: 16px; height: 16px; }

.fa-compare__product {
    position: relative;
    padding: 20px 18px;
    border-left: 1px solid var(--fa-surface-150);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fa-compare__remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fa-radius-pill);
    color: var(--fa-ink-200);
    background: var(--fa-surface-50);
}

.fa-compare__remove svg { width: 14px; height: 14px; }
.fa-compare__remove:hover { color: var(--fa-coral-500); background: var(--fa-surface-150); }

/* Fixed photo box: the cell used to stretch to whatever the row needed (500px
   of white around a 185px thumb when one product sat alone in its group). */
.fa-compare__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 170px;
    padding: 4px;
}

.fa-compare__photo img,
.fa-compare__photo picture,
.fa-compare__photo .product-photo,
.fa-compare__photo .product-photo__item {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}

.fa-compare__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--fa-ink-900) !important;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fa-compare__name:hover { color: var(--fa-green-500) !important; }
.fa-compare__price .product-price__main-value { font-size: 19px; font-weight: 800; }
.fa-compare__buy .btn { width: 100%; }

.fa-compare__row { border-top: 1px solid var(--fa-surface-150); }

.fa-compare__row:nth-child(odd) { background: var(--fa-surface-50); }

.fa-compare__param,
.fa-compare__value {
    padding: 13px 18px;
    font-size: 14px;
    line-height: 1.45;
}

.fa-compare__param { font-weight: 700; color: var(--fa-ink-700); }
.fa-compare__value { color: var(--fa-ink-900); border-left: 1px solid var(--fa-surface-150); }

/* "only differences": rows whose values are identical across the set */
.fa-compare.is-diff-only .fa-compare__row.is-same { display: none; }

@media (max-width: 768px) {
    .fa-compare__head,
    .fa-compare__row { grid-template-columns: minmax(140px, 150px) repeat(var(--fa-compare-cols, 1), minmax(170px, 220px)); }
    .fa-compare__photo { height: 130px; }
    .fa-compare__param,
    .fa-compare__value { padding: 11px 14px; font-size: 13.5px; }
    .fa-compare__product { padding: 16px 14px; }
}

/* ------------------------------------------------------------- article ---- *
 * Blog post (P1-12). The pack's reading treatment: meta under the title, a
 * cover above the text, and a measure that stops at ~72 characters — the body
 * used to run the full 1280px container. */
.fa-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--fa-ink-400);
}

.fa-post__cover {
    margin: 0 0 26px;
    border-radius: var(--fa-radius-lg);
    overflow: hidden;
    max-height: 420px;
}

.fa-post__cover img { width: 100%; height: auto; display: block; object-fit: cover; }

.fa-post .post__body .typo,
.fa-post.post__body .typo { max-width: 72ch; font-size: 16px; line-height: 1.65; }
.fa-post .typo h2 { margin: 30px 0 12px; font-size: 22px; font-weight: 800; }
.fa-post .typo h3 { margin: 24px 0 10px; font-size: 18px; font-weight: 800; }
.fa-post .typo p { margin: 0 0 14px; color: var(--fa-ink-700); }
.fa-post .typo ul,
.fa-post .typo ol { margin: 0 0 16px; padding-left: 22px; color: var(--fa-ink-700); }
.fa-post .typo li { margin: 6px 0; }
.fa-post .typo img { max-width: 100%; height: auto; border-radius: var(--fa-radius-md); }

.fa-post .post__footer {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--fa-border-100);
}

@media (max-width: 768px) {
    .fa-post__cover { margin-bottom: 18px; }
    .fa-post .typo { font-size: 15.5px; }
}

/* ------------------------------------------------------- footer fixes ----- *
 * Reported on the RU home page: the logo sat centred while the copyright under
 * it was left-aligned, the column headings were indistinguishable from the
 * links below them, and the social icons hugged the right edge. */
.fa-footer__brand .logo,
.fa-footer__brand .logo__title { text-align: left; }

.fa-footer__brand .logo__img,
.fa-footer__brand img { margin-left: 0; margin-right: auto; display: block; }

.fa-footer__title {
    font-size: 13px;
    font-weight: 800;
    color: var(--fa-ink-900);
    margin-bottom: var(--fa-gap-sm);
}

.fa-footer .soc-groups {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 6px;
    text-align: left;
}

.fa-footer .soc-groups__ico {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fa-ink-500);
}

.fa-footer .soc-groups__ico:hover { color: var(--fa-green-500); }
.fa-footer .soc-groups__ico .svg-icon { width: 20px; height: 20px; }

/* ------------------------------------------------------------ slider ----- *
 * Home rows (products, brands): one line of items that scrolls, with arrows.
 * Native scroll-snap — see includes/slider.twig for why not slick. */
.fa-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fa-slider__track {
    display: flex;
    gap: var(--fa-gap-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;           /* the arrows are the affordance */
    padding: 4px 2px 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.fa-slider__track::-webkit-scrollbar { display: none; }
.fa-slider__track:focus-visible { outline: 2px solid var(--fa-green-500); outline-offset: 2px; }

.fa-slider__item {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - var(--fa-gap-md) * 3) / 4);
    min-width: 0;
    display: flex;
}

.fa-slider__item > * { width: 100%; }

.fa-slider[data-per="7"] .fa-slider__item {
    flex-basis: calc((100% - var(--fa-gap-md) * 6) / 7);
}

.fa-slider__arrow {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--fa-radius-pill);
    border: 1px solid var(--fa-border-200);
    background: var(--fa-surface-0);
    color: var(--fa-ink-900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--fa-shadow-card);
    transition: background .15s, color .15s, opacity .15s;
}

.fa-slider__arrow svg { width: 20px; height: 20px; }
.fa-slider__arrow:hover:not(:disabled) { background: var(--fa-mint-100); color: var(--fa-green-500); }
.fa-slider__arrow:disabled { opacity: .35; cursor: default; }
.fa-slider.is-static .fa-slider__arrow { display: none; }

@media (max-width: 991px) {
    .fa-slider__item { flex-basis: calc((100% - var(--fa-gap-md) * 2) / 3); }
    .fa-slider[data-per="7"] .fa-slider__item { flex-basis: calc((100% - var(--fa-gap-md) * 3) / 4); }
}

@media (max-width: 767px) {
    /* arrows are a desktop affordance; on touch the row is swiped */
    .fa-slider__arrow { display: none; }
    .fa-slider__item { flex-basis: calc((100% - var(--fa-gap-md)) / 2); }
    .fa-slider[data-per="7"] .fa-slider__item { flex-basis: calc((100% - var(--fa-gap-md) * 2) / 3); }
}

/* article card cover — a square thumb, cropped, left of the text on desktop */
.fa-article__link { display: block; }

.fa-article__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fa-article__meta { display: flex; align-items: center; gap: 8px; }
.fa-article .fa-article__title { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--fa-ink-900); }
.fa-article__link:hover .fa-article__title { color: var(--fa-green-500); }
.fa-article .fa-article__lead { display: block; font-size: 13.5px; color: var(--fa-ink-500); line-height: 1.5; }

.fa-article--with-cover .fa-article__link {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--fa-gap-md);
    align-items: start;
}

.fa-article__thumb {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: var(--fa-radius-md);
    overflow: hidden;
    background: var(--fa-surface-100);
}

.fa-article__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 575px) {
    .fa-article--with-cover .fa-article__link { grid-template-columns: 72px minmax(0, 1fr); }
    .fa-article__thumb { width: 72px; height: 72px; }
}

/* promo listing (hits / new / sale) */
.fa-promo-count { margin: 6px 0 0; font-size: 14px; color: var(--fa-ink-400); }

.fa-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: var(--fa-gap-xl);
}

.fa-pager__btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--fa-tap-target);
    padding: 10px 20px;
    border: 1px solid var(--fa-border-200);
    border-radius: var(--fa-radius-md);
    font-size: 14px;
    font-weight: 700;
    color: var(--fa-ink-900) !important;
    text-decoration: none;
}

.fa-pager__btn:hover { border-color: var(--fa-green-500); color: var(--fa-green-500) !important; }
.fa-pager__state { font-size: 14px; color: var(--fa-ink-400); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- product tab section ---- *
 * The tabs (features / description / delivery & payment / stock / reviews)
 * moved out of the 578px right column into a full-width block above the FAQ:
 * the delivery text and the property tables were being squeezed into a third of
 * the page while the column scrolled them away with the buy panel. */
.fa-product-tabs {
    margin-top: var(--fa-gap-xl);
    /* it is a section of the page now — nothing here follows the scroll */
    position: static;
}

.fa-product-tabs .intro-tab__list { gap: 8px; }

.fa-product-tabs .intro-tab__button {
    font-size: 14px;
    padding: 0 var(--fa-gap-lg);
}

.fa-product-tabs .intro-tab__content {
    padding: var(--fa-gap-xl);
    font-size: 15px;
    line-height: 1.6;
}

/* readable measure for prose inside a 1280px panel; tables keep the full width */
.fa-product-tabs .intro-tab__content .typo { max-width: 90ch; }
.fa-product-tabs .intro-tab__content table { width: 100%; }

@media (max-width: 767px) {
    .fa-product-tabs { margin-top: var(--fa-gap-lg); }
    .fa-product-tabs .intro-tab__content { padding: var(--fa-gap-md); font-size: 14.5px; }
}

/* No image inside page content may exceed its box — product galleries, the
   description/delivery tabs, blog text and any HTML the shop pastes into a
   description (those carry width="700" attributes from the old editor). */
.content img,
.fa-product-tabs img,
.product-photo img,
.product-photo__img,
.typo img {
    max-width: 100%;
    height: auto;
}

/* reviewer avatar (handoff: 34px mint circle with the initial) */
.comments__avatar {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--fa-mint-100);
    color: var(--fa-green-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    margin-right: 10px;
}

.fa-tabs .comments__post-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fa-tabs .comments__post-rate { margin-left: auto; }

/* ------------------------------------------------------- buy in 1 click --- */
/* In a listing this is an icon button the same size as "Купити" next to it —
   a second wrapping label made every card a different height. */
.fa-card__oneclick {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: var(--fa-radius-btn);
    background: var(--fa-surface-150);
    color: var(--fa-amber-500) !important;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.fa-card__oneclick svg { width: 18px; height: 18px; }

.fa-card__oneclick:hover {
    background: var(--fa-amber-500);
    color: var(--fa-surface-0) !important;
}

.fa-oneclick-modal__product {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--fa-surface-50);
    border-radius: var(--fa-radius-md);
    margin-bottom: var(--fa-gap-md);
}

.fa-oneclick-modal__photo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--fa-radius-sm);
    background: var(--fa-surface-0);
    flex: none;
}

.fa-oneclick-modal__info { min-width: 0; }
.fa-oneclick-modal__name { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--fa-ink-900); }
.fa-oneclick-modal__price { margin: 0; font-size: 17px; font-weight: 800; color: var(--fa-ink-900); }
.fa-oneclick-modal__price-cur { font-size: 13px; font-weight: 600; color: var(--fa-ink-400); margin-left: 3px; }

.fa-oneclick-modal__note {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--fa-ink-400);
}

@media (max-width: 575px) {
    /* the card gets crowded on a phone — the product page keeps the control */
    .fa-card__oneclick { display: none; }
}

/* ── sign-in module (`sauth`) ────────────────────────────────────────────────
   The module ships self-contained CSS with its own olive accent so it can drop
   into any site. On this theme it has to read as part of the pack, so the skin
   lives here — scoped to .fa-sauth, overriding only colour, radius and metrics.
   The module's own file stays untouched and portable. */
.fa-sauth .sauth {
    --sauth-accent: var(--fa-green-500);
    --sauth-accent-h: var(--fa-green-600);
    max-width: none;
    padding: 0;
    font-family: var(--fa-font);
    font-size: 14px;
    color: var(--fa-ink-900);
}

.fa-sauth .sauth__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--fa-ink-400);
    margin: 14px 0 6px;
}

.fa-sauth .sauth__input,
.fa-sauth .sauth__btn,
.fa-sauth .sauth__provider {
    height: 48px;
    line-height: normal;
    border-radius: var(--fa-radius-btn);
    font-family: inherit;
}

.fa-sauth .sauth__input {
    border-color: var(--fa-border-200);
    background: var(--fa-surface-0);
    font-size: 15px;
    color: var(--fa-ink-900);
}

.fa-sauth .sauth__input::placeholder { color: var(--fa-ink-300); }

.fa-sauth .sauth__input:focus {
    border-color: var(--fa-green-500);
    box-shadow: 0 0 0 3px var(--fa-mint-100);
}

.fa-sauth .sauth__btn--primary:hover,
.fa-sauth .sauth__btn--primary:focus { border-color: var(--fa-green-600); }

.fa-sauth .sauth__provider {
    border-color: var(--fa-border-200);
    color: var(--fa-ink-900);
    font-weight: 600;
}

.fa-sauth .sauth__provider:hover {
    background: var(--fa-surface-50);
    border-color: var(--fa-border-300);
}

.fa-sauth .sauth__divider {
    color: var(--fa-ink-300);
    font-size: 13px;
}

.fa-sauth .sauth__divider::before,
.fa-sauth .sauth__divider::after { background: var(--fa-border-200); }

.fa-sauth .sauth__row a { color: var(--fa-green-500); }
.fa-sauth .sauth__row a.is-disabled { color: var(--fa-ink-200); }
.fa-sauth .sauth__status { color: var(--fa-green-600); }
.fa-sauth .sauth__msg { color: var(--fa-coral-500); }
.fa-sauth .sauth__msg.is-ok { color: var(--fa-green-600); }

.fa-sauth .sauth__consent,
.fa-sauth .sauth__consent a { color: var(--fa-ink-300); }

/* the module is the primary path now — the password fallback below it needs air */
.fa-sauth { margin-bottom: 4px; }
.fa-sauth__recall { margin-top: 14px; }

/* ── quick view (product_quick_view.twig) ────────────────────────────────────
   The modal was pure bundle chrome: an uppercase 15px title, a photo box with a
   third of its height empty, unstyled thumbnails, and the purchase panel drawn
   as a label/value table inside a big mint slab. Restyled to the pack's product
   page — same tokens, same components, just narrower. */
.fa-qv .modal__header {
    padding: 20px 24px 0;
    border: 0;
}

.fa-qv .modal__title {
    font-family: var(--fa-font);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--fa-ink-900);
    text-transform: none;
    letter-spacing: 0;
    padding-right: 40px;
}

.fa-qv .modal__content { padding: 16px 24px 24px; }

.fa-qv .content__row.row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
}

/* description + features under BOTH columns, not squeezed into the right one */
.fa-qv__details,
.fa-qv__more { flex: 1 0 100%; min-width: 0; }

.fa-qv__details {
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--fa-border-100);
}

.fa-qv__details { text-align: left; }

.fa-qv__desc { font-size: 14px; line-height: 1.5; color: var(--fa-ink-500); }
.fa-qv__desc p { margin: 0 0 8px; }



.fa-qv__media,
.fa-qv__side { padding: 0; float: none; }

/* two columns side by side; the basis subtracts half the gap so 55+45 still
   fits on one line now that the row is allowed to wrap (for the full-width
   details block underneath) */
.fa-qv__media { flex: 1 1 calc(56% - 12px); min-width: 0; }
.fa-qv__side  { flex: 1 1 calc(44% - 12px); min-width: 0; }

@media (max-width: 767px) {
    /* the grid classes (.col-sm-7/.col-sm-5) still carry their percentage here,
       so the photo column came out 240px inside a 300px row */
    .fa-qv .content__row.row > .fa-qv__media,
    .fa-qv .content__row.row > .fa-qv__side {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .fa-qv .modal__content { padding: 12px 14px 18px; }
    .fa-qv .modal__header { padding: 16px 14px 0; }
    .fa-qv .product-photo,
.fa-qv .product-photo__row,
.fa-qv .product-photo__item { width: 100%; max-width: 100%; }

.fa-qv .product-photo__item { height: 240px; }

    /* the close button was a ~20px hit area pressed against the title */
    .fa-qv .modal__close-button {
        width: var(--fa-tap-target);
        height: var(--fa-tap-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .fa-qv .modal__title { padding-right: 8px; font-size: 16px; }

    /* buy row: quantity + a CTA that takes the rest of the line */
    .fa-qv .product-buy__item[data-product-button--add] { flex: 1 1 auto; }
    .fa-qv .product-buy__item[data-product-button--add] .btn { width: 100%; }
}

/* --- photo + thumbs --- */
.fa-qv .product-photo__item {
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    background: var(--fa-surface-0);
    padding: 12px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fa-qv .product-photo__img,
.fa-qv .product-photo__img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.fa-qv .product-photo__thumbs,
.fa-qv .product-photo__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 0;
    list-style: none;
}

.fa-qv .product-photo__thumb,
.fa-qv .product-photo__thumb-item {
    width: 56px;
    height: 56px;
    border: 1px solid var(--fa-border-200);
    border-radius: var(--fa-radius-btn);
    background: var(--fa-surface-0);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s;
}

.fa-qv .product-photo__thumb img,
.fa-qv .product-photo__thumb-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.fa-qv .product-photo__thumb:hover,
.fa-qv .product-photo__thumb-item:hover,
.fa-qv .product-photo__thumb.is-active,
.fa-qv .product-photo__thumb-item.active { border-color: var(--fa-green-500); }

/* --- brand + article, under the purchase panel --- */
.fa-qv__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--fa-ink-400);
}

.fa-qv__brand { color: var(--fa-green-500); font-weight: 700; text-decoration: none; }
.fa-qv__brand:hover { color: var(--fa-green-600); }
.fa-qv__sku b { color: var(--fa-ink-900); font-weight: 700; }

/* --- meta line: brand · article (legacy markup, kept for other places) --- */
.fa-qv .product-intro__row--dashed {
    border: 0;
    padding: 0 0 12px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--fa-ink-400);
}

.fa-qv .product-intro__row--dashed a { color: var(--fa-green-500); font-weight: 700; }
.fa-qv .product-intro__label { color: var(--fa-ink-400); }
.fa-qv .product-intro__value { color: var(--fa-ink-900); font-weight: 700; }
.fa-qv .product-intro__col--flex { display: flex; align-items: center; gap: 6px; }

/* --- purchase panel --- */
.fa-qv .product-purchase {
    background: var(--fa-mint-50);
    border: 1px solid var(--fa-border-mint);
    border-radius: var(--fa-radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Every row of the panel is label + control on ONE line, with the labels sharing
   a column so "Стоимость" and "Варианты" line up and their controls start at the
   same x — the select used to sit far right of its own label. */
.fa-qv .product-purchase__row--flex {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* only the LABEL column is fixed — the buy row's first column holds the form,
   and pinning it to 96px squeezed the "В корзину" button to 64px */
.fa-qv .product-purchase__row--flex > .product-purchase__col:first-child:has(.product-purchase__label) {
    flex: 0 0 96px;
    max-width: 96px;
}

.fa-qv .product-purchase__row--flex > .product-purchase__col:last-child {
    /* basis 0, so the control may shrink below its intrinsic width instead of
       wrapping under its own label (the variant select did exactly that) */
    flex: 1 1 0;
    min-width: 0;
}

.fa-qv .product-purchase__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--fa-ink-400);
    margin: 0;
}

/* the bundle's grid columns carry a 10.36px MARGIN gutter, so "Стоимость" /
   "Варианты" sat ~10px right of everything else inside the panel */
.fa-qv .product-purchase__col { padding: 0; margin: 0; }
.fa-qv .product-purchase__row { margin: 0; }
.fa-qv .product-purchase { padding-inline: 16px; }
.fa-qv .fa-brand-landing { margin: 0; padding: 0; }

.fa-qv .variants-select,
.fa-qv .variants-select__field { width: 100%; }

.fa-qv .product-purchase .product-price__main {
    font-size: 26px;
    font-weight: 800;
    color: var(--fa-ink-900);
}

.fa-qv .variants-select__field {
    min-height: 40px;
    padding: 8px 12px;
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-btn);
    background: var(--fa-surface-0);
    font-size: 13.5px;
    color: var(--fa-ink-900);
}

/* quantity + buy on one line, the button carrying the row */
.fa-qv .product-buy,
.fa-qv .product-buy__flex-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;      /* the button wrapped under the quantity box */
    gap: 10px;
    width: 100%;
}

.fa-qv .product-buy__item { margin: 0; }
.fa-qv .product-buy__item[data-product-button--add] { flex: 1 1 auto; min-width: 0; }

/* out-of-stock state: "Нет в наличии" + the notify link share the row and used
   to be squeezed to ~60px each, one word per line */
/* quantity + CTA stay on one line; anything else in the row (the "buy in one
   click" render point, the out-of-stock notice) goes to its own line */
.fa-qv .product-purchase__row--flex { flex-wrap: wrap; }
.fa-qv .product-buy { flex: 1 1 100%; }
.fa-qv .product-buy__flex-container { flex-wrap: nowrap; width: 100%; }

/* the quantity box keeps its 64px, the CTA takes the rest — without this the
   form shrank to its content (96px) and the button sat on top of the input */
.fa-qv .product-buy__item[data-product-button--quantity] { flex: 0 0 64px; }
.fa-qv .product-purchase__row--flex > .fa-oneclick,
.fa-qv .product-purchase__row--flex > .product-purchase__col:only-child { flex: 1 1 100%; }
.fa-qv .product-buy .product-cut__not-available,
.fa-qv .product-buy [data-product-notify],
.fa-qv .product-buy__item { min-width: 0; }
.fa-qv .product-buy a { white-space: normal; }
.fa-qv .product-buy__item[data-product-button--add] .btn { width: 100%; }

.fa-qv .product-buy .form-input,
.fa-qv .product-buy input[type="text"],
.fa-qv .product-buy input[type="number"] {
    width: 64px;
    min-height: 44px;
    text-align: center;
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-btn);
    background: var(--fa-surface-0);
    font-weight: 700;
    color: var(--fa-ink-900);
}

.fa-qv .product-buy .btn { flex: 1; gap: 8px; }

/* the bundle's .btn__icon--bigger is 1.28rem wide but 1em tall in a non-square
   box — inside the CTA it rendered as a dot */
.fa-qv .product-buy .btn__icon,
.fa-qv .product-buy .btn__icon--bigger {
    position: static;
    inset: auto;
    margin: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.fa-qv .product-buy .btn__icon .svg-icon { width: 100%; height: 100%; }

.fa-qv .fa-oneclick {
    align-self: flex-start;
    font-size: 13.5px;
    font-weight: 700;
}

/* --- main properties --- */
.fa-qv .properties__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fa-qv .properties__item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13.5px;
    padding: 0;
}

.fa-qv .properties__item::before { content: none; }

.fa-qv .properties__key {
    color: var(--fa-ink-400);
    font-weight: 600;
    white-space: nowrap;
}

/* the label text already ends with a colon; the bundle adds another one */
.fa-qv .properties__key::after { content: none; }

.fa-qv .properties__val { color: var(--fa-ink-900); font-weight: 600; }

/* --- footer link --- */
.fa-qv .product-intro__row:last-child .link--main {
    display: inline-block;
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--fa-green-500);
}

.fa-qv .product-intro__row:last-child .link--main:hover { color: var(--fa-green-600); }

@media (max-width: 767px) {
    .fa-qv .content__row.row { flex-direction: column; gap: 16px; }
    .fa-qv .product-photo__item { height: 240px; }
    .fa-qv .modal__title { font-size: 17px; }
}

/* Line icons: the bundle paints every .svg-icon with fill: currentColor, which
   turns an outline symbol into a filled blob. fill/stroke are inheritable, so
   setting them on the referencing <svg> reaches the symbol's paths through the
   shadow tree — the symbols themselves carry no fill/stroke of their own. */
.svg-icon--line,
.svg-icon--line *,
/* beat the filled-button rule (.btn-primary .btn__icon .svg-icon) and any other
   two-class selector that paints icons with fill: currentColor */
.btn .svg-icon--line,
.btn .svg-icon--line *,
.btn-primary .btn__icon .svg-icon--line,
.btn-primary .btn__icon .svg-icon--line * {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

/* ── quick-view control on a card ───────────────────────────────────────────
   One per card now (it used to live inside the flipper's back face, so only
   products with a second photo had it). Shown only on devices that have a
   precise hover pointer; on touch/mobile it obscures the product link. */
.fa-card__media { position: relative; }

.fa-card__quick {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}

.fa-card:hover .fa-card__quick { opacity: 1; pointer-events: auto; }

.fa-card__quick .quick-view__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid var(--fa-border-200);
    border-radius: var(--fa-radius-pill);
    background: var(--fa-surface-0);
    color: var(--fa-ink-900);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(20, 35, 28, .12);
    white-space: nowrap;
}

.fa-card__quick .quick-view__btn:hover {
    border-color: var(--fa-green-500);
    color: var(--fa-green-500);
}

@media (hover: none), (max-width: 767px) {
    .fa-card__quick { display: none; }
}

@media (max-width: 767px) {
    .fa-chip { min-height: var(--fa-tap-target); }
}

/* ── linked accounts (sauth renderLink) in the profile ──────────────────────
   The module ships this block unstyled — in the account card it read as three
   lines of loose text ("Google — привязать"). Same chips the rest of the theme
   uses, so it looks like part of the form. */
.fa-account__card .sauth-link,
.frame-content .sauth-link { margin: 0 0 4px; }

.sauth-link__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--fa-ink-400);
    margin-bottom: 8px;
}

.sauth-link__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sauth-link__list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-btn);
    background: var(--fa-surface-0);
    font-size: 13px;
    font-weight: 600;
    color: var(--fa-ink-500);
}

.sauth-link__list li b { color: var(--fa-green-500); font-weight: 700; }

.sauth-link__list a {
    color: var(--fa-green-500);
    font-weight: 700;
    text-decoration: none;
}

.sauth-link__list a:hover { color: var(--fa-green-600); text-decoration: underline; }

.sauth-merge {
    border-radius: var(--fa-radius-md) !important;
    border-color: var(--fa-amber-500) !important;
    background: #FFF9EC !important;
    font-size: 13.5px;
}

/* (moved to the end of the file: the base .fa-orders__status rule sits below
   the block's original position and was overriding flex-direction)
   On a phone the four-column table needed 560px, so the TOTAL — the number the
   customer is looking for — sat off-screen behind a horizontal scroll. Each
   order becomes a stacked line instead: number and sum on the first row, date
   under the number, status across the bottom. */
@media (max-width: 767px) {
    .fa-orders { overflow-x: visible; }
    .fa-orders__head { display: none; }

    .fa-orders__row {
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
        padding: 14px;
        min-width: 0;
    }

    .fa-orders__no   { grid-column: 1; grid-row: 1; }
    .fa-orders__date { grid-column: 1; grid-row: 2; font-size: 13px; }

    .fa-orders__sum {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: start;
        text-align: right;
        white-space: nowrap;
    }

    .fa-orders__status {
        grid-column: 1 / -1;
        grid-row: 3;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 4px 8px;
        margin-top: 2px;
    }

    /* the paid/unpaid note belongs beside its badge, not centred in the row */
    .fa-orders__paid { margin: 0; text-align: left; }
}

/* ── order view on a phone ──────────────────────────────────────────────────
   The details are a two-column table; at 390px the label column squeezed
   "Комментарий к заказу" onto three lines beside a half-empty value column.
   Label above value instead. */
@media (max-width: 767px) {
    .order-details__row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 10px 14px;
    }

    /* the bundle pins the label cell to 77px — as a grid item that still wraps
       "Комментарий к заказу" onto two lines with the whole width free beside it */
    .order-details__cell--title {
        width: auto;
        min-width: 0;
        font-size: 12.5px;
        color: var(--fa-ink-400);
    }

    .order-details__cell { padding: 0; }

    /* .row keeps bootstrap's -15px gutter but the container pads 12px, so the
       row hung 3px past both edges */
    .content__container > .row { margin-inline: 0; }
    .content__container > .row > [class^="col-"] { padding-inline: 0; }

    /* the quantity is a table column on desktop; stacked on a phone it read as a
       stray "1" on its own line above the price */
    /* .__info is a flex row of [product | purchase]; at 390px the two together
       measured 391px and the purchase column's own flex-direction was column,
       so the quantity sat above the price in a 125px gutter */
    .cart-prod-table__info { flex-direction: column; }

    /* flex-basis:200px is the wrapper's desktop COLUMN width; once .__info
       stacks, basis becomes a height and left ~120px of blank card per item */
    .cart-prod-table__products-wrapper {
        width: 100%;
        flex-basis: auto;
        padding-top: 0;
    }

    .cart-prod-table__purchase {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        /* same story as the wrapper: 9.29em is its desktop column width */
        flex-basis: auto;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--fa-ink-100, #e9edf2);
    }

    .cart-prod-table__quantity {
        width: auto;
        color: var(--fa-ink-400);
        font-size: 13px;
    }

    /* the "×" belongs to the ORDER page, whose quantity is plain text; in the
       cart the same class is the <form> around the number input */
    div.cart-prod-table__quantity::before { content: "\00d7\00a0"; }

    /* cart: number input vs price — baseline puts the price above the box */
    .cart-prod-table__purchase:has(form.cart-prod-table__quantity) { align-items: center; }

    .cart-prod-table__price { width: auto; text-align: right; }
}

/* =====================================================================
 * Product page — owner review 2026-08-05.
 * ===================================================================== */

/* Thumbnail slider arrows had slid down onto the description and covered the
   tab strip, so "Наявність у магазинах" / "на складах" could not be clicked.
   Cause: `.content__row.row` is a grid, so `.col-sm-5` stretches to the height
   of the buy column (622px here); slick's own `.slick-slide { height: 100% }`
   then resolved against that stretched box and every thumb became 622px tall.
   The arrows are `top:0;bottom:0` inside the slider, so they grew with it. */
.thumbs-slider .slick-slide { height: auto; }

/* Price row: with the boxes centre-aligned the 27px number reads as sitting
   above "Стоимость" (digits have no descenders, the label does). Line the two
   up on the text baseline instead. */
.product-purchase__row--flex:has(.product-price) { align-items: baseline; }

/* Desktop buy row in one line: quantity → cart → 1-click. The row itself may
   still wrap (the actions column below it does), only the quantity+button pair
   is pinned. */
@media (min-width: 768px) {
    .product-purchase .product-buy__flex-container { flex-wrap: nowrap; }
    .product-purchase .product-buy__item { flex: 0 0 auto; }
}

/* Secondary actions (wishlist / compare / found-cheaper): one colour for icon
   and label, green on hover — the handoff's #48564F. The bundle paints
   `.product-actions { color: <accent> }` blue, and `.page a` outranked the
   label colour, so the three items came out in three different colours. */
.product-purchase .product-actions,
.product-purchase .product-actions__list,
.product-purchase .product-actions__item,
.product-purchase .product-actions__icon { color: var(--fa-ink-700); }
.page .product-purchase .product-actions__link,
.page .product-purchase button.product-actions__link { color: var(--fa-ink-700); }
.page .product-purchase .product-actions__link:hover,
.product-purchase .product-actions__item:hover,
.product-purchase .product-actions__item:hover .product-actions__icon { color: var(--fa-green-500); }

/* Stars and the "Отзывы: N" link were two floated blocks pinned to the same
   top edge, so the 14px star strip rode above the 21px text line. */
.product-intro .star-rating { display: flex; align-items: center; gap: var(--fa-gap-sm); }
.product-intro .star-rating__stars,
.product-intro .star-rating__votes { float: none; }
.product-intro .star-rating__stars { display: flex; align-items: center; }
.product-intro .star-rating__votes { line-height: 1; }

/* Gallery thumbs: `.thumbs-slider__img` caps its height but never its width,
   so a landscape photo ran wider than its 78-124px box and got sliced off at
   the right edge (visible on the 4th thumb of this page, desktop and mobile). */
.thumbs-slider__img { max-width: 100%; }

/* Mobile: the SalesDrive chat bubble is `position: fixed; bottom: 10px` with
   z-index 9999, so it landed on top of the sticky buy bar and covered two
   thirds of "В корзину" — the page's primary action on a phone. Lift it above
   the bar while the bar is on screen; the widget's own inline style needs
   !important to move. */
@media (max-width: 767px) {
    body:has(.fa-buybar.is-visible) .salesdrive-button-holder { bottom: 76px !important; }
}