/* SEO additions — PedalSpace 2026
 * Стилі для нових SEO-блоків: H1, опис головної, "Популярні категорії",
 * блок брендів, trust-блоки футера тощо.
 * Підключено в catalog/view/theme/pedalspace/template/common/header.tpl
 */

/* ===== Центрування контентного контейнера =====
   Базова тема дає .sober-container лише padding 40px (повна ширина, без max-width/
   центрування) → на широких моніторах увесь контент тулиться вліво з порожнечею справа.
   Фони хедера/футера лишаються повноширинними (вони на .site-header/.site-footer),
   центруємо тільки внутрішній контейнер. */
.sober-container {
    max-width: 1920px; /* ширина Figma desktop-фрейму; бічні поля 40px дає вже наявний padding */
    margin-left: auto;
    margin-right: auto;
}

/* ===== Home page H1 + subtitle ===== */
.home-intro {
    margin: 0 0 24px;
    padding: 0;
}
.home-intro__title {
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    margin: 0 0 8px;
    color: inherit;
    letter-spacing: -0.01em;
}
.home-intro__subtitle {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin: 0;
    max-width: 720px;
}

@media (max-width: 767px) {
    .home-intro__title { font-size: 20px; }
    .home-intro__subtitle { font-size: 13px; }
    .home-intro { margin-bottom: 16px; }
}

/* ===== Generic section heading on home ===== */
.home-section__title {
    font-size: 24px;
    line-height: normal;
    font-weight: 600;
    margin: 8px 0 16px;
    color: #121212;
    letter-spacing: -0.005em;
}
@media (max-width: 767px) {
    .home-section__title { font-size: 18px; margin-bottom: 12px; }
}

/* ===== About-text section at bottom of home ===== */
.home-about {
    margin: 40px 0 24px;
    padding: 24px 28px;
    background: #f7f7f9;
    border-radius: 8px;
}
.home-about__title {
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
    margin: 0 0 12px;
    color: #1a1a1a;
}
.home-about__text {
    font-size: 14px;
    line-height: 1.65;
    color: #444;
    max-width: 100%;
}
.home-about__text p {
    margin: 0 0 12px;
}
.home-about__text p:last-child { margin-bottom: 0; }
.home-about__text strong { color: #1a1a1a; font-weight: 600; }

@media (max-width: 767px) {
    .home-about { margin: 24px 0 16px; padding: 16px 18px; }
    .home-about__title { font-size: 18px; }
    .home-about__text { font-size: 13px; line-height: 1.55; }
}

/* ===== Footer — PedalSpace light layout (Figma 1826-1086) ===== */
.site-footer,
.site-footer .footer-main { background: #fff; }
.site-footer .footer-main {
    padding: 60px 0 70px;
    color: #121212;
}
.site-footer .footer-cols {
    display: grid;
    grid-template-columns: 775fr 310fr 459fr 296fr;
    gap: 0;
    align-items: stretch;
}
/* base theme (style.min.css) centrує весь .site-footer; футер у нас лівобічний на всіх ширинах */
.site-footer .footer-cols,
.site-footer .footer-col,
.site-footer .footer-brand__tagline,
.site-footer .footer-brand__copyright,
.site-footer .footer-contacts,
.site-footer .footer-location { text-align: left; }
.site-footer .footer-col { margin: 0; min-width: 0; }
.site-footer .footer-col__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #121212;
    margin: 0 0 30px;
    letter-spacing: 0;
    text-transform: uppercase;
    line-height: 1.2;
}
.site-footer .footer-col__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.site-footer .footer-col__list li {
    margin: 0;
    font-size: 16px;
    line-height: 40px;
}
.site-footer .footer-col__list a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #121212;
    text-decoration: none;
    transition: color .15s ease;
}
.site-footer .footer-col__list a:hover { color: #1E85BE; text-decoration: none; }

/* Brand column */
.site-footer .footer-col--brand {
    display: flex;
    flex-direction: column;
    padding-right: 8px;
}
.site-footer .footer-brand {
    display: block;
    margin: 0;
    line-height: 0;
    text-decoration: none;
}
.site-footer .footer-brand__logo {
    display: block;
    height: 70px;            /* TZ п5: однаковий розмір з лого хедера (70px) */
    width: auto;
    max-width: 170px;
}
.site-footer .footer-brand__name {
    display: inline-block;
    font-size: 28px;
    font-weight: 800;
    color: #121212;
}
.site-footer .footer-brand__tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #121212;
    margin: 60px 0 0;
    max-width: 600px;
}
.site-footer .footer-brand__copyright {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    color: #b9b9b9;
    margin-top: auto;
    padding-top: 24px;
}

/* Socials — blue badge glyphs (Figma) */
.site-footer .footer-social-block { margin: 0; }
.site-footer .footer-social-block__icons {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: flex-start;
    gap: 16px 20px;
}
.site-footer .footer-social {
    display: inline-flex;
    width: 44px;
    height: 44px;
    text-decoration: none;
}
.site-footer .footer-social svg {
    width: 44px;
    height: 44px;
    display: block;
}
.site-footer .footer-social svg path,
.site-footer .footer-location__icon path {
    fill: #1E85BE !important;
    stroke: none !important;
    transition: fill .15s ease;
}
.site-footer .footer-social:hover svg path { fill: #1768a0 !important; }
/* WhatsApp / Signal — синій бейдж + білий гліф (двошарові) */
.site-footer .footer-social .fs-badge { fill: #1E85BE !important; }
.site-footer .footer-social .fs-glyph { fill: #fff !important; }
.site-footer .footer-social--wa:hover .fs-badge,
.site-footer .footer-social--signal:hover .fs-badge { fill: #1768a0 !important; }
.site-footer .footer-social--wa:hover .fs-glyph,
.site-footer .footer-social--signal:hover .fs-glyph { fill: #fff !important; }

/* Contacts column */
.site-footer .footer-col--contacts {
    display: flex;
    flex-direction: column;
}
.site-footer .footer-contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    margin-top: 26px;
}
.site-footer .footer-contact--line {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}
.site-footer a.footer-contact--phone { align-self: flex-start; }
/* email довгий і на вужчих за ~1410px десктопах вилазив за колонку. Тримаємо в 1 рядок,
   а шрифт зменшуємо ТІЛЬКИ коли не влазить — через container query відносно ширини колонки
   (стелю 18px тримаємо, нижче масштабуємо: ~8.2cqw ≈ ширина email при 18px). */
.site-footer .footer-col--contacts { container-type: inline-size; }
.site-footer a.footer-contact--email { width: fit-content; max-width: 100%; align-self: flex-start; white-space: nowrap; font-size: min(18px, 5.9cqw); }
.site-footer .footer-contact--line:hover { color: #1E85BE; border-color: #1E85BE; }
.site-footer .footer-location {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
}
.site-footer .footer-location__icon {
    width: 23px;
    height: 28px;
    flex: 0 0 23px;
    display: block;
}
.site-footer .footer-location__text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #121212;
}

/* Hide legacy footer bottom bar + payments (not in Figma) */
.site-footer .footer-bottom,
.site-footer .footer-payments { display: none !important; }

/* Responsive */
@media (max-width: 1199px) {
    .site-footer .footer-cols { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; }
    .site-footer .footer-brand__tagline { font-size: 18px; }
}
@media (max-width: 991px) {
    .site-footer .footer-cols {
        grid-template-columns: 1fr 1fr;
        gap: 40px 24px;
    }
    .site-footer .footer-col--brand { grid-column: 1 / -1; }
    .site-footer .footer-col--contacts { grid-column: 1 / -1; }
    .site-footer .footer-brand__copyright { margin-top: 24px; }
    .site-footer .footer-location { margin-top: 24px; }
}

/* ===== Mobile footer 1:1 (Figma 1825-513) ===== */
@media (max-width: 767px) {
    .site-footer .sober-container { padding-left: 20px; padding-right: 20px; max-width: 100%; }
    .site-footer .footer-main { padding: 50px 0; color: #121212; }
    .site-footer .footer-cols { display: block; }
    .site-footer .footer-col { grid-column: auto; }
    .site-footer .footer-col,
    .site-footer .footer-col__title,
    .site-footer .footer-brand__tagline,
    .site-footer .footer-contacts,
    .site-footer .footer-location { text-align: left; }
    .site-footer .footer-social-block__icons { justify-content: flex-start; }
    .site-footer .footer-contacts { align-items: flex-start; }

    /* 1. Лого зліва + копірайт зверху-справа */
    .site-footer .footer-col--brand { position: relative; padding-right: 0; margin: 0; }
    .site-footer .footer-brand__logo { height: 60px; max-width: 130px; }
    .site-footer .footer-brand__copyright {
        position: absolute; top: 6px; right: 0; margin: 0; padding: 0;
        text-align: right; font-size: 10px; font-weight: 500; line-height: 1.5;
        max-width: 120px; color: #b9b9b9;
    }
    .site-footer .footer-brand__tagline {
        font-size: 18px; font-weight: 600; line-height: 1.4;
        margin: 50px 0 50px; max-width: none; /* Figma 1839-2202: ~50px під лого */
    }

    /* 2-3. Акордеони Каталог / Покупцям */
    .site-footer .footer-col--catalog { margin-top: 40px; }
    .site-footer .footer-col--acc { border-top: 1px solid #ececec; margin: 0; }
    .site-footer .footer-col--clients.footer-col--acc { border-bottom: 1px solid #ececec; }
    .site-footer .footer-col--acc .footer-col__title {
        position: relative; margin: 0; padding: 16px 26px 16px 0;
        cursor: pointer; font-size: 14px; -webkit-user-select: none; user-select: none;
    }
    .site-footer .footer-col--acc .footer-col__title::after {
        content: ""; position: absolute; right: 4px; top: 50%;
        width: 8px; height: 8px; margin-top: -7px;
        border-right: 1.6px solid #121212; border-bottom: 1.6px solid #121212;
        transform: rotate(45deg); transition: transform .2s ease;
    }
    .site-footer .footer-col--acc.is-open .footer-col__title::after {
        transform: rotate(-135deg); margin-top: -2px;
    }
    .site-footer .footer-col--acc .footer-col__list {
        max-height: 0; overflow: hidden; transition: max-height .3s ease;
    }
    .site-footer .footer-col--acc.is-open .footer-col__list {
        max-height: 600px; padding-bottom: 14px;
    }
    .site-footer .footer-col--acc .footer-col__list li { line-height: 32px; }

    /* 4. Контакти — завжди відкрита (Figma 1839-2202: помітний відступ від акордеонів) */
    .site-footer .footer-col--contacts { margin-top: 72px; }
    .site-footer .footer-col--contacts .footer-col__title { margin-bottom: 18px; }
    .site-footer .footer-social-block__icons { gap: 16px; }
    .site-footer .footer-social,
    .site-footer .footer-social svg { width: 45px; height: 44px; }
    .site-footer .footer-contacts { margin-top: 30px; gap: 14px; }
    .site-footer .footer-contact--line {
        font-size: 16px; border-bottom: 0; padding-bottom: 0; white-space: normal; overflow-wrap: anywhere;
    }
    .site-footer a.footer-contact--phone { font-weight: 600; }
    .site-footer a.footer-contact--email { width: auto; max-width: 100%; font-weight: 500; }
    .site-footer .footer-location { margin-top: 28px; padding-top: 0; align-items: center; }
    .site-footer .footer-location__text { font-size: 12px; }
}

/* ===== Mobile horizontal-overflow safeguard ===== */
/* На прод-версії деякі картки товарів (.product.col-xs-6) виходили на 3px за viewport
 * на ширинах ≤480px через bootstrap row negative margin. На dev цього вже немає
 * завдяки новій структурі home-tpl, але залишаємо safeguard для надійності.
 */
@media (max-width: 767px) {
    html, body { overflow-x: hidden; }
}
@media (max-width: 575px) {
    .woocommerce ul.products { margin-left: 0; margin-right: 0; }
}

/* ===== Popular Categories grid on home ===== */
.home-categories { margin: 0 0 32px; }
.home-categories__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.home-categories__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Figma 375x420 card: image 252 centered, 32px top, 62px sides, 82px gap to label */
    padding: 8.53% 16.4% 9.07%;
    border: 1px solid #e6e6e9;
    border-radius: 10px;
    background: #fff;
    color: #121212;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.home-categories__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    border-color: #d0d0d4;
    color: #1a1a1a;
    text-decoration: none;
}
.home-categories__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32.5%; /* Figma 82px gap on 252px image */
    overflow: hidden;
}
.home-categories__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.home-categories__name {
    font-size: 20px;
    line-height: normal;
    font-weight: 500;
    color: #121212;
}
@media (max-width: 991px) {
    .home-categories__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 575px) {
    .home-categories__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .home-categories__card { padding: 8px 6px; }
    .home-categories__name { font-size: 12px; }
}

/* ===== Brands block on home ===== */
.home-brands { margin: 56px 0 56px; }
.home-brands__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.home-brands__head .home-section__title { flex: 0 1 auto; }
.home-brands__all {
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: color .15s ease;
    white-space: nowrap;
}
.home-brands__all:hover { color: #1a1a1a; text-decoration: underline; }
.home-brands__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.home-brands__card { min-height: 96px; }
.home-brands__card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 10px 8px;
    border: 1px solid #e6e6e9;
    border-radius: 6px;
    background: #fff;
    color: #1a1a1a;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.home-brands__card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    border-color: #d0d0d4;
    text-decoration: none;
    color: #1a1a1a;
}
.home-brands__logo {
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
    filter: grayscale(40%);
    opacity: .92;
    transition: filter .15s ease, opacity .15s ease;
}
.home-brands__card:hover .home-brands__logo {
    filter: grayscale(0%);
    opacity: 1;
}
.home-brands__name {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    color: #2a2a2a;
}
@media (max-width: 1199px) {
    .home-brands__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
    .home-brands { margin: 40px 0 40px; }
    .home-brands__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .home-brands__card { min-height: 56px; padding: 8px 6px; }
    .home-brands__name { font-size: 12px; }
}
@media (max-width: 360px) {
    .home-brands__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Wishlist button reset (was <a href="#">, now <button type="button">) =====
 * Lighthouse SEO `crawlable-anchors` fail на 51 anchor без коректного href.
 * Перетворили на button — треба скинути дефолтні button-стилі браузера. */
button.add-to-wishlist {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1;
}
button.add-to-wishlist:focus { outline: none; }
button.add-to-wishlist:focus-visible { outline: 2px solid #444; outline-offset: 2px; }

/* ===== Hero banner zone (top-of-home, replaces/precedes slideshow) =====
   Layout: white cards with soft shadow, color accents per variant. 1 hero (guitars)
   full-width on row 1, 2 compact cards (pedals + brands) on row 2. */
.home-banners {
    margin: 0 0 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.home-banners__card {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    color: #1a1a1a;
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    padding: 30px;
    min-height: 279px;
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-banners__card--guitars {
    grid-column: 1 / -1;
    min-height: 260px;
    padding: 32px 36px;
}
.home-banners__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    z-index: 1;
}
.home-banners__card--guitars .home-banners__text { max-width: 52%; }
.home-banners__card--pedals .home-banners__text,
.home-banners__card--brands .home-banners__text { max-width: 62%; }
/* Accent area (product photo or logos), right side of the card */
.home-banners__accent {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 0;
}
.home-banners__card--guitars .home-banners__accent {
    right: 4%;
    width: 42%;
    height: 88%;
    top: 6%;
    transform: none;
}
.home-banners__card--pedals .home-banners__accent {
    width: 30%;
    max-height: 82%;
    right: 24px;
}
.home-banners__card--brands .home-banners__accent {
    width: 26%;
    max-height: 72%;
    right: 28px;
}
.home-banners__accent img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.home-banners__accent--logos {
    flex-direction: column;
    gap: 10px;
    width: 34%;
    max-height: 84%;
}
.home-banners__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    max-width: 100%;
}
.home-banners__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: .85;
}
.home-banners__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.10);
    border-color: rgba(0,0,0,.10);
    color: #1a1a1a;
    text-decoration: none;
}
.home-banners__eyebrow {
    align-self: flex-start;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1;
    padding: 8px 16px;
    border-radius: 100px;
    margin-bottom: 40px;
}
.home-banners__card--guitars .home-banners__eyebrow { background: #fde9e6; color: #c53b2f; }
.home-banners__card--pedals .home-banners__eyebrow { background: #c5eedf; color: #39554a; }
.home-banners__card--brands .home-banners__eyebrow { background: #e0e6f6; color: #2a4080; }
.home-banners__title {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.05;
    margin: 0 0 14px;
    color: #121212;
}
.home-banners__card--guitars .home-banners__title { font-size: 30px; }
.home-banners__sub {
    font-size: 16px;
    line-height: 1.25;
    color: #121212;
    margin: 0 0 26px;
    max-width: 100%;
}
.home-banners__card--guitars .home-banners__sub { font-size: 14.5px; max-width: 100%; }
.home-banners__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 2px solid currentColor;
    padding-bottom: 8px;
    transition: gap .15s ease;
}
.home-banners__card--guitars .home-banners__cta { color: #c53b2f; }
.home-banners__card--pedals .home-banners__cta { color: #39554a; }
.home-banners__card--brands .home-banners__cta { color: #2a4080; }
.home-banners__card:hover .home-banners__cta { gap: 10px; }
/* (legacy gradient/dark-theme banner styles removed — replaced by white-card variant above) */
@media (max-width: 991px) {
    .home-banners__card--guitars { min-height: 220px; padding: 24px 26px; }
    .home-banners__card--guitars .home-banners__title { font-size: 24px; }
    .home-banners__hero-media { width: 50%; }
}
@media (max-width: 575px) {
    .home-banners { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
    .home-banners__card { min-height: 130px; padding: 18px 18px; }
    .home-banners__card--guitars { min-height: 200px; padding: 20px 22px; }
    .home-banners__card--guitars .home-banners__text { max-width: 100%; }
    /* On phones tone down the photo: smaller, positioned bottom-right corner */
    .home-banners__hero-media {
        width: 60%;
        height: 60%;
        top: auto;
        bottom: 0;
        right: -10%;
        opacity: .9;
    }
    .home-banners__card--guitars .home-banners__title { font-size: 22px; }
    .home-banners__title { font-size: 19px; }
}

/* ===== Reviews block on home ===== */
.home-reviews { margin: 56px 0 56px; }
.home-reviews__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.home-reviews__head .home-section__title { margin: 0; }
.home-reviews__all {
    font-size: 13px;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
}
.home-reviews__all:hover { color: #1a1a1a; text-decoration: underline; }
/* Continuous auto-marquee (like the hero brand logos): the track is duplicated
 * in markup and slides from 0 to -50% in a seamless loop. Pauses on hover so the
 * text stays readable; falls back to manual horizontal scroll when motion is
 * reduced. All reviews stay in DOM for SEO. */
.home-reviews__slider {
    position: relative;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}
.home-reviews__slider::before,
.home-reviews__slider::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}
.home-reviews__slider::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.home-reviews__slider::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.home-reviews__track {
    display: flex;
    align-items: stretch;
    gap: 14px;
    width: max-content;
    padding-bottom: 8px;
    animation: ps-reviews-marquee 70s linear infinite;
}
.home-reviews__slider:hover .home-reviews__track { animation-play-state: paused; }
@keyframes ps-reviews-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.home-reviews__card {
    flex: 0 0 340px;
    background: #fff;
    border: 1px solid #e6e6e9;
    border-radius: 10px;
    padding: 20px 22px;
    min-height: 196px;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
}
.home-reviews__stars {
    color: #f5a623;
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    line-height: 1;
}
.home-reviews__text {
    font-size: 14px;
    line-height: 1.55;
    color: #2a2a2a;
    margin: 0 0 10px;
    flex: 0 0 auto;
    /* Standardise card height: clamp every review to 3 lines, show the rest in a modal */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* "Read full review" trigger — only shown (via JS .is-clamped) when text overflows */
.home-reviews__more {
    align-self: flex-start;
    display: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #c53b2f;
    cursor: pointer;
}
/* Beat the theme's global button:hover (dark fill) — keep it a plain text link */
.home-reviews__more:hover,
.home-reviews__more:focus,
.home-reviews__more:active {
    background: transparent;
    box-shadow: none;
    color: #c53b2f;
}
.home-reviews__more:hover { text-decoration: underline; }
.home-reviews__card.is-clamped .home-reviews__more { display: inline-block; }
.home-reviews__author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}
.home-reviews__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4b5cc2, #864ad2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.home-reviews__author-info { display: flex; flex-direction: column; line-height: 1.25; }
.home-reviews__name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
.home-reviews__meta { font-size: 11px; color: #888; margin-top: 2px; }

@media (max-width: 575px) {
    .home-reviews { margin: 40px 0 40px; }
    .home-reviews__card { flex: 0 0 280px; padding: 16px 18px; min-height: 170px; }
    .home-reviews__slider::before, .home-reviews__slider::after { width: 28px; }
}
/* Accessibility: no auto-motion → revert to manual horizontal scroll. */
@media (prefers-reduced-motion: reduce) {
    .home-reviews__slider { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
    .home-reviews__track { animation: none; }
    .home-reviews__slider::before, .home-reviews__slider::after { display: none; }
}

/* ===== Brand info page (manufacturer/info): logo + intro description ===== */
.brand-intro {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0 0 24px;
    padding: 20px 24px;
    background: #f7f7f9;
    border-radius: 10px;
}
.brand-intro__logo {
    flex: 0 0 auto;
    width: 140px;
    max-height: 80px;
    object-fit: contain;
}
.brand-intro__body { flex: 1; min-width: 0; }
.brand-intro__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #1a1a1a;
    line-height: 1.2;
}
.brand-intro__text {
    font-size: 14px;
    line-height: 1.55;
    color: #444;
    margin: 0;
}
.brand-intro__text p { margin: 0 0 8px; }
.brand-intro__text p:last-child { margin-bottom: 0; }
@media (max-width: 575px) {
    .brand-intro { flex-direction: column; align-items: flex-start; padding: 16px 18px; gap: 14px; }
    .brand-intro__logo { width: 120px; max-height: 60px; }
    .brand-intro__title { font-size: 18px; }
    .brand-intro__text { font-size: 13px; }
}

/* ===== Header: language switcher (UA default + hover) ===== */
.topbar-right .lang-switch { position: relative; display: inline-block; vertical-align: middle; margin-right: 14px; }
.lang-switch__current { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 4px 6px; display: inline-flex; align-items: center; gap: 6px; }
.lang-switch__flag { font-weight: 600; letter-spacing: .04em; }
.lang-switch__menu { position: absolute; top: 100%; right: 0; min-width: 64px; margin: 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateY(4px); transition: .18s ease; z-index: 130; text-align: left; }
.lang-switch:hover .lang-switch__menu, .lang-switch:focus-within .lang-switch__menu { opacity: 1; visibility: visible; transform: none; }
.lang-switch__item { display: block; padding: 6px 16px; color: #333; font-weight: 600; font-size: 13px; }
.lang-switch__item:hover { background: #f4f4f4; }
.lang-switch__item.is-current { color: #e8472b; }

/* ===== Header: ІНФО dropdown ===== */
.main-navigation .menu-info { position: relative; }
.main-navigation .menu-info__toggle { cursor: pointer; }
.main-navigation .menu-info > .sub-menu { display: block; position: absolute; top: 100%; left: 0; min-width: 240px; margin: 0; padding: 10px 0; list-style: none; background: #fff; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s ease; z-index: 130; }
.main-navigation .menu-info:hover > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.main-navigation .menu-info > .sub-menu > li { display: block; float: none; width: auto; }
.main-navigation .menu-info > .sub-menu > li > a { display: block; padding: 8px 22px; color: #333; white-space: nowrap; font-size: 14px; line-height: 1.4; }
.main-navigation .menu-info > .sub-menu > li > a:hover { background: #f4f4f4; color: #e8472b; }

/* ===== Home hero: full-bleed Figma photo + overlay texts (Figma 1709-446) ===== */
.home-hero {
    position: relative;
    min-height: min(50vw, 88vh); /* Figma 1776-1379: 2:1 (1920×960), but never taller than the viewport */
    max-height: 1000px;
    margin: 0 0 40px;
    background-color: #111;
    background-position: center 35%;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
/* dark scrim so white text stays legible (stronger at bottom) */
.home-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,.78) 100%);
    pointer-events: none;
    z-index: 1;
}
.home-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
    padding-bottom: 56px;
}
.home-hero__left { flex: 1 1 52%; max-width: 600px; }
.home-hero__right { flex: 0 1 46%; max-width: 560px; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }

.home-hero__title {
    margin: 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -.5px;
    text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.home-hero__desc {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    text-align: right;
    text-shadow: 0 1px 12px rgba(0,0,0,.85);
}

/* brand-logo marquee (cyclic, single speed, no links) over the photo */
.home-hero__marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.home-hero__track {
    display: flex;
    align-items: center;
    gap: 48px;
    width: max-content;
    animation: ps-marquee 45s linear infinite;
}
.home-hero__logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.home-hero__logo img {
    height: 58px;
    width: auto;
    max-width: 210px;
    object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.55));
    opacity: 1;
}
@keyframes ps-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .home-hero__track { animation: none; } }

@media (max-width: 991px) {
    .home-hero { min-height: 560px; }
    .home-hero__title { font-size: 34px; }
}
@media (max-width: 767px) {
    /* Figma mobile (1825-513): full-bleed concert photo, near full-screen height,
       stacked order logos → desc → title (title sits at the bottom). */
    .home-hero {
        min-height: 86vh;
        background-image: url('../image/redesign/hero-mobile.png') !important;
        background-position: center;
    }
    .home-hero__inner { flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 40px; }
    /* desktop max-width:560/600 must drop to viewport width on mobile, else the block overflows → horizontal scroll/clipping */
    .home-hero__left, .home-hero__right { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; align-items: flex-start; }
    .home-hero__right { order: 1; gap: 16px; }   /* logos + description first */
    .home-hero__left  { order: 2; }              /* big title last (bottom) */
    .home-hero__marquee, .home-hero__desc { max-width: 100%; }
    .home-hero__desc { text-align: left; font-size: 14px; }
    .home-hero__title { font-size: 30px; }
    .home-hero__logo img { height: 40px; }
}

/* ===== Two promo banners: У НАЯВНОСТІ (green) / ГАРЯЧІ ЦІНИ (orange) ===== */
.home-banners__card--instock .home-banners__eyebrow { background: #e3f5e8; color: #1b8a4b; }
.home-banners__card--sale .home-banners__eyebrow { background: #fdecd9; color: #d3690e; }
.home-banners__card--instock .home-banners__cta { color: #1b8a4b; }
.home-banners__card--sale .home-banners__cta { color: #d3690e; }
.home-banners__card--instock, .home-banners__card--sale { min-height: 260px; }
.home-banners__card--instock .home-banners__text,
.home-banners__card--sale .home-banners__text { max-width: 56%; }
/* остаточні правки п.6: фото у повний розмір (видно цілком) — contain замість cover, який обрізав */
.home-banners__card--instock .home-banners__accent,
.home-banners__card--sale .home-banners__accent {
    position: absolute; right: 18px; top: 18px; bottom: 18px; width: 42%; z-index: 1;
    display: flex; align-items: center; justify-content: flex-end;
}
.home-banners__card--instock .home-banners__accent img,
.home-banners__card--sale .home-banners__accent img {
    width: 100%; height: 100%; object-fit: contain; object-position: center right;
}
.home-banners__card--sale .home-banners__text { position: relative; z-index: 2; }
.home-banners__card--sale {
    background: linear-gradient(135deg, #fff 60%, #fff4e8 100%);
}
.home-banners__card--sale::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(211,105,14,.16), transparent 70%); border-radius: 50%;
}
@media (max-width: 575px) {
    .home-banners { grid-template-columns: 1fr; }
    .home-banners__card--instock .home-banners__text,
    .home-banners__card--sale .home-banners__text { max-width: 100%; }
    .home-banners__card--instock .home-banners__accent { display: none; }
}

/* ===== Review card: link to product ===== */
.home-reviews__product {
    display: inline-block;
    /* top:auto groups the product link with the author at the card bottom */
    margin: auto 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: #c53b2f;
    text-decoration: none;
}
.home-reviews__product:hover { text-decoration: underline; }

/* ===== Full review modal ===== */
.home-reviews__modal[hidden] { display: none; }
.home-reviews__modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.home-reviews__modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20,20,28,.55);
}
.home-reviews__modal-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    overflow: auto;
    padding: 28px 28px 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.home-reviews__modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 4px 8px;
}
.home-reviews__modal-close:hover,
.home-reviews__modal-close:focus,
.home-reviews__modal-close:active {
    background: transparent;
    box-shadow: none;
    color: #1a1a1a;
}
.home-reviews__modal .home-reviews__text {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
    font-size: 15px;
    margin: 0 0 16px;
}
.home-reviews__modal .home-reviews__author { margin-top: 0; }

/* ===== Quick-contact / callback widget ===== */
.ps-cb { position: fixed; right: 22px; bottom: 22px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; }
.ps-cb__quick { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-bottom: 12px; }
.ps-cb__q { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.22); transition: transform .15s ease; text-decoration: none; }
.ps-cb__q:hover { transform: scale(1.08); }
.ps-cb__q svg { width: 26px !important; height: 26px !important; }
.ps-cb__q--tg { background: #2aabee; }
.ps-cb__q--viber { background: #7360f2; }
.ps-cb__fab {
    width: 58px !important; height: 58px !important; min-width: 0; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
    background: #e8472b; color: #fff; box-shadow: 0 8px 22px rgba(232,71,43,.45);
    display: flex; align-items: center; justify-content: center; margin-left: auto;
    transition: transform .2s ease, background .2s ease; animation: ps-cb-pulse 2.4s infinite;
}
.ps-cb__fab svg { width: 26px !important; height: 26px !important; fill: #fff !important; }
.ps-cb__fab:hover { transform: scale(1.06); background: #d33d22; }
@keyframes ps-cb-pulse { 0% { box-shadow: 0 8px 22px rgba(232,71,43,.45), 0 0 0 0 rgba(232,71,43,.5); } 70% { box-shadow: 0 8px 22px rgba(232,71,43,.45), 0 0 0 16px rgba(232,71,43,0); } 100% { box-shadow: 0 8px 22px rgba(232,71,43,.45), 0 0 0 0 rgba(232,71,43,0); } }
.ps-cb.is-open .ps-cb__fab { animation: none; }
.ps-cb__panel {
    position: absolute; right: 0; bottom: 72px;
    width: 290px; background: #fff; border-radius: 14px; padding: 18px;
    box-shadow: 0 16px 44px rgba(0,0,0,.22);
}
.ps-cb.is-open .ps-cb__quick { opacity: 0; visibility: hidden; }
.ps-cb__head { margin-bottom: 14px; }
.ps-cb__title { display: block; font-weight: 700; font-size: 16px; color: #1a1a1a; }
.ps-cb__hint { display: block; font-size: 12.5px; color: #1b8a4b; margin-top: 2px; }
.ps-cb__links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ps-cb__link {
    display: block; padding: 10px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
    text-decoration: none; color: #fff; text-align: center;
}
.ps-cb__link--viber { background: #7360f2; }
.ps-cb__link--tg { background: #2aabee; }
.ps-cb__link--call { background: #2f2f37; }
.ps-cb__link:hover { opacity: .92; color: #fff; }
.ps-cb__form { display: flex; flex-direction: column; gap: 8px; }
.ps-cb__input {
    width: 100%; padding: 10px 12px; border: 1px solid #dcdce0; border-radius: 9px;
    font-size: 14px; color: #1a1a1a; box-sizing: border-box;
}
.ps-cb__input:focus { outline: none; border-color: #e8472b; }
.ps-cb__send {
    border: 0; border-radius: 9px; padding: 11px 14px; background: #e8472b; color: #fff;
    font-weight: 600; font-size: 14px; cursor: pointer;
}
.ps-cb__send:hover { background: #d33d22; }
.ps-cb__send:disabled { opacity: .6; cursor: default; }
.ps-cb__msg { font-size: 12.5px; min-height: 16px; }
.ps-cb__msg.is-ok { color: #1b8a4b; }
.ps-cb__msg.is-err { color: #d33d22; }
@media (max-width: 575px) {
    .ps-cb { right: 14px; bottom: 14px; }
    .ps-cb__fab { width: 52px; height: 52px; }
    .ps-cb__panel { width: calc(100vw - 28px); max-width: 300px; }
}

/* ===== Checkout: two-column (form left, order preview right) ===== */
/* checkout layout has a left-sidebar body class but no sidebar — kill the reserved
   350px gutter + float:right so the form fills the full container width */
body.woocommerce-checkout .content-area,
body.checkout-checkout .content-area {
    width: 100% !important; float: none !important;
}
.checkout-2col { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
.checkout-2col__main { min-width: 0; }
.checkout-2col__aside {
    position: sticky; top: 20px; background: #f7f7f9; border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px; padding: 20px 22px;
}
.checkout-2col__aside h3 { margin-top: 0; }
.checkout-2col__aside .shop_table { width: 100%; }
/* aside already provides the framed box — strip the theme's inner border/padding on
   the review-order so its table aligns to the aside padding (was indented left + overflowing right) */
.checkout-2col__aside .woocommerce-checkout-review-order { border: 0 !important; padding: 0 !important; margin: 0 !important; }
/* match the aside's rounded frame on the form boxes (ПР: #customer_details radius like aside) */
.checkout #customer_details.col2-set,
.checkout #shipping-billing-methods.col2-set { border-radius: 12px; }
/* full-width rows must drop below the floated first/last pairs (theme floats .form-row) */
.checkout .woocommerce-billing-fields__field-wrapper .no-call-row,
.checkout .woocommerce-billing-fields__field-wrapper .address-field,
.checkout .woocommerce-billing-fields__field-wrapper .np-fields,
.checkout .woocommerce-additional-fields,
.checkout .woocommerce-account-fields { clear: both; }
.no-call-row { margin: 4px 0 14px; }
/* ПР9: checkbox + label on one line, vertically aligned to the box (no wrapping) */
.checkout .no-call-row,
.checkout .woocommerce-account-fields .create-account { width: 100% !important; float: none !important; }
.checkout .no-call-row .no-call-label,
.checkout .woocommerce-account-fields .create-account label.checkbox {
    display: flex !important; align-items: center !important; gap: 9px;
    font-size: 13px; line-height: 1.3; color: #444; cursor: pointer; white-space: nowrap;
    padding-left: 0 !important;
}
.no-call-row .no-call-label span,
.checkout .create-account label.checkbox span { white-space: nowrap; padding-left: 0 !important; position: static !important; }
/* restore a real checkbox (theme hides the native input and draws an absolute grey square that overlaps the text) */
.no-call-row .no-call-label input[type="checkbox"],
.checkout .create-account label.checkbox input[type="checkbox"] {
    -webkit-appearance: auto !important; appearance: auto !important;
    display: inline-block !important; width: 18px !important; height: 18px !important; min-width: 18px !important;
    margin: 0 !important; flex: 0 0 auto; position: static !important; opacity: 1 !important; accent-color: #1e85be;
}
.no-call-row .no-call-label span::before, .no-call-row .no-call-label span::after,
.checkout .create-account label.checkbox span::before, .checkout .create-account label.checkbox span::after { content: none !important; display: none !important; }
/* the .checkbox label itself draws an absolute grey 24px box (::before) + checkmark (::after)
   that bleeds out behind the restored native input — remove it */
.no-call-row .no-call-label::before, .no-call-row .no-call-label::after,
.checkout .create-account label.checkbox::before, .checkout .create-account label.checkbox::after { content: none !important; display: none !important; }
/* ПР9: order-note textarea must not be draggable/resizable */
#order_comments { resize: none; }

/* ПР10: order-review items get a product thumbnail; frame matches the cart drawer */
.checkout-2col__aside .co-item { display: flex; align-items: center; gap: 11px; }
.checkout-2col__aside .co-item__thumb {
    width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain;
    background: #fff; border: 1px solid #ececec; border-radius: 8px; padding: 4px; box-sizing: border-box;
}
.checkout-2col__aside .co-item__name { font-size: 13px; line-height: 1.3; }
.checkout-2col__aside .woocommerce-checkout-review-order-table td.product-name { padding: 10px 8px 10px 0; }

@media (max-width: 767px) {
    /* long labels exceed a phone width — allow a graceful wrap (override the .checkout-scoped nowrap rules above) */
    .checkout .no-call-row .no-call-label,
    .checkout .woocommerce-account-fields .create-account label.checkbox { white-space: normal; align-items: flex-start; }
    .checkout .no-call-row .no-call-label span,
    .checkout .create-account label.checkbox span { white-space: normal; }
}
@media (max-width: 991px) {
    .checkout-2col { grid-template-columns: 1fr; gap: 20px; }
    .checkout-2col__aside { position: static; }
}

/* ===== Checkout: Nova Poshta autocomplete ===== */
.np-fields { margin: 0 0 10px; }
.np-row { position: relative; margin-bottom: 12px; }
.checkout .np-fields .np-row > label { display: block; float: none !important; width: auto !important; font-size: 13px; margin: 0 0 4px 0 !important; padding: 0; color: #333; font-weight: 500; line-height: 1.4; }
.np-row input.input-text { width: 100%; }
.np-row input[disabled] { background: #f5f5f5; }
.np-suggest {
    position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
    margin: 2px 0 0; padding: 4px 0; list-style: none; background: #fff;
    border: 1px solid #ddd; border-radius: 6px; max-height: 260px; overflow: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); display: none;
}
.np-suggest li { padding: 8px 12px; font-size: 13.5px; cursor: pointer; line-height: 1.3; }
.np-suggest li:hover { background: #f4f4f4; }

/* ===== Header right cluster: search · user · UA|RU · cart pill · wishlist (Figma 1776-1379) ===== */
.header-icon > ul { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin: 0; padding: 0; list-style: none; }
.header-icon > ul > li { margin: 0; padding: 0; display: flex; align-items: center; }
.header-icon .menu-item > a { display: inline-flex; align-items: center; color: inherit; }
.header-icon .menu-item-search svg,
.header-icon .menu-item-account svg { width: 22px; height: 22px; fill: currentColor; }
.header-text-light .header-icon .menu-item > a { color: #fff; }

/* language switcher — single UA icon + hover dropdown (TZ) */
.header-icon .menu-item-lang { display: inline-flex; align-items: center; }
.header-lang--dd { position: relative; display: inline-flex; align-items: center; }
.header-lang__current { display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; background: none; border: 0; cursor: pointer; color: inherit; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.header-lang__globe { width: 18px; height: 18px; flex: 0 0 auto; }
.header-lang__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: .8; transition: transform .15s ease; }
.header-lang--dd:hover .header-lang__caret { transform: rotate(180deg); }
.header-lang__menu { position: absolute; top: 100%; right: 0; min-width: 64px; margin: 6px 0 0; padding: 4px; list-style: none; background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.16); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 200; }
.header-lang--dd:hover .header-lang__menu,
.header-lang--dd:focus-within .header-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* hover bridge so the menu doesn't close in the 6px gap */
.header-lang__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.header-lang__item { display: block; padding: 7px 12px; color: #222 !important; text-decoration: none; font-weight: 700; font-size: 14px; border-radius: 5px; text-transform: uppercase; }
.header-lang__item:hover { background: #f0f3f6; color: #1e85be !important; }
.header-text-light .header-lang__current { color: #fff; }
/* no hover background/highlight on the current language */
.header-icon .header-lang__current:hover,
.header-icon .header-lang--dd:hover .header-lang__current { background: transparent !important; color: inherit !important; box-shadow: none !important; }
/* center the language list inside the dropdown — items fill the menu width
   (symmetric 4px inset) so the hover highlight is centred, not crooked */
.header-lang__menu { text-align: center; padding: 4px !important; min-width: 60px !important; }
.header-lang__menu li { display: block !important; width: auto !important; margin: 0 !important; }
.header-lang__item { display: block !important; text-align: center !important; padding: 7px 10px !important; }

/* laptop range: keep the icons from shrinking so the cart pill never
   overflows onto the wishlist heart. */
@media (min-width: 1200px) and (max-width: 1599px) {
    .header-icon > ul > li { flex: 0 0 auto; }
    .header-icon > ul { gap: 14px; }
    .header-icon .menu-item-cart .cart-contents { padding: 0 16px; }
}
/* below ~1320px the full "Кошик" word no longer fits beside the menu,
   so the cart collapses to a compact icon + count pill. */
@media (min-width: 1200px) and (max-width: 1319px) {
    #menu-primary-menu-ua > li { margin-right: 22px; }
    .header-icon > ul { gap: 13px; }
    .header-icon .menu-item-search svg,
    .header-icon .menu-item-account svg { width: 20px; height: 20px; }
    .header-lang__current { gap: 4px; }
    .header-lang__globe { width: 16px; height: 16px; }
    .header-icon .menu-item-cart .cart-contents { padding: 0 13px; gap: 6px; }
    .header-icon .menu-item-cart .cart_text { font-size: 0; line-height: 0; }
    .header-icon .menu-item-cart .cart_text .cart-counter { font-size: 14px; line-height: 1; }
}

/* ІНФО dropdown in primary nav (TZ) */
.nav-menu .info_menu { position: relative; }
.nav-menu .info_menu > .sub-menu { position: absolute; top: 100%; left: 0; min-width: 240px; margin: 0; padding: 8px 0; list-style: none; background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.16); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 250; }
.nav-menu .info_menu:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu .info_menu > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-menu .info_menu > .sub-menu > li { display: block; margin: 0; }
.nav-menu .info_menu > .sub-menu > li > a { display: block; padding: 8px 18px; color: #222 !important; font-size: 14px; font-weight: 500; text-transform: none; white-space: nowrap; text-decoration: none; }
.nav-menu .info_menu > .sub-menu > li > a:hover { background: #f0f3f6; color: #1e85be !important; }
.nav-menu .info_menu > .sub-menu > li.current-menu-item > a { color: #1e85be !important; }
.nav-menu .info_menu > a { cursor: pointer; }

/* mobile menu language switch */
.mobile-menu .language-switcher { display: flex; gap: 10px; align-items: center; }
.mobile-menu .lang-switch__item { display: inline-block; padding: 6px 12px; border: 1px solid rgba(0,0,0,.15); border-radius: 6px; font-weight: 700; font-size: 14px; color: #222; text-decoration: none; }
.mobile-menu .lang-switch__item.is-current { background: #1e85be; border-color: #1e85be; color: #fff; }

/* cart as blue pill */
.header-icon .menu-item-cart .cart-contents {
    display: inline-flex; align-items: center; gap: 9px;
    height: 45px; padding: 0 22px; border-radius: 100px;
    background: #1e85be; color: #fff !important;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px;
    text-decoration: none; transition: background .15s ease;
}
.header-icon .menu-item-cart .cart-contents:hover { background: #1a76a8; }
.header-icon .menu-item-cart .cart-contents svg { width: 20px; height: 20px; fill: #fff; }
.header-icon .menu-item-cart .cart_text { color: #fff; }

/* wishlist circular outline + count badge */
.header-icon .menu-item-wishlist .wishlist-contents {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 45px; height: 45px; border: 1px solid currentColor; border-radius: 50%;
    color: inherit; text-decoration: none;
}
.header-icon .menu-item-wishlist svg { width: 20px; height: 20px; fill: currentColor; }
/* Figma 1849:269 — grey badge, dark text, top-right corner of the 45px circle.
   !important + high specificity to beat theme span.count variants
   (.header-text-light / .header-sticky / :hover all carry higher specificity). */
.header-icon li.menu-item-wishlist a.wishlist-contents span.wishlist-counter {
    position: absolute !important; top: -1px !important; right: -3px !important;
    left: auto !important; bottom: auto !important; margin: 0 !important;
    width: 15px !important; min-width: 15px !important; height: 15px !important;
    padding: 0 !important; box-sizing: border-box !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border: none !important; border-radius: 50% !important;
    background: #b9b9b9 !important; color: #121212 !important;
    font-family: 'Montserrat', sans-serif; font-size: 10px !important;
    line-height: 1 !important; font-weight: 600 !important;
}
.header-text-light .header-icon .menu-item-wishlist .wishlist-contents { color: #fff; border-color: #fff; }

/* --- ПР2: hide globe behind UA, keep cart label inline, align wishlist & cart on one line --- */
.header-lang__globe { display: none !important; }
.header-icon > ul.hidden-md,
.header-icon > ul:not(.mobile-icons) { display: flex; align-items: center; gap: 14px; margin: 0; }
.header-icon > ul > li { display: inline-flex; align-items: center; margin: 0; float: none; }
/* cart pill: "Кошик N" stays on one line, count inline (theme floats .count as a badge) */
.header-icon .menu-item-cart .cart-contents .cart_text { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1; }
.header-icon .menu-item-cart .cart-contents .cart_text .count {
    position: static !important; top: auto !important; right: auto !important;
    margin: 0 !important; width: auto !important; min-width: 0 !important; height: auto !important;
    padding: 0 !important; background: none !important; color: #fff !important;
    border-radius: 0 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important;
}

/* ===== Home product cards & tabs — Figma 1776-1729 / 34437-131 ===== */
.sober-product-grid .product-info-label { display: none; }

/* ---- card surface: white, 10px radius, 30px padding (Figma 1776-1840) ---- */
.sober-product-grid li.product { background: transparent; }
.sober-product-grid .product_container {
    position: relative;
    display: flex; flex-direction: column;
    min-height: 500px;
    background: #fff; border-radius: 10px;
    padding: 30px; box-sizing: border-box;
}

/* ---- image zone fills the space above the title, photo centred & contained ---- */
.sober-product-grid .product-header { position: static; flex: 1 1 auto; min-height: 0; margin: 0; }
.sober-product-grid .product-header > a {
    display: flex; align-items: center; justify-content: center;
    height: 100%; min-height: 230px; text-decoration: none;
}
.sober-product-grid .product-header img {
    width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
}

/* ---- label pills, stacked top-left, 30px inset (Figma 1776-1832 / 1776-1864) ---- */
.sober-product-grid .product-header .ribbons {
    position: absolute; top: 0; left: 0; z-index: 3; margin: 0;
    display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px;
}
.sober-product-grid .product-header .ribbons .ribbon {
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 !important; padding: 8px 12px !important;
    width: auto !important; min-width: 0 !important; height: auto !important; box-sizing: border-box;
    background: #d81573 !important; color: #fefefe !important; border-radius: 100px !important;
    font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important;
    font-size: 12px !important; line-height: 1 !important;
    text-transform: none !important; letter-spacing: 0 !important;
}
.sober-product-grid .product-header .ribbons .ribbon.top { background: #d81573 !important; }      /* Top  */
.sober-product-grid .product-header .ribbons .ribbon.onsale { background: #ff5e5e !important; }   /* -X%  */
.sober-product-grid .product-header .ribbons .ribbon.featured { background: #ff3b32 !important; } /* Hot  */
.sober-product-grid .product-header .ribbons .ribbon.newness { background: #7a5ede !important; }  /* New  */

/* ---- wishlist heart, top-right 30px inset: grey outline in #f4f4f4 circle (Figma 1776-1829/79) ---- */
.sober-product-grid .product_container .add-to-wishlist {
    position: absolute; top: 30px !important; right: 30px !important; left: auto !important; z-index: 3;
    width: 28px !important; height: 28px !important; padding: 0 !important; border: 0 !important; border-radius: 50%;
    background-color: #f4f4f4; box-shadow: none; cursor: pointer;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.7193 10.3494' fill='none'><path d='M10.3927 1.32656C10.1308 1.06451 9.81983 0.856643 9.47755 0.71482C9.13527 0.572997 8.7684 0.5 8.39791 0.5C8.02741 0.5 7.66054 0.572997 7.31826 0.71482C6.97598 0.856643 6.665 1.06451 6.40308 1.32656L5.85951 1.87013L5.31593 1.32656C4.78687 0.797497 4.06931 0.500274 3.32111 0.500274C2.5729 0.500274 1.85534 0.797497 1.32628 1.32656C0.797223 1.85562 0.5 2.57318 0.5 3.32138C0.5 4.06958 0.797223 4.78714 1.32628 5.3162L1.86986 5.85978L5.85951 9.84942L9.84915 5.85978L10.3927 5.3162C10.6548 5.05428 10.8626 4.7433 11.0045 4.40102C11.1463 4.05874 11.2193 3.69188 11.2193 3.32138C11.2193 2.95088 11.1463 2.58402 11.0045 2.24174C10.8626 1.89946 10.6548 1.58848 10.3927 1.32656Z' stroke='%23B9B9B9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: center; background-size: 14px;
}
.sober-product-grid .add-to-wishlist svg { display: none; }

/* ---- info block: title (Medium 16) / price (Bold 20) / button ---- */
.sober-product-grid .product-info { position: static !important; display: flex; flex-direction: column; padding: 0; }
.sober-product-grid .woocommerce ul.products li.product .product-info h3 { margin: 0; padding: 0; }
.sober-product-grid .woocommerce ul.products li.product .product-info h3 a {
    font-family: 'Montserrat', sans-serif !important; font-weight: 500 !important; font-size: 16px !important; line-height: 1.3 !important;
    color: #121212 !important; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sober-product-grid .woocommerce ul.products li.product .product-info .price { margin: 20px 0 0 !important; }
.sober-product-grid .woocommerce ul.products li.product .product-info .price_uah,
.sober-product-grid .woocommerce ul.products li.product .product-info .price .sale-price {
    font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size: 20px !important; color: #121212 !important;
}
.sober-product-grid .woocommerce ul.products li.product .product-info .price .old-price {
    font-family: 'Montserrat', sans-serif !important; font-weight: 500 !important; font-size: 14px !important;
    color: #b9b9b9 !important; text-decoration: line-through;
}

/* ---- "В кошик" — outlined pill, fills blue on hover (Figma 1776-1844 / 1776-1828) ---- */
.sober-product-grid .woocommerce ul.products li.product .add_to_cart_button {
    display: flex; align-items: center; justify-content: center;
    width: 100% !important; box-sizing: border-box;
    margin: 28px 0 0 !important; min-height: 46px !important; padding: 0 16px !important;
    background: #fff !important; color: #1e85be !important;
    border: 1px solid #1e85be !important; border-radius: 100px !important;
    font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important;
    font-size: 16px !important; line-height: 1 !important; letter-spacing: 0 !important;
    text-align: center; text-decoration: none; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.sober-product-grid .woocommerce ul.products li.product .add_to_cart_button:hover,
.sober-product-grid .woocommerce ul.products li.product .add_to_cart_button:focus {
    background: #1e85be !important; color: #fff !important; border-color: #1e85be !important;
}
/* «Немає в наявності» довший за «Купити» — на вузьких картках переносився в 2 рядки.
   Тримаємо в один рядок і трохи зменшуємо шрифт, щоб вписувався. */
.sober-product-grid .woocommerce ul.products li.product.outofstock .add_to_cart_button {
    white-space: nowrap !important; font-size: 14px !important; padding: 0 10px !important;
    cursor: default;
}
.sober-product-grid .woocommerce ul.products li.product.outofstock .add_to_cart_button:hover,
.sober-product-grid .woocommerce ul.products li.product.outofstock .add_to_cart_button:focus {
    background: #fff !important; color: #1e85be !important; border-color: #1e85be !important;
}

/* ---- Сторінки каталогу/пошуку: ті самі картки, що й на головній ----
 * Тема ініціалізує Isotope (абсолютне позиціонування .product) на `.archive ul.products`
 * виключно для розкладки — обробник фільтр-табів у common.js закоментований, тож фільтрації
 * немає. Після зміни розмірів карток (home-стиль) Isotope ховав їх (position:absolute +
 * display:none). Нейтралізуємо Isotope лише для #primary (категорія/пошук) — головну не чіпає,
 * бо там грід поза #primary і таби керуються власним JS. */
#primary.sober-product-grid ul.products {
    position: static !important;
    height: auto !important;
}
#primary.sober-product-grid ul.products li.product {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    float: left;
}

/* ---- tabs (Рекомендовані | Популярні | Зі знижкою | Новинки) Figma 1776-1729 ---- */
.sober-product-grid .product-filter .filter {
    display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 40px;
    margin: 0; padding: 0; list-style: none;
}
.sober-product-grid .product-filter .filter li {
    position: relative; margin: 0 !important; padding: 0 !important;
    font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 16px; line-height: 1;
    color: #b9b9b9; text-transform: none; cursor: pointer;
    transition: color .15s ease;
}
/* базове .line-hover::after (підкреслення) на hover/active розтягувалось у сіру риску-роздільник
   (той самий ::after) → сірий блок-артефакт. Глушимо базове ::after, роздільник робимо через ::before. */
.sober-product-grid .product-filter .filter li::after,
.sober-product-grid .product-filter .filter li:hover::after,
.sober-product-grid .product-filter .filter li.active::after { content: none !important; }
.sober-product-grid .product-filter .filter li:not(:last-child)::before {
    content: ""; position: absolute; right: -20px; top: 2px;
    width: 1px; height: 12px; background: #d9d9d9;
}
.sober-product-grid .product-filter .filter li:hover { color: #121212; }
.sober-product-grid .product-filter .filter li.active {
    color: #121212; border-bottom: 1px solid #121212; padding-bottom: 2px !important;
}

/* ---- Home product grid + tabs — mobile (≤767px) ----
   Base woocommerce/bootstrap leaves the cards as touching 160px floats with no
   gutter and the tab row as justify-content:space-between (spread + wrapped).
   Override into an even 2-col grid with a real gutter and a compact left tab row. */
@media (max-width: 767px) {
    /* tabs: left-packed, horizontal-scroll if needed, no ugly wrap.
       Theme gives .product-filter a -20px side margin (full-bleed) → on mobile that
       pulls the tab row past the container's left edge; reset it so tabs line up
       under the «Топ товари магазину» heading. */
    .sober-product-grid .product-filter { margin-left: 0 !important; margin-right: 0 !important; }
    .sober-product-grid .product-filter .filter {
        justify-content: flex-start !important; flex-wrap: nowrap !important;
        gap: 18px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .sober-product-grid .product-filter .filter::-webkit-scrollbar { display: none; }
    .sober-product-grid .product-filter .filter li { flex: 0 0 auto; font-size: 14px; white-space: nowrap; }
    .sober-product-grid .product-filter .filter li:not(:last-child)::before { right: -9px; }

    /* cards: 2-up. This grid is driven by Isotope (items are JS-positioned
       position:absolute), so we must NOT take over layout with flex/grid — that
       breaks the tab filter. Instead keep Isotope in control and let it space the
       columns/rows: Isotope measures each item's OUTER box, so li padding becomes
       the gutter. Drop the desktop min-height:500 so rows pack tight on mobile. */
    .sober-product-grid .woocommerce ul.products { margin: 0; }
    .sober-product-grid .woocommerce ul.products li.product {
        padding: 0 6px 12px !important; box-sizing: border-box;
    }
    /* FIX (накладання): топ-товари ГОЛОВНОЇ на моб = рівний 2-колонковий CSS grid.
       Раніше li лишались Isotope-absolute, а глобальне ul{height:auto} колапсувало
       контейнер у висоту 0 → 51 абсолютна картка налазила на «Відгуки» і футер.
       Таби фільтруються через JS display (home.tpl applyFilter), Isotope не потрібен.
       Тільки .content-area (головна), #primary каталог лишається на float-розкладці. */
    .content-area > .sober-product-grid .woocommerce ul.products {
        display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px;
        margin: 0 !important; padding: 0 !important; list-style: none; height: auto !important;
    }
    .content-area > .sober-product-grid .woocommerce ul.products::before,
    .content-area > .sober-product-grid .woocommerce ul.products::after { content: none !important; display: none !important; }
    .content-area > .sober-product-grid .woocommerce ul.products li.product {
        position: static !important; left: auto !important; top: auto !important;
        transform: none !important; width: auto !important; max-width: none !important;
        float: none !important; margin: 0 !important; padding: 0 !important;
    }
    .sober-product-grid li.product .product_container { min-height: 0 !important; padding: 16px !important; }
    .sober-product-grid .product-header > a { min-height: 120px !important; }
    .sober-product-grid .product_container .add-to-wishlist { top: 14px !important; right: 14px !important; }
    .sober-product-grid .product-header .ribbons .ribbon { padding: 6px 10px !important; font-size: 11px !important; }
    /* Figma mobile: «Top» badge is purple (#7A5EDE), not the desktop pink */
    .sober-product-grid .product-header .ribbons .ribbon.top { background: #7a5ede !important; }
    .sober-product-grid .woocommerce ul.products li.product .product-info h3 a { font-size: 14px !important; }
    /* п22: заголовок картки у 3 рядки (два замало) */
    .woocommerce ul.products li.product .product-info h3 a,
    .sober-product-grid .woocommerce ul.products li.product .product-info h3 a {
        -webkit-line-clamp: 3 !important; line-clamp: 3 !important; max-height: 3.8em !important;
    }
    /* Figma mobile card: title full-width, then a row with the price block on the
       left (old struck price stacked over the new bold price) and a compact blue
       cart-icon button on the right — NOT the full-width «В кошик» pill. */
    .sober-product-grid .woocommerce ul.products li.product .product-info {
        display: flex; flex-wrap: wrap; align-items: flex-end;
    }
    .sober-product-grid .woocommerce ul.products li.product .product-info h3 { flex: 0 0 100%; }
    .sober-product-grid .woocommerce ul.products li.product .product-info .price {
        flex: 0 0 100%; min-width: 0; margin: 12px 0 0 !important; line-height: 1.2;
        text-align: left !important; padding-right: 38px; /* room for the absolute cart icon */
    }
    .sober-product-grid .woocommerce ul.products li.product .product-info .price .old-price { display: block; font-size: 12px !important; text-align: left !important; }
    .sober-product-grid .woocommerce ul.products li.product .product-info .price_uah,
    .sober-product-grid .woocommerce ul.products li.product .product-info .price .sale-price { display: block; font-size: 16px !important; text-align: left !important; white-space: nowrap; }
    /* Figma mobile: cart is a bare ~22px blue outline cart icon — no box, no
       border, no fill. Keep a 40px invisible tap target around it. */
    .sober-product-grid li.product .product_container { position: relative; }
    .sober-product-grid .woocommerce ul.products li.product .add_to_cart_button {
        position: absolute !important; right: 16px; bottom: 16px;
        width: 30px !important; height: 30px !important; min-height: 0 !important;
        margin: 0 !important; padding: 0 !important;
        background: transparent !important; border: 0 !important; border-radius: 0 !important;
        font-size: 0 !important; line-height: 0 !important; color: transparent !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e85be' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important; background-position: center !important; background-size: 22px !important;
        transition: opacity .15s ease;
    }
    .sober-product-grid .woocommerce ul.products li.product .add_to_cart_button:hover,
    .sober-product-grid .woocommerce ul.products li.product .add_to_cart_button:focus {
        background-color: transparent !important; opacity: .65;
    }

    /* ===== Mobile horizontal slider: brands ===== */
    /* Банери та "Популярні категорії" мають власну карусель нижче в файлі
       (блок MOBILE CAROUSELS, Figma 1832-1784 / 34495-126). Тут лишаються бренди. */
    .home-brands__grid {
        display: flex !important; flex-wrap: nowrap; gap: 12px;
        grid-template-columns: none !important;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .home-brands__grid::-webkit-scrollbar { display: none; }
    /* Figma shows ~2 brand cards in view (2nd peeks) */
    .home-brands__card { flex: 0 0 56%; scroll-snap-align: start; min-height: 150px; }

    /* arrows: small light-grey circular chevrons, top-right of the slider section */
    .mslider-nav { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin: 0 0 12px; }
    .home-brands__head .mslider-nav { margin: 0; }
    .mslider-arrow {
        width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
        border: 1px solid #e3e3e3; background: #fff; color: #b9b9b9;
        display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer; padding: 0; transition: color .15s ease, border-color .15s ease;
    }
    .mslider-arrow:hover { color: #1e85be; border-color: #1e85be; }
    .mslider-arrow svg { width: 13px; height: 13px; display: block; }
}
@media (min-width: 768px) { .mslider-nav { display: none !important; } }

/* ===== Mobile header — Figma 1825-513 =====
   Blue cart pill (left) · logo (centre) · search + burger (right),
   overlaying the hero on the homepage with light icons. Shown below the
   desktop nav breakpoint (theme uses hidden-lg / col-lg for the switch). */
@media (max-width: 1199px) {
    #masthead .sober-container > .row {
        display: flex; align-items: center; flex-wrap: nowrap;
    }
    .mobile-nav-toggle { display: flex; align-items: center; }
    .site-branding { text-align: center; }
    .header-icon { display: flex; align-items: center; justify-content: flex-end; }

    /* left: blue cart pill */
    .mobile-cart-pill {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        min-width: 50px; height: 34px; padding: 0 13px;
        background: #1e85be; border-radius: 100px; line-height: 1;
    }
    .mobile-cart-pill svg { width: 20px; height: 20px; fill: #fff; color: #fff; stroke: #fff; }
    .mobile-cart-pill svg * { fill: #fff; stroke: #fff; }
    .mobile-cart-pill .count { color: #fff; font-size: 13px; font-weight: 700; }
    .mobile-cart-pill:hover, .mobile-cart-pill:focus { background: #1a7099; }

    /* right: search + burger */
    .header-icon .mobile-icons {
        display: flex; align-items: center; justify-content: flex-end; gap: 20px;
    }
    .mobile-icons .menu-item-mobile-search { display: inline-flex; }
    .mobile-icons .menu-item-mobile-search svg { width: 23px; height: 23px; }
    .mobile-icons .toggle-nav { position: relative; display: inline-block; width: 24px; height: 30px; cursor: pointer; margin: 0; }
    /* прибрати theme margin-right:40px на бургері — симетричні відступи зліва(кошик)/справа(бургер) */
    #masthead .mobile-icons .toggle-nav.menu-item-mobile-burger { margin: 0 !important; }
}

/* ===== Global font — Montserrat everywhere (Figma) ===== */
/* style.min/bootstrap forced Arial/Helvetica on body, headings, nav, forms.
   seo-additions.css loads last, so this wins. */
body,
button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6,
.tooltip, .popover {
    font-family: 'Montserrat', Arial, sans-serif;
}

/* ===== Sidebar "Категорії" — match Figma 1776-1462 / 1776-1463 ===== */
/* Figma: title Montserrat SemiBold 20px #121212; items Montserrat Medium 16px #121212. */
.sidebar_categories .sidebar_cats_title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #121212;
}
/* theme ships `aside#secondary ul.nav-menu li a` (id specificity) — out-specify it */
.sidebar_categories ul.nav-menu li a,
aside#secondary .sidebar_categories ul.nav-menu li a {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #121212;
}

/* =========================================================================
   PRODUCT PAGE — match Figma node 1825-167 (Product page)
   Tokens: blue #1E85BE · badge-top #7A5EDE · badge-sale #FF5E5E
           dark #121212 · muted rgba(18,18,18,.3) / #B9B9B9 · radius 10/100px
   ========================================================================= */

/* ---- Breadcrumb ---- */
#content .product .product-toolbar .breadcrumb {
    background: none;
    padding: 0;
    margin: 0 0 28px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
#content .product .breadcrumb span a { color: #B9B9B9; text-decoration: none; }
#content .product .breadcrumb span a:hover { color: #1E85BE; }
#content .product .breadcrumb span:last-child { color: #121212; border-bottom: 1px solid #121212; padding-bottom: 4px; }
#content .product .breadcrumb .fa-angle-right { color: #B9B9B9; margin: 0 8px; font-size: 11px; }

/* ---- Two-column layout: gallery | (info + tabs) ---- */
#content .product .product-summary {
    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 600px);
    grid-template-areas: "img sum" "img tabs";
    grid-template-rows: auto 1fr;
    justify-content: start;
    column-gap: 110px;
    align-items: start;
}
/* clearfix pseudo-elements would otherwise become phantom grid items */
#content .product .product-summary::before,
#content .product .product-summary::after { content: none; display: none; }
#content .product .product-summary .images {
    grid-area: img; float: none; width: auto; margin: 0;
    /* ПР7: image stays put (sticky) while the right column (title/price/desc) scrolls */
    position: sticky; top: 90px; align-self: start;
}
/* Базова тема ставить body { overflow-x:hidden; overflow-y:auto } → body стає скрол-контейнером
   і position:sticky на .images перестає працювати (галерея з .has-mgal не «прилипає»).
   overflow:clip клипає так само, але НЕ створює скрол-контекст → sticky знову живий.
   Скоупимо на товарну сторінку; body.ps-cart-open (нижче) лишається й коректно лочить скрол. */
body.single-product { overflow-x: clip; overflow-y: visible; }
#content .product .product-summary .summary { grid-area: sum; float: none; width: auto; margin: 0; }
#content .product .product-summary .woocommerce-tabs { grid-area: tabs; margin: 36px 0 0; }
/* Базова тема дає .summary { padding-left:20px } (мобільний відступ). У десктоп-сітці
   це зсувало контент summary на 20px праворуч відносно табів — прибираємо лише на десктопі. */
@media (min-width: 992px) {
    #content .product .product-summary .summary { padding-left: 0; }
}

/* ---- Gallery ---- */
#content .product .images .woocommerce-main-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 0;             /* ПР7: no bordered box */
    border-radius: 10px;
    padding: 8px;          /* ПР6: photo works closer to the edges */
    aspect-ratio: 600 / 598;
    overflow: hidden;
}
#content .product .images .woocommerce-main-image img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
#content .product .images .thumbnails-wrap { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
#content .product .images .thumbnails {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
#content .product .images .thumbnails::-webkit-scrollbar { display: none; }
#content .product .images .thumbnails a {
    flex: 0 0 118px;
    width: 118px;
    height: 118px;
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
    margin: 0;
}
#content .product .images .thumbnails a img { max-width: 100%; max-height: 100%; object-fit: contain; }
#content .product .images .thumb-nav {
    flex: 0 0 auto;
    display: none;
    background: none;
    border: none;
    color: #9A9A9A;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 2px;
}
#content .product .images .thumbnails-wrap.has-overflow .thumb-nav { display: inline-flex; align-items: center; }
#content .product .images .thumb-nav:hover { color: #1E85BE; }

/* ---- Summary top row: badges (left) + rating (right) ---- */
#content .product .summary .summary-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 26px;
}
#content .product .summary .summary-top .ribbons:empty { display: none; }
#content .product .summary .summary-top .ribbons {
    position: static;
    display: flex;
    gap: 6px;
    top: auto; left: auto;
}
#content .product .summary .ribbon {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 100px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: #FEFEFE;
    margin: 0;
    text-transform: none;
}
/* badge palette aligned with the approved homepage card */
#content .product .summary .ribbon.top { background: #d81573; }
#content .product .summary .ribbon.onsale { background: #ff5e5e; }
#content .product .summary .ribbon.featured { background: #ff3b32; }
#content .product .summary .ribbon.newness { background: #7a5ede; }

#content .product .summary .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}
/* base theme width:86px + lh:48px were tuned for 1rem stars (html root = 10px);
   our 16px override needs a wider box (5 stars ≈ 119px) and a tight line-height
   so the stars are not clipped and the review-link text sits centred with them */
#content .product .summary .star-rating {
    color: #FFB400;
    font-size: 16px;
    margin: 0;
    width: 7.45em !important;
    line-height: 1 !important;
    height: 1em;
}
#content .product .summary .star-rating::before,
#content .product .summary .star-rating span { line-height: 1 !important; }
#content .product .summary .woocommerce-review-link {
    color: #B9B9B9;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
#content .product .summary .woocommerce-review-link:hover { color: #1E85BE; }

/* ---- Brand ---- */
#content .product .summary .product-brand {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: #121212;
    margin: 0 0 22px;
}
#content .product .summary .product-brand__label { color: rgba(18,18,18,.3); }
#content .product .summary .product-brand a { color: #121212; text-decoration: none; border-bottom: 1px solid #121212; padding-bottom: 3px; }
#content .product .summary .product-brand a:hover { color: #1E85BE; border-color: #1E85BE; }

/* ---- Title ---- */
#content .product .summary .product_title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 36px;
    line-height: 1.2;
    color: #121212;
    margin: 0 0 26px;
}

/* ---- Availability + code ---- */
#content .product .summary .product-availability {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #121212;
    margin: 0 0 30px;
}
/* статус — звичайний текстовий потік: лейбл, значення й (i) йдуть в один рядок
   і переносяться разом, без «плаваючого» правого стовпця-іконки */
#content .product .summary .product-availability .availability-row { display: block; }
#content .product .summary .product-availability .availability-row .name { margin-right: 0; }
#content .product .summary .product-availability .availability-row .value { display: inline; }
#content .product .summary .product-availability .value { color: #1E85BE; }
#content .product .summary .product-availability .delivery-info { margin-top: 2px; }
#content .product .summary .product-availability .product-code { margin-top: 2px; color: #121212; }
/* (i)-іконка одразу після тексту статусу (inline), а не окремою колонкою */
#content .product .summary .product-availability .explanation { display: inline-block; vertical-align: middle; width: 16px; height: 16px; cursor: help; margin-left: 5px; position: relative; top: -1px; }

/* ---- Price ---- */
#content .product .summary p.price {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin: 0 0 34px;
    color: #121212;
}
#content .product .summary p.price .price_uah { display: flex; align-items: flex-end; gap: 20px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; font-size: 24px; color: #121212; }
#content .product .summary p.price ins { text-decoration: none; font-weight: 600; font-size: 24px; color: #121212; }
#content .product .summary p.price del { font-weight: 500; font-size: 16px; color: rgba(18,18,18,.3); text-decoration: line-through; }

/* ---- Buttons ---- */
#content .product .summary form.cart { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; margin: 0; }
/* Базова тема дає .button + .button { margin-left:10px } — поверх flex-gap виходив подвійний
   відступ 20px між кнопками. Лишаємо тільки gap. */
#content .product .summary form.cart .button + .button { margin-left: 0; }
#content .product .summary form.cart button.button,
#content .product .summary form.cart .button {
    height: 60px;
    border-radius: 100px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    transition: .2s;
    text-transform: none !important;
    letter-spacing: 0;
    white-space: nowrap;
}
#content .product .summary form.cart .single_add_to_cart_button {
    background: #1E85BE;
    border: 1px solid #1E85BE;
    color: #fff;
    flex: 0 1 auto; min-width: 0; max-width: 200px;
}
#content .product .summary form.cart .single_add_to_cart_button:hover { background: #166a99; border-color: #166a99; }
#content .product .summary form.cart .button-secondary {
    background: transparent;
    border: 1px solid #B9B9B9;
    color: #B9B9B9;
    flex: 0 1 auto; min-width: 0; max-width: 220px;
}
#content .product .summary form.cart .button-secondary:hover { border-color: #1E85BE; color: #1E85BE; }
#content .product .summary form.cart .add-to-wishlist-button {
    width: 60px;
    min-width: 60px;
    height: 60px;
    padding: 0;
    border: 1px solid #B9B9B9;
    border-radius: 100px;
    background: transparent;
    color: #121212;
}
#content .product .summary form.cart .add-to-wishlist-button svg.ps-heart { width: 22px; height: 19px; }
#content .product .add-to-wishlist-button svg.ps-heart,
#content .product .add-to-wishlist-button svg.ps-heart path,
#content .product .related .add-to-wishlist svg.ps-heart,
#content .product .related .add-to-wishlist svg.ps-heart path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1px !important;
}
#content .product .summary form.cart .add-to-wishlist-button:hover { border-color: #1E85BE; color: #1E85BE; }

/* ---- Tabs + description ---- */
#content .product .woocommerce-tabs { border-top: 1px solid #E6E6E6; padding-top: 30px; }
#content .product .woocommerce-tabs ul.wc-tabs {
    display: flex;
    align-items: center;
    gap: 21px;
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    border: 0;
}
#content .product .woocommerce-tabs ul.wc-tabs li { position: relative; margin: 0; padding: 0; background: none; border: 0; }
#content .product .woocommerce-tabs ul.wc-tabs li + li::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 11px;
    background: #D6D6D6;
}
#content .product .woocommerce-tabs ul.wc-tabs li a {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #B9B9B9;
    text-decoration: none;
    padding: 0 0 6px;
    display: inline-block;
    border-bottom: 2px solid transparent;
}
#content .product .woocommerce-tabs ul.wc-tabs li a:hover { color: #121212; }
#content .product .woocommerce-tabs ul.wc-tabs li.active a { color: #121212; border-bottom-color: #121212; }
#content .product .woocommerce-tabs .wc-tab .container { padding: 0; max-width: none; width: auto; }
#content .product .woocommerce-tabs .wc-tab,
#content .product .woocommerce-tabs .wc-tab p,
#content .product .woocommerce-tabs .wc-tab .container {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.45;
    color: #121212;
}
#content .product .woocommerce-tabs .product-attributes { width: 100%; border-collapse: collapse; border: none !important; }
/* base theme adds table{border:2px} + cell{border-right:1px} — strip the box & vertical divider */
#content .product .woocommerce-tabs .product-attributes th,
#content .product .woocommerce-tabs .product-attributes td { border: none !important; }
#content .product .woocommerce-tabs .product-attributes .attribute-group-title th { text-align: left; font-weight: 600; padding: 14px 0 6px; color: #121212; }
#content .product .woocommerce-tabs .product-attributes td { padding: 7px 0; border-bottom: 1px solid #EEE !important; font-size: 15px; vertical-align: top; }
#content .product .woocommerce-tabs .product-attributes .attr-name { color: rgba(18,18,18,.5); width: 45%; padding-right: 20px; }
#content .product .woocommerce-tabs .product-attributes .attr-value { color: #121212; }

/* ---- Related "Схожі товари": mirrors the APPROVED homepage card (.sober-product-grid).
       The class itself can't be reused on the product page — it triggers the homepage-only
       isotope/imagesLoaded init (sober.homepageProductGrid) which throws here and halts
       sober.init (breaking the tabs). Same values are applied to .related instead. ---- */
#content .product .related.products { clear: both; margin-top: 64px; }
#content .product .related.products > h2 {
    text-align: center;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #121212;
    margin: 0 0 30px;
}
#content .product .related .product-info-label { display: none; }
#content .product .related li.product { background: transparent; }
#content .product .related .product_container {
    position: relative; display: flex; flex-direction: column; min-height: 500px;
    background: #fff; border-radius: 10px; padding: 30px; box-sizing: border-box;
}
#content .product .related .product-header { position: static; flex: 1 1 auto; min-height: 0; margin: 0; }
#content .product .related .product-header > a {
    display: flex; align-items: center; justify-content: center; height: 100%; min-height: 230px; text-decoration: none;
}
#content .product .related .product-header img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
#content .product .related .product-header .ribbons {
    position: absolute; top: 0; left: 0; z-index: 3; margin: 0;
    display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px;
}
#content .product .related .product-header .ribbons .ribbon {
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 !important; padding: 8px 12px !important;
    width: auto !important; min-width: 0 !important; height: auto !important; box-sizing: border-box;
    background: #d81573 !important; color: #fefefe !important; border-radius: 100px !important;
    font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important;
    font-size: 12px !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0 !important;
}
#content .product .related .product-header .ribbons .ribbon.top { background: #d81573 !important; }
#content .product .related .product-header .ribbons .ribbon.onsale { background: #ff5e5e !important; }
#content .product .related .product-header .ribbons .ribbon.featured { background: #ff3b32 !important; }
#content .product .related .product-header .ribbons .ribbon.newness { background: #7a5ede !important; }
#content .product .related .product_container .add-to-wishlist {
    position: absolute; top: 30px !important; right: 30px !important; left: auto !important; z-index: 3;
    width: 28px !important; height: 28px !important; padding: 0 !important; border: 0 !important; border-radius: 50%;
    background-color: #f4f4f4; box-shadow: none; cursor: pointer;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.7193 10.3494' fill='none'><path d='M10.3927 1.32656C10.1308 1.06451 9.81983 0.856643 9.47755 0.71482C9.13527 0.572997 8.7684 0.5 8.39791 0.5C8.02741 0.5 7.66054 0.572997 7.31826 0.71482C6.97598 0.856643 6.665 1.06451 6.40308 1.32656L5.85951 1.87013L5.31593 1.32656C4.78687 0.797497 4.06931 0.500274 3.32111 0.500274C2.5729 0.500274 1.85534 0.797497 1.32628 1.32656C0.797223 1.85562 0.5 2.57318 0.5 3.32138C0.5 4.06958 0.797223 4.78714 1.32628 5.3162L1.86986 5.85978L5.85951 9.84942L9.84915 5.85978L10.3927 5.3162C10.6548 5.05428 10.8626 4.7433 11.0045 4.40102C11.1463 4.05874 11.2193 3.69188 11.2193 3.32138C11.2193 2.95088 11.1463 2.58402 11.0045 2.24174C10.8626 1.89946 10.6548 1.58848 10.3927 1.32656Z' stroke='%23B9B9B9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: center; background-size: 14px;
}
#content .product .related .add-to-wishlist svg { display: none; }
#content .product .related .product-info { position: static !important; display: flex; flex-direction: column; padding: 0; }
#content .product .related .product-info h3 { margin: 0; padding: 0; }
#content .product .related .product-info h3 a {
    font-family: 'Montserrat', sans-serif !important; font-weight: 500 !important; font-size: 16px !important; line-height: 1.3 !important;
    color: #121212 !important; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#content .product .related .product-info .price { margin: 20px 0 0 !important; }
#content .product .related .product-info .price_uah,
#content .product .related .product-info .price .sale-price {
    font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size: 20px !important; color: #121212 !important;
}
#content .product .related .product-info .price .old-price {
    font-family: 'Montserrat', sans-serif !important; font-weight: 500 !important; font-size: 14px !important;
    color: #b9b9b9 !important; text-decoration: line-through;
}
#content .product .related .add_to_cart_button {
    display: flex; align-items: center; justify-content: center; width: 100% !important; box-sizing: border-box;
    margin: 28px 0 0 !important; min-height: 46px !important; padding: 0 16px !important;
    background: #fff !important; color: #1e85be !important; border: 1px solid #1e85be !important; border-radius: 100px !important;
    font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; font-size: 16px !important;
    line-height: 1 !important; letter-spacing: 0 !important; text-align: center; text-decoration: none; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
#content .product .related .add_to_cart_button:hover,
#content .product .related .add_to_cart_button:focus { background: #1e85be !important; color: #fff !important; border-color: #1e85be !important; }

/* ---- Responsive guards (desktop-first; full adaptive handled separately) ---- */
@media (max-width: 1280px) {
    #content .product .product-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
}
@media (max-width: 991px) {
    #content .product .product-summary { display: block; }
    /* ≤991: summary стає block, sticky на фото більше не потрібен (і ламає mgal-галерею) */
    #content .product .product-summary .images { position: static; top: auto; }
    #content .product .product-summary .woocommerce-tabs { margin-top: 32px; }
    /* stacked range stays LEFT-aligned (theme centers it) — matches desktop & mobile mock */
    #content .product .summary,
    #content .product .summary .product-brand,
    #content .product .summary .product_title,
    #content .product .summary .product-availability { text-align: left !important; }
    #content .product .summary .summary-top { justify-content: space-between; }
    #content .product .summary .product-availability .availability-row { justify-content: flex-start; }
    #content .product .summary p.price { justify-content: flex-start; }
    #content .product .related.products > h2 { text-align: left !important; }
    /* base theme clamps the cart buttons (width:37%/max-width:173px) in this range */
    #content .product .summary form.cart .single_add_to_cart_button,
    #content .product .summary form.cart .button-secondary { max-width: none !important; width: auto !important; }
}

/* ---- Mobile gallery: головне фото + крапки-слайдер (Figma 1839:2202) ----
   На мобілці замість стрічки мініатюр зі стрілками — свайп головного фото з крапками. */
.ps-mgal { display: none; }
@media (max-width: 991px) {
    #content .product .images.has-mgal .woocommerce-main-image,
    #content .product .images .thumbnails-wrap { display: none !important; }
    #content .product .images .ps-mgal { display: block; }
    /* Без горизонтального скролу: одне фото, перемикається крапками/свайпом (touch). */
    #content .product .images .ps-mgal__stage {
        display: flex; align-items: center; justify-content: center;
        background: #fff; border: 1px solid #ECECEC; border-radius: 10px;
        aspect-ratio: 1 / 1; padding: 24px; box-sizing: border-box;
        overflow: hidden; touch-action: pan-y;
    }
    #content .product .images .ps-mgal__stage img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
    #content .product .images .ps-mgal__dots {
        display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 16px;
    }
    #content .product .images .ps-mgal__dot {
        width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
        background: #D9D9D9; cursor: pointer; transition: background .2s ease;
    }
    #content .product .images .ps-mgal__dot.is-active { background: #121212; }
}

/* =========================================================
   PRODUCT PAGE — MOBILE 1:1 (Figma 1839:2202, ≤767)
   Base theme centers .summary on mobile; the mock is LEFT-aligned
   with downscaled type. «Схожі товари» mirrors the approved
   homepage mobile card (compact blue cart icon, not a full pill). */
@media (max-width: 767px) {
    #content .product .product-summary { column-gap: 0; }
    #content .product .summary,
    #content .product .summary .product-brand,
    #content .product .summary .product_title,
    #content .product .summary .product-availability { text-align: left !important; }

    /* top row: badges left, rating right */
    #content .product .summary .summary-top { justify-content: space-between; gap: 12px; margin-bottom: 22px; }
    #content .product .summary .star-rating { font-size: 15px; }
    #content .product .summary .woocommerce-review-link { font-size: 13px; }

    /* brand 18px — Figma gap brand→title ≈30px */
    #content .product .summary .product-brand { font-size: 18px; margin: 0 0 22px; }
    /* title 24px, tight line-height per mock */
    #content .product .summary .product_title { font-size: 24px; line-height: 1.12; margin: 0 0 26px; }
    /* availability 14px — Figma gap avail→price ≈50px */
    #content .product .summary .product-availability { font-size: 14px; line-height: 1.35; margin: 0 0 44px; }
    #content .product .summary .product-availability .availability-row { justify-content: flex-start; }

    /* price 20 / 14 — Figma gap price→buttons ≈50px */
    #content .product .summary p.price { justify-content: flex-start; gap: 16px; margin: 0 0 40px; }
    #content .product .summary p.price .price_uah,
    #content .product .summary p.price .price_uah ins { font-size: 20px; gap: 16px; }
    #content .product .summary p.price del { font-size: 14px; }

    /* buttons: «В кошик» full width, then «Купити в 1 клік» (grow) + heart circle */
    #content .product .summary form.cart { display: grid; grid-template-columns: 1fr 60px; gap: 12px; align-items: center; }
    #content .product .summary form.cart input { display: none; }
    /* base theme clamps both buttons to width:37%/max-width:173px on mobile — unclamp */
    #content .product .summary form.cart .single_add_to_cart_button { grid-column: 1 / -1; justify-self: stretch; width: 100% !important; min-width: 0 !important; max-width: none !important; }
    #content .product .summary form.cart .button-secondary { grid-column: 1; justify-self: stretch; width: 100% !important; min-width: 0 !important; max-width: none !important; }
    #content .product .summary form.cart .add-to-wishlist-button { grid-column: 2; justify-self: stretch; }

    /* tabs 14px */
    #content .product .woocommerce-tabs { padding-top: 26px; }
    #content .product .woocommerce-tabs ul.wc-tabs { gap: 20px; margin: 0 0 24px; }
    #content .product .woocommerce-tabs ul.wc-tabs li a { font-size: 14px; }
    #content .product .woocommerce-tabs .wc-tab,
    #content .product .woocommerce-tabs .wc-tab p,
    #content .product .woocommerce-tabs .wc-tab .container { font-size: 14px; }

    /* п21.1: прибрати рамку головного фото (дубль з десктопу) */
    #content .product .images .ps-mgal__stage { border: 0 !important; }
    /* п21.2: фон опису — сіріший (як сторінка), а не білий */
    #content .product .woocommerce-tabs .wc-tab,
    #content .product .woocommerce-tabs #tab-description,
    #content .product .woocommerce-tabs .panel { background: transparent !important; }

    /* «Схожі товари»: left heading 20px + homepage-style mobile cards */
    #content .product .related.products { margin-top: 40px; }
    #content .product .related.products > h2 { text-align: left !important; font-size: 20px; margin: 0 0 20px; }
    /* base markup floats li (col-xs-6) → uneven heights stagger/drop. Force a clean
       equal-height 2-col grid like the mock. */
    #content .product .related ul.products { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; height: auto !important; }
    /* .clearfix ::before/::after become phantom grid cells → shove cards into a stagger */
    #content .product .related ul.products::before,
    #content .product .related ul.products::after { content: none !important; display: none !important; }
    /* theme may run Isotope here (li → position:absolute + transform) which breaks the
       grid into a masonry stagger; neutralise it like the category page */
    #content .product .related ul.products li.product { position: static !important; left: auto !important; top: auto !important; transform: none !important; width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; }
    #content .product .related .product_container { min-height: 0; height: 100%; padding: 16px; }
    #content .product .related .product-header > a { min-height: 120px; }
    #content .product .related .product_container .add-to-wishlist { top: 14px !important; right: 14px !important; }
    #content .product .related .product-header .ribbons .ribbon { padding: 6px 10px !important; font-size: 11px !important; }
    #content .product .related .product-header .ribbons .ribbon.top { background: #7a5ede !important; }
    #content .product .related .product-info h3 a { font-size: 14px !important; }
    #content .product .related .product-info .price { margin: 12px 0 0 !important; padding-right: 38px; }
    #content .product .related .product-info .price_uah,
    #content .product .related .product-info .price .sale-price { font-size: 18px !important; }
    #content .product .related .product-info .price .old-price { font-size: 12px !important; }
    /* in-stock → compact blue cart icon bottom-right */
    #content .product .related .add_to_cart_button.ajax_add_to_cart {
        position: absolute !important; right: 16px; bottom: 16px;
        width: 30px !important; height: 30px !important; min-height: 0 !important;
        margin: 0 !important; padding: 0 !important;
        background: transparent !important; border: 0 !important; border-radius: 0 !important;
        font-size: 0 !important; line-height: 0 !important; color: transparent !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e85be' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important; background-position: center !important; background-size: 22px !important;
    }
    #content .product .related .add_to_cart_button.ajax_add_to_cart:hover,
    #content .product .related .add_to_cart_button.ajax_add_to_cart:focus { background-color: transparent !important; opacity: .65; }
    /* out-of-stock keeps a readable label */
    #content .product .related .add_to_cart_button:not(.ajax_add_to_cart) { margin: 12px 0 0 !important; min-height: 40px !important; font-size: 13px !important; }
}

/* =========================================================
   SITE-WIDE: legacy flat buttons -> new pill design
   Base theme (style.min.v1.3.css) renders .btn/.button/submit
   as blue squares (radius:0). Match the approved "В кошик" pill
   everywhere. Component buttons (product cart, related cards,
   wishlist, callback, gallery, search) keep their own scoped rules. */
.btn,
.button,
button.button,
input.button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wpcf7-form .wpcf7-submit,
.posts-navigation.ajax a {
    border-radius: 100px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* primary blue submit-type buttons: give the pill horizontal breathing room */
#submit-review,
.woocommerce #respond input#submit,
.wpcf7-form .wpcf7-submit,
.woocommerce form.login input.button,
.woocommerce form.register input.button,
.woocommerce form.lost_reset_password input.button,
.woocommerce form.edit-account input.button {
    padding: 0 36px !important;
    min-height: 52px;
    font-size: 16px;
    font-weight: 600;
}

/* ===========================================================================
 *  Mini-cart drawer + Cart page redesign — Figma 1827-1178
 * ======================================================================== */
.ps-cart-overlay{
    position:fixed; inset:0; z-index:10000;
    background:rgba(0,0,0,.2); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
/* Off-canvas кошик зсунутий transform:translateX(100%) за правий край і давав
   зайвий горизонтальний скрол (~39px) на десктопі. Клипимо по X на root
   (clip, не hidden — щоб не ламати position:sticky). */
html{ overflow-x:clip; }
.ps-cart-drawer{
    position:fixed; top:0; right:0; bottom:0; z-index:10001;
    width:990px; max-width:100%;
    background:#fff; display:flex; flex-direction:column;
    transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow:-10px 0 40px rgba(0,0,0,.08);
    padding:48px 40px 40px;
}
body.ps-cart-open{ overflow:hidden; }
body.ps-cart-open .ps-cart-overlay{ opacity:1; visibility:visible; }
body.ps-cart-open .ps-cart-drawer{ transform:translateX(0); }

.ps-cart-drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ps-cart-drawer__back{
    display:inline-flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer;
    padding:0; color:rgba(18,18,18,.3); font:500 12px/1 'Montserrat',sans-serif;
}
.ps-cart-drawer__back svg{ width:7px; height:7px; transform:rotate(180deg); fill:rgba(18,18,18,.3); }
.ps-cart-drawer__close{ background:none; border:0; cursor:pointer; padding:4px; line-height:0; color:#121212; }
.ps-cart-drawer__close svg{ width:18px; height:18px; fill:currentColor; }
.ps-cart-drawer__title{ margin:0 0 30px; font:600 24px/1.2 'Montserrat',sans-serif; color:#121212; }
.ps-cart-drawer__body{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }

/* shared cart structure (drawer + page) */
.ps-cart{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
.ps-cart__cols{
    display:grid; grid-template-columns:1fr 88px 120px; align-items:center;
    padding:0 0 12px; border-bottom:1px solid #ededed;
    font:500 12px/1 'Montserrat',sans-serif; color:#b9b9b9;
}
.ps-cart__col--qty{ text-align:center; }
.ps-cart__col--price{ text-align:right; }
.ps-cart__list{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; min-height:0; }

.ps-cart-item{
    display:grid; grid-template-columns:107px minmax(0,1fr) 88px 120px;
    grid-template-areas:'thumb info qty price';
    align-items:center; gap:0 24px;
    padding:22px 0; border-bottom:1px solid #ededed; position:relative;
}
.ps-cart-item__thumb{ grid-area:thumb; width:107px; height:107px; border-radius:10px; background:#f6f6f6; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ps-cart-item__thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.ps-cart-item__info{ grid-area:info; padding-right:24px; min-width:0; }
.ps-cart-item__name{ display:block; font:500 16px/1.35 'Montserrat',sans-serif; color:#121212; text-decoration:none; overflow-wrap:anywhere; }
.ps-cart-item__name:hover{ color:#1e85be; }
.ps-cart-item__opts{ margin-top:6px; font:400 12px/1.4 'Montserrat',sans-serif; color:rgba(18,18,18,.5); }
.ps-cart-item__opts span{ display:block; }
.ps-cart-item__plabel,.ps-cart-item__price-label{ display:none; }

.ps-cart-item__qty{ grid-area:qty; justify-self:center; }
.ps-qty{ display:inline-flex; align-items:center; justify-content:space-between; width:63px; padding:7px 0; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; }
.ps-qty__btn{ background:none; border:0; cursor:pointer; padding:0; font:400 18px/1 'Montserrat',sans-serif; color:#121212; width:14px; text-align:center; }
.ps-qty__btn:hover{ color:#1e85be; }
.ps-qty__val{ min-width:16px; text-align:center; font:500 16px/1 'Montserrat',sans-serif; color:#121212; }

.ps-cart-item__price{ grid-area:price; text-align:right; font:500 16px/1.2 'Montserrat',sans-serif; color:#121212; white-space:nowrap; padding-right:30px; }
.ps-cart-item__remove{
    position:absolute; top:50%; transform:translateY(-50%); right:0;
    width:20px; height:20px; display:flex; align-items:center; justify-content:center;
    border:1px solid #dcdcdc; border-radius:50%; background:none; cursor:pointer; padding:0; color:#b9b9b9;
}
.ps-cart-item__remove svg{ width:8px; height:8px; fill:currentColor; }
.ps-cart-item__remove:hover{ border-color:#ff5e5e; color:#ff5e5e; }

.ps-cart__summary{ margin-top:auto; padding-top:22px; display:flex; flex-direction:column; align-items:flex-end; gap:0; }
.ps-cart__total-row{ display:flex; justify-content:space-between; gap:40px; width:289px; max-width:100%; align-items:baseline; padding:15px 0; border-top:1px solid #ededed; }
.ps-cart__total-row:last-child{ border-bottom:1px solid #ededed; }
.ps-cart__total-label{ font:500 12px/1.2 'Montserrat',sans-serif; color:#121212; }
.ps-cart__total-val{ font:500 16px/1.2 'Montserrat',sans-serif; color:#121212; white-space:nowrap; }
.ps-cart__total-row.is-grand{ padding:16px 0; }
.ps-cart__total-row.is-grand .ps-cart__total-label{ font-size:16px; }
.ps-cart__total-row.is-grand .ps-cart__total-val{ font:600 24px/1.2 'Montserrat',sans-serif; }

.ps-cart__actions{ display:flex; gap:14px; margin-top:24px; }
.ps-btn{
    flex:1 1 0; min-height:60px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:100px; font:600 16px/1.2 'Montserrat',sans-serif; text-decoration:none; cursor:pointer;
    padding:0 24px; text-align:center; border:1px solid transparent; transition:.2s ease; white-space:nowrap;
}
.ps-btn--ghost{ border-color:#b9b9b9; color:#b9b9b9; background:#fff; }
.ps-btn--ghost:hover{ border-color:#121212; color:#121212; }
.ps-btn--primary{ background:#1e85be; color:#fff; border-color:#1e85be; }
.ps-btn--primary:hover{ background:#176a99; border-color:#176a99; color:#fff; }

/* drawer: buttons pinned to opposite ends like Figma */
.ps-cart-drawer .ps-cart__actions{ justify-content:space-between; }
.ps-cart-drawer .ps-cart__actions .ps-btn{ flex:0 0 auto; }
.ps-cart-drawer .ps-btn--ghost{ width:auto; min-width:220px; }
.ps-cart-drawer .ps-btn--primary{ width:290px; }

.ps-cart--empty{ align-items:center; justify-content:center; text-align:center; gap:24px; padding:40px 0; flex:1 1 auto; }
.ps-cart__empty{ font:500 16px/1.4 'Montserrat',sans-serif; color:rgba(18,18,18,.6); margin:0; }
.ps-cart--empty .ps-btn{ flex:0 0 auto; min-width:240px; }

/* ---- Cart page (/cart) — same visual, in a centered card ---- */
.woocommerce-cart #content .ps-cart-page{ max-width:990px; margin:0 auto; }
.ps-cart-page{ background:#fff; border-radius:10px; padding:40px; }
.woocommerce-cart .entry-header{ display:none; }
.ps-cart-page__back{ display:inline-flex; align-items:center; gap:10px; color:rgba(18,18,18,.3); font:500 12px/1 'Montserrat',sans-serif; text-decoration:none; margin-bottom:18px; }
.ps-cart-page__back svg{ width:7px; height:7px; transform:rotate(180deg); fill:rgba(18,18,18,.3); }
.ps-cart-page__title{ margin:0 0 22px; font:600 24px/1.2 'Montserrat',sans-serif; color:#121212; }
.ps-cart-page .ps-cart__list{ overflow:visible; }
.ps-cart-page .ps-cart-item{ grid-template-columns:107px 1fr 100px 130px; }
.ps-cart-page .ps-cart-item__thumb{ width:107px; height:107px; }
.ps-cart-page .ps-cart__cols{ grid-template-columns:1fr 100px 130px; }
.ps-cart-page .ps-cart__actions{ justify-content:space-between; }
.ps-cart-page .ps-cart__actions .ps-btn{ flex:0 0 auto; min-width:220px; }

@media (max-width:600px){
    .ps-cart-drawer{ width:100%; padding:0 20px 24px; }
    .ps-cart-drawer__head{ padding-top:20px; }
    .ps-cart-drawer__title{ margin:0 0 22px; }
    .ps-cart-page{ padding:20px; }
    /* per-item labels replace the single header row */
    .ps-cart-drawer .ps-cart__cols{ display:none; }
    .ps-cart-item{
        grid-template-columns:70px minmax(0,1fr);
        grid-template-areas:'plabel plabel' 'thumb info' 'qtyprice qtyprice';
        column-gap:16px; row-gap:14px; padding:20px 0;
    }
    .ps-cart-page .ps-cart-item{ grid-template-columns:70px minmax(0,1fr); grid-template-areas:'plabel plabel' 'thumb info' 'qtyprice qtyprice'; }
    .ps-cart-item__thumb,.ps-cart-page .ps-cart-item__thumb{ grid-area:thumb; width:70px; height:70px; }
    .ps-cart-item__info{ padding-right:0; }
    .ps-cart-item__plabel{ display:block; grid-area:plabel; font:500 12px/1 'Montserrat',sans-serif; color:#b9b9b9; }
    .ps-cart-item__qty{ grid-area:qtyprice; justify-self:start; }
    .ps-cart-item__price{ grid-area:qtyprice; justify-self:end; align-self:center; padding-right:0; display:inline-flex; align-items:baseline; gap:10px; }
    .ps-cart-item__price-label{ display:inline; font:500 12px/1 'Montserrat',sans-serif; color:#b9b9b9; }
    .ps-cart-item__remove{ top:0; transform:none; }
    .ps-cart__summary{ align-self:stretch; align-items:stretch; }
    .ps-cart__total-row{ width:100%; }
    .ps-cart__actions{ flex-direction:column; }
    .ps-cart-drawer .ps-btn--ghost{ display:none; }
    .ps-cart-drawer .ps-btn--primary{ width:100%; }
    .ps-cart-page .ps-cart__actions .ps-btn,.ps-cart--empty .ps-btn{ width:100%; min-width:0; }
}

/* ---- Fix: заголовок картки товару в каталозі/категорії клампиться рівно у 2 рядки.
   Тема ставила display:flow-root → -webkit-line-clamp не діяв, 3-й рядок «визирав». ---- */
.woocommerce ul.products li.product .product-info h3,
.woocommerce ul.products li.product .product-info h3 a {
    line-height: 1.3 !important;
}
.woocommerce ul.products li.product .product-info h3 a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    max-height: 3.9em !important;
}

/* ============================================================
   MOBILE CAROUSELS — Banners (Figma 1832-1784) + Popular Categories (Figma 34495-126)
   На телефоні обидва блоки = scroll-snap каруселі по 1 картці з prev/next стрілками.
   Десктоп лишається сіткою (стрілки сховані).
   ============================================================ */
.home-carousel-nav { display: none; }
.home-categories__head { display: block; }

@media (max-width: 575px) {
    /* ---- спільні круглі стрілки ---- */
    .home-carousel-nav {
        display: inline-flex;
        gap: 4px;
        flex: 0 0 auto;
    }
    .home-carousel-nav__btn {
        width: 25px;
        height: 25px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* ТЗ фінал п4: стрілки в брендовий колір (зелений #1b8a4b) */
        border: 1px solid #1b8a4b;
        border-radius: 50%;
        background: #fff;
        color: #1b8a4b;
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition: background .15s ease, border-color .15s ease, color .15s ease;
    }
    .home-carousel-nav__btn:hover,
    .home-carousel-nav__btn:focus-visible {
        background: #1b8a4b;
        border-color: #1b8a4b;
        color: #fff;
        outline: none;
    }

    /* ---- БАНЕРИ → карусель по 1 картці ---- */
    .home-banners {
        position: relative;
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        margin: 0 0 24px;
        overflow-x: auto;
        scroll-snap-type: x mandatory; scroll-behavior: smooth; /* п18: легкий свайп одразу підтягує наступну */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .home-banners::-webkit-scrollbar { display: none; }
    .home-banners__nav {
        position: absolute;
        top: 24px;
        right: 20px;
        z-index: 3;
    }
    .home-banners__card,
    .home-banners__card--guitars,
    .home-banners__card--instock,
    .home-banners__card--sale {
        grid-column: auto;
        flex: 0 0 100%;
        scroll-snap-align: center;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 20px;
        min-height: 488px;
        box-sizing: border-box;
    }
    .home-banners__text,
    .home-banners__card--guitars .home-banners__text,
    .home-banners__card--pedals .home-banners__text,
    .home-banners__card--brands .home-banners__text,
    .home-banners__card--instock .home-banners__text,
    .home-banners__card--sale .home-banners__text {
        max-width: 100%;
        width: 100%;
        flex: 0 0 auto;
        justify-content: flex-start;
    }
    .home-banners__eyebrow {
        margin-bottom: 40px;
        font-size: 12px;
        padding: 14px 16px;
        line-height: 1;
    }
    .home-banners__title  { font-size: 28px; line-height: 1.12; margin: 0 0 26px; }
    .home-banners__sub    { font-size: 14px; font-weight: 500; line-height: 1.6; margin: 0 0 40px; max-width: 100%; }
    .home-banners__cta    { font-size: 14px; padding-bottom: 8px; }
    /* товарне фото — по центру внизу картки */
    .home-banners__accent,
    .home-banners__card--guitars .home-banners__accent,
    .home-banners__card--pedals .home-banners__accent,
    .home-banners__card--brands .home-banners__accent,
    .home-banners__card--instock .home-banners__accent,
    .home-banners__card--sale .home-banners__accent {
        position: static;
        display: flex;
        transform: none;
        right: auto;
        top: auto;
        bottom: auto;
        width: auto;
        max-width: 225px;
        height: auto;
        margin-top: auto;
        margin-left: auto;
        margin-right: auto;
        align-self: center;
        justify-content: center;
    }
    .home-banners__card--instock .home-banners__accent,
    .home-banners__card--sale .home-banners__accent {
        display: flex;            /* instock був display:none на мобілці — повертаємо */
    }
    .home-banners__accent img,
    .home-banners__card--instock .home-banners__accent img,
    .home-banners__card--sale .home-banners__accent img {
        width: auto;
        height: auto;
        max-width: 225px;
        max-height: 170px;
        object-fit: contain;
        margin: 0 auto;
    }

    /* ---- ПОПУЛЯРНІ КАТЕГОРІЇ → карусель по 1 картці ---- */
    .home-categories { margin: 0 0 32px; }
    .home-categories__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }
    .home-categories__head .home-section__title { margin: 0; font-size: 20px; }
    .home-categories__grid {
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory; scroll-behavior: smooth; /* п18 */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .home-categories__grid::-webkit-scrollbar { display: none; }
    .home-categories__card {
        flex: 0 0 100%;
        scroll-snap-align: center;
        box-sizing: border-box;
        padding: 32px 50px 26px;
        border: 1px solid transparent; /* п19.3: прибрати рамку (дубль з десктопу) */
    }
    .home-categories__img {
        width: 100%;
        max-width: 252px;
        margin: 0 auto 42px;
        aspect-ratio: 1 / 1;
    }
    .home-categories__name { font-size: 18px; }
}

/* =========================================================================
   ПРАВКИ ЗА ЗВОРОТНІМ ЗВ'ЯЗКОМ ЗАМОВНИКА — 2026-06-19
   (адаптація деталей під Figma: фон, хедер, дропдауни, breadcrumb, таби, hero)
   ========================================================================= */

/* (1) Фон сторінок — м'який off-white #FAFAF9 (Figma), картки/футер/фото лишаються #fff */
body { background-color: #FAFAF9; }
.site-footer .footer-main { background-color: #fff; }

/* (2) Лого більше (замовник: у макеті лого крупніше) */
.site-branding a.logo img,
.site-branding .logo img.logo-dark { height: 84px; width: auto; max-width: none; }
/* прибрати зайвий лівий відступ лого — у Figma лого ~40px від краю (= внутрішній відступ контейнера).
   База дає a.logo padding-left:15 + img margin-left:23 → лого було надто правіше. */
@media (min-width: 992px) {
    .site-branding > a.logo { padding-left: 0; }
    .site-branding .logo img { margin-left: 0; }
}

/* (2) Верхнє меню — 16px (Figma SemiBold 16, було 12) */
#site-navigation .nav-menu > li > a { font-size: 16px; }

/* (2) Іконки акаунту/пошуку/мови — чорні #121212 + більші 24px на світлому хедері */
.header-icon .menu-item-search > a,
.header-icon .menu-item-account > a,
.header-icon .header-lang__current { color: #121212; }
.header-icon .menu-item-search svg,
.header-icon .menu-item-account svg { width: 24px; height: 24px; }
.header-lang__current { font-size: 16px; }

/* на головній над фото (прозорий/світлий хедер) усе світле — інакше мова лишалась темна
   на темному фото (моє правило #121212 перебивало світлий варіант). !important робить надійно. */
.header-text-light .header-icon .menu-item-search > a,
.header-text-light .header-icon .menu-item-account > a,
.header-text-light .header-icon .header-lang__current,
.header-text-light .header-lang__current { color: #fff !important; }

/* (3) Обране в одну лінію з кошиком.
       Базова тема робить .cart-contents position:absolute; top:-27px (li height:0) — через це
       кошик «з'їжджав» вгору ~5px. Робимо пілюлю статичною → li 45px, центрується як обране. */
.header-icon > ul:not(.mobile-icons) { align-items: center !important; }
.header-icon > ul:not(.mobile-icons) > li { align-self: center !important; }
.header-icon .menu-item-cart { height: 45px; display: inline-flex; align-items: center; }
.header-icon .menu-item-cart .cart-contents { position: static !important; top: auto !important; }
.header-icon .menu-item-cart .cart-contents,
.header-icon .menu-item-wishlist .wishlist-contents {
    height: 45px !important; box-sizing: border-box !important;
    margin-top: 0 !important; margin-bottom: 0 !important; vertical-align: middle;
}

/* (4) Випадаючі меню категорій (сайдбар + мега-меню) — заокруглення 8px як в Інфо-дропдауні
       (було border-radius 0 — гострі кути) + узгоджена тінь/рамка */
.sidebar_categories .nav-menu .sub-menu,
aside#secondary .sidebar_categories ul.nav-menu li .sub-menu,
.nav-menu .sub-menu.mega-menu-container,
.nav-menu .mega-menu-container,
.nav-menu .mega-menu-container .sub-menu {
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.16) !important;
    border: 1px solid #ededed !important;
    overflow: visible;
}
/* трохи стриманіший внутрішній відступ мега-меню, ближче до пропорцій Інфо-дропдауна */
.nav-menu .sub-menu.mega-menu-container { padding: 16px 0 !important; }

/* (5) Breadcrumb (шлях до товару): компактний line-height, вирівнювання,
       підкреслення поточного пункту щільно під текстом (без зайвого відступу) */
nav.breadcrumb,
#content .product .product-toolbar .breadcrumb {
    line-height: 1.2;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
nav.breadcrumb span,
nav.breadcrumb a,
#content .product .breadcrumb span,
#content .product .breadcrumb a { line-height: 1.2; }
#content .product .breadcrumb span:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* (6) Таби топ-товарів: вертикальні роздільники між табами (завжди видимі),
       активне підкреслення щільно під текстом (чорне), неактивні — сірі (Figma) */
.products-filter { position: relative; }
.products-filter li.line-hover {
    position: relative;
    margin: 0 16px;
    padding: 0 0 3px;
    color: #B9B9B9;
}
.products-filter li.line-hover:first-child { margin-left: 0; }
.products-filter li.line-hover:last-child { margin-right: 0; }
/* глушимо базове ::after (інакше hover/active розтягує його у блок) — роздільник через ::before */
.products-filter li.line-hover::after,
.products-filter li.line-hover:hover::after,
.products-filter li.line-hover.active::after { content: none !important; }
.products-filter li.line-hover:not(:last-child)::before {
    content: "";
    position: absolute; right: -16px; top: 2px;
    width: 1px; height: 12px; background: #D9D9D9;
}
.products-filter li.line-hover:hover { color: #121212; }
.products-filter li.line-hover.active {
    color: #121212;
    border-bottom: 1px solid #121212;
    padding-bottom: 2px;
}

/* (7) Hero: текст 48px ExtraBold (Figma), підзаголовок 20px SemiBold, трохи вище фрейм */
.home-hero { min-height: min(52vw, 90vh); max-height: 1040px; background-position: center 32%; }
.home-hero__title { font-size: 48px; font-weight: 800; line-height: 1.05; letter-spacing: -.5px; }
.home-hero__desc { font-size: 20px; font-weight: 600; line-height: 1.3; }
@media (max-width: 991px) { .home-hero__title { font-size: 38px; } .home-hero__desc { font-size: 17px; } }
@media (max-width: 767px) { .home-hero { background-image: url('../image/redesign/hero-mobile.jpg?v=20260625') !important; } }

/* ─────────────────────────────────────────────────────────────────────────
   ФІКС АДАПТИВУ ХЕДЕРА (lg ~1200–1399) — 2026-06-19
   Після збільшення лого(84)/меню(16)/іконок(24) у вузькому desktop-діапазоні
   лупа й іконка акаунту налазили на «Контакти». Тут компактимо все, щоб був
   комфортний зазор між меню та правим кластером. Блок у кінці файлу — перебиває
   збільшені розміри з п.2 за порядком джерела.
   ───────────────────────────────────────────────────────────────────────── */
/* desktop (≥1200): flex-розкладка хедера. Меню тягнеться між лого та іконками і
   центрується в цьому просторі (оптичний центр між лого і правим кластером, а не
   геометричний центр екрана) — саме цього бракувало. */
@media (min-width: 1200px) {
    .site-header .sober-container > .row { display: flex; align-items: center; flex-wrap: nowrap; }
    .site-header .header-icon { flex: 0 0 auto; width: auto !important; }
    /* Лого-img у темі position:absolute (тема так центрує його по вертикалі) → бокс branding
       схлопується. НЕ чіпаємо img (щоб вертикаль не з'їхала), а просто резервуємо під лого
       фіксовану ширину branding — тоді меню (flex:1, по центру) балансується між лого й іконками. */
    .site-header .site-branding { flex: 0 0 auto; width: 180px !important; }
    .site-header #site-navigation { flex: 1 1 auto; width: auto !important; min-width: 0; }
    .site-header #site-navigation .nav-menu { text-align: center; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .site-header .site-branding { width: 145px !important; }
    .site-branding a.logo img,
    .site-branding .logo img.logo-dark { height: 64px; }
    #site-navigation .nav-menu > li > a { font-size: 14px; }
    #menu-primary-menu-ua > li { margin-right: 18px; }
    .header-icon > ul:not(.mobile-icons) { gap: 12px; }
    .header-icon .menu-item-search svg,
    .header-icon .menu-item-account svg { width: 20px; height: 20px; }
    .header-lang__current { font-size: 14px; }
    /* кошик: ховаємо слово «Кошик», лишаємо іконку + лічильник */
    .header-icon .menu-item-cart .cart-contents { padding: 0 14px; gap: 6px; }
    .header-icon .menu-item-cart .cart_text { font-size: 0 !important; line-height: 0; }
    .header-icon .menu-item-cart .cart_text .count,
    .header-icon .menu-item-cart .cart_text .cart-counter { font-size: 14px !important; line-height: 1; }
}
/* 1400–1599: меню/іконки повного розміру, лише трохи тісніший правий кластер */
@media (min-width: 1400px) and (max-width: 1599px) {
    .header-icon > ul:not(.mobile-icons) { gap: 14px; }
    .header-icon .menu-item-cart .cart-contents { padding: 0 16px; }
}

/* =========================================================================
   ОСТАТОЧНІ ПРАВКИ (docx «Остаточні правки») — 2026-06-22
   Блок у кінці файлу → перебиває попередні значення за порядком джерела.
   ========================================================================= */

/* --- п2/п3: hero-фото на всю висоту екрана, без видимої лінії/смуги внизу --- */
.home-hero {
    min-height: 100vh !important;
    max-height: none !important;
    margin-bottom: 0 !important;   /* прибрати білий проміжок-«лінію» під фото */
}
/* трохи підняти контент від самого низу великого hero */
.home-hero__inner { padding-bottom: 7vh; }
/* після full-height hero даємо повітря до банерів */
.home-banners { margin-top: 56px; }

/* --- п4.1: лого менше (84px було завелике) → ближче до макета (~70px) --- */
.site-branding a.logo img,
.site-branding .logo img.logo-dark { height: 70px !important; }

/* --- п4.2: меню по геометричному центру всієї ширини сторінки --- */
@media (min-width: 1200px) {
    .site-header .site-branding { flex: 1 1 0 !important; width: auto !important; }
    .site-header #site-navigation { flex: 0 0 auto !important; width: auto !important; }
    .site-header .header-icon {
        flex: 1 1 0 !important; width: auto !important;
        display: flex; justify-content: flex-end;
    }
}

/* --- п4.3: відступи в кластері іконок (account↔UA +1мм, cart↔wishlist −2мм);
       account-іконку трохи зважнити, бо тонша за пошук/мову --- */
.header-icon > ul:not(.mobile-icons) .menu-item-lang { margin-left: 4px; }
.header-icon > ul:not(.mobile-icons) .menu-item-wishlist { margin-left: -7px; }
.header-icon .menu-item-account svg { width: 25px !important; height: 25px !important; stroke-width: 1.6; }

/* --- п4.4: hero-заголовок — трохи менший, жирніший (true ExtraBold 800), 4 рядки --- */
.home-hero__left { max-width: 760px; flex: 1 1 54%; }
.home-hero__title { font-size: 42px !important; font-weight: 800 !important; line-height: 1.08 !important; }

/* --- п4.5: marquee брендів ширший (видно 4+ лого), опис нижче — у 3 рядки --- */
.home-hero__right { flex: 0 1 44% !important; max-width: 640px !important; }
.home-hero__logo img { height: 50px; max-width: 170px; }
.home-hero__track { gap: 40px; }
.home-hero__desc {
    width: 100%; max-width: 100%;
    font-size: 18px !important; line-height: 1.4 !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- п5.1: лінія під CTA банера ближче до тексту --- */
.home-banners__cta { padding-bottom: 4px; }

/* --- п5.2: жодних статичних рамок/тіней на картках — тінь лише на hover --- */
.home-categories__card { border: 1px solid transparent !important; box-shadow: none !important; }
.home-categories__card:hover { border-color: transparent !important; box-shadow: 0 4px 16px rgba(0,0,0,.08) !important; }
.home-banners__card { box-shadow: none !important; border: 1px solid transparent !important; }
.home-banners__card:hover { box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.10) !important; }

/* --- п5.3: топ-товари рівно в сітку як «Популярні категорії» (4 кол, gap 16, не вилазять за краї) --- */
@media (min-width: 768px) {
    .content-area > .sober-product-grid .woocommerce ul.products {
        display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px;
        margin: 0 !important; padding: 0; list-style: none;
    }
    .content-area > .sober-product-grid .woocommerce ul.products::before,
    .content-area > .sober-product-grid .woocommerce ul.products::after { content: none !important; display: none !important; }
    .content-area > .sober-product-grid .woocommerce ul.products li.product {
        position: static !important; left: auto !important; top: auto !important;
        width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
    }
}
@media (min-width: 992px) {
    .content-area > .sober-product-grid .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
}

/* --- п7: більша робоча поверхня фото на картках товару + прибрати рамку відгуків --- */
.sober-product-grid .product_container { padding: 22px !important; }
.sober-product-grid .product-header > a { min-height: 260px !important; }
.home-reviews__card { border: none !important; box-shadow: none !important; }

/* --- п13: сторінка-хаб ІНФО (кнопки-посилання на інфо-сторінки) --- */
/* ТЗ фінал п5: підзаголовок не центруємо — ліве вирівнювання з пропорційним
   відступом зліва 1 : справа 0.5 (лівий удвічі більший за правий). */
.info-hub__intro {
    font-size: 16px; color: #555; margin: 0 0 28px;
    text-align: left;
}
.info-hub__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
/* ТЗ п5: боковий відступ усього блоку ІНФО (інтро + картки разом) —
   зліва вдвічі більший за правий (1 : 0.5), однаково для тексту й сітки. */
.info-hub__intro,
.info-hub__grid {
    padding-left: clamp(16px, 4%, 56px);
    padding-right: clamp(8px, 2%, 28px);
}
.info-hub__card {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 22px 26px; background: #fff; border: 1px solid #ededed; border-radius: 10px;
    color: #121212; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.info-hub__card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: #1e85be; color: #121212; text-decoration: none; transform: translateY(-1px); }
.info-hub__title { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 18px; }
.info-hub__arrow { color: #1e85be; font-size: 20px; }
@media (max-width: 575px) { .info-hub__grid { grid-template-columns: 1fr; } }

/* --- п14: дропдаун мови — по центру під вибраною мовою, без зміщення --- */
.header-lang__menu {
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) translateY(-6px);
}
.header-lang--dd:hover .header-lang__menu,
.header-lang--dd:focus-within .header-lang__menu {
    transform: translateX(-50%) translateY(0);
}

/* --- п18: на моб hero-заголовок переноситься природно (без desktop <br>) --- */
@media (max-width: 767px) {
    .home-hero__title br { display: none; }
    .home-hero__title { font-size: 34px !important; line-height: 1.1 !important; }
}

/* --- п22: картки товару без статичної рамки/тіні (тінь лише на hover) --- */
.sober-product-grid .product_container { box-shadow: none !important; border: 0 !important; }
.sober-product-grid li.product:hover .product_container { box-shadow: 0 4px 16px rgba(0,0,0,.08) !important; }

/* --- п23: поле пошуку — сіріший фон (не білий) --- */
.search-modal .search-fields {
    background: #f1f1f1; border-radius: 10px; padding: 4px 14px; align-items: center;
}
.search-modal .search-field { background: transparent !important; }

/* --- п17: «подвоєння вікон» на 2-колонковій категорії (Гітарні ефекти) ---
   Внутрішні колонки мега-меню отримували власну рамку/тінь (з мого правила вище),
   через що виглядали як друге вікно. Рамка лишається ЛИШЕ на зовнішньому контейнері. */
.nav-menu .mega-menu-container .sub-menu,
aside#secondary .sidebar_categories ul.nav-menu li .sub-menu .sub-menu,
aside#secondary ul.nav-menu li ul.sub-menu.mega-menu-container ul {
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* --- п16: товари без наявності у СПИСКУ КАТАЛОГУ — прозоріші (60%) --- */
#primary.sober-product-grid .woocommerce ul.products li.product.outofstock { opacity: .6; }
#primary.sober-product-grid .woocommerce ul.products li.product.outofstock:hover { opacity: 1; }

/* --- п9: сторінка категорії --- */
/* 9.2 заголовок по центру по висоті (breadcrumb прибрано в шаблоні) */
.page-header--category { display: flex; align-items: center; }
.page-header--category .sober-container { width: 100%; }
.page-header--category .page-title { margin: 0; }
/* 9.3 віконце сортування зливається з фоном (не біла плашка); те саме — пагінація/фільтр */
.shop-toolbar .orderby {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding-right: 18px !important; color: #121212;
}
.shop-toolbar .catalog_ordering { background: transparent !important; }
.woocommerce-pagination .pagination > li > a,
.woocommerce-pagination .pagination > li > span { background: transparent !important; }
/* 9.3 «Показати ще» — заокруглена пілюля за стилем кнопок (специфічніше за правило пагінації вище) */
.woocommerce-pagination .pagination .next_page_ajax > a,
.woocommerce-pagination .pagination > li.next_page_ajax > a {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 100px !important; padding: 12px 32px !important;
    background: #1e85be !important; color: #fff !important;
}
/* 9.2 вертикальні роздільники між табами — по центру тексту */
.products-filter li.line-hover:not(:last-child)::before {
    top: 50% !important; transform: translateY(-50%); height: 13px !important;
}

/* --- п10: сторінка товару --- */
/* 10.1 фото масштабується на всю робочу поверхню (~95%), а не у натуральні 450px */
#content .product .images .woocommerce-main-image { padding: 4px !important; }
#content .product .images .woocommerce-main-image img {
    width: 100% !important; height: 100% !important; object-fit: contain !important;
}
/* 10.4 додаткові фото: без рамки, рівно 4 у вікні (без обрізаної 5-ї) */
#content .product .images .thumbnails a {
    border: 0 !important;
    flex: 0 0 calc((100% - 30px) / 4) !important;
    width: auto !important; height: auto !important; aspect-ratio: 1 / 1;
    padding: 4px !important;
}
/* п15: кнопка «Сповістити про наявність» — текст вміщається на всіх мовах */
#content .product .summary form.cart .single_add_to_cart_button.out-of-stock {
    max-width: none !important; flex: 1 1 auto !important; white-space: nowrap; padding: 0 28px !important;
}

/* --- п11: кошик-drawer --- */
/* 11.1 прибрати «рамку» (сірий бокс) навколо фото товару */
.ps-cart-item__thumb { background: #fff !important; }
/* 11.2 заголовки «К-сть»/«Ціна» рівно над своїми колонками (хедер = сітка товару) */
.ps-cart-drawer .ps-cart__cols { grid-template-columns: 107px minmax(0,1fr) 88px 120px; gap: 0 24px; }
.ps-cart-drawer .ps-cart__col--name { grid-column: 1 / 3; }
.ps-cart-drawer .ps-cart__col--qty { grid-column: 3; text-align: center; }
.ps-cart-drawer .ps-cart__col--price { grid-column: 4; text-align: right; padding-right: 30px; }

/* --- п12: чекаут --- */
/* 12.2 sticky-вікно замовлення: тема робить body скрол-контейнером (overflow-y:auto),
   через що sticky не чіпляється. overflow:clip клипає без скрол-контексту → sticky живий. */
body.checkout-checkout, body.woocommerce-checkout { overflow-x: clip; overflow-y: visible; }
/* 12.3 поле «Відділення»/«Місто» — білий фон, як решта (disabled більше не сіре) */
.checkout .np-row input.input-text,
.checkout .np-row input[disabled],
.checkout .np-fields input.input-text { background: #fff !important; }

/* =========================================================================
   100% ОСТАТОЧНІ ПРАВКИ (docx «100% остаточні правки») — 2026-06-22
   Блок у кінці файлу → перебиває попередні значення за порядком джерела.
   ========================================================================= */

/* --- п1: сторінка-хаб ІНФО --- */
/* заголовок «Інформація» по центру (breadcrumb приховано) */
.page-header--hub { text-align: center; }
.page-header--hub .page-title { margin: 0; text-align: center; }
.page-header--hub .breadcrumb { display: none; }
/* картки-кнопки без постійної рамки — лише тінь при наведенні */
.info-hub__card { border: 0 !important; }
.info-hub__card:hover {
    border: 0 !important; box-shadow: 0 6px 18px rgba(0,0,0,.10) !important;
    transform: translateY(-1px);
}

/* --- п2: заголовки блоків фільтра — сірий фон --- */
.bf-attr-block .bf-attr-header,
aside .bf-attr-block .bf-attr-header {
    background: #f1f1f1 !important;
    padding: 11px 14px !important;
    border-radius: 6px !important;
    border-bottom: 0 !important;
    margin-bottom: 12px;
}

/* --- п3: КЛЮЧ — ціна/назва/кнопка на картках каталогу знову видимі ---
   FOUT-фікс прибрав webfont.js-завантажувач → клас body.wf-active більше не
   додається, а тема тримала `.product-info{opacity:0}` доки немає wf-active.
   Шрифт тепер вантажиться через <link rel=stylesheet> у header.tpl, тож
   приховувати контент до .wf-active більше не потрібно. */
.woocommerce ul.products li.product .product-info { opacity: 1 !important; }

/* --- п4: текст кнопки «Показати ще» строго по центру --- */
.shop-navigation-ajax.woocommerce nav.woocommerce-pagination li.next_page_ajax a,
.woocommerce-pagination .pagination li.next_page_ajax > a,
.woocommerce-pagination .pagination .next_page_ajax > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    text-align: center !important;
}
.woocommerce-pagination .pagination li.next_page_ajax > a .button-text { line-height: 1.2; }

/* --- п5: «Схожі товари» — без тіні карток (desktop + mobile) --- */
.related .product_container,
.upsells .product_container { box-shadow: none !important; }
.related li.product:hover .product_container,
.upsells li.product:hover .product_container { box-shadow: 0 4px 16px rgba(0,0,0,.08) !important; }

/* --- п7: таб «Опис»/«Відгуки» на сірому фоні (не білий) + textarea не тягнеться --- */
#content .product .woocommerce-tabs .wc-tab,
#content .product #tab-description,
#content .product #tab-reviews,
#content .product #tab-attribute,
#content .product #tab-video { background: #fafaf9 !important; }
#content .product .comment-form textarea,
#content .product #comment {
    resize: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* --- п12: банер «Гарячі ціни» — прибрати декоративний градієнт + кутову тінь
       + будь-яку рамку (з'являлись «темні відтінки та нижня рамка») --- */
.home-banners__card--sale { background: #fff !important; }
.home-banners__card--sale::after { content: none !important; display: none !important; }
.home-banners__card--instock,
.home-banners__card--sale { border: 0 !important; box-shadow: none !important; }
.home-banners__card--instock:hover,
.home-banners__card--sale:hover { box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.10) !important; }

/* --- п14: поле пошуку — єдиний світло-сірий фон #FAFAF9 (без «шарів») --- */
.search-modal .search-fields {
    background: #fafaf9 !important;
    border-radius: 10px;
    border: 0 !important;
    box-shadow: none !important;
}
.search-modal .search-field {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.search-modal .modal-content { background: transparent !important; box-shadow: none !important; }

/* --- п9: моб-галерея товару — фото 100% до поля + свайп-карусель + lightbox --- */
@media (max-width: 991px) {
    #content .product .images .ps-mgal__track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border: 0;
        border-radius: 10px;
        background: #fff;
    }
    #content .product .images .ps-mgal__track::-webkit-scrollbar { display: none; }
    #content .product .images .ps-mgal__slide {
        flex: 0 0 100%;
        scroll-snap-align: center;
        display: flex; align-items: center; justify-content: center;
        aspect-ratio: 1 / 1;
        box-sizing: border-box;
    }
    /* фото на всю ширину поля (100%), вписане без обрізання */
    #content .product .images .ps-mgal__slide img {
        width: 100%; height: 100%;
        object-fit: contain;
        padding: 10px; box-sizing: border-box;
        cursor: zoom-in;
    }
}
/* fullscreen lightbox (працює там, де показана моб-галерея) */
.ps-lightbox {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.92);
}
.ps-lightbox[hidden] { display: none; }
.ps-lightbox__img { max-width: 94vw; max-height: 88vh; object-fit: contain; }
.ps-lightbox__close {
    position: absolute; top: 14px; right: 16px;
    width: 42px; height: 42px; padding: 0;
    background: rgba(255,255,255,.12); border: 0; border-radius: 50%;
    color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}

/* --- п8: моб ГОЛОВНА — хедер не лишає білої смуги над hero при скролі ---
   Headroom робив хедер fixed + білий (`headroom--not-top{background:#fff}`),
   через що при скролі над фото з'являлась біла рамка/смуга. На головній
   тримаємо хедер прозорим і він просто скролиться разом зі сторінкою. */
@media (max-width: 1199px) {
    body.home .site-header.headroom,
    body.home .site-header.headroom--not-top,
    body.home .site-header.headroom--pinned,
    body.home .site-header.headroom--unpinned {
        position: absolute !important;
        top: 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }
}

/* --- п11: моб — відгуки коректно відображаються (без порожніх/обрізаних карток) ---
   Замість безкінечного marquee (обрізав картки й лишав порожні кадри) — звичайна
   scroll-snap карусель: перша картка завжди повністю видима, гортання свайпом. */
@media (max-width: 767px) {
    .home-reviews__slider {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .home-reviews__slider::-webkit-scrollbar { display: none; }
    .home-reviews__slider::before,
    .home-reviews__slider::after { display: none !important; }
    .home-reviews__track { animation: none !important; width: max-content; }
    .home-reviews__card { scroll-snap-align: start; }
}

/* --- п10: моб — простір між «Перейти до каталогу» і фото банера +
       рівні фото карток «Популярні категорії» --- */
@media (max-width: 575px) {
    .home-banners__cta { margin-bottom: 40px !important; }
    .home-categories__img img { width: 100%; height: 100%; object-fit: contain; }
}

/* =========================================================================
   ПРАВКИ 2026-06-22 (вечір) — баг-фікс пакет
   ========================================================================= */

/* --- ХЕДЕР: на планшеті/моб шапка (position:absolute) стискалась по ширині
       контенту → білий блок ліворуч і контент збитий вліво. Тягнемо на 100%. */
.site-header { width: 100%; right: 0; }

/* --- БАНЕРИ «У наявності»/«Гарячі ціни»: прибрати успадкований translateY(-50%)
       з базового .home-banners__accent (фото вилазило над карткою) + менший
       заголовок (вписується у 2 рядки як у макеті) + легка рамка картки. */
.home-banners__card--instock .home-banners__accent,
.home-banners__card--sale .home-banners__accent { transform: none !important; }
.home-banners__card--instock .home-banners__title,
.home-banners__card--sale .home-banners__title { font-size: 30px !important; }
.home-banners__card--instock,
.home-banners__card--sale { border: 1px solid #ececec !important; }
/* ширший текст + вужче фото гітари → заголовок «Гітари та ефекти в» у 2 рядки */
.home-banners__card--instock .home-banners__text { max-width: 64% !important; }
.home-banners__card--instock .home-banners__accent { width: 34% !important; }

/* --- ФОРМА ВІДГУКУ (таб «Відгуки»): інпути мали білий фон → «криві білі
       прямокутники» на сірому фоні табу. Робимо прозорими (лишається лінія). */
#content .product #commentform #author,
#content .product #commentform #comment,
#content .product #commentform textarea,
#content .product #commentform input[type="text"],
#content .product #commentform select {
    background: transparent !important;
    box-shadow: none !important;
}

/* --- «Популярні категорії»: усі фото в однакову квадратну рамку, вписані
       без обрізання (широкі — горизонтально, високі — вертикально). */
.home-categories__img img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* --- Моб: назва товару у списку — максимум 2 рядки (однакова висота карток). */
@media (max-width: 767px) {
    .woocommerce ul.products li.product .product-info h3 a,
    .sober-product-grid .woocommerce ul.products li.product .product-info h3 a {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        overflow: hidden !important;
        max-height: 2.7em !important;
    }
    /* фото товару — однакова висота для всіх карток (рівний грід) */
    .sober-product-grid .product-header > a,
    #content .product .related .product-header > a {
        height: 180px !important;
        min-height: 180px !important;
    }
    .sober-product-grid .product-header img,
    #content .product .related .product-header img {
        max-height: 100% !important;
    }
}

/* =========================================================================
   ПРАВКИ 2026-06-23 — пакет багфіксів (7 пунктів)
   ========================================================================= */

/* --- п1: інпути ціни у фільтрі (BrainyFilter) мали білий фон → виглядали як
       білі плашки. Робимо прозорими (зливаються з панеллю фільтра). --- */
.bf-range-min,
.bf-range-max,
.bf-cur-symb input {
    background: transparent !important;
    box-shadow: none !important;
}

/* --- п2: «білий артефакт» у хедері при ресайзі — базова тема робить
       .site-header:hover{background:#fff} (і текст темним). На головній шапка
       прозора поверх фото, тож при наведенні/ресайзі вона спалахувала білим.
       Тримаємо її прозорою з білим текстом на :hover. --- */
.header-transparent .site-header:hover,
body.home .site-header:hover {
    background-color: transparent !important;
    box-shadow: none !important;
}
.header-transparent.header-text-light .site-header:hover .nav-menu > li > a {
    color: #fff !important;
}
.header-transparent.header-text-light .site-header:hover .nav-menu > li > a:after {
    background-color: #fff !important;
}

/* --- п7: ПОШУК — на головній модалка-дропдаун «упливала» поверх хедера
       (перекривала кошик/бургер). Фіксуємо її чітким сірим боксом по центру
       під рядком хедера; на всіх сторінках видно і на білому, і на тлі фото. --- */
#search-modal.search-modal.sober-modal {
    position: fixed !important;
    top: 72px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: min(560px, 92vw) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;   /* без білого фуллскріну */
    overflow: visible !important;
    z-index: 1600;
}
/* ЄДИНА сіра панель: поле + результати в одному заокругленому боксі (без
   «гра-бокс + білі результати» розбіжності кольору на головній). */
#search-modal .modal-content {
    position: static !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    padding: 0 !important;
    opacity: 1 !important;
    background: #eceef0 !important;
    border: 1px solid #e0e2e6 !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.22) !important;
    /* НЕ фіксувати висоту: тема-JS лишала height:70px → результати (762px) кліпались
       у згорнутий бокс і не було видно жодного товару. height:auto росте під контент. */
    height: auto !important;
    max-height: calc(100vh - 90px) !important;
    overflow: hidden !important;
}
#search-modal .modal-content .product-cats { display: none !important; }
/* рядок поля — прозорий, з роздільником до результатів */
#search-modal .search-fields,
.search-modal.open .search-fields {
    margin: 0 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}
#search-modal .search-field {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    /* текст вводу був білим (#fff від іконок хедера) → на сірому полі не видно
       що друкуєш. Робимо темним; плейсхолдер — сірим. */
    color: #121212 !important;
    caret-color: #121212 !important;
}
#search-modal .search-field::placeholder { color: #8a8a8a !important; opacity: 1 !important; }
/* іконки в ряд: [поле] [× очистити]. Лупа-submit не потрібна — пошук AJAX'ом
   видає результати миттєво при наборі, окрема кнопка «шукати» зайва. */
#search-modal .search-fields .search-field  { order: 1; flex: 1 1 auto; }
#search-modal .search-fields .search-reset {
    order: 2; position: static !important; top: auto !important; right: auto !important;
    transform: none !important; margin: 0 !important; flex: 0 0 auto;
}
#search-modal .search-fields .search-submit { display: none !important; }
/* іконки в полі успадковували білий колір іконок хедера → були невидимі на
   світло-сірому. Робимо × сірим (видно, але не кричить). */
#search-modal .search-fields .search-reset,
#search-modal .search-fields .search-reset svg,
#search-modal .search-fields .search-reset use {
    color: #9a9a9a !important; fill: #9a9a9a !important; stroke: #9a9a9a !important;
}
#search-modal .search-fields .search-reset:hover,
#search-modal .search-fields .search-reset:hover svg,
#search-modal .search-fields .search-reset:hover use {
    color: #121212 !important; fill: #121212 !important; stroke: #121212 !important;
}
/* блок результатів — той самий фон панелі, з лінією-роздільником зверху */
#search-modal .search-results {
    background: transparent !important;
    border-top: 0 !important;
    margin: 0 !important;
    max-height: calc(100vh - 170px) !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
}
/* Роздільник + нижній відступ ЛИШЕ коли є результати (клас found-products).
   Інакше порожній дропдаун роздувався сірою смугою під полем (зайве).
   padding (а не margin останнього елемента) враховується у scrollHeight —
   кнопка «Всі результати» повністю в'їжджає у видиму зону. */
#search-modal.found-products .search-results {
    border-top: 1px solid #dfe1e5 !important;
    padding-bottom: 0 !important;
}
#search-modal .search-results:empty { border-top: 0; }
/* Текст результатів — ЗАВЖДИ темний. li/ul успадковували color:#fff (білі іконки
   хедера) → на світло-сірій панелі ризик білого тексту. Фіксуємо назву і ціну. */
#search-modal .search-results,
#search-modal .search-results .woocommerce ul li,
#search-modal .search-results .woocommerce ul li a,
#search-modal .search-results .woocommerce ul li .name {
    color: #23232c !important;
}
#search-modal .search-results .woocommerce ul li .price { color: #555 !important; }
#search-modal .search-results .woocommerce ul li a:hover,
#search-modal .search-results .woocommerce ul li a:hover .name { color: #1e85be !important; }
/* Відступ знизу: останній товар не притиснутий до кнопки «Всі результати». */
#search-modal .search-results .products_list { padding-bottom: 0 !important; }
/* ТЗ п3: вирівняти простір у дропдауні пошуку — горизонтальний відступ списку
   = відступ поля (20px), щоб ліва грань фото збігалась з полем; вертикальний —
   симетричний (зверху = знизу), інакше результат притискався до низу панелі. */
#search-modal .search-results .woocommerce ul,
#search-modal .search-results .products_list {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
/* Кнопка «Всі результати» — ЛИПКИЙ ФУТЕР. Раніше при неповному скролі її нижній
   край ховався за заокругленням панелі (modal-content overflow:hidden) — «уходила».
   sticky bottom:0 + full-width: завжди повністю видно на дні, список скролиться
   за нею; нижні кути заокруглює сама панель → акуратний футер-бар. */
#search-modal .search-results .woocommerce > .button {
    position: sticky !important;
    bottom: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    z-index: 2;
}
@media (max-width: 767px) {
    #search-modal.search-modal.sober-modal { top: 64px !important; }
}

/* =========================================================================
   ПРАВКИ 2026-06-23 (раунд 2)
   ========================================================================= */

/* --- ХЕДЕР НА ГОЛОВНІЙ — ЗАВЖДИ прозорий оверлей у БУДЬ-ЯКОМУ стані headroom
       і на БУДЬ-ЯКІЙ ширині. Прибирає білий фон/смугу що лишалась після ресайзу
       (тема дає :hover→#fff, headroom--not-top→#fff, а зміна стану лишала білий). */
body.home #masthead.site-header,
body.home #masthead.site-header.headroom,
body.home #masthead.site-header.headroom--top,
body.home #masthead.site-header.headroom--not-top,
body.home #masthead.site-header.headroom--pinned,
body.home #masthead.site-header.headroom--unpinned,
body.home #masthead.site-header:hover {
    position: absolute !important;
    top: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
/* КЛЮЧ до «білого бару над hero при ресайзі»: тема-JS знімає header-transparent
   → .site-content отримує верхній відступ (50/40px), у якому світить білий body
   (#fafaf9) під прозорим хедером. На головній відступ завжди 0 (hero до самого
   верху). Працює навіть якщо клас header-transparent знятий (гарантія до JS). */
body.home .site-content { padding-top: 0 !important; }

/* --- ФОТО ОДНІЄЇ ВИСОТИ (моб): банер-акцент і «Популярні категорії» — фіксована
       однакова висота зображення на ВСІХ ширинах (не залежить від ширини картки,
       тож не розходяться 233 vs 252 тощо). --- */
@media (max-width: 767px) {
    .home-banners__accent img,
    .home-banners__card--instock .home-banners__accent img,
    .home-banners__card--sale .home-banners__accent img,
    .home-categories__img img {
        height: 220px !important;
        max-height: 220px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    .home-banners__accent,
    .home-banners__card--instock .home-banners__accent,
    .home-banners__card--sale .home-banners__accent { width: 100% !important; max-width: 290px !important; }
    /* квадратну рамку категорії робимо рівно під фото (без зайвого пустого простору) */
    .home-categories__img { aspect-ratio: auto !important; height: 220px !important; max-width: none !important; }
}

/* =========================================================================
   ТЗ ФІНАЛ — 2026-06-24
   ========================================================================= */

/* --- п1: банери — ПОВНІСТЮ прибрати рамку (десктоп+моб). Сейл-банер мав
       видиму border:1px #ececec у попередньому блоці → знімаємо. Лишається
       лише hover-тінь. На моб усуваємо подвійну рамку картки в каруселі. --- */
.home-banners__card,
.home-banners__card--instock,
.home-banners__card--sale {
    border: 0 !important;
    outline: 0 !important;
}
@media (max-width: 767px) {
    .home-banners__card,
    .home-banners__card--instock,
    .home-banners__card--sale {
        border: 0 !important; outline: 0 !important; box-shadow: none !important;
    }
    /* ТЗ фінал п1: текст банера — по ширині колонки з ЛІВИМ вирівнюванням
       (в обох картках), скасовуємо попереднє центрування. */
    .home-banners__text { align-items: flex-start !important; text-align: left !important; }
    .home-banners__cta  { align-self: flex-start !important; }
}

/* --- п2: таби «Топ товари» — при перемиканні Рекомендовані/Популярні/Новинки
       Isotope лишав inline transform на картках (position нейтралізували, а
       transform ні) → картки наїжджали одна на одну. Гасимо transform/transition
       + знімаємо фіксовану висоту контейнера (вертикальний простір повертається). */
.content-area > .sober-product-grid .woocommerce ul.products {
    height: auto !important;
}
.content-area > .sober-product-grid .woocommerce ul.products li.product {
    transform: none !important;
    transition: none !important;
}

/* --- п7: поле пошуку ширше (≈+60%) і нижче, щоб результати не зрізались. --- */
#search-modal.search-modal.sober-modal {
    width: min(900px, 94vw) !important;
    top: 92px !important;
}
#search-modal .search-fields { padding: 14px 20px !important; }
#search-modal .search-field  { font-size: 16px !important; }
@media (max-width: 767px) {
    #search-modal.search-modal.sober-modal { width: 94vw !important; top: 76px !important; }
}

/* --- п8: товари без наявності — прозорість 50% (було ~70%) у СПИСКУ, і при
       наведенні НЕ повертати в 100%, і на самій сторінці товару (головне фото).
       Кнопку «Сповістити/Повідомити» робимо прозорішою (вона надто яскрава). --- */
#primary.sober-product-grid .woocommerce ul.products li.product.outofstock,
#primary.sober-product-grid .woocommerce ul.products li.product.outofstock:hover,
#content .product .related ul.products li.product.outofstock,
#content .product .related ul.products li.product.outofstock:hover {
    opacity: .5 !important;
}
#content .product:has(.single_add_to_cart_button.out-of-stock) .product-summary .images,
#content .product.outofstock .product-summary .images {
    opacity: .5 !important;
}
#content .product .summary form.cart .single_add_to_cart_button.out-of-stock {
    opacity: .55 !important;
}
#content .product .summary form.cart .single_add_to_cart_button.out-of-stock:hover {
    opacity: .75 !important;
}

/* --- п9: каталог (десктоп) — низ 2-го рядка назви підрізало (descender «p»):
       тісний line-height. Даємо повітря + більший max-height на 3 рядки. --- */
.woocommerce ul.products li.product .product-info h3,
.woocommerce ul.products li.product .product-info h3 a {
    line-height: 1.45 !important;
}
.woocommerce ul.products li.product .product-info h3 a {
    max-height: 4.5em !important;
}

/* --- п10: моб каталог — третій рядок назви (було 2); товар — прибрати рамку фото. --- */
@media (max-width: 767px) {
    #content #primary .woocommerce ul.products li.product .product-info h3 a,
    #content .content-area ul.products li.product .product-info h3 a,
    #content #primary ul.products li.product .product-info h3 a,
    .woocommerce ul.products li.product .product-info h3 a,
    .sober-product-grid .woocommerce ul.products li.product .product-info h3 a {
        display: -webkit-box !important;          /* тема ставить flow-root → line-clamp не діяв */
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important; line-clamp: 3 !important;
        line-height: 1.4 !important; max-height: 4.3em !important; overflow: hidden !important;
    }
}
#content .product .images,
#content .product .images .woocommerce-main-image,
#content .product .images .woocommerce-main-image a,
#content .product .images .woocommerce-main-image img,
#content .product .images .mgal,
#content .product .images .ps-mgal__stage {
    border: 0 !important; box-shadow: none !important; outline: 0 !important;
}

/* --- п11: бейдж у «Схожих товарах» залазив у кут картки (top/left:0 = на лінії).
       Втоплюємо як у інших категоріях. --- */
#content .product .related .product-header .ribbons {
    top: 16px !important; left: 16px !important;
}

/* --- п17: чекаут — два чекбокси (Не телефонувати… / Створити кабінет…) мали
       різні шрифти/відступи. Уніфікуємо типографіку і вертикальні відступи. --- */
.checkout .no-call-row,
.checkout .woocommerce-account-fields .create-account {
    margin: 14px 0 !important;
}
.checkout .no-call-row .no-call-label,
.checkout .woocommerce-account-fields .create-account label.checkbox {
    display: flex !important; align-items: center !important; gap: 10px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important;
    color: #121212 !important; margin: 0 !important; padding: 0 !important;
}
.checkout .no-call-row .no-call-label span,
.checkout .woocommerce-account-fields .create-account label.checkbox span {
    white-space: normal !important; line-height: 1.4 !important; font-size: 14px !important;
}

/* --- п4: «Схожі товари» — горизонтальна карусель (видно 4, стрілки гортають
       по сторінці = 4 картки, всього до 12). Моб лишається 2×2 грідом. --- */
.related.products .related__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px;
}
.related.products .related__head h2 { margin: 0; }
.related.products .related__nav { display: flex; gap: 10px; }
/* ТЗ п1: круглі стрілки «Схожі товари» з фоном (десктоп; на моб ховаються). */
.related.products .related__nav .home-carousel-nav__btn {
    width: 40px; height: 40px; flex: 0 0 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: #f2f2f2; color: #1a1a1a;
    font-size: 20px; line-height: 1; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background .15s ease, color .15s ease;
}
.related.products .related__nav .home-carousel-nav__btn:hover,
.related.products .related__nav .home-carousel-nav__btn:focus-visible {
    background: #1e85be; color: #fff; outline: none;
}
#content .product .related .woocommerce { overflow: hidden; }
#content .product .related ul.products.related__track {
    display: flex !important; flex-wrap: nowrap !important; gap: 30px;
    overflow-x: auto; scroll-snap-type: x proximity;
    -ms-overflow-style: none; scrollbar-width: none;
    margin: 0 !important; padding: 0 0 6px !important; height: auto !important;
}
#content .product .related ul.products.related__track::-webkit-scrollbar { display: none; }
#content .product .related ul.products.related__track::before,
#content .product .related ul.products.related__track::after { content: none !important; display: none !important; }
#content .product .related ul.products.related__track > li.product {
    flex: 0 0 calc((100% - 90px) / 4) !important; max-width: calc((100% - 90px) / 4) !important;
    width: auto !important; margin: 0 !important; scroll-snap-align: start;
    position: static !important; left: auto !important; top: auto !important; transform: none !important; float: none !important;
}
@media (max-width: 991px) {
    #content .product .related ul.products.related__track > li.product {
        flex: 0 0 calc((100% - 30px) / 2) !important; max-width: calc((100% - 30px) / 2) !important;
    }
}
@media (max-width: 767px) {
    #content .product .related .related__nav { display: none !important; }
    #content .product .related .woocommerce { overflow: visible !important; }
    #content .product .related ul.products.related__track {
        display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important;
        overflow: visible !important; scroll-snap-type: none !important;
    }
    #content .product .related ul.products.related__track > li.product {
        flex: none !important; max-width: none !important; width: auto !important;
    }
}

/* --- п6: чат-віджет — дві кнопки (телефон + месенджери з вибором tg/viber/whatsapp/signal). --- */
.ps-cb { gap: 12px; }
.ps-cb__quick { display: none !important; }              /* стара версія прибрана */
.ps-cb__fab--msgr {
    background: #1e85be !important;
    box-shadow: 0 8px 22px rgba(30,133,190,.42) !important;
    animation: none !important;                          /* пульсує лише телефон */
}
.ps-cb__fab--msgr:hover { background: #1670a0 !important; }
/* Чузер месенджерів — спливає над кнопками */
.ps-cb__msgr {
    position: absolute; right: 0; bottom: 84px;
    display: flex; flex-direction: column; gap: 10px;
    background: #fff; border-radius: 14px; padding: 12px;
    box-shadow: 0 16px 44px rgba(0,0,0,.22); min-width: 190px;
}
.ps-cb__msgr[hidden] { display: none; }
.ps-cb__mlink {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: 10px;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px;
    color: #1a1a1a; text-decoration: none; transition: background .15s ease;
}
.ps-cb__mlink:hover { background: #f1f3f5; color: #1a1a1a; }
.ps-cb__mico {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
    display: flex; align-items: center; justify-content: center;
}
.ps-cb__mlink--tg     .ps-cb__mico { background: #2aabee; }
.ps-cb__mlink--viber  .ps-cb__mico { background: #7360f2; }
.ps-cb__mlink--wa     .ps-cb__mico { background: #25d366; }
.ps-cb__mlink--signal .ps-cb__mico { background: #3a76f0; }

/* --- п16: модалка «Повідомити про надходження» — поля Ім'я+Телефон і кнопка. --- */
.NWA_popover-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; color: #121212; margin: 0 0 12px; }
.NWA_popover-content { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #444; line-height: 1.45; }
#NotifyWhenAvailableForm .nwa-fields { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
#NotifyWhenAvailableForm .nwa-fields input,
#NotifyWhenAvailableForm input#NWAYourName,
#NotifyWhenAvailableForm input#NWAYourEmail {
    width: 100% !important; padding: 11px 14px !important; box-sizing: border-box;
    border: 1px solid #dcdcdc !important; border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important; font-size: 14px !important; background: #fff !important;
}
#NotifyWhenAvailableForm input:focus { outline: none; border-color: #1e85be !important; }
#NotifyWhenAvailableForm #NotifyWhenAvailableSubmit.button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; padding: 13px 24px; border-radius: 100px;
    background: #1e85be; color: #fff; font-weight: 600; font-size: 15px;
    cursor: pointer; border: 0; text-decoration: none;
}
#NotifyWhenAvailableForm #NotifyWhenAvailableSubmit.button:hover { background: #1670a0; color: #fff; }
#NotifyWhenAvailableForm .NWAError { color: #d33d22; font-size: 12.5px; margin-top: 4px; }

/* --- п5: уніфікація інфо-сторінок — заголовок по центру (без шляху), блок по
       центру екрана з відступами. Не стосується Контактів (інший шаблон). --- */
.page-header--info {
    /* ТЗ фінал п5: інфо-сторінки в єдиному стилі заголовка-рамки «Інформація»
       (хаб): та сама компактна висота рамки + ті самі лінії зверху/знизу. */
    display: block; min-height: 0; padding: 20px 0;
    border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; margin-bottom: 36px;
}
.page-header--info .sober-container { width: 100%; }
.page-header--info .page-title {
    margin: 0; width: 100%; text-align: center;
    /* ТЗ фінал п5: той самий шрифт і жирність, що в заголовку «Інформація» (300) */
    font-family: 'Montserrat', sans-serif; font-weight: 300;
}
/* Бренди: заголовок між горизонтальними лініями (зверху + знизу) */
.page-header--lines { border-top: 1px solid #ececec; }
/* Контент інфо-сторінки — по центру екрана з адекватними відступами з боків */
#content .content-area.info-page {
    width: 100% !important; float: none !important;
    /* ТЗ п5/«Про нас»: ширше поле тексту + зсув праворуч — видимий правий відступ
       удвічі менший за лівий (1 : 0.5). Текст не чіпаємо, лише ширину блоку.
       margin-left:auto забирає решту → лівий вдвічі більший; −40px компенсує
       padding .sober-container, щоб співвідношення лічилось від краю екрана. */
    max-width: 1180px;
    margin-top: 0;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: max(0px, calc((100% - 1180px - 40px) / 3));
    padding: 0;
}
#content .content-area.info-page .entry-content { font-size: 15.5px; line-height: 1.65; color: #2a2a2a; }
/* Бренди — список ширший за текстову інфо-сторінку */
#content .content-area.brands-page { max-width: 1200px; }
@media (max-width: 767px) {
    .page-header--info { min-height: 92px; margin-bottom: 24px; }
    #content .content-area.info-page { padding: 0 16px; }
}

/* --- п15: чекаут — дві вертикальні колонки (ім'я/прізвище/по-батькові | телефон/мейл). --- */
.checkout-2col .checkout-names { display: flex; flex-wrap: wrap; gap: 0 24px; }
.checkout-2col .checkout-names__col { flex: 1 1 calc(50% - 12px); min-width: 220px; }
.checkout-2col .checkout-names .form-row {
    width: 100% !important; float: none !important; margin: 0 0 14px !important; clear: none !important;
}
/* === ТЗ фінал п12: статус доступності у ВЕРХНІЙ РЕГІСТР + tooltip ліве вирівнювання з абзацами === */
/* лише статус наявності (не «Час доставки») */
#content .product .summary .product-availability .availability-row > .value { text-transform: none; }
/* Bootstrap tooltip: текст ліворуч + абзаци (data-html=true з <br>) */
.tooltip-inner { text-align: left; max-width: 320px; padding: 10px 12px; line-height: 1.45; }

@media (max-width: 575px) {
    .checkout-2col .checkout-names { flex-direction: column; gap: 0; }
    .checkout-2col .checkout-names__col { flex: 1 1 100%; }
}

/* === ТЗ фінал п7: пошук на мобільній версії — показати іконки фото товарів
   (база ховала img у результатах на моб) + відступ під полем як зверху. === */
@media (max-width: 767px) {
    #search-modal .search-results .woocommerce ul li a img {
        display: block !important;
        width: 48px !important; height: 48px !important;
        margin-right: 14px !important; float: left !important;
        object-fit: contain;
    }
    /* місце нижче поля вводу = як зверху (симетричний відступ до першого результату) */
    #search-modal.found-products .search-results .woocommerce ul { padding-top: 16px !important; }
}

/* === ТЗ фінал: банери (моб) — текст НА ПОВНУ ШИРИНУ колонки в ОБОХ картках.
   Глобальний десктоп-оверрайд тримав .home-banners__card--instock текст 64%
   (фото 34% збоку) з !important → на мобілці колонка лишалась вузькою.
   Тут повертаємо 100% і ставимо фото під текстом по центру (як «У наявності»,
   так і «Гарячі ціни»). === */
@media (max-width: 767px) {
    .home-banners__card--instock .home-banners__text,
    .home-banners__card--sale .home-banners__text {
        max-width: 100% !important;
        width: 100% !important;
    }
    .home-banners__card--instock .home-banners__accent {
        width: 100% !important;
    }
}

/* =========================================================================
   Пагінація: лише по одній стрілці з кожного боку + круглі (стиль слайдера)
   ========================================================================= */
/* приховати подвійні стрілки «на першу» |< та «на останню» >| */
.woocommerce-pagination .pagination li.first,
.woocommerce-pagination .pagination li.last { display: none !important; }

/* справжній flex-рядок: цифри й стрілки-кружки строго по одній осі */
.woocommerce-pagination .pagination {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px;
    border-bottom: 0 !important;
}
/* активна сторінка: коротке підкреслення одразу під цифрою (а не біля знятої лінії) */
.woocommerce-pagination .pagination li span.current:after,
.woocommerce-pagination .pagination li span.active:after { bottom: -6px !important; width: 60% !important; left: 20% !important; }
.woocommerce-pagination .pagination > li { padding: 0 !important; margin: 0 !important; }
.woocommerce-pagination .pagination > li > a,
.woocommerce-pagination .pagination > li:not(.prev):not(.next):not(.next_page_ajax) > span {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 9px !important; line-height: 1 !important;
}
/* «Показати ще» — окремий рядок зверху (як було), на всю ширину;
   position:static — тема робить кнопку absolute, через що вона налазила на цифри */
.woocommerce-pagination .pagination > li.next_page_ajax {
    position: static !important;
    order: -1 !important; flex: 0 0 100% !important; width: 100% !important;
    display: flex !important; justify-content: center; margin: 0 0 22px !important;
}

/* круглі стрілки ‹ › як у слайдера */
.woocommerce-pagination .pagination li.prev > a,
.woocommerce-pagination .pagination li.next > a {
    width: 36px !important; height: 36px !important; min-width: 36px; padding: 0 !important;
    border: 1px solid #e3e3e3 !important; border-radius: 50% !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 0 !important; line-height: 0 !important; color: transparent !important;
    background-color: #fff !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 8px 14px !important;
    transition: border-color .15s ease, background-color .15s ease;
}
.woocommerce-pagination .pagination li.prev > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none' stroke='%23b9b9b9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 1 1 7 7 13'/%3E%3C/svg%3E") !important;
}
.woocommerce-pagination .pagination li.next > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none' stroke='%23b9b9b9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 7 7 1 13'/%3E%3C/svg%3E") !important;
}
.woocommerce-pagination .pagination li.prev > a:hover,
.woocommerce-pagination .pagination li.next > a:hover { border-color: #1e85be !important; }
.woocommerce-pagination .pagination li.prev > a:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none' stroke='%231e85be' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 1 1 7 7 13'/%3E%3C/svg%3E") !important;
}
.woocommerce-pagination .pagination li.next > a:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none' stroke='%231e85be' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 7 7 1 13'/%3E%3C/svg%3E") !important;
}

/* ===== Знижка 1-в-1 з Figma: нова ціна ліворуч, стара праворуч (закреслена), вирівняні ПО ЦЕНТРУ. Колір старої: картка=#121212, сторінка товару=сіра ===== */
#content .product .summary p.price,
#content .product .summary p.price .price_uah { align-items: center !important; gap: 10px !important; line-height: 1 !important; }
#content .product .summary p.price ins,
#content .product .summary p.price del { line-height: 1 !important; }
#content .product .summary p.price del {
    color: rgba(18,18,18,0.3) !important;
    text-decoration-line: line-through !important; text-decoration-style: solid !important;
}
.sober-product-grid .woocommerce ul.products li.product .product-info .price .old-price,
#content .product .related .product-info .price .old-price {
    color: #121212 !important;
    line-height: 1 !important;
    text-decoration-line: line-through !important;
    text-decoration-style: solid !important;
    position: static !important; inset: auto !important; /* card .old-price мав position:absolute → накладалось */
}
.sober-product-grid .woocommerce ul.products li.product .product-info .price .sale-price { line-height: 1 !important; }
.sober-product-grid .woocommerce ul.products li.product .product-info .price .price_uah,
#content .product .related .product-info .price .price_uah {
    display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; line-height: 1 !important; flex-wrap: wrap;
}
@media (max-width: 767px) {
    .sober-product-grid .woocommerce ul.products li.product .product-info .price .price_uah { gap: 10px !important; }
}