/* tdparitet — Main CSS Дизайн-токени (CSS-змінні) + база: типографіка, кнопки, форми. Локальні стилі секцій — css/pages/{slug}.css. */

/* ── Fonts (self-hosted, woff у /fonts) ─────────────────────────────────── */
@font-face {
    font-family: 'Montserrat';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Montserrat-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Montserrat';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Montserrat-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Inter';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Inter-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Inter';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Inter-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Inter';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Inter-SemiBold.woff') format('woff');
}

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --color-primary:        #1b2530;   /* глибокий графіт — хедер-стрічка, футер, заголовки */
    --color-primary-light:  #35495e;   /* сталевий синій — градієнти, hover темних поверхонь */
    --color-secondary:      #ffffff;
    --color-accent:         #ffd200;   /* фірмовий жовтий — CTA, акценти, активні стани */
    --color-accent-hover:   #f2c400;
    --color-accent-soft:    #fff6c2;   /* підкладка під бейджі/підсвітку */

    /* Text */
    --color-text:           #262626;
    --color-text-light:     #555555;
    --color-muted:          #8c8c8c;
    --color-on-dark:        #ffffff;
    --color-on-dark-muted:  #b5bec8;
    --color-on-accent:      #1b2530;

    /* Surfaces */
    --color-bg:             #ffffff;
    --color-bg-alt:         #f5f6f8;
    --color-bg-dark:        #1b2530;
    --color-border:         #dedede;
    --color-border-strong:  #c4c9cf;

    /* Semantic */
    --color-success:        #2e9e3e;
    --color-warning:        #f0a500;
    --color-error:          #d9362b;
    --color-info:           #2f6fb5;

    /* Typography */
    --font-heading:  'Montserrat', 'Arial Black', Arial, sans-serif;
    --font-body:     'Inter', Arial, Helvetica, sans-serif;
    --line-height:   1.6;
    --line-height-heading: 1.2;

    --fs-h1:   40px;
    --fs-h2:   32px;
    --fs-h3:   24px;
    --fs-h4:   20px;
    --fs-lead: 18px;
    --fs-base: 16px;
    --fs-sm:   14px;
    --fs-xs:   12px;

    /* Spacing (крок 4px) */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;
    --sp-9:  96px;
    --section-gap: 80px;

    /* Layout */
    --container-width:   1380px;
    --container-padding: 20px;
    --gutter:            24px;

    /* UI */
    --radius-sm:  4px;
    --radius:     6px;
    --radius-lg:  12px;
    --radius-pill: 999px;
    --transition: .2s ease;
    --shadow-sm:  0 1px 3px rgba(27, 37, 48, .08);
    --shadow:     0 6px 20px rgba(27, 37, 48, .10);
    --shadow-lg:  0 16px 40px rgba(27, 37, 48, .16);
    --focus-ring: 0 0 0 3px rgba(255, 210, 0, .55);

    /* Controls */
    --control-height:    48px;
    --control-height-sm: 40px;

    /* Header / Footer */
    --header-height: 80px;
    --header-bg:     #ffffff;
    --footer-bg-from: #1b2530;
    --footer-bg-to:    #293847;
    --footer-color:    #ffffff;

    /* Z-indexes */
    --z-dropdown: 100;
    --z-backdrop: 150;
    --z-sticky:   200;
    --z-modal:    400;
}

@media (max-width: 1023px) {
    :root {
        --fs-h1: 34px;
        --fs-h2: 28px;
        --fs-h3: 22px;
        --section-gap: 64px;
        --header-height: 72px;
    }
}

@media (max-width: 767px) {
    :root {
        --fs-h1: 28px;
        --fs-h2: 24px;
        --fs-h3: 20px;
        --fs-h4: 18px;
        --fs-lead: 16px;
        --section-gap: 48px;
        --header-height: 64px;
    }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html {
    font-size: var(--fs-base);
    scroll-padding-top: var(--header-height);
}

body {
    font-family:      var(--font-body);
    font-size:        var(--fs-base);
    line-height:      var(--line-height);
    color:            var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

.site      { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

.container {
    width:     100%;
    max-width: var(--container-width);
    padding:   0 var(--container-padding);
    margin:    0 auto;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--line-height-heading);
    color:       var(--color-primary);
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); font-weight: 600; }
h5, h6  { font-size: var(--fs-base); font-weight: 600; }

p + p { margin-top: var(--sp-4); }

.lead  { font-size: var(--fs-lead); color: var(--color-text-light); }
.small { font-size: var(--fs-sm); }
.muted { color: var(--color-muted); }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--color-primary-light); }

/* Also used on a <button> (cta-application-popup trigger inside seo-text.php's prose) alongside real <a> links — the reset properties below are no-ops… */
.link-accent {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--color-accent);
    cursor: pointer;
    transition: color var(--transition);
}
.link-accent:hover { color: var(--color-primary-light); text-decoration-color: currentColor; }

strong, b { font-weight: 600; }

/* Типографіка контентних сторінок (описи категорій, статті) */
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-6); }
.prose h3 { margin-top: var(--sp-5); }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--sp-2); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* ── WooCommerce form controls (checkout, account) ─────────────────────── */
/* WC marks its own inputs .input-text / .woocommerce-Input and its checkbox .woocommerce-form__input-checkbox; the theme's .input/.btn classes never… */
.woocommerce .input-text,
.woocommerce-page .input-text,
.woocommerce select.select,
.woocommerce-page select.select {
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.woocommerce .input-text:hover,
.woocommerce-page .input-text:hover { border-color: var(--color-primary-light); }
.woocommerce .input-text:focus,
.woocommerce-page .input-text:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); outline: none; }
.woocommerce .input-text::placeholder,
.woocommerce-page .input-text::placeholder { color: var(--color-muted); }
.woocommerce textarea.input-text,
.woocommerce-page textarea.input-text { min-height: 88px; padding: var(--sp-3) var(--sp-4); line-height: var(--line-height); resize: vertical; }

.woocommerce-form__input-checkbox {
    display: inline-block !important;
    appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
}
.woocommerce-form__input-checkbox:hover { border-color: var(--color-primary-light); }
.woocommerce-form__input-checkbox:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.woocommerce-form__input-checkbox:checked { background: var(--color-primary); border-color: var(--color-primary); }
.woocommerce-form__input-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--color-secondary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ── Content galleries ([gallery] shortcode) ────────────────────────────── */
/* WordPress ships no layout for the classic gallery unless core's own stylesheet is enqueued, which this theme doesn't do — so every figure was a… */
.gallery {
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
    gap: var(--sp-4);
    margin: var(--sp-5) 0;
}
.gallery-columns-1 { --gallery-columns: 1; }
.gallery-columns-2 { --gallery-columns: 2; }
.gallery-columns-3 { --gallery-columns: 3; }
.gallery-columns-4 { --gallery-columns: 4; }
.gallery-columns-5 { --gallery-columns: 5; }
.gallery-columns-6 { --gallery-columns: 6; }
.gallery-item { margin: 0; width: auto; }
.gallery-icon { margin: 0; }
.gallery-icon a { display: block; border-radius: var(--radius); overflow: hidden; }
/* contain, not cover: these are product shots on white, and cropping them to
   a uniform tile cuts the product. The tinted tile squares the grid up
   instead, without touching the photo. */
.gallery img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--color-bg-alt);
    border: 0;
    transition: transform var(--transition);
}
.gallery-icon a:hover img { transform: scale(1.03); }
.gallery-caption { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--color-text-light); }

/* ── Lightbox (sitewide) ────────────────────────────────────────────────── */
/* Was scoped to the gallery page; every content image that links to its own
   file uses it now, so it lives here and its markup in footer.php. */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .9);
}
.lightbox[hidden] { display: none; }
.lightbox__image {
    display: block;
    max-width: min(90vw, 1100px);
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-on-dark);
    cursor: pointer;
    transition: background-color var(--transition);
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(255, 255, 255, .22); }
.lightbox__close { top: var(--sp-5); right: var(--sp-5); width: 44px; height: 44px; }
.lightbox__prev,
.lightbox__next {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
}
.lightbox__prev { left: var(--sp-5); }
.lightbox__next { right: var(--sp-5); }

@media (max-width: 767px) {
    .gallery { --gallery-columns: 2; }
    .lightbox__close { top: var(--sp-3); right: var(--sp-3); width: 36px; height: 36px; }
    .lightbox__prev,
    .lightbox__next { width: 40px; height: 40px; }
    .lightbox__prev { left: var(--sp-2); }
    .lightbox__next { right: var(--sp-2); }
    .lightbox__image { max-width: 94vw; max-height: 78vh; }
}

/* oEmbed players (YouTube and the like) come out of WordPress with fixed width/height attributes. max-width alone shrinks the width but leaves the… */
.prose iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
}
.prose blockquote {
    padding: var(--sp-4) var(--sp-5);
    border-left: 4px solid var(--color-accent);
    background: var(--color-bg-alt);
    color: var(--color-text-light);
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--color-border); text-align: left; }
.prose th { background: var(--color-bg-alt); font-weight: 600; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--control-height);
    padding: 0 var(--sp-5);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn--primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }

.btn--dark { background: var(--color-primary); color: var(--color-on-dark); }
.btn--dark:hover { background: var(--color-primary-light); color: var(--color-on-dark); }

.btn--outline { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.btn--outline:hover { background: var(--color-primary); color: var(--color-on-dark); }

.btn--outline-light { border-color: var(--color-on-dark); color: var(--color-on-dark); background: transparent; }
.btn--outline-light:hover { background: var(--color-on-dark); color: var(--color-primary); }

.btn--ghost { background: transparent; color: var(--color-primary); padding-inline: var(--sp-3); }
.btn--ghost:hover { background: var(--color-bg-alt); }

.btn--sm { min-height: var(--control-height-sm); padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn--block { width: 100%; }

.btn__icon { width: 20px; height: 20px; flex: none; fill: currentColor; }

/* ── Quantity stepper ───────────────────────────────────────────────────── WooCommerce's own quantity markup is just <div class="quantity"><input… */
.quantity {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.quantity:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }

.qty {
    width: 52px;
    min-height: var(--control-height);
    padding: 0;
    text-align: center;
    font-size: var(--fs-base);
    color: var(--color-text);
    background: var(--color-bg);
    border: none;
    border-radius: 0;
    -moz-appearance: textfield;
}
.qty:focus { outline: none; }
.qty::-webkit-outer-spin-button,
.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.quantity__btn {
    flex: none;
    width: 40px;
    min-height: var(--control-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--color-bg-alt);
    border: none;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}
.quantity__btn:hover { background: var(--color-border); }
.quantity__btn:disabled { opacity: .4; cursor: not-allowed; background: var(--color-bg-alt); }
.quantity__btn--minus { border-right: 1px solid var(--color-border-strong); }
.quantity__btn--plus { border-left: 1px solid var(--color-border-strong); }

/* ── Services CTA ────────────────────────────────────────────────────────── Shared by page-uslugi.php and page-uslugi-service.php — a closing "still… */
.services-cta { background: var(--color-bg-alt); }
.services-cta__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); }
.services-cta__text { max-width: 640px; font-size: var(--fs-lead); color: var(--color-primary); }

/* ── Gutenberg core "Buttons" block ───────────────────────────────────────── Targets the exact class signature the block editor renders for a centered… */
.wp-block-buttons.is-content-justification-center {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-4);
}
.wp-block-buttons .wp-block-button__link.wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-2) var(--sp-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.wp-block-buttons .wp-block-button__link.wp-element-button:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-dark);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--fs-sm); font-weight: 500; color: var(--color-text); }
.field__label .req { color: var(--color-error); }
.field__hint { font-size: var(--fs-xs); color: var(--color-muted); }
.field__error { font-size: var(--fs-xs); color: var(--color-error); }

.input,
.textarea,
.select {
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.textarea { min-height: 120px; padding: var(--sp-3) var(--sp-4); resize: vertical; }
.select {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231b2530' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.input::placeholder, .textarea::placeholder { color: var(--color-muted); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-primary-light); }
.input:focus, .textarea:focus, .select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: none; }
.input.is-error, .textarea.is-error, .select.is-error { border-color: var(--color-error); }

.checkbox, .radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.checkbox input, .radio input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-primary); flex: none; }

/* ── Elements ───────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-on-accent);
}
.badge--dark    { background: var(--color-primary); color: var(--color-on-dark); }
.badge--success { background: var(--color-success); color: #fff; }
.badge--muted   { background: var(--color-bg-alt); color: var(--color-text-light); }

.card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-2px); }
.card__media { aspect-ratio: 4 / 3; background: var(--color-bg-alt); }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.card__title { font-size: var(--fs-h4); }

/* ── Post listing (index.php / archive.php / search.php) ────────────────── .post-card is shared with the home page's articles slider (home.css sets a… */
.blog-section { padding: var(--sp-7) 0; }
.page-header { margin-bottom: var(--sp-6); }
.page-title { margin: 0; }
.archive-description { margin-top: var(--sp-3); color: var(--color-text-light); }

.posts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-7); }

.post-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.post-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 175px;
    background: var(--color-bg-alt);
    color: var(--color-muted);
    overflow: hidden;
}
.post-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.post-card__date { font-size: var(--fs-xs); color: var(--color-muted); }
.post-card__title { font-size: var(--fs-base); min-height: calc(var(--fs-base) * 1.4 * 2); }
.post-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    color: var(--color-primary);
}
.post-card__excerpt { font-size: var(--fs-sm); color: var(--color-text-light); }

/* .posts-grid had no responsive treatment at all — 4 fixed columns all the way down, so at 375px each card was ~75px wide (title truncated to "Пр…",… */
@media (max-width: 1023px) {
    .posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .posts-grid { grid-template-columns: 1fr; }
}

/* WooCommerce product card — used on the home page products slider and on
   the shop/category/search product archive (css/pages/shop.css). */
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.product-card__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 195px;
    background: var(--color-bg-alt);
    color: var(--color-muted);
    overflow: hidden;
}
.product-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.product-card:hover .product-card__media img { transform: scale(1.05); }

.product-card__badge { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 1; }
.product-card__badge.badge--muted { background: rgba(255, 255, 255, .92); color: var(--color-text); box-shadow: var(--shadow-sm); }

.product-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4); }
.product-card__title { font-size: var(--fs-sm); font-weight: 600; min-height: calc(var(--fs-sm) * 1.4 * 2); }
.product-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    color: var(--color-text);
    transition: color var(--transition);
}
.product-card__title a:hover { color: var(--color-primary); }

.product-card__price { margin-top: auto; font-size: var(--fs-h4); font-weight: 700; color: var(--color-primary); }
.product-card__price ins { text-decoration: none; }
.product-card__price del { font-size: var(--fs-sm); color: var(--color-muted); font-weight: 400; margin-right: var(--sp-2); }

/* Product card grid — shared by the shop archive (css/pages/shop.css adds sidebar-aware breakpoints on top, since it sits next to a 300px filter… */
.shop__grid,
.shop__categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
    margin-bottom: var(--sp-7);
}

/* Product category card — shared by the home page categories slider
   (css/pages/home.css adds its own fixed slider width on top) and the shop
   archive's subcategory grid above (.shop__categories). */
.category-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.category-card:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-2px); }
.category-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 195px;
    background: var(--color-bg-alt);
    color: var(--color-primary-light);
    overflow: hidden;
}
.category-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.category-card__body { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); }
.category-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(var(--fs-base) * 1.4 * 2);
    line-height: 1.4;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
}
.category-card__count { font-size: var(--fs-xs); color: var(--color-muted); }

/* ── Shared: slider (categories / products / testimonials / articles / product-page related products) ─────────────────────────────────────────… */
/* Compound selector (not just .section-head--slider) so this reliably beats .section-head's own flex-direction/gap regardless of source order — two… */
.section-head.section-head--slider { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.slider-nav { display: flex; gap: var(--sp-2); flex: none; }
.slider-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-primary);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.slider-nav__btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }

.slider__track {
    display: flex;
    gap: var(--sp-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(var(--container-padding) * -1);
    padding: var(--sp-1) var(--container-padding) var(--sp-3);
    /* Without this, browsers can auto-snap to the first card's edge on load and silently scroll the left padding out of view (scrollLeft lands on ~20px… */
    scroll-padding-left: var(--container-padding);
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { scroll-snap-align: start; flex: 0 0 auto; }

@media (max-width: 767px) {
    /* Slider headers: arrows are redundant next to a swipeable track on touch — drop them here instead of cramming three things in a row. */
    .section-head.section-head--slider { flex-direction: column; align-items: flex-start; }
    .slider-nav { display: none; }
    .categories .section-head.section-head--slider,
    .products .section-head.section-head--slider,
    .testimonials .section-head.section-head--slider,
    .articles .section-head.section-head--slider,
    .product-page__related .section-head.section-head--slider { flex-direction: row; align-items: center; }
    .categories .slider-nav,
    .products .slider-nav,
    .testimonials .slider-nav,
    .articles .slider-nav,
    .product-page__related .slider-nav { display: flex; }
}

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-height-sm);
    height: var(--control-height-sm);
    padding: 0 var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pagination .page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }
.pagination .page-numbers.dots { border-color: transparent; }

.section-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.section-head__eyebrow {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-light);
}
.section-head__eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 3px;
    margin-right: var(--sp-2);
    vertical-align: middle;
    background: var(--color-accent);
}

.divider { border: 0; border-top: 1px solid var(--color-border); }

/* ── Breadcrumbs (Yoast SEO output, see pages/global/breadcrumbs.php) ───── Site-wide — auto-injected in header.php on every page except the homepage. */
.breadcrumbs {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    color: var(--color-muted);
}
.breadcrumbs a { color: var(--color-text-light); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs .breadcrumb_last { color: var(--color-primary); font-weight: 600; }

/* Screen reader text — required by WordPress */
.screen-reader-text {
    clip:     rect(1px, 1px, 1px, 1px);
    height:   1px;
    overflow: hidden;
    position: absolute;
    width:    1px;
}
.screen-reader-text:focus {
    clip:       auto;
    height:     auto;
    left:       5px;
    top:        5px;
    padding:    15px 23px;
    background: #f1f1f1;
    color:      #21759b;
    display:    block;
    font-weight: 700;
    z-index:    100000;
}

/* ══════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════ */
/* +1 over --z-sticky: site-header and .header-bottom are sibling stacking contexts with the same base level, and header-bottom (later in the DOM) would… */
.site-header { position: relative; z-index: calc(var(--z-sticky) + 1); }
.site-header.is-sticky { position: sticky; top: 0; }

/* ── Row 1 — top utility bar ───────────────────────────────────────────── */
.header-top {
    background: var(--color-bg-alt);
    color: var(--color-text-light);
    border-bottom: 1px solid var(--color-border);
}
.header-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    height: 40px;
}

.header-top-menu__list {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    list-style: none;
    font-size: var(--fs-base);
}
.header-top-menu__list a { color: var(--color-text-light); }
.header-top-menu__list a:hover { color: var(--color-primary); }
.header-top-menu__list li.current-menu-item a { color: var(--color-primary); font-weight: 600; }

/* Dropdown — same small-card pattern as .lang-dropdown right next to it in this row, not the mega-menu treatment .nav-primary__menu uses below; this is… */
.header-top-menu__list li { position: relative; }
.header-top-menu__list li.menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.header-top-menu__list li.menu-item-has-children > a::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .8;
}
/* top: 100% with no margin — the box touches the trigger with zero gap. */
.header-top-menu__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    flex-direction: column;
    min-width: 170px;
    padding: var(--sp-2);
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    list-style: none;
    z-index: var(--z-dropdown);
}
.header-top-menu__list li:hover > .sub-menu,
.header-top-menu__list li:focus-within > .sub-menu { display: flex; }
.header-top-menu__list .sub-menu a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    transition: background-color var(--transition), color var(--transition);
}
.header-top-menu__list .sub-menu a:hover { background: var(--color-bg-alt); color: var(--color-primary); }

.header-top__aside { display: flex; align-items: center; gap: var(--sp-5); flex: none; }

/* ── Language switcher (compact) ────────────────────────────────────────── */
.lang-dropdown { position: relative; }
.lang-dropdown__toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    font-size: var(--fs-base);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text);
    background: none;
    border: 0;
    cursor: pointer;
}
.lang-dropdown__toggle::after {
    content: '';
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
.lang-dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    flex-direction: column;
    min-width: 100px;
    margin-top: var(--sp-2);
    padding: var(--sp-2);
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    list-style: none;
}
.lang-dropdown:hover .lang-dropdown__menu,
.lang-dropdown:focus-within .lang-dropdown__menu { display: flex; }
.lang-dropdown__menu a {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--fs-sm);
}
.lang-dropdown__menu a:hover,
.lang-dropdown__menu li.active a { background: var(--color-bg-alt); color: var(--color-primary); }

/* ── Row 2 — logo / search / contacts ───────────────────────────────────── */
.header-middle { position: relative; background: var(--header-bg); box-shadow: var(--shadow-sm); }
.header-middle__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    min-height: var(--header-height);
}

.site-logo { flex: none; }
.site-logo img { display: block; height: 62px; width: auto; }
.site-title-link { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--color-primary); }

.header-middle__search {
    position: relative;
    display: flex;
    flex: 1;
    max-width: 680px;
}
/* .header-middle__search-bar wraps just the input+button (not the results dropdown) — needed so the mobile slide-reveal can clip-path this bar alone… */
.header-middle__search-bar {
    display: flex;
    width: 100%;
    border-radius: var(--radius);
    transition: box-shadow var(--transition);
}
/* One ring around the whole pill (input + button) on focus, not just the
   input on its own — the input has no right border, so its own :focus ring
   used to stop short and leave a mismatched edge where it meets the button. */
.header-middle__search-bar:focus-within { box-shadow: var(--focus-ring); }
.header-middle__search-bar .input {
    border-radius: var(--radius) 0 0 var(--radius);
    border-right: 0;
}
.header-middle__search-bar .input:focus {
    border-color: var(--color-border-strong);
    box-shadow: none;
}
.header-middle__search-bar .btn {
    flex: none;
    padding-inline: var(--sp-4);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ── Live product search results ─────────────────────────────────────────
   Populated client-side (headerSearchAutocomplete() in main.js) from the
   public WooCommerce Store API — no page reload, no auth needed. */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    max-height: 420px;
    overflow-y: auto;
    padding: var(--sp-2);
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.search-results__status {
    padding: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    text-align: center;
}
.search-results__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
}
.search-results__item:hover,
.search-results__item:focus-visible { background: var(--color-bg-alt); outline: none; }
.search-results__item-img,
.search-results__item-noimg {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    object-fit: cover;
}
.search-results__item-name {
    font-size: var(--fs-sm);
    line-height: 1.35;
    color: var(--color-text);
}
.search-results__view-all {
    display: block;
    margin-top: var(--sp-1);
    padding: var(--sp-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
}
.search-results__view-all:hover { color: var(--color-accent-hover); }

.header-contacts { display: flex; align-items: center; gap: var(--sp-6); flex: none; }

/* All icon-style controls (search, lang switcher, cart, mobile menu) kept together as one cluster, always flush to the right edge of header-middle. */
.header-middle__icons { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
@media (min-width: 1200px) {
    .header-middle__icons { display: none; }
}

.header-contacts__col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--color-text-light);
    white-space: nowrap;
}
.header-contacts__col a { color: inherit; }
.header-contacts__col a:hover { color: var(--color-primary); }

/* ── Row 3 — main navigation ────────────────────────────────────────────── */
.header-bottom {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-primary);
    box-shadow: var(--shadow-sm);
}
.header-bottom__inner { position: relative; display: flex; justify-content: center; }
.header-bottom__close,
.header-bottom-backdrop,
.header-bottom .social-links { display: none; }

.nav-primary__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    list-style: none;
}
.nav-primary__menu > li > a {
    display: flex;
    align-items: center;
    height: 52px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-on-dark);
    white-space: nowrap;
}
.nav-primary__menu > li > a:hover,
.nav-primary__menu > li.current-menu-item > a { color: var(--color-accent); }
.nav-primary__menu > li.current-menu-item > a { box-shadow: inset 0 -3px 0 var(--color-accent); }

/* Chevron on items that actually have a dropdown */
.nav-primary__menu > li.menu-item-has-children > a::after {
    content: '';
    width: 7px;
    height: 7px;
    margin-left: var(--sp-2);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .8;
}

/* Dropdown — multi-column panel, like the category mega-menu on the old site
   (".sub-menu.sub"): bold top-level links act as column headers, nested
   children flow directly beneath them instead of flying out sideways. */
.nav-primary__menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-dropdown);
    display: none;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--sp-6);
    row-gap: var(--sp-4);
    align-items: start;
    /* header-bottom__inner (containing block) IS .container, so 100% here
       spans exactly the same edge-to-edge width as the rest of the page. */
    width: 100%;
    padding: var(--sp-4) var(--sp-5);
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    list-style: none;
}
.nav-primary__menu > li:hover > .sub-menu,
.nav-primary__menu > li:focus-within > .sub-menu { display: grid; }
.nav-primary__menu .sub-menu > li {
    padding-right: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-right: 1px solid var(--color-border);
}
.nav-primary__menu .sub-menu > li:nth-child(4n) { border-right: 0; padding-right: 0; }
.nav-primary__menu .sub-menu a {
    display: block;
    padding: 3px var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
    border-radius: var(--radius-sm);
}
.nav-primary__menu .sub-menu a:hover { background: var(--color-bg-alt); }

.nav-primary__menu .sub-menu .sub-menu {
    position: static;
    display: block;
    transform: none;
    left: auto;
    width: auto;
    max-width: none;
    padding: 0 0 var(--sp-2);
    margin: 0;
    background: none;
    box-shadow: none;
}
.nav-primary__menu .sub-menu .sub-menu > li {
    padding-right: 0;
    border-right: 0;
}
.nav-primary__menu .sub-menu .sub-menu a {
    padding: 4px var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--color-text-light);
}
.nav-primary__menu .sub-menu .sub-menu a:hover { color: var(--color-primary); background: none; }

.submenu-toggle { display: none; }

.cart-icon { position: relative; display: flex; color: var(--color-primary); }
.cart-icon__count {
    position: absolute;
    top: -6px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-on-accent);
    background: var(--color-accent);
    border-radius: var(--radius-pill);
}

/* ── Floating CTA tab (as on the old site) ─────────────────────────────── */
.quick-cta {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    padding: var(--sp-3) var(--sp-2);
    background: var(--color-primary);
    color: var(--color-on-dark);
    font-size: var(--fs-sm);
    font-weight: 600;
    border-radius: var(--radius) 0 0 var(--radius);
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
    transition: background var(--transition);
}
.quick-cta:hover { background: var(--color-accent); color: var(--color-on-accent); }

/* ── Mobile nav / search toggles — hidden on desktop ────────────────────── */
.menu-toggle,
.search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.search-toggle { color: var(--color-primary); }

.menu-toggle { position: relative; color: var(--color-primary); }
.menu-toggle:hover { background: var(--color-bg-alt); }
.menu-toggle__icon-close { display: none; }
.menu-toggle.is-active .menu-toggle__icon-open { display: none; }
.menu-toggle.is-active .menu-toggle__icon-close { display: block; }

/* Mobile-drawer-only duplicates of the header-top secondary menu and the
   header-middle contacts block — hidden on desktop, shown at ≤1199px inside
   #header-bottom so nothing the burger owns disappears on smaller screens. */
.header-bottom__secondary,
.header-bottom .header-contacts { display: none; }

/* ── Адаптив хедера ─────────────────────────────────────────────────────── Планшет і мобільний: другорядне головне меню ховається за гамбургером… */
@media (max-width: 1199px) {
    /* Другорядне меню переходить у панель бургера (.header-bottom__secondary нижче), а перемикач мови й кошик — у header-middle__icons (дублікати, база… */
    .header-top { display: none; }
    .header-middle__icons .lang-dropdown { display: block; }
    .header-middle__icons .cart-icon { display: flex; }

    /* header-top прибрано вище, тож .site-header тут — це фактично сам header-middle: логотип, пошук і гамбургер лишаються прикріпленими зверху під час… */
    /* z-index вище за .header-bottom/.header-bottom-backdrop (var(--z-modal))
       — .menu-toggle всередині header-middle лишається клікабельним
       перемикачем відкрити/закрити, навіть коли шторка й бекдроп відкриті. */
    .site-header { position: sticky; top: 0; z-index: calc(var(--z-modal) + 1); }

    .search-toggle { display: flex; }

    /* Дропдаун з-під header-middle, поверх контенту, на всю ширину сторінки (не рядок, що розсуває сторінку, і не картка з рамкою — суцільна смуга від краю… */
    .header-middle__search {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: var(--z-dropdown);
        max-width: none;
        padding: var(--sp-4) var(--container-padding) 0;
        background: var(--header-bg);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .35s ease, visibility 0s linear .35s;
    }
    .header-middle__search:not([hidden]) {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .35s ease, visibility 0s linear 0s;
    }

    .header-middle__search-bar {
        border: 1px solid var(--color-border-strong);
        border-radius: 0;
        margin-bottom: var(--sp-4);
        clip-path: inset(0 0 100% 0);
        transition: clip-path .35s cubic-bezier(.16, 1, .3, 1);
    }
    .header-middle__search:not([hidden]) .header-middle__search-bar {
        clip-path: inset(0 0 0% 0);
    }
    .header-middle__search-bar:focus-within { box-shadow: var(--focus-ring); }
    .header-middle__search-bar .input,
    .header-middle__search-bar .btn { min-height: var(--control-height-sm); }
    .header-middle__search-bar .input {
        border: 0;
        border-radius: 0;
        padding: 0 var(--sp-3);
        font-size: var(--fs-sm);
    }
    .header-middle__search-bar .btn { border-radius: 0; padding-inline: var(--sp-3); }
    /* .header-middle__search-bar's own margin-bottom gives the closed panel breathing room under the field — cancel it back out for the results list… */
    .search-results { margin-top: calc(-1 * var(--sp-4)); }

    .menu-toggle { display: flex; }

    /* Рядок 3 стає єдиною мобільною панеллю: висувна справа оверлей-шторка (fixed, поза потоком — не розсуває контент), закрита за замовчуванням,… */
    .header-bottom {
        position: fixed;
        top: var(--header-height); /* опущено під header-middle, а не поверх нього */
        right: 0;
        z-index: var(--z-modal);
        width: 100%;
        height: calc(100vh - var(--header-height));
        overflow-y: auto;
        background: var(--color-bg);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .3s ease, visibility 0s linear .3s;
    }
    .header-bottom.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .3s ease, visibility 0s linear 0s;
    }
    .header-bottom__inner {
        flex-direction: column;
        align-items: stretch;
        padding: var(--sp-7) var(--sp-4) var(--sp-4);
        position: relative;
    }
    .header-bottom__close {
        position: absolute;
        top: var(--sp-3);
        right: var(--sp-3);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        background: none;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
        color: var(--color-text);
        cursor: pointer;
    }
    .header-bottom__close:hover { border-color: var(--color-primary); color: var(--color-primary); }

    .header-bottom-backdrop {
        display: block;
        position: fixed;
        top: var(--header-height); /* header-middle лишається над бекдропом, .menu-toggle клікабельний для закриття */
        right: 0;
        bottom: 0;
        left: 0;
        z-index: calc(var(--z-modal) - 1);
        background: rgba(27, 37, 48, .6);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility 0s linear .3s;
    }
    .header-bottom-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity .3s ease, visibility 0s linear 0s;
    }

    .header-bottom .social-links { display: flex; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--color-border); }

    .nav-primary { width: 100%; }
    .nav-primary__menu { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-primary__menu > li { border-bottom: 1px solid var(--color-border); }
    .nav-primary__menu > li > a {
        height: auto;
        padding: var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-4);
        color: var(--color-text);
    }
    .nav-primary__menu > li > a:hover,
    .nav-primary__menu > li.current-menu-item > a {
        color: var(--color-primary);
        background: var(--color-bg-alt);
        box-shadow: none;
    }
    .nav-primary__menu > li.menu-item-has-children { position: relative; }
    .nav-primary__menu > li.menu-item-has-children > a::after { display: none; }

    /* Кнопка розкриття підменю — вставляється JS'ом (mobileSubmenus() у main.js);
       шеврон намальований так само, як у .lang-dropdown__toggle::after. */
    .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset: 0 0 0 auto;
        width: 60px;
        background: none;
        border: 0;
        cursor: pointer;
    }
    .submenu-toggle::after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 1.5px solid var(--color-text-light);
        border-bottom: 1.5px solid var(--color-text-light);
        transform: rotate(45deg);
        transition: transform var(--transition);
    }
    .nav-primary__menu > li.is-open > .submenu-toggle::after { transform: rotate(-135deg); }

    /* Мега-меню з колонками → вертикальний акордеон */
    .nav-primary__menu > li:hover > .sub-menu,
    .nav-primary__menu > li:focus-within > .sub-menu { display: none; }
    .nav-primary__menu > li.is-open > .sub-menu { display: block; }
    .nav-primary__menu .sub-menu {
        position: static;
        transform: none;
        display: none;
        grid-template-columns: 1fr;
        width: auto;
        max-width: none;
        padding: 0 0 var(--sp-3) var(--sp-5);
        background: var(--color-bg-alt);
        border-radius: 0;
        box-shadow: none;
    }
    .nav-primary__menu .sub-menu > li { border-right: 0; padding-right: 0; padding-bottom: 0; }
    .nav-primary__menu .sub-menu a { color: var(--color-text-light); padding: var(--sp-2) var(--sp-3); }

    /* Другорядне меню — копія header-top-menu, показується тільки в панелі */
    .header-bottom__secondary {
        display: block;
        margin-top: var(--sp-3);
        padding-top: var(--sp-3);
    }
    .header-bottom__secondary-list { display: flex; flex-direction: column; list-style: none; }
    .header-bottom__secondary-list li { position: relative; }
    .header-bottom__secondary-list a {
        display: block;
        padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-4);
        font-size: var(--fs-sm);
        color: var(--color-text-light);
    }
    .header-bottom__secondary-list a:hover { color: var(--color-primary); }

    /* Same accordion mechanism as .nav-primary__menu's mobile submenu (.submenu-toggle inserted by mobileSubmenus() in main.js) — a second menu with… */
    .header-bottom__secondary-list > li:hover > .sub-menu,
    .header-bottom__secondary-list > li:focus-within > .sub-menu { display: none; }
    .header-bottom__secondary-list > li.is-open > .sub-menu { display: block; }
    .header-bottom__secondary-list .sub-menu {
        display: none;
        list-style: none;
        padding: 0 0 var(--sp-2) var(--sp-5);
        background: var(--color-bg-alt);
    }
    .header-bottom__secondary-list .sub-menu a {
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--fs-sm);
        color: var(--color-text-light);
    }
    .header-bottom__secondary-list .sub-menu a:hover { color: var(--color-primary); }
}

@media (max-width: 767px) {
    .site-logo img { height: 44px; }

    /* На планшеті (768–1199) контактам вистачає місця в header-middle — рядок пошуку там уже згорнутий в іконку, тож лишаємо їх на видноті. */
    .header-middle .header-contacts { display: none; }
    .header-bottom .header-contacts {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--sp-2) var(--sp-6);
        margin-top: var(--sp-2);
        padding: var(--sp-3) var(--sp-5) 0 var(--sp-4);
        border-top: 1px solid var(--color-border);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */
.site-footer {
    margin-top: auto;
    padding: var(--sp-8) 0 var(--sp-5);
    background: linear-gradient(to bottom, var(--footer-bg-from), var(--footer-bg-to));
    color: var(--footer-color);
}

.footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
    padding-bottom: var(--sp-7);
    font-size: 16px;
}
.footer-grid > .footer-col:first-child {
    position: relative;
}
.footer-grid > .footer-col:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: calc(var(--sp-6) / -2);
    width: 1px;
    height: 100%;
    background: rgb(81, 89, 100);
}

.footer-about { margin-top: var(--sp-4); line-height: 1.7; color: var(--footer-color); }

.footer-col__title {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-base);
    font-weight: 600;
    text-transform: capitalize;
    color: var(--footer-color);
}
.footer-menu__list { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; }
.footer-menu__list a { color: var(--footer-color); }
.footer-menu__list a:hover { color: var(--color-accent); }

.footer-address { font-style: normal; }
.footer-address p {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--footer-color);
    white-space: nowrap;
}
.footer-address p + p { margin-top: var(--sp-3); }
.footer-address a { display: flex; align-items: center; gap: var(--sp-2); color: var(--footer-color); }
.footer-address a:hover { color: var(--color-accent); }
.footer-address svg { flex: none; color: var(--color-accent); }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-top: var(--sp-5);
    border-top: 1px solid rgb(81, 89, 100);
    font-size: var(--fs-sm);
}
.footer-copyright { color: var(--footer-color); }
.footer-legal__list { display: flex; gap: var(--sp-5); list-style: none; }
.footer-legal__list a { color: var(--footer-color); }
.footer-legal__list a:hover { color: var(--color-accent); }

@media (max-width: 1023px) {
    .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--sp-6); }
}

@media (max-width: 767px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* ── Floating CTA (sitewide "contacts" button) ───────────────────────────── */
.cta-fab {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition);
}
.cta-fab:hover { background: var(--color-accent-hover); transform: scale(1.05); }
.cta-fab svg { width: 24px; height: 24px; fill: currentColor; }

.cta-popup {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    /* flex-start (not center) + margin:auto on the card below is the overflow-safe centering pattern: the card still centers itself via its own auto… */
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-7) var(--sp-5);
    background: rgba(27, 37, 48, .6);
    overflow-y: auto;
}
.cta-popup[hidden] { display: none; }

.cta-popup__card {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: var(--sp-7) var(--sp-6) var(--sp-6);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.cta-popup__close {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.cta-popup__close:hover { border-color: var(--color-primary); color: var(--color-primary); }

.cta-popup__title { margin: 0; padding-right: var(--sp-6); font-size: var(--fs-h4); }
.cta-popup__subtitle { margin: 0; font-size: var(--fs-base); font-weight: 600; }

.cta-popup__contacts { display: flex; flex-direction: column; gap: var(--sp-2); }
.cta-popup__contacts p,
.cta-popup__contacts a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    color: var(--color-text-light);
    transition: color var(--transition);
}
.cta-popup__contacts a:hover { color: var(--color-primary); }
.cta-popup__contacts svg { width: 18px; height: 18px; flex: none; fill: currentColor; color: var(--color-primary); }

/* JetFormBuilder's own markup, restyled to match .input/.textarea/.btn --
   same override pattern as .contacts-form in css/pages/kontakty.css,
   scoped here to .cta-popup__form instead. */
.cta-popup__form .jet-form-builder-row { margin-bottom: var(--sp-4); }
.cta-popup__form .jet-form-builder__label-text {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text);
}
.cta-popup__form .jet-form-builder__required { color: var(--color-error); }
.cta-popup__form .jet-form-builder__field-wrap input.jet-form-builder__field,
.cta-popup__form .jet-form-builder__field-wrap textarea.jet-form-builder__field {
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.cta-popup__form .jet-form-builder__field-wrap textarea.jet-form-builder__field {
    min-height: 100px;
    padding: var(--sp-3) var(--sp-4);
    resize: vertical;
}
.cta-popup__form .jet-form-builder__field-wrap input.jet-form-builder__field:focus,
.cta-popup__form .jet-form-builder__field-wrap textarea.jet-form-builder__field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}
.cta-popup__form .jet-form-builder__submit-wrap { margin-top: var(--sp-2); }
.cta-popup__form .jet-form-builder__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--sp-6);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--color-accent);
    color: var(--color-on-accent);
    transition: background-color var(--transition);
}
.cta-popup__form .jet-form-builder__submit:hover { background: var(--color-accent-hover); }

@media (max-width: 767px) {
    .cta-fab { right: var(--sp-4); bottom: var(--sp-4); width: 48px; height: 48px; }
    .cta-fab svg { width: 20px; height: 20px; }
    .cta-popup__card { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
}

/* ── Social links (Viber/Telegram/WhatsApp/TikTok) ───────────────────────── */
/* Theme\social_links() (inc/components.php) emits this markup in 4 places — header-top__aside, footer-address, cta-popup__contacts, contacts-info —… */
.social-links { display: flex; align-items: center; gap: var(--sp-3); }
.social-links__link { display: flex; transition: color var(--transition); }

.social-links--header .social-links__link { color: var(--color-text-light); }
.social-links--header .social-links__link:hover { color: var(--color-primary); }

.social-links--footer { margin-top: var(--sp-3); }
.social-links--footer .social-links__link { color: var(--footer-color); }
.social-links--footer .social-links__link svg { color: var(--color-accent); }
.social-links--footer .social-links__link:hover { color: var(--color-accent); }

.social-links--muted .social-links__link { color: var(--color-text-light); }
.social-links--muted .social-links__link svg { color: var(--color-primary); width: 24px; height: 24px; }
.social-links--muted .social-links__link:hover { color: var(--color-primary); }