/* ============================================================
   TechHub UI — design tokens + shared components.
   One place for container width, section rhythm, radius,
   buttons and the product card, so every block matches.
   Loaded site-wide (see inc/performance.php).
   ============================================================ */

:root {
    --th-font: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --th-primary: #1C64F2;
    --th-primary-dark: #1447B8;
    --th-primary-tint: #EFF4FE;

    --th-ink: #0F1419;
    --th-muted: #667085;
    --th-bg: #FFFFFF;
    --th-soft: #F7F9FC;
    --th-border: #E4E8EF;
    --th-dark: #0E1116;

    --th-success: #12885F;

    /* Та сама ширина, що в .container самої WoodMart (1222px з відступами
       по 15px, тобто 1192px контенту). Раніше тут було 1320px, і наші
       секції виходили на 80px ширше за шапку, підвал, каталог і блог —
       краї блоків не сходились по вертикалі. */
    --th-container: 1222px;
    --th-gap: 24px;

    --th-radius: 14px;
    --th-radius-lg: 20px;
    --th-radius-pill: 999px;

    --th-section-y: 60px;

    /* Шкала заголовків.
       До введення токенів H1 існував у чотирьох розмірах залежно від
       шаблону (товар 25px, головна 30px, каталог 34px, інформаційні
       сторінки 40px), а H2 місцями майже дорівнював H1 — рівні
       переставали читатись. Тепер розміри беруться звідси.

       Сторінка товару свідомо лишається меншою (--th-h1-tight): там
       у H1 стоїть довга назва моделі, і 34px розганяли її на три
       рядки. */
    --th-h1: 34px;
    --th-h1-tight: 26px;
    --th-h2: 24px;
    --th-h3: 17px;
    --th-prose: 16.5px;
    --th-shadow: 0 1px 2px rgba(15, 20, 25, .04);
    --th-shadow-hover: 0 12px 28px rgba(15, 20, 25, .10);
}

@media screen and (max-width: 1024px) {
    :root {
        --th-section-y: 40px;
    }
}

/* One type family across the whole site. The theme ships "Cera Pro" as its
   base font while headings come from the theme's typography settings, which
   left body copy and headings on two different families. */
body,
button,
input,
select,
textarea,
optgroup,
.wd-nav a,
.woocommerce-Price-amount,
.widget,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--th-font);
}

/* ---------- Layout primitives ---------- */

.th-container {
    width: 100%;
    max-width: var(--th-container);
    margin: 0 auto;
    /* 15px, як у .container теми — інакше при однаковій max-width контент
       усе одно стояв би з іншим відступом від краю. */
    padding: 0 15px;
}

@media screen and (max-width: 600px) {
    .th-container {
        padding: 0 16px;
    }
}

.th-section {
    padding: var(--th-section-y) 0;
}

.th-section--tight {
    padding: calc(var(--th-section-y) * .55) 0;
}

/* The section that follows the hero: trimmed chrome so the first product
   lands on the opening screen. */
.th-section--lead {
    padding-top: 28px;
}

/* Pulls a section up against the one before it, so two related blocks read
   as a pair instead of being separated by a band of empty white. */
.th-section--flush {
    padding-top: 20px;
}

.th-section--lead .th-head {
    margin-bottom: 16px;
}

.th-section--lead .th-head h2 {
    font-size: clamp(20px, 1.9vw, 24px);
}

.th-section--soft {
    background: var(--th-soft);
}

/* ---------- Section heading ---------- */

.th-head {
    margin-bottom: 22px;
}

.th-head--center {
    text-align: center;
}

/* Heading + a right-aligned "Переглянути всі →" link on one line. */
.th-head--row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.th-head h2 {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--th-ink);
}

.th-head p {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--th-muted);
}

.th-head--center p {
    margin-left: auto;
    margin-right: auto;
    max-width: 620px;
}

/* ---------- Buttons (one system everywhere) ---------- */

.th-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 14px 26px;
    border-radius: var(--th-radius-pill);
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.th-btn--primary {
    background: var(--th-primary);
    color: #fff;
}

.th-btn--primary:hover,
.th-btn--primary:focus {
    background: var(--th-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

.th-btn--secondary {
    background: #fff;
    color: var(--th-ink);
    border-color: var(--th-border);
}

.th-btn--secondary:hover,
.th-btn--secondary:focus {
    border-color: var(--th-primary);
    color: var(--th-primary);
    transform: translateY(-1px);
}

.th-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--th-primary);
    text-decoration: none;
}

.th-link-cta:hover {
    color: var(--th-primary-dark);
    text-decoration: underline;
}

/* ============================================================
   Product card — used by [techhub_products]
   ============================================================ */

.th-cards {
    display: grid;
    gap: var(--th-gap);
}

.th-cards--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.th-cards--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 1100px) {
    .th-cards--cols-4,
    .th-cards--cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 860px) {
    .th-cards--cols-4,
    .th-cards--cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

.th-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
    background: #fff;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.th-card:hover {
    border-color: #D3DDF3;
    box-shadow: var(--th-shadow-hover);
    transform: translateY(-3px);
}

/* The whole card is clickable via this transparent full-bleed anchor —
   painted above the static media/body content but below .th-card__add
   (z-index 2), so the "В кошик" button stays independently clickable. */
.th-card__cover {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Fixed media area so every photo occupies the same visual block. */
.th-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    padding: 18px;
    background: var(--th-soft);
}

/* One fixed box for the photo on every card: the image always renders at
   ~82% of the photo area regardless of the source file's own dimensions,
   so a laptop shot on a tight crop and one with wide margins come out at
   the same visual scale. */
.th-card__media .th-card__img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .2s ease;
}

.th-card:hover .th-card__img {
    transform: scale(1.02);
}

.th-card__noimg {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, #EEF1F6 0 12px, #F5F7FA 12px 24px);
    border-radius: 8px;
}

@media screen and (max-width: 860px) {
    .th-card__media {
        height: 190px;
        padding: 12px;
    }
}

.th-card__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.th-card__badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: var(--th-radius-pill);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: var(--th-ink);
}

.th-card__badge--sale {
    background: #E8442E;
}

.th-card__badge--new {
    background: var(--th-success);
}

.th-card__badge--gaming {
    background: var(--th-primary);
}

.th-card__badge--sold {
    background: #8A93A3;
}

.th-card--sold .th-card__media {
    opacity: .55;
}

.th-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 16px 18px;
}

/* h3 since the redesign — reset the theme's heading margins/size. */
.th-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--th-ink);
}

/* The title link sits above .th-card__cover so its anchor text is the one
   users and crawlers hit; the cover still handles clicks everywhere else. */
.th-card__name a {
    position: relative;
    z-index: 2;
    color: inherit;
    text-decoration: none;
}

.th-card:hover .th-card__name a {
    color: var(--th-primary);
}

.th-card__specs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    /* A step darker than --th-muted — the old grey read as watermark text. */
    color: #475467;
}

.th-card__specs span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Два рядки: ціна з іконками згори, кнопка на всю ширину знизу.
   Раніше кнопка тулилась у той самий рядок, і на картці 216px підвал
   (184px) не вміщав ціну ~89px разом з трьома кнопками ~110px — тому
   кнопку доводилось тримати круглою іконкою без тексту. Окремий рядок
   дає місце на текст і зрівнює картку з каталожною, де кнопка теж
   стоїть окремим рядком. */
.th-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
}

.th-card__price {
    font-size: 20px;
    font-weight: 700;
    color: var(--th-primary);
    white-space: nowrap;
}

.th-card__price del {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--th-muted);
}

.th-card__price ins {
    text-decoration: none;
}

.th-card__price .woocommerce-Price-amount {
    white-space: nowrap;
}

/* Compare / wishlist / cart, all above .th-card__cover (z-index 1) so they
   stay clickable without triggering the card's own navigation. */
.th-card__actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    align-self: center;
}

.th-card__actions .wd-action-btn {
    margin: 0;
}

.th-card__actions .wd-action-btn > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--th-border);
    border-radius: 50%;
    background: #fff;
    color: var(--th-muted);
    transition: border-color .15s ease, color .15s ease;
}

.th-card__actions .wd-action-btn > a:hover {
    border-color: var(--th-primary);
    color: var(--th-primary);
}

.th-card__actions .wd-action-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Кнопка — справжня розмітка WooCommerce add_to_cart_button /
   ajax_add_to_cart (див. techhub_render_product_card()), тому лічильник у
   шапці та cart-fragments працюють штатно. */
.th-card__add {
    position: relative;
    z-index: 2;
    flex: 1 0 100%;
}

.th-card__add .add_to_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: 36px;
    min-height: 0;
    padding: 0 12px;
    border-radius: var(--th-radius-pill);
    background: var(--th-primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .01em;
    white-space: nowrap;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}

.th-card__add .add_to_cart_button::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2 3h2l2.4 12.4a2 2 0 002 1.6h9.2a2 2 0 002-1.6L21 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2 3h2l2.4 12.4a2 2 0 002 1.6h9.2a2 2 0 002-1.6L21 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: -webkit-mask-image .15s ease, mask-image .15s ease;
}

.th-card__add .add_to_cart_button:hover {
    background: var(--th-primary-dark);
}

.th-card__add .add_to_cart_button.loading {
    opacity: .7;
    pointer-events: none;
}

/* Підтвердження додавання: фон зеленіє, іконка візка змінюється на
   галочку.

   Селектор навмисно з .th-card спереду: тема фарбує .add_to_cart_button
   власним --btn-accented-bgcolor, який у нас налаштований на той самий
   синій, і за рівної специфічності перемагала саме вона — фон лишався
   синім, а підтвердження було невидиме. */
.th-card .th-card__add .add_to_cart_button.th-added {
    background: var(--th-success);
}

.th-card__add .add_to_cart_button.th-added::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* WooCommerce's own add-to-cart.js injects a second "Переглянути кошик"
   link next to the button after a successful AJAX add. Not part of the
   card's compact footer — the "✓ Додано" swap on the button itself is
   the only feedback the brief asks for, and this link would overflow the
   icon-only mobile-strip button in particular. */
.th-card__add .added_to_cart {
    display: none;
}

/* Hover-reveal only where hover is meaningful (mouse/trackpad). Touch
   devices show the button permanently — there's no hover to reveal it. */
@media (hover: hover) and (min-width: 861px) {
    .th-card__add {
        opacity: 0;
        transform: translateY(4px);
        transition: opacity .18s ease, transform .18s ease;
    }

    .th-card:hover .th-card__add,
    .th-card:focus-within .th-card__add {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The button is a small fixed-size circle now (see above), so price and
   button comfortably share one row even in the 2-up mobile grid — no
   stacking needed. */

.th-section__cta {
    margin-top: 36px;
    text-align: center;
}

/* ---------- Product tabs ("Ноутбуки": В наявності / Нові / Вигідні) ---------- */

.th-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.th-tab {
    padding: 7px 15px;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-pill);
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--th-muted);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.th-tab:hover {
    border-color: var(--th-primary);
    color: var(--th-primary);
}

.th-tab.is-active {
    background: var(--th-primary);
    border-color: var(--th-primary);
    color: #fff;
}

.th-tabpanel[hidden] {
    display: none;
}

@media screen and (max-width: 600px) {
    .th-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        margin-bottom: 16px;
    }

    .th-tabs::-webkit-scrollbar {
        display: none;
    }

    .th-tab {
        flex: 0 0 auto;
    }
}

/* ---------- Horizontal product strip ---------- */

.th-strip {
    position: relative;
}

.th-strip__track {
    display: flex;
    /* Every card the same height: stretch does it, but only while no card
       declares a definite height of its own (see the height:auto below). */
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    padding-bottom: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.th-strip__track::-webkit-scrollbar {
    display: none;
}

.th-strip__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.th-strip__track > .th-card {
    /* 5 wider cards in view on a 1320px container (~245px each) — fewer,
       larger products per the redesign brief, not 6 narrow ones. */
    flex: 0 0 calc((100% - 4 * 16px) / 5);
    scroll-snap-align: start;
    /* Must stay auto — a definite height would opt the item out of stretch
       and every card would size to its own content again. */
    height: auto;
}

/* Specs are exactly two rows now (see techhub_product_spec_lines) — reserve
   both so a product missing an attribute can't shorten its card. */
.th-strip .th-card__specs {
    min-height: calc(2 * 1.45em + 4px);
}

.th-strip .th-card__name {
    min-height: calc(2 * 1.35em);
}

/* A discounted card carries an extra crossed-out line. Reserve that row on
   every card so one sale price can't make a card taller than its neighbours. */
.th-strip .th-card__price {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 44px;
}

.th-strip__nav {
    position: absolute;
    /* Centred on the 180px photo area, not on the whole card — the arrows
       must not overlap the text/price zone. */
    top: 70px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--th-border);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 20, 25, .12);
    cursor: pointer;
    z-index: 2;
    transition: opacity .18s ease, border-color .18s ease;
}

.th-strip__nav::before {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--th-ink);
    border-right: 2px solid var(--th-ink);
}

.th-strip__nav--prev {
    left: -18px;
}

.th-strip__nav--prev::before {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.th-strip__nav--next {
    right: -18px;
}

.th-strip__nav--next::before {
    transform: rotate(45deg);
    margin-right: 3px;
}

.th-strip__nav:hover {
    border-color: var(--th-primary);
}

.th-strip__nav:disabled {
    opacity: 0;
    pointer-events: none;
}

.th-strip--static .th-strip__nav {
    display: none;
}

/* Cards inside the strip: the photo is the hero of the card — taller photo
   area, name and price a step up from the old compact sizing. */
.th-strip .th-card__media {
    height: 180px;
    padding: 12px;
}

.th-strip .th-card__body {
    padding: 14px 15px 16px;
}

.th-strip .th-card__name {
    font-size: 15px;
    font-weight: 700;
}

.th-strip .th-card__specs {
    font-size: 13px;
    margin-top: 8px;
}

.th-strip .th-card__price {
    font-size: 20px;
}

.th-strip .th-card__foot {
    padding-top: 12px;
}

/* Розміри кнопки у стрічці не перевизначаємо: вона займає окремий рядок
   на всю ширину підвалу і підлаштовується під будь-яку ширину картки. */

/* Not enough room for 5 full cards below 1200px: 4 full + ~25% of the next
   so the strip visibly continues. */
@media screen and (max-width: 1200px) {
    .th-strip__track > .th-card {
        flex-basis: calc((100% - 4 * 16px) / 4.25);
    }
}

@media screen and (max-width: 1024px) {
    .th-strip__track > .th-card {
        flex-basis: calc((100% - 3 * 16px) / 3.3);
    }

    .th-strip__nav {
        display: none;
    }
}

@media screen and (max-width: 760px) {
    .th-strip__track > .th-card {
        flex-basis: calc((100% - 2 * 12px) / 2.6);
    }

    .th-strip__track {
        gap: 12px;
    }
}

/* Phones: a 2-up grid instead of a horizontal scroller. Swiping hides most
   of the range behind a gesture people don't always discover; a grid shows
   four products at once and scrolls the way the rest of the page does. */
@media screen and (max-width: 600px) {
    .th-strip__track {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Grid rows size to their own tallest item, so row 2 could end up
           shorter than row 1. 1fr forces every row to the same height. */
        grid-auto-rows: 1fr;
        gap: 12px;
        overflow-x: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
    }

    .th-strip__track > .th-card {
        flex-basis: auto;
        width: auto;
        height: 100%;
        scroll-snap-align: none;
    }

    .th-strip__nav {
        display: none;
    }
}

/* ============================================================
   Header — compact bar, prominent search, single nav row.
   Structure changes live in the WoodMart header builder; this only
   handles proportions and typography.
   ============================================================ */

/* Top bar: deep navy per the render; the bright primary stays on the CTAs so
   the button pops against the bar. */
.whb-top-bar,
.whb-top-bar.whb-with-bg {
    background-color: var(--th-primary-dark) !important;
    font-size: 13px;
}

.whb-top-bar .whb-column {
    min-height: 56px;
}

/* Text logo: white "Tech", light-blue "Hub", tagline underneath. */
.th-logo {
    display: inline-block;
    line-height: 1.05;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff !important;
    text-decoration: none;
}

.th-logo span {
    color: #8FB4FF;
}

.th-logo small {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .62);
}

/* Mobile header row is white (not the navy top bar), and previously carried
   a 368×50px raster logo stretched up to ~180px wide — soft/pixelated on
   any phone above 1x pixel density. Same text logo as desktop, just dark
   (readable on white) and without the tagline (no room in that column). */
.th-logo--mobile {
    color: var(--th-ink) !important;
    font-size: 19px;
}

.th-logo--mobile span {
    color: var(--th-primary);
}

.whb-mobile-center {
    min-width: 0;
}

/* Phone: icon + number, white. */
.whb-top-bar .whb-p3aojz9x4kp2our6hw2k .wd-nav > li > a::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 7px;
    vertical-align: -2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.4 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.9 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.4 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.9 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.whb-top-bar .whb-p3aojz9x4kp2our6hw2k .wd-nav > li > a {
    font-size: 15px;
    font-weight: 600;
}

.whb-top-bar,
.whb-top-bar a,
.whb-top-bar .wd-nav > li > a,
.whb-top-bar .wd-tools-icon,
.whb-top-bar .social-icons a {
    color: #fff !important;
}

.whb-top-bar .wd-nav > li > a:hover,
.whb-top-bar a:hover {
    color: rgba(255, 255, 255, .78) !important;
}

/* Nav: one line, никогда not two. */
.whb-top-bar .whb-col-center {
    min-width: 0;
}

.whb-top-bar .wd-nav {
    flex-wrap: nowrap;
}

.whb-top-bar .wd-nav > li > a {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .whb-top-bar .wd-nav > li > a {
        font-size: 12.5px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* «Перейти до каталогу» — the categories dropdown styled as the primary CTA. */
.whb-general-header .wd-header-cats .menu-opener {
    height: 48px;
    padding: 0 22px;
    border-radius: var(--th-radius);
    background: var(--th-primary) !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    border: none;
}

.whb-general-header .wd-header-cats .menu-opener:hover {
    background: var(--th-primary-dark) !important;
}

.whb-general-header .wd-header-cats .menu-opener > span,
.whb-general-header .wd-header-cats .menu-opener .menu-open-label {
    color: #fff !important;
}

/* ---------- Каталог dropdown: icon + label rows (no chevrons — the tree is
   flat, an arrow would promise subcategories that don't exist) ---------- */

.whb-general-header .wd-dropdown-cats {
    min-width: 380px;
    border-radius: var(--th-radius);
    box-shadow: 0 16px 40px rgba(15, 20, 25, .16);
    overflow: hidden;
}

.whb-general-header .wd-dropdown-cats #menu-categories > li > a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--th-ink);
}

.whb-general-header .wd-dropdown-cats #menu-categories > li + li > a {
    border-top: 1px solid var(--th-border);
}

.whb-general-header .wd-dropdown-cats #menu-categories > li > a:hover {
    background: var(--th-soft);
    color: var(--th-primary);
}

/* Categories carry legacy PNG thumbnails (term images) — hide them here so
   they don't double up with the outline icons. */
.whb-general-header .wd-dropdown-cats #menu-categories .wd-nav-img {
    display: none;
}

/* Outline icons, one per row, same stroke style as the rest of the site. */
.whb-general-header .wd-dropdown-cats #menu-categories > li > a::before {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background: currentColor;
}

/* 1 — Ноутбуки: laptop */
.whb-general-header .wd-dropdown-cats #menu-categories > li:nth-child(1) > a::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 2 — Комп'ютери: monitor */
.whb-general-header .wd-dropdown-cats #menu-categories > li:nth-child(2) > a::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1.5'/%3E%3Cpath d='M9 20h6M12 16v4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1.5'/%3E%3Cpath d='M9 20h6M12 16v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 3 — Комплектуючі для ноутбуків: RAM stick */
.whb-general-header .wd-dropdown-cats #menu-categories > li:nth-child(3) > a::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1'/%3E%3Cpath d='M6 16v2M11 16v2M16 16v2M20 16v2M7 11v2M12 11v2M17 11v2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1'/%3E%3Cpath d='M6 16v2M11 16v2M16 16v2M20 16v2M7 11v2M12 11v2M17 11v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 4 — Комплектуючі для комп'ютерів: fan in a frame */
.whb-general-header .wd-dropdown-cats #menu-categories > li:nth-child(4) > a::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 6.5c2 0 3 1.2 3 2.6M17.5 12c0 2-1.2 3-2.6 3M12 17.5c-2 0-3-1.2-3-2.6M6.5 12c0-2 1.2-3 2.6-3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 6.5c2 0 3 1.2 3 2.6M17.5 12c0 2-1.2 3-2.6 3M12 17.5c-2 0-3-1.2-3-2.6M6.5 12c0-2 1.2-3 2.6-3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 5 — Ремонт та обслуговування: wrench */
.whb-general-header .wd-dropdown-cats #menu-categories > li:nth-child(5) > a::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.whb-top-bar .wd-nav > li > a::after,
.whb-top-bar .wd-nav > li > a::before {
    display: none;
}

.whb-top-bar .wd-dropdown,
.whb-top-bar .wd-dropdown-menu {
    color: var(--th-ink);
}

.whb-top-bar .wd-dropdown a,
.whb-top-bar .wd-dropdown-menu a {
    color: var(--th-ink) !important;
}

/* Sticky header.
   The theme's sticky is JS-driven and clones the row; that clone never
   materialised here and the header simply scrolled away. Native CSS sticky
   pins the real element instead — it cannot re-measure, re-flow or overlap,
   which is exactly the class of bug reported. The whole header is pinned with
   a negative offset equal to the top bar, so the top bar scrolls out of view
   and the main row parks at the top. */
.wd-header-wrapper,
.whb-header {
    position: -webkit-sticky;
    position: sticky;
    top: -56px; /* height of the top bar — it scrolls out, the main row pins */
    z-index: 400;
    background: #fff;
}

.admin-bar .wd-header-wrapper,
.admin-bar .whb-header {
    top: -12px;
}

/* Fixed heights so nothing shifts between the pinned and unpinned states. */
.whb-general-header .whb-column {
    min-height: 80px;
}

/* The header button matches the render: solid primary, roomy, burger icon. */
.whb-general-header .whb-thcatbtn a.btn,
.whb-general-header .whb-thcatbtn .btn {
    background-color: var(--th-primary) !important;
    color: #fff !important;
    border-radius: var(--th-radius);
    padding: 14px 26px;
    font-size: 15px;
    font-weight: 600;
}

.whb-general-header .whb-thcatbtn .btn:hover {
    background-color: var(--th-primary-dark) !important;
}

.whb-general-header .whb-thcatbtn .btn::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 12px;
    margin-right: 10px;
    vertical-align: -1px;
    background:
        linear-gradient(#fff, #fff) 0 0 / 100% 2px no-repeat,
        linear-gradient(#fff, #fff) 0 5px / 100% 2px no-repeat,
        linear-gradient(#fff, #fff) 0 10px / 100% 2px no-repeat;
}

/* Logo left, search centre (prominent), tools right. */
@media screen and (min-width: 1025px) {
    .whb-general-header .whb-col-left {
        flex: 0 0 auto;
    }

    .whb-general-header .whb-col-center {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 28px;
    }

    .whb-general-header .whb-col-right {
        flex: 0 0 auto;
        gap: 2px;
    }

    .whb-general-header .site-logo img {
        max-width: 170px;
    }

    .whb-general-header .wd-search-form {
        width: 100%;
    }
}

@media screen and (max-width: 1024px) {
    .whb-general-header .whb-column {
        min-height: 62px;
    }
}

/* ---------- One button system across header and content (§5) ---------- */

.whb-header .wd-tools-element .wd-tools-icon,
.whb-header .wd-nav-main > li > a {
    color: var(--th-ink);
}

.whb-header .wd-nav-main > li > a:hover,
.whb-header .wd-nav-main > li.current-menu-item > a {
    color: var(--th-primary);
}

/* Theme buttons (add-to-cart, forms, WooCommerce) inherit the site's primary
   colour instead of the theme default, so nothing looks like a second brand. */
.wd-buttons .wd-tools-icon,
.btn.btn-color-primary,
.button.alt,
.woocommerce .button.alt,
.wd-btn-primary,
input[type="submit"].button,
button.single_add_to_cart_button {
    background-color: var(--th-primary);
    border-radius: var(--th-radius-pill);
}

.btn.btn-color-primary:hover,
.button.alt:hover,
.woocommerce .button.alt:hover,
button.single_add_to_cart_button:hover {
    background-color: var(--th-primary-dark);
}

/* Search opened from the header icon. */
.whb-header .wd-search-form input[type="text"],
.whb-header .wd-search-form input[type="search"],
.whb-header .searchform input[type="text"],
.whb-header .searchform input[type="search"] {
    height: 48px;
    border-radius: var(--th-radius-pill);
    border: 1px solid var(--th-border);
    background: var(--th-soft);
    font-size: 14.5px;
    padding-left: 18px;
}

.whb-header .searchform input[type="text"]:focus,
.whb-header .searchform input[type="search"]:focus {
    border-color: var(--th-primary);
    background: #fff;
}

/* ============================================================
   Footer
   ============================================================ */

/* Довідкова смуга, а не секція: висота футера свідомо тримається мінімальною.
   Іконки — CSS-маски на порожніх елементах, бо редактор WordPress вирізає
   inline-SVG у користувачів без unfiltered_html, і після кожного
   збереження блоку графіка зникала б. */
.th-footer {
    padding: 12px 0 10px;
}

/* Full-width rows, one per group. Side-by-side columns were too narrow and
   the link lists wrapped into four or five lines each — that, not padding,
   was the height. Each row now fits on one line. */
.th-footer__grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Бренд | три колонки посилань | траст-блок. Остання колонка вужча за
   решту: у ній три короткі рядки, а не список. */
.th-footer--cols .th-footer__grid {
    display: grid;
    /* Три рівні колонки й одна ширша. «Покупцям» потребує більше місця
       під два стовпці: у 260px назва «Ремонт і обслуговування» рветься
       на три рядки. Решта рівні між собою, тому ряд читається як
       впорядкований, а не як набір випадкових ширин. */
    grid-template-columns: 1fr 1fr 1.4fr 1fr;
    gap: 20px;
    /* stretch, а не start: інакше лінія-роздільник трасту має висоту
       власного тексту (73px) і виглядає обрубаною поруч із сусідньою
       колонкою на 96px. Вміст колонок усе одно притиснутий догори. */
    align-items: stretch;
}

.th-footer--cols {
    padding: 18px 0 0;
}

.th-footer--cols .th-footer__brand {
    display: block;
}

.th-footer--cols .th-footer__logo {
    font-size: 21px;
}

.th-footer--cols .th-footer__brand p {
    margin: 6px 0 0 !important;
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

.th-footer--cols .th-footer__col {
    display: block;
}

.th-footer--cols .th-footer__col h3 {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px !important;
    font-size: 13.5px !important;
}

/* ── Іконки ──────────────────────────────────────────────────────────────
   Спільна заготовка: колір бере з тексту, тому одна й та сама механіка
   працює і в заголовку колонки, і в траст-рядку, і в кнопці соцмережі. */
.th-footer--cols .th-footer__col h3::before,
.th-footer .th-ft__item::before,
.th-footer .th-fs::before {
    content: "";
    display: block;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.th-footer--cols .th-footer__col h3::before {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    opacity: .85;
}

/* Класи, а не :nth-of-type: порядок колонок у блоці може змінитись, і
   тоді нумерація мовчки переставила б іконки. */
.th-footer--cols .th-footer__col--catalog h3::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

.th-footer--cols .th-footer__col--help h3::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M12 3l7 3v6c0 4.6-3.2 7.9-7 9-3.8-1.1-7-4.4-7-9V6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M12 3l7 3v6c0 4.6-3.2 7.9-7 9-3.8-1.1-7-4.4-7-9V6z'/%3E%3C/svg%3E");
}

.th-footer--cols .th-footer__col--contact h3::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.4 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.9 2.2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.4 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.9 2.2z'/%3E%3C/svg%3E");
}

.th-footer--cols .th-footer__col ul {
    display: block;
}

/* «Покупцям» — сім пунктів, і саме вони раніше задавали висоту всієї
   сітки. Два стовпці роблять колонку вдвічі нижчою, не викидаючи
   жодного посилання. break-inside не дає пункту розірватись між
   стовпцями, якщо назва переноситься на два рядки. */
.th-footer--cols .th-footer__col--help ul,
.th-footer--cols .th-footer__col--catalog ul {
    column-count: 2;
    column-gap: 20px;
}

.th-footer--cols .th-footer__col--help li,
.th-footer--cols .th-footer__col--catalog li {
    break-inside: avoid;
}

.th-footer--cols .th-footer__col li {
    display: block;
    margin: 0 0 5px !important;
    line-height: 1.4 !important;
}

/* ── Траст-блок ──────────────────────────────────────────────────────────
   Відділений лінією зліва, а не рамкою: це продовження ряду колонок,
   а не окрема картка. */
.th-footer__trust {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.wd-footer .th-footer .th-ft__item {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .82);
}

.th-footer .th-ft__item::before {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    opacity: .7;
}

.th-footer .th-ft__item--shield::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.5-3.2 8.2-7.5 9.5-4.3-1.3-7.5-5-7.5-9.5V6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.5-3.2 8.2-7.5 9.5-4.3-1.3-7.5-5-7.5-9.5V6z'/%3E%3C/svg%3E");
}

.th-footer .th-ft__item--card::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6 14.5h4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6 14.5h4'/%3E%3C/svg%3E");
}

.th-footer .th-ft__item--return::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7'/%3E%3Cpath d='M4 3.5V9h5.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7'/%3E%3Cpath d='M4 3.5V9h5.5'/%3E%3C/svg%3E");
}

/* ── Нижній рядок ────────────────────────────────────────────────────────
   Copyright більше не окрема колонка сітки: тонкий рядок на всю ширину
   економить і вертикальне місце, і одну колонку вгорі. */
.th-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 10px 0 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.wd-footer .th-footer .th-footer__copy {
    margin: 0 !important;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
    text-align: left;
}

.th-footer .th-footer__social {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
}

.wd-footer .th-footer .th-fs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .6);
    transition: color .15s, background-color .15s;
}

.wd-footer .th-footer .th-fs:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.th-footer .th-fs::before {
    width: 18px;
    height: 18px;
}

/* «Контакти» стоять перед іконками месенджерів: текстом, бо на відміну
   від Telegram та Instagram це не впізнаваний за іконкою бренд. */
.wd-footer .th-footer .th-footer__contacts {
    margin-right: 6px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
    transition: color .15s;
}

.wd-footer .th-footer .th-footer__contacts:hover {
    color: #fff;
}

/* Роздільник перед поштою — як у макеті: месенджери окремо від пошти. */
.th-footer .th-fs--mail {
    position: relative;
    margin-left: 8px;
}

.th-footer .th-fs--mail::after {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    width: 1px;
    height: 16px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .14);
}

.th-footer .th-fs--tg::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M21.5 3.5L2.5 10.8l5.6 2.1 2.1 5.6z'/%3E%3Cpath d='M8.1 12.9l13.4-9.4-9.4 13.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M21.5 3.5L2.5 10.8l5.6 2.1 2.1 5.6z'/%3E%3Cpath d='M8.1 12.9l13.4-9.4-9.4 13.4'/%3E%3C/svg%3E");
}

.th-footer .th-fs--ig::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
}

.th-footer .th-fs--mail::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

/* Copyright lives inside the block now — the theme's separate bar goes. */
.wd-footer .wd-copyrights {
    display: none;
}

/* ── Планшет ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .th-footer--cols .th-footer__grid {
        grid-template-columns: .7fr 1fr 1.45fr;
        gap: 16px 20px;
    }

    /* Успадкований від старої розкладки grid-column: 1 / -1 віддавав
       бренду цілий ряд заради двох рядків тексту. */
    .th-footer--cols .th-footer__brand {
        grid-column: auto;
    }

    /* Траст стає горизонтальним рядком на всю ширину: вертикальна лінія
       зліва в другому ряду сітки виглядала б випадковою. */
    .th-footer__trust {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 26px;
        padding: 14px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
}

/* ── Мобільний ───────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .th-footer--cols {
        padding-top: 18px;
    }

    .th-footer--cols .th-footer__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .th-footer--cols .th-footer__brand {
        padding-bottom: 10px;
    }

    /* Групи посилань згортаються в акордеон (footer.js). Кожна — рядок
       з роздільником, щоб зона натискання читалась як окремий пункт. */
    .th-footer--cols .th-footer__col {
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .th-footer--cols .th-footer__col h3 {
        position: relative;
        margin: 0 !important;
        padding: 14px 30px 14px 0;
        font-size: 14px !important;
    }

    .th-footer--cols .th-footer__col.th-acc h3 {
        cursor: pointer;
    }

    /* Шеврон. Повертається, коли групу розгорнуто. */
    .th-footer--cols .th-footer__col.th-acc h3::after {
        content: "";
        position: absolute;
        right: 4px;
        top: 50%;
        width: 9px;
        height: 9px;
        margin-top: -6px;
        border-right: 1.6px solid rgba(255, 255, 255, .5);
        border-bottom: 1.6px solid rgba(255, 255, 255, .5);
        transform: rotate(45deg);
        transition: transform .18s;
    }

    .th-footer--cols .th-footer__col.th-acc.is-open h3::after {
        margin-top: -2px;
        transform: rotate(-135deg);
    }

    /* Ховаємо тільки коли скрипт справді ввімкнув акордеон: без JS
       посилання мають лишатись доступними. */
    .th-footer--cols .th-footer__col.th-acc .th-footer__col-body {
        display: none;
    }

    .th-footer--cols .th-footer__col.th-acc.is-open .th-footer__col-body {
        display: block;
        padding-bottom: 10px;
    }

    /* Два стовпці на 375px дали б колонки по 160px — назви на кшталт
       «Ремонт і обслуговування» переносились би на три рядки. */
    .th-footer--cols .th-footer__col--help ul,
    .th-footer--cols .th-footer__col--catalog ul {
        column-count: 1;
    }

    /* Траст на мобільному — службовий підпис, а не блок. Три рядки з
       іконками займали 100px: чверть усього футера заради того, що
       покупець уже бачив на картці кожного товару. Тепер це один
       приглушений рядок, який переноситься на два. */
    /* display: block, а не flex-рядок: у flex кожен пункт і його
       роздільник стають окремими елементами, і «·» зависає в кінці
       рядка перед переносом. Звичайний текстовий потік переносить
       фразу так, як переносить будь-який абзац. */
    .th-footer__trust {
        display: block;
        padding: 11px 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .1);
        line-height: 1.45;
    }

    .wd-footer .th-footer .th-ft__item {
        display: inline;
        font-size: 12px;
        color: rgba(255, 255, 255, .5);
    }

    /* Іконку ховаємо, а роздільник вішаємо на ::after — ::before уже
       зайнятий маскою іконки. */
    .th-footer .th-ft__item::before {
        display: none;
    }

    .th-footer .th-ft__item:not(:last-child)::after {
        content: "·";
        margin: 0 7px;
        color: rgba(255, 255, 255, .25);
    }

    /* Copyright і соцмережі стають одне під одним по центру. */
    .th-footer__bottom {
        flex-direction: column;
        gap: 10px;
        margin-top: 0;
        padding: 12px 0 14px;
    }

    .wd-footer .th-footer .th-footer__copy {
        text-align: center;
    }

    .th-footer .th-footer__social {
        gap: 4px;
    }
}

/* Захист від wpautop. Блок зберігається в базі без зайвих переносів, але
   варто комусь відкрити його в редакторі й натиснути «Оновити» — фільтр
   поверне <p></p> між елементами. Порожній абзац у flex-рядку стає третьою
   дитиною і ламає притискання соцмереж до правого краю, тому ховаємо його
   скрізь у футері, а не тільки в контейнері. */
.th-footer p:empty,
.th-footer__grid > p:empty,
.th-footer__bottom > p:empty {
    display: none !important;
}

/* Так само з <br>: одиночний перенос між іконками вишиковував їх у
   стовпчик замість рядка. */
.th-footer__social br,
.th-footer__trust br {
    display: none;
}

/* wpautop leaves margins on the block's children; they add up here. */
.th-footer__grid > *,
.th-footer .th-container > p:empty {
    margin: 0 !important;
}

.th-footer .th-container > p:empty {
    display: none;
}

.th-footer__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
}

.th-footer__brand p {
    margin: 0 !important;
    flex: 1 1 auto;
}

.th-footer__social {
    margin-top: 0 !important;
}

/* Centered, not baseline: baseline alignment let wrapped items sit at
   different vertical offsets, which read as clutter. */
.th-footer__col {
    display: flex;
    align-items: center;
    gap: 14px;
}

.th-footer__col h3 {
    flex: 0 0 92px;
    margin-bottom: 0 !important;
    white-space: nowrap;
}

.wd-footer .th-footer__col h3 a {
    color: #FFFFFF;
    text-decoration: none;
}

/* Items were drifting 2–9px vertically inside one line (mixed font sizes and
   list-item baselines). Same size, same line-height, centred flex items. */
.th-footer__col ul {
    align-items: center;
}

.th-footer__col li {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 13px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.th-footer__col li a {
    font-size: 13px !important;
    line-height: 1 !important;
}

.wd-footer .th-footer__muted {
    color: rgba(255, 255, 255, .45);
}

.th-footer__logo {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--th-ink);
}

/* Tightened type/spacing throughout the footer to hit the compact height. */
.th-footer__brand p {
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.th-footer__social {
    margin-top: 2px !important;
    gap: 6px !important;
}

.th-footer__social a {
    padding: 4px 10px !important;
    font-size: 12px !important;
}

.th-footer__col h3 {
    margin-bottom: 8px !important;
    font-size: 13px !important;
}

.th-footer__col li + li {
    margin-top: 4px !important;
}

.th-footer__col a {
    font-size: 13px !important;
}

/* Sits in the links column rather than starting a new row. */
.th-footer__hours {
    grid-column: 2;
    margin-top: 2px !important;
    font-size: 12px !important;
}

/* Two lines is enough here; the full pitch lives on the About page. */
.th-footer__brand p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The theme renders the footer on a near-black background, so the block's
   default near-black ink was invisible there (measured 1.07:1). Re-map the
   footer palette to light-on-dark; scoped so the block still works if it is
   ever placed on a light background. */
.wd-footer .th-footer__logo,
.wd-footer .th-footer__col h3 {
    color: #FFFFFF;
}

.wd-footer .th-footer__brand p,
.wd-footer .th-footer__hours {
    color: rgba(255, 255, 255, .66);
}

.wd-footer .th-footer__col a {
    color: rgba(255, 255, 255, .74);
}

.wd-footer .th-footer__col a:hover {
    color: #FFFFFF;
}

.wd-footer .th-footer__social a {
    color: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .24);
}

.wd-footer .th-footer__social a:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .06);
}

.th-footer__brand p {
    margin: 12px 0 0;
    max-width: 340px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--th-muted);
}

.th-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.th-footer__social a {
    padding: 7px 14px;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--th-ink);
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease;
}

.th-footer__social a:hover {
    border-color: var(--th-primary);
    color: var(--th-primary);
}

.th-footer__col h3 {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--th-ink);
}

.th-footer__col ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.th-footer__col li + li {
    margin-top: 0;
}

.th-footer__col a {
    font-size: 14px;
    color: var(--th-muted);
    text-decoration: none;
    transition: color .18s ease;
}

.th-footer__col a:hover {
    color: var(--th-primary);
}

.th-footer__hours {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--th-muted);
}

.th-copy-pay img {
    max-width: 100%;
    height: auto;
}

/* WoodMart wraps the block in .main-footer and adds its own generous padding
   plus a copyright bar; both have to shrink for the footer to actually be
   compact. */
.wd-footer .main-footer {
    padding-top: 0;
    padding-bottom: 0;
}

.wd-footer .wd-copyrights {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12.5px;
}

.wd-footer .wd-copyrights .container {
    min-height: 0;
}

.wd-footer .wd-copyrights small {
    font-size: 12.5px;
}

/* ============================================================
   Homepage sections
   ============================================================ */

/* ---------- Hero ---------- */

.th-hero {
    background: linear-gradient(180deg, #F4F7FE 0%, #FBFCFE 60%, #fff 100%);
    border-bottom: 1px solid var(--th-border);
}

/* Compact by design: the job of the first screen is to get a visitor to the
   first product, not to fill the viewport with a headline. */
.th-hero__grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    align-items: center;
    gap: 32px;
    padding: 18px 0;
}

.th-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--th-primary);
}

.th-hero h1 {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--th-ink);
}

.th-hero__lead {
    margin: 8px 0 0;
    max-width: 460px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--th-muted);
}

.th-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.th-hero__ticks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

/* Every claim carries the same weight — one of them used to render smaller
   and read as an afterthought. margin:0 overrides a sitewide li{margin-bottom}
   reset that only skipped the last child — left the other two 10px taller
   (their own box grew to include the margin) than the last one, so the row
   read as visibly uneven. */
.th-hero__ticks li {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--th-ink);
}

.th-hero__ticks li::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--th-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Visual slot — SVG placeholder, or the supplied hero photo. */
.th-hero__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.th-hero__art svg {
    width: 100%;
    height: auto;
    max-height: 420px;
}

/* The photo is a wide banner with empty space on its left, so crop to the
   right side — that fills the column with the products at a usable size. */
.th-hero__art--photo {
    border-radius: var(--th-radius-lg);
    overflow: hidden;
}

.th-hero__art--photo img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: 82% center;
}

@media screen and (max-width: 1024px) {
    .th-hero__art--photo img {
        height: 190px;
        object-position: 74% center;
    }
}

/* Mobile: the hero is hidden entirely (see the display:none rule further
   down) so this height no longer matters, but kept for the brief instant
   before CSS applies / for no-JS edge cases. */
@media screen and (max-width: 600px) {
    .th-hero__art--photo img {
        height: 150px;
    }
}

/* ---------- Scenario chips (compact replacement for the picker cards) ---------- */

.th-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

.th-chips__label {
    margin-right: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--th-muted);
}

.th-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-pill);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--th-ink);
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease;
}

.th-chip:hover {
    border-color: var(--th-primary);
    color: var(--th-primary);
}

.th-chip__n {
    font-size: 12px;
    font-weight: 600;
    color: var(--th-muted);
}

.th-chip:hover .th-chip__n {
    color: var(--th-primary);
}

.th-chip--all {
    color: var(--th-primary);
    border-color: transparent;
    background: transparent;
}

@media screen and (max-width: 600px) {
    .th-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .th-chips::-webkit-scrollbar {
        display: none;
    }

    .th-chip {
        flex: 0 0 auto;
    }
}

.th-hero__chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--th-radius);
    background: #fff;
    border: 1px solid var(--th-border);
    box-shadow: 0 8px 24px rgba(15, 20, 25, .10);
    font-size: 13px;
    font-weight: 600;
    color: var(--th-ink);
    white-space: nowrap;
}

.th-hero__chip--tl {
    top: 6%;
    left: -4%;
}

.th-hero__chip--br {
    bottom: 8%;
    right: -2%;
}

.th-hero__chip b {
    color: var(--th-primary);
}

@media screen and (max-width: 1024px) {
    .th-hero__grid {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: 0;
        padding: 28px 0 32px;
        text-align: center;
    }

    .th-hero__lead {
        margin-left: auto;
        margin-right: auto;
    }

    .th-hero__actions,
    .th-hero__ticks {
        justify-content: center;
    }

    .th-hero__art {
        order: 2;
    }

    .th-hero__chip {
        display: none;
    }
}

/* Mobile: the hero banner adds a full screen of scrolling before the first
   product — the brief's explicit ask is to skip straight from the header
   to the product tabs on phones. The H1 stays in the page (screen-reader
   only, zero visual height) so the page keeps exactly one real H1; every
   other hero element is fully removed from layout. */
@media screen and (max-width: 767px) {
    .th-hero {
        border-bottom: 0;
        background: none;
    }

    .th-hero__grid {
        padding: 0;
        gap: 0;
        min-height: 0;
    }

    .th-hero__art,
    .th-hero__lead,
    .th-hero__actions,
    .th-hero__ticks {
        display: none;
    }

    .th-hero h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ---------- Trust bar ---------- */

.th-trustbar {
    padding: 30px 0;
    border-bottom: 1px solid var(--th-border);
}

.th-trustbar__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
}

.th-trustbar__item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.th-trustbar__ico {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: var(--th-primary);
}

.th-trustbar__ico svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.th-trustbar__t {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--th-ink);
}

.th-trustbar__d {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--th-muted);
}

@media screen and (max-width: 1024px) {
    .th-trustbar__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .th-trustbar__grid > :last-child {
        grid-column: 1 / -1;
    }
}

/* ---------- Scenario picker ---------- */

/* Scenario cards hide themselves when out of stock — the grid adapts. */
.th-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.th-pick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 11px 12px 9px;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
    background: #fff;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.th-pick:hover {
    border-color: var(--th-primary);
    box-shadow: var(--th-shadow-hover);
    transform: translateY(-3px);
}

.th-pick__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin-bottom: 7px;
    border-radius: 8px;
    background: var(--th-primary-tint);
    color: var(--th-primary);
}

.th-pick__ico svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.th-pick__t {
    font-size: 14px;
    font-weight: 600;
    color: var(--th-ink);
}

.th-pick__d {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--th-muted);
}

.th-pick__meta {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--th-primary-dark);
}

/* The card itself is the link — a second "Дивитися" line just added height. */
.th-pick__go {
    display: none;
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .th-picker__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile: horizontal swipe with the next card peeking in, instead of a
   cramped 2-column grid — makes it obvious the row scrolls. */
@media screen and (max-width: 767px) {
    .th-picker__grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .th-picker__grid::-webkit-scrollbar {
        display: none;
    }

    .th-pick {
        flex: 0 0 60%;
        scroll-snap-align: start;
    }
}

/* ---------- Brands ---------- */

/* Brand cards come and go with stock, so the grid adapts to their number. */
.th-brands__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.th-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 66px;
    padding: 10px;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    color: var(--th-ink);
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.th-brand__count {
    padding: 2px 9px;
    border-radius: var(--th-radius-pill);
    background: var(--th-soft);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--th-muted);
}

.th-brand--all {
    color: var(--th-primary);
}

.th-brand:hover {
    border-color: var(--th-primary);
    color: var(--th-primary);
    transform: translateY(-2px);
}

@media screen and (max-width: 1024px) {
    .th-brands__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media screen and (max-width: 600px) {
    .th-brands__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Why used (light cards) ---------- */

.th-why {
    background: var(--th-soft);
}

.th-why__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.th-why__card {
    padding: 28px 26px;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-lg);
    background: #fff;
}

.th-why__num {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--th-ink);
}

.th-why__card h3 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--th-ink);
}

.th-why__card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--th-muted);
}

@media screen and (max-width: 900px) {
    .th-why__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .th-why__card {
        padding: 22px 20px;
    }
}

/* ---------- Dark "why used" (legacy, kept for other pages) ---------- */

.th-dark {
    padding: 72px 0;
    background: var(--th-dark);
    color: #fff;
}

.th-dark h2 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: #fff;
}

.th-dark__sub {
    margin: 14px 0 0;
    max-width: 680px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .60);
}

.th-dark__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-top: 52px;
}

.th-dark__num {
    display: block;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--th-primary);
}

.th-dark__grid h3 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.th-dark__grid p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .58);
}

/* Warranty facts, merged into the dark block so the guarantee is stated once
   here instead of in a separate section further down. */
.th-dark__warranty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 40px;
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.th-dark__warranty h3 {
    margin: 0;
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.th-warranty__facts--dark {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    list-style: none;
}

.th-warranty__facts--dark b {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

.th-warranty__facts--dark span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: rgba(255, 255, 255, .58);
}

.th-dark__cta {
    flex: 0 0 auto;
}

@media screen and (max-width: 900px) {
    .th-dark {
        padding: 52px 0;
    }

    .th-dark__grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 36px;
    }

    .th-dark__warranty {
        margin-top: 34px;
        padding-top: 26px;
        gap: 18px;
    }

    .th-warranty__facts--dark {
        gap: 18px;
    }

    .th-dark__cta .th-btn {
        width: 100%;
    }
}

/* ---------- Warranty link ----------
   Was a full "Купуйте спокійніше" strip repeating facts already covered by
   the hero/trust bar/whyused block above it — now just the one link the
   brief asks to keep. */

.th-warranty-link {
    padding: 4px 0 var(--th-section-y);
    text-align: center;
}

/* ---------- SEO landing pages ---------- */

.th-landing__head {
    max-width: 780px;
}

.th-landing__head h1 {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--th-ink);
}

.th-landing__stock {
    display: inline-block;
    margin: 14px 0 0;
    padding: 6px 14px;
    border-radius: var(--th-radius-pill);
    background: var(--th-primary-tint);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--th-primary-dark);
}

.th-landing__head p {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--th-muted);
}

.th-landing__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.th-landing__point {
    padding: 24px;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
    background: #fff;
}

.th-landing__point h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: var(--th-ink);
}

.th-landing__point p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--th-muted);
}

@media screen and (max-width: 900px) {
    .th-landing__points {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ---------- Reviews ---------- */

.th-reviews {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.th-review {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 22px 22px 20px;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
    background: #fff;
}

.th-review__stars {
    margin-bottom: 12px;
    font-size: 15px;
    letter-spacing: 2px;
    color: #F0A020;
}

.th-review blockquote {
    margin: 0;
    flex: 1 1 auto;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--th-ink);
}

.th-review figcaption {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--th-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.th-review__author {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--th-ink);
}

.th-review__item {
    font-size: 13px;
    color: var(--th-primary);
}

.th-review__meta {
    font-size: 12.5px;
    color: var(--th-muted);
}

.th-reviews__rating {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px !important;
    font-size: 15px;
    color: var(--th-muted);
}

.th-reviews__stars {
    letter-spacing: 2px;
    color: #F0A020;
}

.th-reviews__rating strong {
    font-size: 17px;
    color: var(--th-ink);
}

.th-reviews__attr {
    margin: 18px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--th-muted);
}

@media screen and (max-width: 1024px) {
    .th-reviews {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 700px) {
    .th-reviews {
        grid-template-columns: 1fr;
    }
}

/* ---------- FAQ ---------- */

.th-faq__inner {
    margin: 0 auto;
}

/* Questions flow in columns; answers stay click-to-open accordions.
   CSS columns (not grid) so an opened answer stretches only its own column. */
.th-faq__cols {
    columns: 3;
    column-gap: 24px;
}

.th-faq__cols .th-faq__item {
    break-inside: avoid;
    margin-bottom: 2px;
}

@media screen and (max-width: 1100px) {
    .th-faq__cols {
        columns: 2;
    }
}

@media screen and (max-width: 700px) {
    .th-faq__cols {
        columns: 1;
    }
}

.th-faq__item {
    border-bottom: 1px solid var(--th-border);
}

.th-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 2px;
    list-style: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--th-ink);
}

.th-faq__item summary::-webkit-details-marker {
    display: none;
}

.th-faq__item summary::after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C64F2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s ease;
}

.th-faq__item[open] summary::after {
    transform: rotate(45deg);
}

.th-faq__a {
    padding: 0 2px 20px;
    max-width: 780px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--th-muted);
}

.th-faq__a a {
    color: var(--th-primary);
}

/* ============================================================
   Category archive pages (Ноутбуки / Комп'ютери / обидві
   Комплектуючі / Ремонт та обслуговування) — scoped to body.th-cat-page
   so /shop/, search and any other archive stay untouched.
   ============================================================ */

/* ---------- Banner ---------- */

.th-cat-banner {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.th-cat-banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.th-cat-banner__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .62) 40%, rgba(255, 255, 255, 0) 68%);
}

.th-cat-banner__title {
    margin: 0;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--th-ink);
}

.th-cat-banner__subcats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.th-cat-banner__subcats a {
    display: inline-block;
    padding: 5px 14px;
    border-radius: var(--th-radius-pill);
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--th-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--th-ink);
}

@media screen and (max-width: 1024px) {
    .th-cat-banner {
        height: 150px;
    }
}

@media screen and (max-width: 600px) {
    .th-cat-banner {
        height: 110px;
    }

    .th-cat-banner__overlay {
        background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .7) 55%, rgba(255, 255, 255, .15) 100%);
    }
}

/* ---------- Trust strip ---------- */

.th-cat-trust {
    padding: 14px 0;
    border-bottom: 1px solid var(--th-border);
}

.th-cat-trust__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.th-cat-trust__item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--th-ink);
}

.th-cat-trust__ico {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--th-primary);
}

.th-cat-trust__ico svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media screen and (max-width: 700px) {
    .th-cat-trust__row {
        justify-content: flex-start;
        gap: 14px 22px;
    }
}

/* ---------- Filter sidebar: compact accordion ---------- */

.th-native-cards aside.wd-sidebar .widget-area > div.widget {
    border-bottom: 1px solid var(--th-border);
    padding: 4px 0;
}

.th-native-cards aside.wd-sidebar .widget-title.th-acc-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin: 0;
    padding: 12px 2px;
    user-select: none;
}

.th-native-cards aside.wd-sidebar .widget-title.th-acc-trigger::after {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-inline-start: 8px;
    border-right: 1.6px solid var(--th-muted);
    border-bottom: 1.6px solid var(--th-muted);
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.th-native-cards aside.wd-sidebar div.widget.is-open .widget-title.th-acc-trigger::after {
    transform: rotate(-135deg);
}

.th-native-cards aside.wd-sidebar .th-acc-body {
    display: none;
    padding-bottom: 10px;
}

.th-native-cards aside.wd-sidebar div.widget.is-open .th-acc-body {
    display: block;
}

/* filter value rows: compact + count as a right-aligned pill */
.th-native-cards aside.wd-sidebar .wd-swatches-filter.wd-filter-list li,
.th-native-cards aside.wd-sidebar .wd-checkboxes-on li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 2px;
    font-size: 13px;
}

.th-native-cards aside.wd-sidebar .count {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: var(--th-radius-pill);
    background: var(--th-soft);
    color: var(--th-muted);
    font-size: 11px;
    font-weight: 600;
}

/* price widget */
.th-native-cards aside.wd-sidebar .price_slider_wrapper {
    padding-top: 6px;
}

.th-native-cards aside.wd-sidebar .ui-slider .ui-slider-range {
    background: var(--th-primary);
}

.th-native-cards aside.wd-sidebar .ui-slider .ui-slider-handle {
    border-color: var(--th-primary);
    background: #fff;
}

.th-native-cards aside.wd-sidebar .price_slider_amount .button {
    border-radius: var(--th-radius-pill);
    background: var(--th-primary);
    border-color: var(--th-primary);
}

.th-native-cards .th-price-reset {
    display: inline-block;
    margin-top: 8px;
    margin-inline-start: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--th-muted);
    text-decoration: underline;
}

/* hide the "Show 9/12/18/24" per-page control per the brief */
.th-native-cards .wd-products-per-page {
    display: none;
}

/* ============================================================
   Native WooCommerce loop cards — brought in line with the homepage
   .th-card design. Applies wherever WoodMart renders its own product
   loop: /shop/, the 5 categories, product search, and (via the
   unscoped rules at the very end) related products on single pages.
   ============================================================ */

.th-native-cards .products.wd-products > .wd-product .wd-product-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Photo: same treatment as the homepage card — a fixed box with the
   image contained at ~82%, so every laptop reads at the same scale and
   nothing gets its corners cropped off (object-fit:cover did both). */
.th-native-cards .products.wd-products > .wd-product .wd-product-thumb {
    flex: 0 0 auto;
    height: 220px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--th-soft);
    border-radius: var(--th-radius) var(--th-radius) 0 0;
}

.th-native-cards .products.wd-products > .wd-product .wd-product-thumb img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply;
    transition: transform .2s ease;
}

.th-native-cards .products.wd-products > .wd-product:hover .wd-product-thumb img {
    transform: scale(1.02);
}

/* Left-aligned like the homepage card. The theme centres every line in the
   card, which reads badly on wrapped multi-word spec rows and made the two
   card systems look like two different sites. */
.th-native-cards .products.wd-products > .wd-product .product-element-bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 15px 16px;
    text-align: left;
}

.th-native-cards .products.wd-products > .wd-product .product-rating-price,
.th-native-cards .products.wd-products > .wd-product .wrapp-product-price {
    align-items: flex-start;
    text-align: left;
}

/* Title: was rendering at 12.6px from the theme's own scale — far below
   the 15px/700 the homepage card uses. Clamped to 2 lines (the loop
   titles are cleaned to short model names by techhub_clean_loop_product_title). */
.th-native-cards .products.wd-products > .wd-product .wd-entities-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    min-height: calc(1.35em * 2);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35em;
}

.th-native-cards .products.wd-products > .wd-product .wd-product-cats {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--th-muted);
}

.th-native-cards .products.wd-products > .wd-product .product-rating-price {
    margin-top: auto;
    padding-top: 12px;
}

/* Price: the homepage's prominent blue, not near-black. */
.th-native-cards .products.wd-products > .wd-product .price,
.th-native-cards .products.wd-products > .wd-product .price .woocommerce-Price-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--th-primary);
}

.th-native-cards .products.wd-products > .wd-product .price del,
.th-native-cards .products.wd-products > .wd-product .price del .woocommerce-Price-amount {
    font-size: 13px;
    font-weight: 500;
    color: var(--th-muted);
}

.th-native-cards .products.wd-products > .wd-product .price ins {
    text-decoration: none;
}

.th-native-cards .products.wd-products > .wd-product .wd-add-btn.wd-add-btn-replace {
    margin-top: 10px;
}

/* ---------- Spec lines (techhub_loop_spec_lines) ---------- */

.th-loop-specs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: #475467;
    text-align: left;
    /* Exactly two rows (see techhub_product_spec_lines) — reserved so a
       product missing an attribute can't shorten its card. */
    min-height: calc(2 * 1.45em + 4px);
}

.th-loop-specs span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Card actions: Кошик / Порівняти / Вподобати ----------
   WoodMart nests the wishlist + cart buttons INSIDE .wd-product-card-hover,
   the same wrapper that holds the excerpt overlay — hiding that wrapper
   wholesale (an earlier pass did) silently removed the buttons too. So:
   keep the wrapper, drop it out of overlay positioning, hide only the
   excerpt, and lay the buttons out as a normal footer row. */
.th-native-cards .products.wd-products > .wd-product .wrap-quickview-button,
.th-native-cards .products.wd-products > .wd-product .wd-quick-view-btn,
.th-native-cards .products.wd-products > .wd-product .wd-product-card-hover .hover-content,
.th-native-cards .products.wd-products > .wd-product .wd-more-desc {
    display: none !important;
}

.th-native-cards .products.wd-products > .wd-product .wd-product-card-hover {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    pointer-events: auto;
}

.th-native-cards .products.wd-products > .wd-product .wd-bottom-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
}

/* Cart takes the room it needs, the two icon actions sit beside it. */
.th-native-cards .products.wd-products > .wd-product .wd-bottom-actions .wd-add-btn {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* Wishlist + compare share this wrapper (compare is hooked in beside the
   heart via techhub_loop_compare_button). */
.th-native-cards .products.wd-products > .wd-product .wd-bottom-actions .wrap-wishlist-button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.th-native-cards .products.wd-products > .wd-product .wd-add-btn .button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: var(--th-radius-pill);
    background: var(--th-primary);
    border-color: var(--th-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.th-native-cards .products.wd-products > .wd-product .wd-add-btn .button:hover {
    background: var(--th-primary-dark);
    border-color: var(--th-primary-dark);
}

/* Wishlist + compare: icon-only circles matching the cart button's height. */
.th-native-cards .products.wd-products > .wd-product .wd-bottom-actions .wd-action-btn > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--th-border);
    border-radius: 50%;
    background: #fff;
    color: var(--th-muted);
    transition: border-color .15s ease, color .15s ease;
}

.th-native-cards .products.wd-products > .wd-product .wd-bottom-actions .wd-action-btn > a:hover {
    border-color: var(--th-primary);
    color: var(--th-primary);
}

.th-native-cards .products.wd-products > .wd-product .wd-bottom-actions .wd-action-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* The theme's compare button ships inside the image overlay; it's moved
   into the footer row by techhub_loop_compare_button() instead. */
.th-native-cards .products.wd-products > .wd-product .wrapp-swatches .wd-compare-btn {
    display: none !important;
}

/* status badges */
.th-status-badge {
    align-self: flex-start;
    order: -1;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: var(--th-radius-pill);
    font-size: 11px;
    font-weight: 700;
}

.th-status-badge--instock {
    background: #E8F7EE;
    color: var(--th-success);
}

.th-status-badge--backorder {
    background: #FFF4E5;
    color: #B7791F;
}

@media screen and (max-width: 1024px) {
    .th-native-cards .products.wd-products > .wd-product .wd-product-thumb {
        height: 190px;
    }
}

/* Two-up grid on phones leaves ~138px of text width, where a 13px spec row
   ("Core Ultra 5 125H · 16 ГБ" needs 152px) was being cut mid-word. Tighter
   padding + 12px type buys the ~20px needed so both rows read in full. */
@media screen and (max-width: 600px) {
    .th-native-cards .products.wd-products > .wd-product .product-element-bottom {
        padding: 12px 10px 14px;
    }

    .th-native-cards .products.wd-products > .wd-product .th-loop-specs {
        font-size: 12px;
    }

    .th-native-cards .products.wd-products > .wd-product .wd-entities-title {
        font-size: 14px;
    }

    .th-native-cards .products.wd-products > .wd-product .price,
    .th-native-cards .products.wd-products > .wd-product .price .woocommerce-Price-amount {
        font-size: 18px;
    }
}

/* ---------- Related / upsell carousels on the single product page ----------
   Same card treatment, but these render in a WoodMart carousel container
   (no body class to hang off — the page is a single product, not an
   archive), so the rules are repeated against that wrapper instead. */

.related-products .wd-product .wd-product-thumb,
.upsells .wd-product .wd-product-thumb {
    height: 190px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--th-soft);
    border-radius: var(--th-radius) var(--th-radius) 0 0;
}

.related-products .wd-product .wd-product-thumb img,
.upsells .wd-product .wd-product-thumb img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.related-products .wd-product .wd-entities-title,
.upsells .wd-product .wd-entities-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 2);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35em;
}

.related-products .wd-product .price,
.related-products .wd-product .price .woocommerce-Price-amount,
.upsells .wd-product .price,
.upsells .wd-product .price .woocommerce-Price-amount {
    font-size: 19px;
    font-weight: 700;
    color: var(--th-primary);
}

.related-products .wd-product .wd-compare-btn,
.related-products .wd-product .wrap-quickview-button,
.related-products .wd-product .wd-product-card-hover,
.upsells .wd-product .wd-compare-btn,
.upsells .wd-product .wrap-quickview-button,
.upsells .wd-product .wd-product-card-hover {
    display: none !important;
}

/* The theme parks these carousel arrows at right/left:-50px, which on a
   1265px viewport puts the right arrow 43px past the document edge and
   gives the whole product page a horizontal scrollbar. -18px matches the
   homepage strip arrows and stays inside the viewport. */
.related-products .wd-nav-arrows.wd-pos-sep .wd-btn-arrow.wd-next,
.upsells .wd-nav-arrows.wd-pos-sep .wd-btn-arrow.wd-next {
    right: -18px;
}

.related-products .wd-nav-arrows.wd-pos-sep .wd-btn-arrow.wd-prev,
.upsells .wd-nav-arrows.wd-pos-sep .wd-btn-arrow.wd-prev {
    left: -18px;
}

/* ---------- Service / repair page ([techhub_services]) ---------- */

.th-svc-hero {
    position: relative;
    overflow: hidden;
    background: var(--th-dark);
}

.th-svc-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.th-svc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .78) 36%, rgba(255, 255, 255, .1) 68%);
}

.th-svc-hero .th-container {
    position: relative;
    z-index: 1;
    padding-top: 34px;
    padding-bottom: 34px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.th-svc-hero h1 {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    line-height: 1.22;
    max-width: 620px;
    color: var(--th-ink);
}

.th-svc-hero p {
    margin: 0;
    max-width: 520px;
    color: var(--th-muted);
}

.th-svc-hero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.th-svc-hero__actions .th-btn svg,
.th-svc-contact > svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.th-svc-trust .th-trustbar__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.th-svc-trust {
    background: var(--th-soft);
    border-top: 1px solid var(--th-border);
}

/* service cards */

.th-svc-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.th-svc-card {
    background: var(--th-bg);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
    box-shadow: var(--th-shadow);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .18s ease;
}

.th-svc-card:hover {
    box-shadow: var(--th-shadow-hover);
}

.th-svc-card > svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: var(--th-primary);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.th-svc-card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.th-svc-card p {
    margin: 0;
    flex: 1;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--th-muted);
}

.th-svc-card__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    margin-top: auto;
}

.th-svc-card__prices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.th-svc-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 22px;
}

.th-svc-chip {
    background: var(--th-primary-tint);
    color: var(--th-primary);
    font-weight: 700;
    border-radius: var(--th-radius-pill);
    padding: 3px 12px;
    white-space: nowrap;
}

.th-svc-time {
    color: var(--th-muted);
}

/* TechHub warranty strip */

.th-svc-warr {
    background: var(--th-primary);
    color: #fff;
    padding: 24px 0;
}

.th-svc-warr__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.th-svc-warr__t {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 780px;
}

.th-svc-warr__t > svg {
    width: 38px;
    height: 38px;
    flex: none;
    fill: none;
    stroke: #fff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.th-svc-warr b {
    display: block;
    font-size: 17px;
    line-height: 1.3;
}

.th-svc-warr p {
    margin: 2px 0 0;
    font-size: 13.5px;
    opacity: .88;
}

.th-svc-warr__btn.th-btn {
    background: #fff;
    color: var(--th-primary);
    border-color: #fff;
}

.th-svc-warr__btn.th-btn:hover,
.th-svc-warr__btn.th-btn:focus {
    background: var(--th-primary-tint);
    color: var(--th-primary-dark);
}

/* steps */

.th-svc-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.th-svc-step {
    background: var(--th-bg);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
    padding: 20px;
}

.th-svc-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--th-primary);
    color: #fff;
    font-size: 14px;
    margin-bottom: 10px;
}

.th-svc-step h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
}

.th-svc-step p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--th-muted);
}

/* price table */

.th-svc-tbl {
    overflow-x: auto;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
}

.th-svc-tbl table {
    width: 100%;
    min-width: 560px;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
}

.th-svc-tbl th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--th-muted);
    background: var(--th-soft);
    padding: 12px 18px;
    border: 0;
}

.th-svc-tbl td {
    padding: 12px 18px;
    border: 0;
    border-top: 1px solid var(--th-border);
}

.th-svc-tbl td:last-child,
.th-svc-tbl th:last-child {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.th-svc-tbl td:last-child {
    font-weight: 700;
}

.th-svc-tbl__note {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--th-muted);
}

/* cross-sell duo */

.th-svc-duo-sec {
    padding-top: 0;
}

.th-svc-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.th-svc-duo__card {
    border-radius: var(--th-radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--th-soft);
    border: 1px solid var(--th-border);
}

.th-svc-duo__card h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.th-svc-duo__card p {
    margin: 0;
    flex: 1;
    font-size: 14px;
    color: var(--th-muted);
}

.th-svc-duo__card .th-btn {
    align-self: flex-start;
}

.th-svc-duo__card--blue {
    background: var(--th-primary);
    border-color: var(--th-primary);
    color: #fff;
}

.th-svc-duo__card--blue h3 {
    color: #fff;
}

.th-svc-duo__card--blue p {
    color: rgba(255, 255, 255, .88);
}

.th-svc-duo__card--blue .th-btn {
    background: #fff;
    color: var(--th-primary);
}

/* request form + contacts */

.th-svc-form {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: start;
}

.th-svc-form__card {
    background: var(--th-bg);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-lg);
    padding: 28px;
    box-shadow: var(--th-shadow);
}

.th-svc-form__card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0 6px;
}

.th-svc-form__card input[type="text"],
.th-svc-form__card input[type="tel"],
.th-svc-form__card textarea {
    width: 100%;
    border: 1px solid var(--th-border);
    border-radius: 10px;
    padding: 11px 14px;
    font-family: var(--th-font);
    font-size: 14px;
    background: var(--th-bg);
    color: var(--th-ink);
}

.th-svc-form__card input:focus,
.th-svc-form__card textarea:focus {
    outline: 2px solid var(--th-primary);
    outline-offset: -1px;
    border-color: var(--th-primary);
}

.th-svc-form__card .th-btn {
    margin-top: 18px;
    width: 100%;
    justify-content: center;
    cursor: pointer;
}

.th-svc-hp {
    position: absolute !important;
    left: -9999px !important;
    height: 1px;
    overflow: hidden;
}

.th-svc-notice {
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 6px;
}

.th-svc-notice--ok {
    background: rgba(18, 136, 95, .1);
    color: var(--th-success);
}

.th-svc-notice--err {
    background: rgba(220, 68, 68, .08);
    color: #C0392B;
}

.th-svc-contacts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.th-svc-contact {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.th-svc-contact > svg {
    width: 22px;
    height: 22px;
    flex: none;
    stroke-width: 1.8;
    color: var(--th-primary);
    margin-top: 2px;
}

.th-svc-contact b {
    display: block;
    font-size: 14px;
}

.th-svc-contact span {
    display: block;
    font-size: 13px;
    color: var(--th-muted);
}

@media screen and (max-width: 1024px) {
    .th-svc-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .th-svc-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .th-svc-duo,
    .th-svc-form {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 600px) {
    .th-svc-cards {
        grid-template-columns: 1fr;
    }

    .th-svc-hero__actions .th-btn {
        width: 100%;
        justify-content: center;
    }

    .th-svc-warr__row {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ---------- Service page: v2 point edits (accent, info popovers, FAQ cols) ---------- */

.th-svc-lead-accent {
    color: var(--th-ink);
    font-weight: 600;
}

/* info "i" button in the card meta row */

.th-svc-info {
    position: relative;
    margin-left: auto;
    display: inline-flex;
}

.th-svc-info__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--th-muted);
    cursor: pointer;
}

.th-svc-info__btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.th-svc-info__btn:hover,
.th-svc-info__btn:focus-visible,
.th-svc-info__btn[aria-expanded="true"] {
    color: var(--th-primary);
    background: var(--th-primary-tint);
}

.th-svc-info__btn:focus-visible {
    outline: 2px solid var(--th-primary);
    outline-offset: 1px;
}

.th-svc-info__pop {
    position: absolute;
    z-index: 40;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: min(320px, calc(100vw - 32px));
    background: var(--th-bg);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
    box-shadow: var(--th-shadow-hover);
    padding: 16px 18px;
    text-align: left;
    cursor: auto;
}

.th-svc-info__pop.is-below {
    bottom: auto;
    top: calc(100% + 10px);
}

.th-svc-info__row {
    padding: 7px 0;
}

.th-svc-info__row + .th-svc-info__row {
    border-top: 1px solid var(--th-border);
}

.th-svc-info__row b {
    color: var(--th-primary);
    font-size: 13px;
    white-space: nowrap;
    margin-right: 6px;
}

.th-svc-info__row > span {
    font-size: 13px;
    font-weight: 600;
    color: var(--th-ink);
}

.th-svc-info__row p {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--th-muted);
}

.th-svc-info__note {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--th-border);
    font-size: 12px;
    line-height: 1.5;
    color: var(--th-muted);
}

/* FAQ: two compact columns on this page (the shared pattern defaults to 3) */

.th-svc-faq-cols {
    columns: 2;
    column-gap: 40px;
}

@media screen and (max-width: 700px) {
    .th-svc-faq-cols {
        columns: 1;
    }
}


/* ---------- Mobile drawer: same category icons as the desktop dropdown ----------
   The burger menu renders the Categories menu into its own list
   (ul#menu-categories-1.mobile-categories-menu), so the desktop dropdown
   selectors above never reach it. Same position-bound nth-child mapping —
   if the menu order changes, re-map BOTH blocks. */

.mobile-categories-menu > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Legacy PNG thumbnails (term images) — hide here too, the outline icons replace them. */
.mobile-categories-menu .wd-nav-img {
    display: none;
}

.mobile-categories-menu > li > a::before {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: currentColor;
}

.mobile-categories-menu > li:nth-child(1) > a::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mobile-categories-menu > li:nth-child(2) > a::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1.5'/%3E%3Cpath d='M9 20h6M12 16v4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1.5'/%3E%3Cpath d='M9 20h6M12 16v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mobile-categories-menu > li:nth-child(3) > a::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1'/%3E%3Cpath d='M6 16v2M11 16v2M16 16v2M20 16v2M7 11v2M12 11v2M17 11v2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1'/%3E%3Cpath d='M6 16v2M11 16v2M16 16v2M20 16v2M7 11v2M12 11v2M17 11v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mobile-categories-menu > li:nth-child(4) > a::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 6.5c2 0 3 1.2 3 2.6M17.5 12c0 2-1.2 3-2.6 3M12 17.5c-2 0-3-1.2-3-2.6M6.5 12c0-2 1.2-3 2.6-3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 6.5c2 0 3 1.2 3 2.6M17.5 12c0 2-1.2 3-2.6 3M12 17.5c-2 0-3-1.2-3-2.6M6.5 12c0-2 1.2-3 2.6-3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mobile-categories-menu > li:nth-child(5) > a::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ============================================================
   Single product: warranty upsell, secondary actions
   ============================================================ */

.th-warranty-ext {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
    background: var(--th-soft);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.th-warranty-ext:hover,
.th-warranty-ext:has(input:checked) {
    border-color: var(--th-primary);
    background: var(--th-primary-tint);
}

.th-warranty-ext input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--th-primary);
}

.th-warranty-ext__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.th-warranty-ext__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--th-ink);
}

.th-warranty-ext__note {
    font-size: 13px;
    line-height: 1.35;
    color: var(--th-primary-dark);
    font-weight: 600;
}

/* Compare + wishlist under the add-to-cart button. The parent .cart form is
   a flex row, so this needs its own full-width line; and the theme ships
   .wd-action-btn as display:none outside the loop card (it only reveals it
   on card hover), which is why it has to be re-enabled explicitly here. */
.th-single-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex: 1 0 100%;
    clear: both;
}

.th-single-actions .wd-action-btn {
    display: inline-flex !important;
    margin: 0;
    opacity: 1;
    visibility: visible;
}

.th-single-actions .wd-action-btn > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 15px;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-pill);
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--th-muted);
    transition: border-color .15s ease, color .15s ease;
}

.th-single-actions .wd-action-btn > a:hover {
    border-color: var(--th-primary);
    color: var(--th-primary);
}

/* Header compare icon — same tools styling as account/cart. */
.whb-row .wd-header-compare .wd-tools-count,
.whb-row .wd-header-compare .wd-tools-icon:after {
    background-color: var(--th-primary);
}

/* Кнопка «Показати» у фільтрі ціни: тема лишає їй свій темно-сірий текст
   (#333) на нашому синьому фоні. Приводимо до вигляду решти кнопок. */
/* Кнопка «Показати» у фільтрі ціни: тема лишає їй свій темно-сірий текст
   (#333) на нашому синьому фоні — контраст 2.4:1 замість 4.5:1.

   Минула спроба з коротким селектором не спрацювала: WoodMart друкує CSS
   віджетів прямо в місці рендера, тобто ПІСЛЯ наших стилів у <head>, і за
   рівної специфічності перемагає пізніший. Тому тут явно вказуємо
   контейнер віджета — три класи проти двох. */
.widget_price_filter .price_slider_amount button.button,
.woocommerce-widget-layered-nav .price_slider_amount button.button {
    color: #fff;
}

.widget_price_filter .price_slider_amount button.button:hover,
.woocommerce-widget-layered-nav .price_slider_amount button.button:hover {
    background: var(--th-primary-dark);
    color: #fff;
}

/* -------------------------------------------------------------------------
   Кнопка картки на вузьких екранах

   У двоколонковій мобільній сітці підвал картки має лише ~119px, а підпис
   «ДОДАТИ В КОШИК» навіть при 11.5px займає 111px і разом з відступами
   виходив за межі картки (виміряно: 133px на всіх 8 картках).

   Тому на мобільному показуємо коротке «В кошик» — 56px, з іконкою візка
   й відступами близько 90px, тобто з запасом. Повний підпис лишається
   в DOM: font-size:0 ховає його візуально, але не з дерева доступності, а
   сам WooCommerce додає кнопці aria-label «Додати в кошик: <товар>».
   ---------------------------------------------------------------------- */
@media (max-width: 600px) {
    .th-card__foot {
        gap: 8px;
        padding-top: 10px;
    }

    .th-card__add .add_to_cart_button {
        padding: 0 10px;
        gap: 6px;
        font-size: 0;
        letter-spacing: 0;
    }

    .th-card__add .add_to_cart_button::after {
        content: "В кошик";
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1;
    }

    .th-card__add .add_to_cart_button::before {
        width: 13px;
        height: 13px;
        flex-basis: 13px;
    }

    /* Після успішного додавання підпис теж змінюється — інакше на
       мобільному від зміни фону й галочки лишалось незрозуміло, що саме
       сталось. */
    .th-card__add .add_to_cart_button.th-added::after {
        content: "Додано";
    }
}

/* -------------------------------------------------------------------------
   Єдина шкала заголовків

   Джерело розмірів — токени --th-h1/--th-h2/--th-h3 у :root. Селектори
   перелічені явно, а не через голі h1/h2/h3: тема задає власні розміри
   через типографіку налаштувань з вищою специфічністю, і без прив'язки до
   контейнера правило не застосувалось би.
   ---------------------------------------------------------------------- */

.wd-page-content h1.entry-title,
.wd-page-content .wd-page-title h1,
.th-section h1,
.th-hero h1 {
    font-size: var(--th-h1);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.01em;
}

.th-section h2,
.wd-page-content .th-ip h2 {
    font-size: var(--th-h2);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -.005em;
}

.th-section h3,
.wd-page-content .th-ip h3 {
    font-size: var(--th-h3);
    font-weight: 600;
    line-height: 1.32;
}

/* -------------------------------------------------------------------------
   Поля вводу: два радіуси замість чотирьох

   Було: пошук у шапці 35px, пошук у сайдбарі 999px, поля форми сервісу
   10px, поля фільтрів WooCommerce 0px — кожна форма виглядала як з іншого
   сайту.

   Лишаємо два: круглі для пошуків (це задум) і 10px для всіх полів форм.
   ---------------------------------------------------------------------- */

.wd-search-form input[type="text"],
.wd-search-form input[type="search"],
.widget_product_search input[type="search"],
.woocommerce-product-search input[type="search"] {
    border-radius: var(--th-radius-pill);
}

.wd-page-content input[type="text"],
.wd-page-content input[type="email"],
.wd-page-content input[type="tel"],
.wd-page-content input[type="number"],
.wd-page-content input[type="password"],
.wd-page-content select,
.wd-page-content textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    border-radius: 10px;
}

/* Пошуки — виняток: вони круглі за задумом, тому повертаємо їм піл після
   загального правила вище. */
.wd-page-content .wd-search-form input[type="text"],
.wd-page-content .wd-search-form input[type="search"],
.wd-page-content .widget_product_search input[type="search"] {
    border-radius: var(--th-radius-pill);
}

/* -------------------------------------------------------------------------
   .th-container всередині .container теми

   Усі 8 секцій головної рендеряться шорткодами всередині Elementor, який
   сам сидить у .container WoodMart. Тобто зовнішній контейнер уже дав
   свої 15px відступу, а .th-container додавав ще 15px — контент наших
   секцій стояв на 15px глибше, ніж контент шапки, підвалу й каталогу.

   У вкладеному випадку відступ і обмеження ширини не потрібні: батьківський
   контейнер уже зробив і те, й інше.
   ---------------------------------------------------------------------- */
.container .th-container,
.elementor-shortcode .th-container {
    max-width: none;
    padding-inline: 0;
}

/* -------------------------------------------------------------------------
   Навігація розділами каталогу

   Живе в банері під заголовком — на місці списку підкатегорій, який
   ніколи не показувався (дочірніх категорій у магазині немає).

   Банер темний із фото, тому плитки напівпрозорі зі світлим текстом:
   так вони читаються на будь-якому знімку й не перекривають заголовок.
   ---------------------------------------------------------------------- */

.th-catnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.th-catnav__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--th-radius-pill);
    background: rgba(15, 20, 25, .38);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.th-catnav__item:hover,
.th-catnav__item:focus-visible {
    background: rgba(255, 255, 255, .95);
    border-color: transparent;
    color: var(--th-ink);
}

/* Активний розділ — суцільна заливка, щоб було видно, де ти зараз. */
.th-catnav__item.is-active {
    background: #fff;
    border-color: #fff;
    color: var(--th-ink);
    cursor: default;
}

.th-catnav__ic {
    display: inline-flex;
    flex: 0 0 auto;
    opacity: .85;
}

.th-catnav__item.is-active .th-catnav__ic,
.th-catnav__item:hover .th-catnav__ic {
    color: var(--th-primary);
    opacity: 1;
}

/* Кількість — довідка, тому тихіша за назву. */
.th-catnav__count {
    font-size: 11.5px;
    font-weight: 600;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .th-catnav {
        gap: 6px;
        margin-top: 12px;
        /* Горизонтальна стрічка замість переносу: банер лишається
           компактним, а всі розділи доступні свайпом. */
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .th-catnav::-webkit-scrollbar {
        display: none;
    }

    .th-catnav__item {
        flex: 0 0 auto;
        padding: 7px 12px;
        font-size: 12.5px;
    }

    .th-catnav__ic svg {
        width: 17px;
        height: 17px;
    }
}