/* ==========================================================================
   Autochem Theme — main.css
   ========================================================================== */

:root {
    --color-bg: #ffffff;
    --color-text: #1a2332;
    --color-muted: #6b7280;
    --color-primary: #1a3a5c;
    --color-cta: #e87400;
    --color-cta-dark: #c96200;
    --color-link: #1a5fba;
    --color-link-hover: #0f46a0;
    --color-accent: #f0f4f8;
    --color-border: #e2e8f0;
    --color-dark-bg: #0f2a4a;
    --color-footer-bg: #131c2b;
    --color-footer-text: #94a3b8;

    --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --container-max: 1280px;
    --container-pad: 1.5rem;
    --header-height: 80px;
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
    --transition: 200ms ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-link-hover); }
h1,h2,h3,h4 { font-family: var(--font-base); font-weight: 700; line-height: 1.2; margin: 0 0 .75em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { padding: 0; margin: 0; list-style: none; }

.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.skip-link { position: absolute; left: -9999px; top: 0; background: #000; color: #fff; padding: .5rem 1rem; z-index: 9999; }
.skip-link:focus { left: 0; }

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.site-crumbs { background: var(--color-accent, #f0f4f8); border-bottom: 1px solid var(--color-border, #e2e6ec); font-size: .8rem; }
.site-crumbs__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; padding-top: .7rem; padding-bottom: .7rem; }
.site-crumbs a { color: var(--color-muted, #6b7280); transition: color var(--transition); }
.site-crumbs a:hover { color: var(--color-cta, #E8731C); }
.site-crumbs__sep { color: #c7ced8; }
.site-crumbs__current { color: var(--color-heading, #13294B); font-weight: 600; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.75rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    text-decoration: none;
    white-space: nowrap;
}
.btn--cta {
    background: var(--color-cta);
    color: #fff;
    border-color: var(--color-cta);
}
.btn--cta:hover {
    background: var(--color-cta-dark);
    border-color: var(--color-cta-dark);
    color: #fff;
    box-shadow: 0 4px 14px rgba(232,116,0,.4);
}
.btn--hero-outline {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn--hero-outline:hover { background: var(--color-accent); color: var(--color-text); }
.btn--hero-outline svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--outline {
    background: transparent;
    color: var(--color-link);
    border-color: var(--color-link);
}
.btn--outline:hover { background: var(--color-link); color: #fff; }
.btn--sm { padding: .5rem 1.25rem; font-size: .875rem; }
.btn--full { width: 100%; justify-content: center; }
.btn__spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--header-height);
    padding-top: .5rem;
    padding-bottom: .5rem;
}
/* Branding */
.site-branding { flex-shrink: 0; }
.site-branding__text-link { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.site-branding__badge {
    position: relative;
    width: 48px; height: 48px;
    color: var(--color-cta);
    flex-shrink: 0;
}
.site-branding__badge svg { width: 48px; height: 48px; }
.site-branding__abbr {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .8rem;
    color: var(--color-cta);
    letter-spacing: -.02em;
}
.site-branding__name { font-weight: 700; font-size: .95rem; color: var(--color-text); line-height: 1.3; max-width: 160px; }
.custom-logo-link img,
img.custom-logo { height: 52px; width: auto; display: block; }

/* Logo color variants for dark backgrounds */
.site-footer__brand .custom-logo-link img,
.site-footer__brand img.custom-logo,
.cta-banner__icon   .custom-logo-link img,
.cta-banner__icon   img.custom-logo {
    filter: brightness(0) invert(1);
}
/* Center the whole brand block: logo sits centered over the name */
.site-footer__brand { text-align: center; width: fit-content; }
.site-footer__brand .custom-logo-link { display: block; }
.site-footer__brand .custom-logo-link img,
.site-footer__brand img.custom-logo { margin-left: auto; margin-right: auto; }
.site-footer__brand .footer-brand-badge { justify-content: center; }
/* Lower the brand text a touch below the logo */
.site-footer__brand .site-footer__name { margin-top: 12px; }
.cta-banner__icon .custom-logo-link { display: flex; }
.cta-banner__icon .custom-logo-link img,
.cta-banner__icon img.custom-logo { height: 40px; }

/* Nav */
.main-navigation { margin-left: auto; }
.primary-menu {
    display: flex;
    list-style: none;
    margin: 0; padding: 0;
    gap: .1rem;
}
.primary-menu li { position: relative; }
.primary-menu a {
    color: var(--color-text);
    font-weight: 500;
    font-size: .9rem;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    display: inline-block;
    position: relative;
    white-space: nowrap;
    transition: color var(--transition);
    /* Прибираємо синю рамку-підсвітку, яку мобільні браузери малюють при тапі
       на посилання. Поточний пункт і так позначено фоном, тож рамка зайва. */
    -webkit-tap-highlight-color: transparent;
}
.primary-menu a:focus { outline: none; }
/* Для клавіатурної навігації лишаємо ненав'язливий фокус. */
.primary-menu a:focus-visible {
    outline: 2px solid var(--color-link, #2271b1);
    outline-offset: 2px;
}
.primary-menu .menu-item-has-children > a { display: inline-flex; align-items: center; }
.primary-menu .menu-item-has-children > a::after {
    content: '▾';
    display: inline-block;
    margin-left: .3rem;
    font-size: .7rem;
    line-height: 1;
    opacity: .7;
    transition: transform .2s ease;
}
.primary-menu .menu-item-has-children.is-open > a::after {
    transform: rotate(180deg);
}
.primary-menu .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 220px;
    width: max-content;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    list-style: none;
    padding: .5rem 0;
    z-index: 20;
}
.primary-menu .sub-menu li { border-bottom: 0; }
.primary-menu .sub-menu a {
    display: block;
    padding: .65rem 1rem;
    font-size: .9rem;
}
.primary-menu .sub-menu a:hover {
    background: rgba(0,0,0,.03);
}
/* Desktop: open on hover/focus. Mobile handles opening via .is-open only
   (hover/focus-within is disabled in the mobile @media block below, otherwise
   the focused toggle button keeps the submenu stuck open after a tap). */
.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu,
.primary-menu .menu-item-has-children.is-open > .sub-menu {
    display: block;
}
/* Nested submenus (3rd level, e.g. Тара) fly out to the side, not downward */
.primary-menu .sub-menu .sub-menu {
    top: -.5rem;
    left: calc(100% + 2px);
}
.primary-menu .sub-menu .menu-item-has-children > a { display: flex; align-items: center; }
.primary-menu .sub-menu .menu-item-has-children > a::after {
    content: '▸';
    margin-left: auto;
    padding-left: .8rem;
    transform: none;
}
.primary-menu .sub-menu .menu-item-has-children.is-open > a::after {
    transform: none;
}
.primary-menu .submenu-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
    margin-left: .35rem;
    font-size: 1rem;
    line-height: 1;
}
.primary-menu .submenu-toggle::before {
    content: '▾';
    display: inline-block;
    transition: transform .2s ease;
}
.primary-menu .menu-item-has-children.is-open > .submenu-toggle::before {
    transform: rotate(180deg);
}

.primary-menu a:hover { color: var(--color-link); }
/* Активний пункт — суцільна заливка (як у бургер-меню), а не лінія знизу. */
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-ancestor > a {
    color: var(--color-link);
    font-weight: 600;
    background: #d3deec;
    border-radius: 8px;
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    margin-left: 1rem;
}
.lang-switcher { display: flex; align-items: center; gap: .35rem; font-size: .85rem; white-space: nowrap; }
.lang-switcher__link { color: var(--color-muted); font-weight: 500; transition: color var(--transition); }
.lang-switcher__link:hover, .lang-switcher__link.is-active { color: var(--color-text); }
.lang-switcher__sep { color: var(--color-border); }
.header-cta { padding: .55rem 1.25rem; font-size: .875rem; }
.header-cta__icon { width: 18px; height: 18px; flex-shrink: 0; display: none; }
.header-cta__label { white-space: nowrap; }

/* Burger */
.menu-toggle { display: none; background: transparent; border: 0; cursor: pointer; padding: .5rem; width: 44px; height: 44px; }
.menu-toggle__bar { display: block; width: 22px; height: 2px; background: var(--color-text); margin: 5px auto; transition: transform var(--transition), opacity var(--transition); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    background: linear-gradient(135deg, #f0f4f8 0%, #e8eff7 100%);
    padding: 4.5rem 0 4rem;
    overflow: hidden;
    position: relative;
}
.hero::before {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 50%;
    background: radial-gradient(ellipse at center, rgba(26,95,186,.04) 0%, transparent 70%);
    pointer-events: none;
}
.hero--has-bg {
    background: var(--hero-bg) center/cover no-repeat;
}
.hero--has-bg::before {
    inset: 0;
    width: auto;
    background: linear-gradient(135deg, rgba(10,20,40,.72) 0%, rgba(10,20,40,.45) 100%);
}
.hero--has-bg .hero__pretitle { color: rgba(255,255,255,.75); }
.hero--has-bg .hero__title    { color: #fff; }
.hero--has-bg .hero__desc     { color: rgba(255,255,255,.8); }
.hero--has-bg .btn--hero-outline {
    border-color: rgba(255,255,255,.45);
    color: #fff;
}
.hero--has-bg .btn--hero-outline:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
}
.hero__pretitle {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-cta);
    margin-bottom: .75rem;
}
.hero__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    color: var(--color-text);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}
.hero__desc { font-size: 1rem; color: #4b5563; max-width: 520px; margin-bottom: 2rem; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Hero Carousel ───────────────────────────────────────── */
.hero__carousel-wrap { position: relative; min-width: 0; }
.hero-carousel { position: relative; width: 100%; }
.hc-viewport { overflow: hidden; border-radius: var(--radius-lg); width: 100%; }
.hc-track {
    display: flex;
    gap: 1rem;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.hc-item {
    flex: 0 0 auto; /* width set by JS */
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
    cursor: default;
}
.hc-item.is-center { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: rgba(26,95,186,.2); }
.hc-item__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.hc-item__img {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hc-item__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.hc-item__img svg { width: 56px; height: 56px; opacity: .75; }
.hc-item__name { padding: .75rem 1rem; font-size: .875rem; font-weight: 600; color: var(--color-text); text-align: center; border-top: 1px solid var(--color-border); }
.hc-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    z-index: 10;
    transition: background var(--transition), border-color var(--transition);
    padding: 0;
}
.hc-btn:hover { background: var(--color-cta); border-color: var(--color-cta); color: #fff; }
.hc-btn svg { width: 18px; height: 18px; }
.hc-btn--prev { left: -18px; }
.hc-btn--next { right: -18px; }
.hc-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}
.hc-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition), width var(--transition);
}
.hc-dot.is-active { background: var(--color-link); width: 20px; border-radius: 4px; }

/* Color variants for image placeholders */
.hc-item__img--amber,   .product-card__img--amber   { background: #fff; color: #fb923c; }
.hc-item__img--steel,   .product-card__img--steel   { background: #fff; color: #94a3b8; }
.hc-item__img--green,   .product-card__img--green   { background: #fff; color: #4ade80; }
.hc-item__img--red,     .product-card__img--red     { background: #fff; color: #f87171; }
.hc-item__img--blue,    .product-card__img--blue    { background: #fff; color: #60a5fa; }
.hc-item__img--teal,    .product-card__img--teal    { background: #fff; color: #2dd4bf; }
.hc-item__img--gray,    .product-card__img--gray    { background: #fff; color: #d1d5db; }
.partner-card__img--blue   { background: linear-gradient(135deg, #0c1a4a, #1e3a8a); color: #93c5fd; }
.partner-card__img--orange { background: linear-gradient(135deg, #431407, #7c2d12); color: #fdba74; }
.partner-card__img--navy   { background: linear-gradient(135deg, #0f2a4a, #1e3a5c); color: #7dd3fc; }

/* ==========================================================================
   Section Commons
   ========================================================================== */
.section { padding: 5rem 0; }
.section__title { text-align: left; color: var(--color-text); margin-bottom: 1rem; }
.section__title--left { text-align: left; }
.section__title--light { color: #fff; }
.section__intro { text-align: left; color: var(--color-muted); font-size: 1.05rem; margin-bottom: 3rem; }
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.section-head .section__title { margin-bottom: 0; }
.section__more-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-link);
    white-space: nowrap;
}
.section__more-link svg { width: 16px; height: 16px; }
.section__more-link:hover { color: var(--color-link-hover); }

/* ==========================================================================
   Production
   ========================================================================== */
.section--production { background: var(--color-bg); }
.products-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 7), 1fr);
    gap: 1rem;
}
.product-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    background: #fff;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-card__img {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card__img svg { width: 52px; height: 52px; opacity: .8; }
.product-card__body { padding: 1rem; }
.product-card__title { font-size: .9rem; font-weight: 700; color: var(--color-text); margin-bottom: .5rem; }
.product-card__desc { font-size: .8rem; color: var(--color-muted); line-height: 1.5; margin-bottom: .75rem; }
.product-card__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-link);
    transition: gap var(--transition);
}
.product-card__link svg { width: 14px; height: 14px; }
.product-card__link:hover { gap: .55rem; color: var(--color-link-hover); }

/* ==========================================================================
   About
   ========================================================================== */
.section--about { background: var(--color-accent); }
.about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about__image-placeholder {
    background: linear-gradient(135deg, #0f2a4a, #1a3a5c);
    border-radius: var(--radius-lg);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: rgba(255,255,255,.35);
    font-size: .875rem;
}
.about__image-placeholder svg { width: 80px; height: 80px; flex-shrink: 0; }
.about__image img { width: 100%; height: auto; border-radius: var(--radius-lg); object-fit: cover; }

/* Homepage section card photos (generated images) */
.product-card__img { padding: 0; overflow: hidden; }
.product-card__img img.product-card__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-card__img { padding: 0; overflow: hidden; }
.partner-card__img img.partner-card__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.about__image-photo { width: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.about__image-photo img.about__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Private Label section photo (replaces CSS canisters) */
.pl__visual img.pl__photo { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }

.about__content p { color: #374151; margin-bottom: 1rem; }
.about__features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.75rem; }
.about-feature { display: flex; gap: 1rem; align-items: flex-start; }
.about-feature__icon { color: var(--color-link); flex-shrink: 0; width: 32px; height: 32px; margin-top: .1rem; }
.about-feature__icon svg { width: 100%; height: 100%; }
.about-feature strong { display: block; font-size: .95rem; color: var(--color-text); margin-bottom: .3rem; }
.about-feature p { font-size: .85rem; color: var(--color-muted); margin: 0; }

/* ==========================================================================
   Why Us
   ========================================================================== */
.section--why-us { background: var(--color-bg); }
.section--why-us .section__title { margin-bottom: 2.5rem; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.why-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem 1.5rem;
    background: #fff;
    transition: box-shadow var(--transition), transform var(--transition);
}
.why-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.why-card__icon { color: var(--color-link); width: 40px; height: 40px; margin-bottom: 1rem; }
.why-card__icon svg { width: 100%; height: 100%; }
.why-card__title { font-size: 1rem; color: var(--color-text); margin-bottom: .5rem; }
.why-card__desc { font-size: .875rem; color: var(--color-muted); margin: 0; }

/* ==========================================================================
   Private Label
   ========================================================================== */
.section--private-label {
    background: var(--color-dark-bg);
    padding: 5rem 0;
}
.pl__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.pl__content p { color: rgba(255,255,255,.8); margin-bottom: 1.5rem; }
.pl__visual {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
}
.pl-canister {
    width: 88px;
    min-height: 120px;
    border-radius: 8px 8px 6px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .75rem .5rem;
    position: relative;
    border: 2px solid rgba(255,255,255,.15);
}
.pl-canister::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px; height: 12px;
    border-radius: 3px 3px 0 0;
    background: inherit;
    filter: brightness(.8);
}
.pl-canister--amber { background: linear-gradient(160deg, #451a03, #92400e); }
.pl-canister--gold  { background: linear-gradient(160deg, #365314, #4d7c0f); }
.pl-canister--teal  { background: linear-gradient(160deg, #042f2e, #0f766e); }
.pl-canister--red   { background: linear-gradient(160deg, #450a0a, #b91c1c); }
.pl-canister__brand { font-size: .6rem; font-weight: 800; color: rgba(255,255,255,.6); text-align: center; letter-spacing: .05em; line-height: 1.2; }
.pl-canister__spec  { font-size: .65rem; font-weight: 700; color: #fff; text-align: center; }
.pl-canister__vol   { font-size: .6rem; color: rgba(255,255,255,.6); }

/* Desktop: keep the photo no taller than the text column beside it */
@media (min-width: 1025px) {
    .pl__inner { align-items: stretch; }
    .pl__visual { position: relative; min-height: 0; }
    .pl__visual img.pl__photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ==========================================================================
   Partnership
   ========================================================================== */
.section--partnership { background: var(--color-bg); }
.section--partnership .section__title { margin-bottom: 2.5rem; }
.partnership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.partner-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
    transition: box-shadow var(--transition), transform var(--transition);
}
.partner-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.partner-card__img {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.partner-card__img svg { width: 64px; height: 64px; opacity: .75; }
.partner-card__body { padding: 1.5rem; }
.partner-card__title { font-size: 1.05rem; color: var(--color-text); margin-bottom: .5rem; }
.partner-card__desc { font-size: .875rem; color: var(--color-muted); margin-bottom: 1rem; }

/* ==========================================================================
   CTA Banner
   ========================================================================== */
.cta-banner {
    background: var(--color-dark-bg);
    padding: 2.5rem 0;
}
.cta-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.cta-banner__text {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.cta-banner__icon { color: var(--color-cta); width: 48px; height: 48px; flex-shrink: 0; }
.cta-banner__icon svg { width: 100%; height: 100%; }
.cta-banner__text h3 { color: #fff; font-size: 1.2rem; margin-bottom: .25rem; }
.cta-banner__text p { color: rgba(255,255,255,.7); font-size: .9rem; margin: 0; }

/* ==========================================================================
   Contacts
   ========================================================================== */
.section--contacts { background: var(--color-accent); }
.section--contacts .section__title { margin-bottom: 2.5rem; }
.contacts__inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 4rem;
    align-items: start;
}
.contact-details { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-details li { display: flex; gap: 1rem; align-items: flex-start; font-size: .95rem; color: var(--color-text); }
.contact-details__icon { color: var(--color-link); width: 22px; height: 22px; flex-shrink: 0; margin-top: .1rem; }
.contact-details__icon svg { width: 100%; height: 100%; }
.contact-details a { color: var(--color-text); font-weight: 500; }
.contact-details a:hover { color: var(--color-link); }

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; gap: 1rem; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-field { display: flex; flex-direction: column; gap: .4rem; }
.form-field label { font-size: .875rem; font-weight: 500; color: var(--color-text); }
.form-field .required { color: var(--color-cta); }
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: .65rem .9rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-base);
    font-size: .95rem;
    color: var(--color-text);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
}
.form-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.5'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 18px;
    padding-right: 2.5rem;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-link);
    box-shadow: 0 0 0 3px rgba(26,95,186,.12);
}
.form-field textarea { resize: vertical; min-height: 100px; }
.form-response { padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .9rem; display: none; margin-top: .25rem; }
.form-response.is-success { display: block; background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.form-response.is-error   { display: block; background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }

/* Social */
.social-links { display: flex; gap: .6rem; }
.social-link {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--color-cta);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition), transform var(--transition);
}
.social-link:hover { background: var(--color-cta-dark); color: #fff; transform: scale(1.1); }
.social-link svg { width: 16px; height: 16px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); }
.site-footer__inner {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
    align-items: start;
    gap: 2.5rem 3.5rem;
    padding: 3.5rem var(--container-pad) 2rem;
}
.footer-brand-badge { display: flex; align-items: center; gap: .5rem; color: var(--color-cta); margin-bottom: .5rem; }
.footer-brand-badge svg { width: 36px; height: 36px; }
.footer-brand-badge span { font-weight: 800; font-size: 1.1rem; color: var(--color-cta); }
.site-footer__name { font-weight: 700; font-size: 1rem; color: #e2e8f0; margin-bottom: .35rem; }
.site-footer__tagline { font-size: .85rem; color: var(--color-footer-text); line-height: 1.5; margin: 0; }
.site-footer__heading { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #e2e8f0; margin-bottom: 1.1rem; }
.footer-nav { display: flex; flex-direction: column; gap: .6rem; }
.footer-nav li a { font-size: .875rem; color: var(--color-footer-text); transition: color var(--transition); }
.footer-nav li a:hover { color: #fff; }
.footer-contacts { display: flex; flex-direction: column; gap: .6rem; }
.footer-contacts li a { font-size: .875rem; color: var(--color-footer-text); }
.footer-contacts li a:hover { color: #fff; }
.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 1.25rem 0;
    text-align: center;
    font-size: .8rem;
    color: rgba(148,163,184,.5);
}
.site-footer__bottom p { margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
    .products-grid { grid-template-columns: repeat(4, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
    .about__inner    { grid-template-columns: 1fr; gap: 2.5rem; }
    .pl__inner       { grid-template-columns: 1fr; gap: 2.5rem; }
    .contacts__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .about__features { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .hc-btn--prev { left: -14px; }
    .hc-btn--next { right: -14px; }
    .partnership-grid { grid-template-columns: 1fr 1fr; }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .form-row--3 { grid-template-columns: 1fr 1fr; }
}

/* Collapse the header nav into a burger before the row gets cramped. */
@media (max-width: 1024px) {
    .menu-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-left: auto; width: 40px; height: 40px; padding: 0; background: var(--color-cta); border-radius: 50%; flex-shrink: 0; flex-basis: 40px; }
    .menu-toggle__bar { width: 18px; margin: 0; background: #fff; }
    .main-navigation {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
        margin-left: 0;
        z-index: 30;
    }
    .main-navigation.is-open { max-height: 80vh; overflow-y: auto; }
    .primary-menu { flex-direction: column; gap: 0; padding: .75rem var(--container-pad); }
    .primary-menu li { border-bottom: 1px solid var(--color-border); }
    .primary-menu li:last-child { border-bottom: 0; }
    .primary-menu a { display: block; padding: .9rem 0; white-space: normal; }
    .primary-menu .menu-item-has-children { display: flex; align-items: center; flex-wrap: wrap; }
    .primary-menu .menu-item-has-children > a { flex: 1; display: block; }
    .primary-menu .sub-menu {
        position: static;
        margin: 0;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding-left: 1rem;
        width: 100%;
    }
    .primary-menu .submenu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
    }
    /* Стрілка на ~40% більша, ніж на десктопі. */
    .primary-menu .submenu-toggle::before { font-size: 1.4rem; }
    .primary-menu .menu-item-has-children > a::after { display: none; }

    /* На тачі підменю розкривається лише кліком (.is-open). Hover/focus-within
       на мобільному не даємо — інакше сфокусована кнопка тримає список відкритим
       і повторний тап по стрілці не згортає його. */
    .primary-menu .menu-item-has-children:hover > .sub-menu,
    .primary-menu .menu-item-has-children:focus-within > .sub-menu {
        display: none;
    }
    .primary-menu .menu-item-has-children.is-open > .sub-menu {
        display: block;
    }

    /* Більший відступ пунктів від краю + зручніша зона тапу. */
    .primary-menu > li > a { padding: .7rem 1.1rem; }

    /* Активний пункт — лише суцільна заливка, без жодних смуг (ні знизу, ні збоку). */
    .primary-menu .current-menu-item > a,
    .primary-menu .current-menu-ancestor > a {
        background: #d3deec;
        border-radius: 8px;
    }
    .primary-menu .current-menu-item > a::before { display: none; }
    .header-actions { gap: .5rem; margin-left: .5rem; }
    /* Логотип не мав права стискатися і разом із бургером та CTA не влазив
       у 375px -> уся мобільна версія отримувала горизонтальний скрол. */
    .site-branding { flex-shrink: 1; min-width: 0; }
    .site-branding__text-link { min-width: 0; }
    /* max-width:160px з базового правила лишається — назва фірми має йти
       у три рядки, а не витягуватись у стрічку. */
    .site-branding__name { min-width: 0; }
    .lang-switcher { display: none; }
    .header-cta { padding: 0; width: 40px; height: 40px; border-radius: 50%; justify-content: center; }
    .header-cta__label { display: none; }
    .header-cta__icon  { display: block; }
}

@media (max-width: 768px) {
    .section { padding: 3.5rem 0; }
    .hero { padding: 3rem 0; }
    .why-grid { grid-template-columns: 1fr 1fr; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .partnership-grid { grid-template-columns: 1fr; }
    .pl__visual { gap: .5rem; }
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .hero__actions { flex-direction: column; }
    .products-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .about__features { grid-template-columns: 1fr; }
    .form-row--3 { grid-template-columns: 1fr; }
    .cta-banner__inner { flex-direction: column; text-align: center; }
    .cta-banner__text { flex-direction: column; }
    .site-footer__inner { grid-template-columns: 1fr; }
    .hc-btn { display: none; }
}

/* ==========================================================================
   Private Label Page
   ========================================================================== */

/* Form row 2-column */
.form-row--2 { grid-template-columns: 1fr 1fr; }

/* ── Hero ─────────────────────────────────────────────────── */
.plp-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0a1428 0%, #0f2a4a 60%, #1a3a5c 100%);
    overflow: hidden;
    padding: 5rem 0;
}
.plp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(26,95,186,.15) 0%, transparent 65%);
    pointer-events: none;
}
/* Hero with a background photo — dark overlay heavier on the left for readable text */
.plp-hero--has-bg {
    background-image:
        linear-gradient(90deg, rgba(10,20,40,.94) 0%, rgba(10,20,40,.82) 36%, rgba(13,34,60,.5) 68%, rgba(13,34,60,.32) 100%),
        var(--plp-hero-bg);
    background-size: cover;
    background-position: center;
}
.plp-hero__inner { position: relative; max-width: 600px; }
.plp-hero__label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-cta);
    margin-bottom: .85rem;
}
.plp-hero__title {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}
.plp-hero__desc {
    font-size: 1rem;
    color: rgba(255,255,255,.75);
    margin-bottom: 2rem;
    max-width: 520px;
}

/* ── Intro ────────────────────────────────────────────────── */
.plp-intro { background: var(--color-bg); }
.plp-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.plp-intro__content p { color: #374151; margin-bottom: 1rem; font-size: 1.025rem; }
.plp-intro__img-placeholder {
    background: linear-gradient(135deg, #0f2a4a, #1a3a5c);
    border-radius: var(--radius-lg);
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: rgba(255,255,255,.35);
    font-size: .875rem;
}
.plp-intro__img-placeholder svg { width: 80px; height: 80px; flex-shrink: 0; }
.plp-intro__image img.plp-intro__photo { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* ── Benefits ─────────────────────────────────────────────── */
.plp-benefits { background: var(--color-accent); }
.plp-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.plp-benefit-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem;
    transition: box-shadow var(--transition), transform var(--transition);
}
.plp-benefit-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.plp-benefit-card__icon { color: var(--color-link); width: 36px; height: 36px; margin-bottom: 1rem; }
.plp-benefit-card__icon svg { width: 100%; height: 100%; }
.plp-benefit-card__title { font-size: 1rem; color: var(--color-text); margin-bottom: .4rem; }
.plp-benefit-card__desc { font-size: .875rem; color: var(--color-muted); margin: 0; }

/* ── Products ─────────────────────────────────────────────── */
.plp-products { background: var(--color-bg); }
.plp-products__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 7), 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.plp-prod-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    text-align: center;
    transition: box-shadow var(--transition), transform var(--transition);
}
.plp-prod-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.plp-prod-card__icon { color: var(--color-link); width: 40px; height: 40px; }
.plp-prod-card__icon svg { width: 100%; height: 100%; }
.plp-prod-card__name { font-size: .8rem; font-weight: 600; color: var(--color-text); line-height: 1.3; }
/* Photo thumbnails for the "what we can produce" cards */
.plp-prod-card:has(.plp-prod-card__thumb) { padding: 0; gap: 0; overflow: hidden; }
.plp-prod-card__thumb { width: 100%; height: 96px; }
.plp-prod-card__thumb img.plp-prod-card__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.plp-prod-card:has(.plp-prod-card__thumb) .plp-prod-card__name { padding: .7rem .5rem; }
.plp-products__note { text-align: center; color: var(--color-muted); font-size: .9rem; margin: 0; }

/* ── Steps ────────────────────────────────────────────────── */
.plp-steps { background: var(--color-accent); }
.plp-steps__track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    position: relative;
}
.plp-steps__track::before {
    content: '';
    position: absolute;
    top: 26px;
    left: calc(10% + 26px);
    right: calc(10% + 26px);
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}
.plp-step { position: relative; z-index: 1; text-align: center; padding: 0 .5rem; }
.plp-step__num {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--color-link);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    position: relative;
    z-index: 1;
}
.plp-step__title { font-size: .95rem; color: var(--color-text); margin-bottom: .5rem; }
.plp-step__desc { font-size: .825rem; color: var(--color-muted); margin: 0; line-height: 1.55; }

/* ── Audience ─────────────────────────────────────────────── */
.plp-audience { background: var(--color-bg); }
.plp-audience__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.plp-audience-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem 1.5rem;
    transition: box-shadow var(--transition), transform var(--transition);
}
.plp-audience-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.plp-audience-card__icon { color: var(--color-cta); width: 40px; height: 40px; margin-bottom: 1rem; }
.plp-audience-card__icon svg { width: 100%; height: 100%; }
.plp-audience-card__title { font-size: 1rem; color: var(--color-text); margin-bottom: .5rem; }
.plp-audience-card__desc { font-size: .875rem; color: var(--color-muted); margin: 0; }

/* ── Why us ───────────────────────────────────────────────── */
.plp-why {
    background: var(--color-dark-bg);
    padding: 5rem 0;
}
.plp-why__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.plp-why__title {
    font-size: clamp(1.4rem, 2.5vw, 1.875rem);
    color: #fff;
    margin-bottom: 1rem;
}
.plp-why__desc { color: rgba(255,255,255,.75); font-size: 1rem; margin-bottom: 1.75rem; }
.plp-why__list { display: flex; flex-direction: column; gap: .9rem; }
.plp-why__list li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    color: rgba(255,255,255,.85);
    font-size: .95rem;
    list-style: none;
}
.plp-why__list li::before {
    content: '✓';
    flex-shrink: 0;
    width: 22px; height: 22px;
    background: var(--color-cta);
    color: #fff;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .15rem;
}
.plp-why__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
.plp-why__visual svg { width: 200px; height: 200px; color: rgba(255,255,255,.07); stroke-width: 1; }
.plp-why__visual img.plp-why__photo { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* ── CTA + Form ───────────────────────────────────────────── */
.plp-cta { background: var(--color-accent); }
.plp-cta__inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
}
.plp-cta__head .section__title { margin-bottom: .75rem; }
.plp-cta__desc { color: var(--color-muted); font-size: .95rem; line-height: 1.65; }
.plp-form { display: flex; flex-direction: column; gap: 1rem; }

/* ── PL Page Responsive ───────────────────────────────────── */
@media (max-width: 1200px) {
    .plp-products__grid { grid-template-columns: repeat(4, 1fr); }
    .plp-steps__track { grid-template-columns: repeat(3, 1fr); }
    .plp-steps__track::before { display: none; }
}

@media (max-width: 1024px) {
    .plp-intro__inner   { grid-template-columns: 1fr; gap: 2.5rem; }
    .plp-intro__img-placeholder { min-height: 260px; }
    .plp-why__inner     { grid-template-columns: 1fr; gap: 2rem; }
    .plp-why__visual    { display: none; }
    .plp-cta__inner     { grid-template-columns: 1fr; gap: 2rem; }
    .plp-audience__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .plp-benefits__grid { grid-template-columns: repeat(2, 1fr); }
    .plp-steps__track   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .plp-hero { min-height: auto; padding: 4rem 0; }
    .plp-products__grid { grid-template-columns: repeat(3, 1fr); }
    .plp-steps__track {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .plp-step {
        text-align: left;
        display: grid;
        grid-template-columns: 52px 1fr;
        grid-template-rows: auto auto;
        column-gap: 1.25rem;
        row-gap: .2rem;
        padding: 1.25rem 0;
        border-bottom: 1px solid var(--color-border);
    }
    .plp-step:last-child { border-bottom: 0; }
    .plp-step__num { margin: 0; grid-row: 1 / 3; align-self: center; }
    .plp-step__title { grid-column: 2; margin-bottom: 0; }
    .plp-step__desc  { grid-column: 2; }
}

@media (max-width: 560px) {
    .plp-benefits__grid { grid-template-columns: 1fr; }
    .plp-audience__grid { grid-template-columns: 1fr; }
    .plp-products__grid { grid-template-columns: repeat(2, 1fr); }
    .form-row--2        { grid-template-columns: 1fr; }
    .plp-steps__track   { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Product Category Pages (pcat-*)
   ========================================================================== */

/* ── Feature strip ────────────────────────────────────────── */
.pcat-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.pcat-feature {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .65rem 1rem;
    font-size: .875rem;
    color: var(--color-text);
}
.pcat-feature__icon { color: var(--color-link); width: 20px; height: 20px; flex-shrink: 0; }
.pcat-feature__icon svg { width: 100%; height: 100%; }

/* ── Product grid ─────────────────────────────────────────── */
.pcat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.pcat-grid .product-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow var(--transition), transform var(--transition);
}
.pcat-grid .product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    color: var(--color-text);
}

.pcat-grid .product-card__image {
    position: relative;
    height: 280px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
}
.pcat-grid .product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.pcat-grid .product-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-link);
    opacity: .5;
}
.pcat-grid .product-card__placeholder svg { width: 64px; height: 64px; }

/* ── Tara card: litrage badge + feature icon rail ─────────────── */
.product-card__volume {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    background: var(--color-primary);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: .01em;
    padding: 7px 11px;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.product-card__feats {
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 7px;
}
.pc-feat {
    display: flex;
    align-items: center;
    max-width: 40px;
    border-radius: 999px;
    background: transparent;
    transition: max-width .3s ease, background .2s ease;
}
.pc-feat__icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    transition: box-shadow .2s ease;
}
.pc-feat__icon svg { width: 32px; height: 32px; }
.pc-feat__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 0;
    transition: max-width .3s ease, opacity .2s ease, padding .3s ease;
}
/* Розкриття підпису: на ПК — при наведенні (лише пристрої з hover),
   на тач-екранах — по кліку через клас .is-open (див. main.js). */
@media (hover: hover) {
    .pc-feat:hover {
        max-width: 240px;
        background: var(--color-primary);
    }
    .pc-feat:hover .pc-feat__label {
        max-width: 200px;
        opacity: 1;
        padding: 0 3px 0 13px;
    }
    .pc-feat:hover .pc-feat__icon { box-shadow: none; }
}
.pc-feat.is-open {
    max-width: 240px;
    background: var(--color-primary);
}
.pc-feat.is-open .pc-feat__label {
    max-width: 200px;
    opacity: 1;
    padding: 0 3px 0 13px;
}
.pc-feat.is-open .pc-feat__icon { box-shadow: none; }

.pcat-grid .product-card__title {
    height: 80px;
    padding: 1rem 1.25rem;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text);
}

/* ── Empty state ──────────────────────────────────────────── */
.pcat-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1180px) {
    .pcat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .pcat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pcat-grid     { grid-template-columns: 1fr; }
    .pcat-features { gap: .65rem; }
}

/* ── Catalogue with filter ────────────────────────────────── */
.cat-catalog { display: grid; grid-template-columns: 250px 1fr; gap: 1.75rem; align-items: start; }
.cat-catalog__main { min-width: 0; }
.cat-catalog__main .pcat-grid { grid-template-columns: repeat(3, 1fr); }

.cat-catalog__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; min-height: 34px; margin-bottom: 1rem; }
.cat-catalog__count { font-size: .9rem; color: var(--color-muted); font-weight: 600; white-space: nowrap; margin-left: auto; }

/* Active-filter chips */
.cat-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cat-chip {
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
    background: var(--color-primary); color: #fff; border: 0; border-radius: 999px;
    padding: .28rem .35rem .28rem .75rem; font-size: .8rem; font-weight: 600; line-height: 1;
    transition: background var(--transition);
}
.cat-chip:hover { background: #16324f; }
.cat-chip svg { width: 14px; height: 14px; opacity: .85; }

.cat-catalog__empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--color-muted); }

.cat-catalog.is-loading .cat-catalog__main { opacity: .5; pointer-events: none; transition: opacity .15s; }

/* Panel */
.cat-filter {
    position: sticky; top: 90px;
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 1rem 1.1rem 1.25rem;
}
.cat-filter__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .75rem; }
.cat-filter__title { font-weight: 700; font-size: 1rem; color: var(--color-primary); }
.cat-filter__clear {
    background: none; border: 0; cursor: pointer; padding: 0;
    color: var(--color-muted); font-size: .78rem; text-decoration: underline; text-underline-offset: 2px;
}
.cat-filter__clear:hover { color: var(--color-primary); }

.cat-filter__grp { border-top: 1px solid var(--color-border); }
.cat-filter__grp:first-of-type { border-top: 0; }
.cat-filter__grp-h {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; background: none; border: 0; cursor: pointer;
    padding: .8rem 0; margin: 0; text-align: left;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--color-muted);
}
.cat-filter__grp-h:hover { color: var(--color-primary); }
.cat-filter__grp-t { display: inline-flex; align-items: center; gap: .4rem; }
.cat-filter__grp-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: var(--color-primary); color: #fff; font-size: .65rem; line-height: 1;
}
.cat-filter__chev { width: 16px; height: 16px; flex: none; transition: transform var(--transition); }
.cat-filter__grp.is-collapsed .cat-filter__chev { transform: rotate(-90deg); }
.cat-filter__grp-body { padding-bottom: .7rem; }
.cat-filter__grp.is-collapsed .cat-filter__grp-body { display: none; }

.cat-filter__opt { display: flex; align-items: center; gap: .55rem; padding: .28rem 0; cursor: pointer; font-size: .9rem; line-height: 1.3; }
.cat-filter__opt input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--color-primary); cursor: pointer; }
.cat-filter__opt-l { flex: 1 1 auto; }
.cat-filter__opt-c { flex: none; font-size: .75rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.cat-filter__opt:hover .cat-filter__opt-l { color: var(--color-primary); }
.cat-filter__opt.is-disabled { opacity: .4; cursor: not-allowed; }
.cat-filter__opt.is-disabled input { cursor: not-allowed; }

/* Mobile toggle (hidden on desktop) */
.cat-catalog__toggle { display: none; }

@media (max-width: 1180px) {
    .cat-catalog__main .pcat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .cat-catalog { grid-template-columns: 1fr; }
    .cat-catalog__toggle {
        display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
        background: var(--color-primary); color: #fff; border: 0; border-radius: var(--radius-sm);
        padding: .6rem 1.1rem; font-weight: 600; font-size: .9rem; margin-bottom: 1rem;
    }
    .cat-catalog__toggle svg { width: 18px; height: 18px; }
    .cat-filter { display: none; position: static; margin-bottom: 1.25rem; }
    .cat-catalog.is-filters-open .cat-filter { display: block; }
}
@media (max-width: 560px) {
    .cat-catalog__main .pcat-grid { grid-template-columns: 1fr; }
}

/* ── Cookie consent banner ────────────────────────────────── */
.ac-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1100; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(8,16,32,.22); padding: 1rem 1.25rem; }
.ac-cookie[hidden] { display: none; }
.ac-cookie__text { flex: 1 1 300px; margin: 0; font-size: .9rem; color: var(--color-text); line-height: 1.5; }
.ac-cookie__text a { color: var(--color-primary); text-decoration: underline; }
.ac-cookie__btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.ac-cookie__btns .btn { padding: .55rem 1.1rem; font-size: .85rem; }
@media (max-width: 560px) { .ac-cookie__btns { width: 100%; } .ac-cookie__btns .btn { flex: 1; text-align: center; } }

/* ── Forms spam guard ─────────────────────────────────────── */
.ac-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.g-recaptcha { margin: 0 0 1.1rem; }

/* ── Inline contact form (reveals under the button, no overlay) ── */
.ac-modal { max-width: 760px; margin: 1.4rem auto; }
.ac-modal[hidden] { display: none; }
.ac-modal--wide { max-width: none; }
.ac-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; align-items: stretch; margin-bottom: .6rem; }
.ac-modal__col > .ac-modal__field:last-child { margin-bottom: 0; }
.ac-modal__field.ac-modal__field--msg { display: flex; flex-direction: column; margin-bottom: 0; height: 100%; }
.ac-modal__field.ac-modal__field--msg textarea { flex: 1 1 auto; min-height: 120px; resize: vertical; }
@media (max-width: 560px) {
    .ac-modal__grid { grid-template-columns: 1fr; gap: 0; }
    .ac-modal__field.ac-modal__field--msg { margin-top: .85rem; height: auto; }
    .ac-modal__field.ac-modal__field--msg textarea { min-height: 110px; }
}
.ac-modal__box { position: relative; text-align: left; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 10px 34px rgba(8,16,32,.14); padding: 1.6rem 1.6rem 1.35rem; animation: acReveal .3s ease; }
.ac-modal--wide .ac-modal__box { max-width: var(--container-max); margin: 0 auto; }
@keyframes acReveal { from { opacity: 0; transform: translateY(-10px); } }
.ac-modal__title { margin: 0 0 .4rem; font-size: 1.4rem; color: var(--color-primary); }
.ac-modal__sub { margin: 0 0 1.25rem; color: var(--color-muted); font-size: .92rem; }
.ac-modal__field { display: block; margin-bottom: .85rem; }
.ac-modal__field span { display: block; font-size: .82rem; font-weight: 600; color: var(--color-text); margin-bottom: .3rem; }
.ac-modal__field input, .ac-modal__field textarea { width: 100%; padding: .6rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; box-sizing: border-box; }
.ac-modal__field input:focus, .ac-modal__field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(26,58,92,.12); }
.ac-modal__foot { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; flex-wrap: wrap; }
.ac-modal__resp { font-size: .85rem; }
.ac-modal__resp.is-ok { color: #00a32a; }
.ac-modal__resp.is-err { color: #d63638; }
@media (max-width: 560px) {
    .ac-modal { max-width: 100%; }
    .ac-modal__box { padding: 1.25rem; }
}

/* ── News ─────────────────────────────────────────────────── */
.container--narrow { max-width: 820px; }

.section-head--spread { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head__link { font-size: .9rem; font-weight: 600; color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.section-head__link:hover { text-decoration: underline; }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.news-card {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    overflow: hidden; text-decoration: none; color: var(--color-text);
    transition: box-shadow var(--transition), transform var(--transition);
}
.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.news-card__img { aspect-ratio: 16 / 10; background: var(--color-accent); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.news-card__photo { width: 100%; height: 100%; object-fit: cover; }
/* Portrait / near-square images (product shots): show the whole image, never crop. */
.news-card__img--fit { background: #fff; }
.news-card__img--fit .news-card__photo { object-fit: contain; padding: 8px; }
.news-card__img svg { width: 56px; height: 56px; color: var(--color-primary); opacity: .3; }
.news-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.news-card__date { font-size: .78rem; color: var(--color-muted); }
.news-card__title { font-size: 1.05rem; line-height: 1.35; margin: 0; color: var(--color-primary); }
.news-card__excerpt { font-size: .9rem; color: var(--color-muted); margin: 0; }
.news-card__more { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--color-primary); }

.news-single__head { margin-bottom: 1.5rem; }
.news-single__label { text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; font-weight: 700; color: var(--color-muted); margin: 0 0 .5rem; }
.news-single__title { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; margin: 0 0 .6rem; color: var(--color-primary); }
.news-single__date { font-size: .85rem; color: var(--color-muted); }
.news-single__figure { float: left; width: 280px; max-width: 42%; margin: .3rem 1.75rem 1rem 0; }
.news-single__figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.news-single__figure-link { position: relative; display: block; cursor: zoom-in; }
.news-single__zoom { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(10,20,40,.72); color: #fff; border-radius: 50%; opacity: 0; transition: opacity var(--transition); }
.news-single__zoom svg { width: 18px; height: 18px; }
.news-single__figure-link:hover .news-single__zoom { opacity: 1; }

/* Image lightbox */
.ac-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(8,16,32,.92); cursor: zoom-out; }
.ac-lightbox.is-open { display: flex; }
.ac-lightbox__img { max-width: 95%; max-height: 92vh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 12px 48px rgba(0,0,0,.5); cursor: default; }
.ac-lightbox__close { position: absolute; top: 14px; right: 22px; background: none; border: 0; color: #fff; font-size: 42px; line-height: 1; cursor: pointer; opacity: .85; }
.ac-lightbox__close:hover { opacity: 1; }
.news-single__content { font-size: 1.02rem; line-height: 1.75; color: var(--color-text); }
.news-single__content::after { content: ''; display: block; clear: both; }
@media (max-width: 560px) {
    .news-single__figure { float: none; width: 100%; max-width: 100%; margin: 0 0 1.25rem; }
}
.news-single__content p { margin: 0 0 1.1rem; }
.news-single__content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.news-single__content h2, .news-single__content h3 { color: var(--color-primary); margin: 1.6rem 0 .7rem; }
.news-single__foot { margin-top: 2rem; }

.news-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1.75rem 0 .5rem; }
.news-gallery__item { display: block; cursor: zoom-in; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-accent); }
.news-gallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.news-gallery__item:hover .news-gallery__img { transform: scale(1.05); }
@media (max-width: 560px) { .news-gallery { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .news-grid { grid-template-columns: 1fr; } }

/* ── Documents ────────────────────────────────────────────── */
.doc-group { margin-bottom: 2.5rem; }
.doc-group__title { font-size: 1.25rem; color: var(--color-primary); margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--color-border); }
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.doc-item { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .9rem 1.1rem; }
.doc-item__icon { flex: none; color: var(--color-primary); display: flex; }
.doc-item__icon svg { width: 26px; height: 26px; }
.doc-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.doc-item__title { font-weight: 600; color: var(--color-text); }
.doc-item__meta { display: flex; gap: .6rem; align-items: center; font-size: .78rem; color: var(--color-muted); }
.doc-item__year { background: var(--color-accent); padding: .1rem .5rem; border-radius: 999px; font-weight: 600; }
.doc-item__dl { flex: none; display: inline-flex; align-items: center; gap: .4rem; background: var(--color-primary); color: #fff; text-decoration: none; padding: .5rem .9rem; border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600; transition: background var(--transition); }
.doc-item__dl:hover { background: #16324f; }
.doc-item__dl svg { width: 16px; height: 16px; }
.doc-item__nofile { flex: none; font-size: .8rem; color: var(--color-muted); font-style: italic; }
@media (max-width: 560px) {
    .doc-item { flex-wrap: wrap; }
    .doc-item__dl { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Production Page
   ========================================================================== */

.prod-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.prod-cat-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.prod-cat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: rgba(26,95,186,.25);
    color: inherit;
}

.prod-cat-card__img {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prod-cat-card__img svg { width: 60px; height: 60px; opacity: .8; }

/* Photo variant — reuse the homepage production images */
.prod-cat-card__img:has(img) { padding: 0; overflow: hidden; }
.prod-cat-card__img img.prod-cat-card__photo { width: 100%; height: 100%; object-fit: cover; display: block; }


/* Reuse existing color variants */
.prod-cat-card__img--amber { background: #fff7ed; color: #fb923c; }
.prod-cat-card__img--steel { background: #f8fafc; color: #94a3b8; }
.prod-cat-card__img--blue  { background: #eff6ff; color: #60a5fa; }
.prod-cat-card__img--red   { background: #fff1f2; color: #f87171; }
.prod-cat-card__img--teal  { background: #f0fdfa; color: #2dd4bf; }
.prod-cat-card__img--green { background: #f0fdf4; color: #4ade80; }
.prod-cat-card__img--gray  { background: #f9fafb; color: #9ca3af; }
/* Tara subcategory cards: AI images fill the card edge-to-edge */
.pcat-subcats .prod-cat-card__img,
.pcat-subcats .prod-cat-card__img:has(img) { height: auto; aspect-ratio: 4 / 3; background: transparent; padding: 0; overflow: hidden; }
.pcat-subcats .prod-cat-card__img img.prod-cat-card__photo { object-fit: cover; }

.prod-cat-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.prod-cat-card__title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin-bottom: .5rem; }
.prod-cat-card__desc  { font-size: .875rem; color: var(--color-muted); line-height: 1.6; margin: 0 0 1.25rem; flex: 1; }
.prod-cat-card__more  {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-link);
    transition: gap var(--transition), color var(--transition);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.prod-cat-card:hover .prod-cat-card__more { color: var(--color-link-hover); gap: .55rem; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .prod-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .prod-cat-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   About Page
   ========================================================================== */

/* ── Capabilities (image left, content right) ─────────────── */
.abt-capabilities__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.abt-capabilities__content p { color: #374151; margin-bottom: 1.25rem; }

/* ── Capability list (light background) ──────────────────── */
.abt-cap-list { display: flex; flex-direction: column; gap: .8rem; }
.abt-cap-list li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    color: var(--color-text);
    font-size: .95rem;
}
.abt-cap-list li::before {
    content: '✓';
    flex-shrink: 0;
    width: 22px; height: 22px;
    background: var(--color-cta);
    color: #fff;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .15rem;
}

/* ── Private Label accent block ───────────────────────────── */
.abt-pl-block {
    background: var(--color-dark-bg);
    padding: 5rem 0;
    text-align: center;
}
.abt-pl-block__title {
    font-size: clamp(1.4rem, 2.5vw, 1.875rem);
    color: #fff;
    margin-bottom: 1rem;
}
.abt-pl-block__desc {
    color: rgba(255,255,255,.75);
    font-size: 1rem;
    max-width: 620px;
    margin: 0 auto 2rem;
}

/* ── Final CTA block ──────────────────────────────────────── */
.abt-cta-final { text-align: center; }
.abt-cta-final__title {
    font-size: clamp(1.4rem, 2.5vw, 1.875rem);
    color: var(--color-text);
    margin-bottom: 1rem;
}
.abt-cta-final__desc {
    color: var(--color-muted);
    font-size: 1rem;
    max-width: 540px;
    margin: 0 auto 2rem;
}

/* ── About Page Responsive ────────────────────────────────── */
@media (max-width: 1024px) {
    .abt-capabilities__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 560px) {
    .abt-pl-block  { padding: 3.5rem 0; }
}

/* ==========================================================================
   Single Product Page (.product-single-*)
   ========================================================================== */

/* ── Breadcrumbs ──────────────────────────────────────────────── */
.product-single__breadcrumbs {
    background: var(--color-accent);
    border-bottom: 1px solid var(--color-border);
    font-size: .8125rem;
    color: var(--color-muted);
}
.product-single__breadcrumbs .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.product-single__breadcrumbs a {
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition);
}
.product-single__breadcrumbs a:hover { color: var(--color-link); }
.product-single__sep { color: var(--color-border); }
.product-single__current { color: var(--color-text); font-weight: 500; }

/* ── Top layout ───────────────────────────────────────────────── */
.product-single__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: flex-start;
}

/* ── Product image ────────────────────────────────────────────── */
.product-single__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-accent);
    border: 1px solid var(--color-border);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-single__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.product-single__image--placeholder {
    color: var(--color-link);
    opacity: .35;
}
.product-single__image--placeholder svg { width: 100px; height: 100px; }

/* ── Product info ─────────────────────────────────────────────── */
.product-single__category {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-cta);
    margin-bottom: .75rem;
}
.product-single__category a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--transition);
}
.product-single__category a:hover { opacity: .75; }

.product-single__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--color-text);
    margin-bottom: 1rem;
}

.product-single__short-desc {
    color: var(--color-muted);
    font-size: .9375rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.product-single__short-desc p {
    margin: 0 0 .75rem;
}

.product-single__short-desc p:last-child {
    margin-bottom: 0;
}

.product-single__desc-sub {
    margin-top: 1rem !important;
    margin-bottom: .5rem !important;
    color: var(--color-text, #13294B);
}

.product-single__desc-list {
    margin: 0 0 .75rem;
    padding-left: 1.1rem;
    list-style: disc;
}

.product-single__desc-list li {
    margin-bottom: .35rem;
}

/* ── Characteristics table ────────────────────────────────────── */
.product-single__chars {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.product-single__char {
    display: flex;
    gap: 1rem;
    padding: .65rem 1rem;
    font-size: .875rem;
    border-bottom: 1px solid var(--color-border);
}
.product-single__char:last-child { border-bottom: 0; }
.product-single__char:nth-child(odd) { background: var(--color-accent); }
.product-single__char-label {
    color: var(--color-muted);
    min-width: 130px;
    flex-shrink: 0;
    white-space: nowrap;
}
.product-single__char-value {
    color: var(--color-text);
    font-weight: 600;
    flex: 1;
}

/* ── Action buttons ───────────────────────────────────────────── */
.product-single__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

/* ── Full description ─────────────────────────────────────────── */
.product-single__desc-inner h2 { margin-bottom: 1.25rem; }
.product-single__content {
    max-width: 760px;
}
.product-single__content p   { color: var(--color-muted); line-height: 1.8; }
.product-single__content h3  { margin-top: 1.5rem; }
.product-single__content ul,
.product-single__content ol  { padding-left: 1.5rem; list-style: disc; }
.product-single__content li  { margin-bottom: .4rem; }

/* ==========================================================================
   Product Packaging Gallery (.product-gallery-*)
   ========================================================================== */

.product-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.25rem;
}

.product-gallery__item { text-align: center; }

.product-gallery__img {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .6rem;
    transition: box-shadow var(--transition);
}
.product-gallery__img:hover { box-shadow: var(--shadow-sm); }
.product-gallery__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-gallery__caption {
    font-size: .8125rem;
    color: var(--color-muted);
    font-weight: 500;
    margin: 0;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Одна колонка. Щоб вільно міняти порядок (назва -> фото -> дані), розчиняємо
       .product-single__info: його діти стають елементами того самого grid.
       Працює і для звичайних товарів, і для тари — у кожного свій набір блоків. */
    .product-single__layout,
    .product-single__layout--tara { grid-template-columns: 1fr; gap: 1.25rem; }
    .product-single__char-label { min-width: 110px; }

    .product-single__layout > .product-single__info { display: contents; }
    /* Grid-елементи за замовчуванням мають min-width:auto — довгий контент
       (таблиця характеристик) розпирав колонку ширше за екран. */
    .product-single__layout > .product-single__info > *,
    .product-single__layout > .product-single__media { min-width: 0; max-width: 100%; }

    .product-single__layout > .product-single__info > .product-single__category            { order: 1; margin-bottom: 0; }
    .product-single__layout > .product-single__info > .product-single__title               { order: 2; margin-bottom: 0; }
    .product-single__layout > .product-single__media                                       { order: 3; }
    /* Кожна мітка має власний order, інакше вони зібралися б докупи,
       відірвавшись від своїх блоків. */
    .product-single__layout > .product-single__info > .product-single__block-title--pkg    { order: 4; margin: .25rem 0 0; }
    .product-single__layout > .product-single__info > .product-single__articles            { order: 5; margin-top: 0; }
    .product-single__layout > .product-single__info > .product-single__block-title--desc   { order: 6; margin: .5rem 0 0; }
    .product-single__layout > .product-single__info > .product-single__short-desc          { order: 7; }
    .product-single__layout > .product-single__info > .product-single__block-title--chars  { order: 8; margin: .5rem 0 0; }
    .product-single__layout > .product-single__info > .product-single__chars               { order: 9; }
    .product-single__layout > .product-single__info > .product-single__fits                { order: 10; }
    .product-single__layout > .product-single__info > .ac-compat                           { order: 11; }
    .product-single__layout > .product-single__info > .product-single__actions             { order: 12; }
}
@media (max-width: 560px) {
    .product-single__actions { flex-direction: column; }
    .product-single__actions .btn { width: 100%; justify-content: center; }
    .product-gallery__grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ==========================================================================
   Partnership Page
   ========================================================================== */

/* ── Hero: 2-col split layout ─────────────────────────────── */
.partnership-hero { min-height: 460px; padding: 3.5rem 0; }
.partnership-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}
.partnership-hero__text { max-width: 560px; }

/* Feature badges (right column inside hero) */
.prt-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 380px;
    margin: 0 auto;
}
.prt-badge {
    display: flex;
    align-items: center;
    gap: .875rem;
    background: rgba(10,20,40,.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-md);
    padding: 1.125rem 1rem;
    transition: background var(--transition);
}
.prt-badge:hover { background: rgba(10,20,40,.78); }
.prt-badge__icon { width: 30px; height: 30px; flex-shrink: 0; color: var(--color-cta); }
.prt-badge__icon svg { width: 100%; height: 100%; }
.prt-badge__body { display: flex; flex-direction: column; }
.prt-badge__body strong { font-size: .825rem; color: #fff; font-weight: 600; line-height: 1.2; }
.prt-badge__body span   { font-size: .75rem; color: rgba(255,255,255,.5); margin-top: .15rem; }

/* ── Audience grid: 6 cards × 3 cols ─────────────────────── */
.partnership-audience__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* ── CF7 / shortcode form wrapper ─────────────────────────── */
.partnership-form-sc { width: 100%; }
.partnership-form-sc .wpcf7-form { display: flex; flex-direction: column; gap: 1rem; }

/* ── Partnership Responsive ───────────────────────────────── */
@media (max-width: 1024px) {
    .partnership-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .partnership-hero__visual { display: none; }
}
@media (max-width: 900px) {
    .partnership-audience__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .partnership-audience__grid { grid-template-columns: 1fr; }
}

/* Footer bottom: copyright + privacy link */
.site-footer__bottom-inner{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
.site-footer__policy{color:inherit;opacity:.85;text-decoration:underline}
.site-footer__policy:hover{opacity:1}

/* Consent checkbox in contact forms */
.ac-consent{margin:0 0 1.1rem}
.ac-consent__row{display:flex;align-items:flex-start;gap:.55rem;cursor:pointer;font-size:.88rem;line-height:1.45;color:var(--color-text,#2b3440)}
.ac-consent__cb{flex:0 0 auto;width:18px;height:18px;margin-top:1px;cursor:pointer}
.ac-consent__text a{color:var(--color-cta,#E87400);text-decoration:underline}
.ac-consent__err{display:block;margin-top:.35rem;font-size:.8rem;color:#c0392b}
.ac-consent--invalid .ac-consent__cb{outline:2px solid #c0392b;outline-offset:2px}

/* Contacts block hierarchy: company (who) → address (where) → phones (call) */
.contact-details__name{display:block;font-size:1.05rem;font-weight:700;line-height:1.3;color:var(--color-heading,#13294B)}
.contact-details__edrpou{display:block;margin-top:2px;font-size:.85rem;color:var(--color-muted,#5b6470)}

/* 404 page */
.err404{text-align:center;padding:70px 0 84px}
.err404__inner{max-width:640px;margin:0 auto}
.err404__code{font-size:clamp(88px,17vw,176px);font-weight:800;line-height:1;color:var(--color-cta,#E87400);margin:0 0 6px;letter-spacing:-2px}
.err404__title{font-size:1.9rem;color:var(--color-heading,#13294B);margin:0 0 14px}
.err404__text{color:var(--color-muted,#5b6470);font-size:1.05rem;line-height:1.6;margin:0 auto 28px;max-width:52ch}
.err404__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ── Category: bulk / IBC / tanker info ───────────────────────────── */
/* Верхній інфо-блок одразу за hero: менший відступ зверху, текст на всю ширину. */
.pcat-bulk { padding-top: 3rem; padding-bottom: 0; }

.pcat-bulk .section-head { margin-bottom: 1.25rem; }

.pcat-bulk__body p {
    margin: 0 0 .85rem;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-muted);
    text-align: justify;
    text-wrap: pretty;
    hyphens: auto;
}

.pcat-bulk__body p:last-child { margin-bottom: 0; }

/* ── Форми: на планшетах і вужче — одне поле в рядок ──────────────── */
/* Раніше дві колонки трималися аж до 560px, через що на ~600-760px
   «Ваше ім'я» та «Email» ставали надто вузькими. */
@media (max-width: 768px) {
    .form-row--2,
    .form-row--3 { grid-template-columns: 1fr; }
}

/* ── Адмін-бар: компактуємо раніше, щоб не налазив на шапку сайту ─────
   Стандартний WordPress згортає верхню панель лише на ≤782px, і в діапазоні
   ~783–1024px довгі пункти («Ukrainian Autochemistry Corporation», «Привіт,
   admin») налазять на логотип і кнопки. Ховаємо їхній текст раніше, лишаючи
   іконки/аватар. Стосується лише вигляду адмін-бару, не самого сайту. */
@media screen and (max-width: 1024px) {
    /* Довга назва сайту зліва — прибираємо (дублює перехід на дашборд). */
    #wpadminbar #wp-admin-bar-site-name { display: none; }
    /* Лічильник коментарів не потрібен у вузькому режимі. */
    #wpadminbar #wp-admin-bar-comments { display: none; }
    /* Праворуч: ховаємо текст «Привіт, …», лишаємо аватар. */
    #wpadminbar #wp-admin-bar-my-account > .ab-item .display-name { display: none; }
    #wpadminbar #wp-admin-bar-my-account > .ab-item { padding: 0 8px; }
    #wpadminbar #wp-admin-bar-my-account > .ab-item img.avatar { margin: 0; }
}
@media screen and (max-width: 900px) {
    /* Ще вужче — прибираємо текст у «Додати» та «Редагувати», лишаємо іконки. */
    #wpadminbar #wp-admin-bar-new-content > .ab-item .ab-label,
    #wpadminbar #wp-admin-bar-edit > .ab-item .ab-label { display: none; }
    #wpadminbar #wp-admin-bar-new-content > .ab-item,
    #wpadminbar #wp-admin-bar-edit > .ab-item { padding: 0 10px; }
}