/* OZINC design system. Sources and contracts: ../design-system/.
 * Bootstrap 5.2.2 loads first. Page-specific blocks are migrated separately.
 */
@font-face {
    font-family: 'OZINC Inter';
    src: url('../fonts/Inter_18pt-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OZINC Inter';
    src: url('../fonts/Inter_24pt-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-regular: 'OZINC Inter', Arial, sans-serif;
    --font-bold: var(--font-regular);
    --font-headers-main: var(--font-regular);
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-size-display: clamp(2rem, 1.25rem + 3vw, 3.5rem);
    --font-size-h1: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    --font-size-h2: clamp(1.5rem, 1.125rem + 1.5vw, 2rem);
    --font-size-card-title: 1.125rem;
    --font-size-price: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --font-size-body-large: 1.125rem;
    --font-size-body: 1rem;
    --font-size-small: .875rem;
    --font-size-caption: .75rem;
    --font-size-button: .875rem;
    --line-height-tight: 1.2;
    --line-height-body: 1.5;

    --color-primary: #0067df;
    --color-primary-hover: #0055bd;
    --color-primary-active: #00469c;
    --color-primary-soft: #edf5ff;
    --color-text: #20212b;
    --color-text-secondary: #60636f;
    --color-text-muted: #707480;
    --color-text-inverse: #ffffff;
    --color-background: #ffffff;
    --color-bg: #ffffff;
    --color-bg-secondary: #f5f5f9;
    --color-bg-dark: #1b1b25;
    --color-border: #dedfe5;
    --color-border-strong: #9298a4;
    --color-success: #087c53;
    --color-success-soft: #eaf7f0;
    --color-warning: #855500;
    --color-warning-soft: #fff5db;
    --color-error: #bd283a;
    --color-error-soft: #fff0f2;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-section: clamp(40px, 6vw, 80px);
    --space-heading: clamp(24px, 3vw, 40px);
    --container-reading: 800px;
    --border-radius-small: 4px;
    --border-radius-default: 8px;
    --border-radius-large: 12px;
    --border-radius-round: 999px;
    --border-radius-button: var(--border-radius-small);
    --border-radius-form-control: var(--border-radius-default);
    --border-default: 1px solid var(--color-border);
    --box-shadow-default: 0 2px 8px rgb(27 27 37 / 6%);
    --box-shadow-hover: 0 6px 16px rgb(27 27 37 / 12%);
    --focus-ring: 0 0 0 3px rgb(0 103 223 / 25%);
    --control-height: 44px;
    --height-mobile-bar: var(--space-8);
    --transition-ui: 160ms ease;
    --height-item-param: 24px;

    /* Bootstrap bridge; retain native grid, breakpoints and container widths. */
    --bs-body-font-family: var(--font-regular);
    --bs-body-font-size: var(--font-size-body);
    --bs-body-line-height: var(--line-height-body);
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-background);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-border-color: var(--color-border);
}

body {
    font-family: var(--font-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text);
    background: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headers-main);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    overflow-wrap: anywhere;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-card-title); }

a { text-underline-offset: .18em; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.svg-sprite-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    fill: currentColor;
    vertical-align: middle;
}

/* Sections and reading width sit INSIDE a Bootstrap .container-xl. */
.site-section { padding-block: var(--space-section); }
.site-section--muted { background: var(--color-bg-secondary); }
.site-section--dark { background: var(--color-bg-dark); color: var(--color-text-inverse); }
.reading-width { max-width: var(--container-reading); margin-inline: auto; }

.section-heading { margin-bottom: var(--space-heading); text-align: left; }
.section-heading__eyebrow {
    margin: 0 0 var(--space-3);
    color: var(--color-primary);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.section-heading__title { margin: 0; }
.home-catalog .section-heading__title, .category-listings .section-heading__title { font-family: var(--font-headers-main); font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); overflow-wrap: anywhere; }
.section-heading__description { margin: var(--space-3) 0 0; color: var(--color-text-secondary); }
.section-heading__action { margin-top: var(--space-4); }
.section-heading--left { text-align: left; }
.section-heading--centered { text-align: center; }
.section-heading--centered .section-heading__description { max-width: 680px; margin-inline: auto; }
.section-heading--compact { margin-bottom: var(--space-5); }
.section-heading--uppercase .section-heading__title { text-transform: uppercase; }
.section-heading--light { color: var(--color-text-inverse); }
.section-heading--light .section-heading__description { color: #c6c8d2; }

/* Shared FAQ: native details/summary work without JavaScript. */
.faq-section {
    margin-block: var(--space-7);
    padding: var(--space-6);
    border-radius: var(--border-radius-large);
    background: var(--color-bg-secondary);
}
.faq-section .section-heading__accent { color: var(--color-primary); }
.accordion--faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-4);
}
.accordion--faq .accordion__item {
    min-width: 0;
    overflow: hidden;
    border: var(--border-default);
    border-radius: var(--border-radius-default);
    background: var(--color-bg);
}
.accordion--faq .accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 100px;
    padding: var(--space-5);
    color: var(--color-text);
    list-style: none;
    cursor: pointer;
}
.accordion--faq .accordion__trigger::-webkit-details-marker { display: none; }
.accordion--faq .accordion__trigger::marker { content: ''; }
.accordion--faq .accordion__trigger:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.accordion--faq .accordion__trigger:focus-visible { outline-offset: -3px; }
.accordion--faq .accordion__question {
    min-width: 0;
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-body);
    overflow-wrap: anywhere;
}
.accordion--faq .accordion__icon { position: relative; flex: 0 0 24px; width: 24px; height: 24px; color: var(--color-primary); }
.accordion--faq .accordion__icon::before,
.accordion--faq .accordion__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: var(--border-radius-round);
    background: currentColor;
    transform: translate(-50%, -50%);
}
.accordion--faq .accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion--faq .accordion__item[open] { border-color: var(--color-primary); }
.accordion--faq .accordion__item[open] .accordion__icon::after { display: none; }
.accordion--faq .accordion__item[open] .accordion__trigger { color: var(--color-primary); }
.accordion--faq .accordion__panel { padding: var(--space-2) var(--space-5) var(--space-5); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.accordion--faq .accordion__panel > :first-child { margin-top: 0; }
.accordion--faq .accordion__panel > :last-child { margin-bottom: 0; }
.accordion--faq .accordion__panel img { max-width: 100%; height: auto; }
@media (max-width: 767.98px) {
    .faq-section { margin-block: var(--space-6); padding: var(--space-5) var(--space-4); }
    .faq-section .section-heading { margin-bottom: var(--space-5); }
    .accordion--faq { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .accordion--faq .accordion__trigger { min-height: 80px; padding: var(--space-4); }
    .accordion--faq .accordion__question { font-size: var(--font-size-body); }
    .accordion--faq .accordion__panel { padding: var(--space-2) var(--space-4) var(--space-4); }
}

/* Use native <button disabled>; aria-disabled alone does not block actions. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    max-width: 100%;
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--border-radius-button);
    background: transparent;
    color: var(--color-primary);
    font: var(--font-weight-bold) var(--font-size-button)/1.25 var(--font-regular);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-ui), border-color var(--transition-ui), box-shadow var(--transition-ui);
}
.button--primary { background: var(--color-primary); color: var(--color-text-inverse); }
.button--secondary { border-color: var(--color-primary); background: var(--color-bg); color: var(--color-primary); }
.button--dark { background: var(--color-bg-dark); color: var(--color-text-inverse); }
.button--icon { width: var(--control-height); padding: var(--space-2); flex-shrink: 0; }
.button--block { width: 100%; }
.button--uppercase { text-transform: uppercase; }
.button__icon { width: 20px; height: 20px; flex-shrink: 0; }
.button:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-disabled):hover {
    color: var(--color-primary-hover);
    background: var(--color-primary-soft);
}
.button--primary:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-disabled):hover,
.button--dark:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-disabled):hover {
    color: var(--color-text-inverse);
    background: var(--color-primary-hover);
}
.button:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-disabled):active {
    color: var(--color-text-inverse);
    background: var(--color-primary-active);
}
.button:disabled, .button[aria-disabled="true"], .button.disabled, .button.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}
.text-link { color: var(--color-primary); text-decoration: none; }
.text-link:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* Shared card surfaces; Bootstrap columns determine the number of cards. */
.category-card, .service-card, .article-card, .product-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    border: var(--border-default);
    border-radius: var(--border-radius-default);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color var(--transition-ui), box-shadow var(--transition-ui);
}
.category-card:hover, .category-card:focus-within,
.service-card:hover, .service-card:focus-within,
.article-card:hover, .article-card:focus-within,
.product-card:hover, .product-card:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--box-shadow-hover);
    color: var(--color-text);
}
.category-card__media, .service-card__media, .article-card__media, .product-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
    background: var(--color-bg-secondary);
    overflow: hidden;
}
.category-card__media img, .service-card__media img, .article-card__media img, .product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.category-card__media { aspect-ratio: 16 / 9; }
.category-card__media img { display: block; }
.product-card__media img { object-fit: contain; }
.product-card__media { aspect-ratio: 1; }
.category-card__body, .service-card__body, .article-card__body, .product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
}
.category-card__title, .service-card__title, .article-card__title, .product-card__title {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.category-card__title, .service-card__title { text-transform: uppercase; }
.category-card__title a, .service-card__title a, .article-card__title a, .product-card__title a { color: inherit; text-decoration: none; }
.category-card__title a:hover, .service-card__title a:hover, .article-card__title a:hover, .product-card__title a:hover { color: var(--color-primary); }
.category-card__meta, .article-card__meta, .product-card__meta {
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
}
.service-card__description, .article-card__description { margin: 0; font-size: var(--font-size-small); }
.service-card__link, .article-card__meta { margin-top: auto; }

/* Category listing: equal Bootstrap columns and independent landing links. */
.category-listing { padding-block: var(--space-5) var(--space-7); }
.category-listing__grid { padding-left: 0; list-style: none; margin-bottom: 0; }
.category-listing__item { display: flex; }
.category-listing__item > .category-card { width: 100%; }
.category-card__media { flex-shrink: 0; text-decoration: none; }
.category-card__link { display: block; flex-shrink: 0; color: inherit; text-decoration: none; border-radius: var(--border-radius-default); }
.category-card__link:hover { color: inherit; text-decoration: none; }
.category-card__link > .category-card__title { margin: var(--space-4) var(--space-4) 0; }
.category-card__link:hover > .category-card__title, .category-card__link:focus-visible > .category-card__title { color: var(--color-primary); }
.category-card__body { padding-top: var(--space-3); }
.category-card__meta { margin-bottom: 0; }
.category-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-small); text-align: center; }
.category-card__filters { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding: 0; margin: 0; list-style: none; }
.category-card__filters > li { min-width: 0; max-width: 100%; }
.category-card__filter { min-height: var(--space-6); padding: var(--space-1) var(--space-2); font-size: var(--font-size-caption); overflow-wrap: anywhere; }
.service-card--icon { padding: var(--space-5); }
.service-card--icon .service-card__body { padding: var(--space-5) 0 0; }
.service-card__icon { width: 48px; height: 48px; color: var(--color-primary); }
/* Services: REF-009 icon listing and REF-010 photo cards beside the text. */
.service-page { padding-bottom: var(--space-7); }
.service-page--listing { padding-top: var(--space-7); }
.service-page__heading { max-width: var(--container-reading); margin-inline: auto; }
.service-page__text, .service-page__pagination { margin-top: var(--space-6); }
.service-page__empty { text-align: center; color: var(--color-text-secondary); }
.service-page__content > :first-child { margin-top: 0; }
.service-page__content > :last-child { margin-bottom: 0; }
.service-page__content h2, .service-page__content h3 { color: var(--color-text-secondary); font-size: var(--font-size-body-large); }
.service-page__request { margin-top: var(--space-6); }
.service-listing__grid { padding-left: 0; margin-bottom: 0; list-style: none; }
.service-listing__item { display: flex; }
.service-listing__item > .service-card { width: 100%; }
.service-card__media { flex-shrink: 0; }
.service-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-small); text-align: center; }
.service-card__link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-height); font-size: var(--font-size-small); }
.service-card__arrow { width: 18px; height: 18px; }
.service-card__icon--outline { fill: none; stroke: currentColor; }
.service-card--photo { padding: var(--space-3); box-shadow: var(--box-shadow-default); }
.service-card--photo .service-card__media { border-radius: var(--border-radius-default); }
.service-card--photo .service-card__body { padding: var(--space-3) 0 0; gap: var(--space-2); }
.service-listing--related .service-card__title { font-size: var(--font-size-body); }
.service-card--photo .service-card__media { aspect-ratio: 5 / 3; background: var(--color-bg); }
.service-card--photo .service-card__media img { display: block; object-fit: contain; }
@media (max-width: 575.98px) {
    .service-page--listing { padding-top: var(--space-5); }
    .service-page__request { width: 100%; }
}
.article-card { box-shadow: var(--box-shadow-default); }

/* Blog: REF-007/008, equal cards and a narrow reading column. */
.blog-page { padding-bottom: var(--space-7); }
.blog-listing { padding-top: var(--space-5); }
.blog-listing__groups { justify-content: center; margin-bottom: var(--space-6); }
.blog-listing__empty { text-align: center; color: var(--color-text-secondary); }
.blog-listing__text { margin-top: var(--space-7); }
.article-list { padding-left: 0; margin-bottom: 0; list-style: none; }
.article-list__item { display: flex; }
.article-list__item > .article-card { width: 100%; }
.article-card__media { flex-shrink: 0; }
.article-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-small); text-align: center; }
.article-card__category { margin: 0; color: var(--color-primary); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); text-transform: uppercase; }
.article-card__meta { margin-bottom: 0; }
.article-card__link { margin-top: auto; min-height: var(--control-height); display: inline-flex; align-items: center; }
.blog-article { padding-top: var(--space-7); }
.blog-article__meta { margin: var(--space-4) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-small); }
.blog-article__figure { max-width: 1040px; margin: 0 auto var(--space-6); }
.blog-article__figure img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--border-radius-default); }
.blog-article__figure--fallback img { aspect-ratio: 5 / 3; }
.blog-article__figure figcaption { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-small); text-align: center; }
.blog-article__text > :first-child { margin-top: 0; }
.blog-article__text .anchor { scroll-margin-top: var(--space-5); }
.blog-article__request, .blog-article__related, .blog-article__extra { margin-top: var(--space-7); }
.blog-article__related > h2 { margin-bottom: var(--space-5); }
.article-contents { margin-bottom: var(--space-6); border: var(--border-default); border-radius: var(--border-radius-default); }
.article-contents summary { min-height: var(--control-height); padding: var(--space-3) var(--space-4); color: var(--color-text); font-weight: var(--font-weight-bold); cursor: pointer; }
.article-contents ul { margin: 0; padding: 0 var(--space-4) var(--space-4); list-style: none; }
.article-contents a { display: inline-flex; align-items: center; min-height: var(--control-height); }
.article-contents__nested { margin-inline-start: var(--space-5); }
.article-images figure { margin: 0; }
.article-images img { display: block; width: 100%; }
.article-links .article-card__media img { height: 100%; border-radius: 0; }
@media (max-width: 575.98px) {
    .blog-article { padding-top: var(--space-5); }
    .blog-article__request { padding: var(--space-4); }
    .blog-article__request .button { width: 100%; }
}
.product-card__price { margin-top: auto; font-size: var(--font-size-body-large); font-weight: var(--font-weight-bold); }
.product-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; }

/* Contacts: REF-006, Bootstrap 5/7 columns inside the layout container. */
.contacts-page { padding-bottom: var(--space-7); }
.contacts-page__contacts { display: grid; gap: var(--space-5); }
.contact-item { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.contact-item__icon-wrap { display: flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height); flex-shrink: 0; border-radius: var(--border-radius-round); background: var(--color-primary); color: var(--color-text-inverse); }
.contact-item__content { min-width: 0; }
.contact-item__title { margin: 0 0 var(--space-1); font-size: var(--font-size-card-title); }
.contact-item__value { overflow-wrap: anywhere; }
.contact-item__value a { color: var(--color-text); text-decoration: underline; }
.contact-item__value a:hover { color: var(--color-primary); }
.contacts-page__location { display: grid; gap: var(--space-5); }
.contacts-page__map-wrap { position: relative; border: var(--border-default); border-radius: var(--border-radius-large); background: var(--color-bg-secondary); box-shadow: var(--box-shadow-default); overflow: hidden; }
.contacts-page__map { width: 100%; aspect-ratio: 15 / 8; min-height: 280px; }
.contacts-page__map-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--space-5); color: var(--color-text-secondary); text-align: center; pointer-events: none; }
.contacts-page__map-placeholder[hidden] { display: none; }
.contacts-page__subtitle { margin: 0 0 var(--space-4); font-size: var(--font-size-card-title); }
.contacts-page__subtitle--uppercase { text-transform: uppercase; }
.contacts-page__schedule-label { margin: 0 0 var(--space-1); font-size: var(--font-size-body); }
.contacts-page__schedule-value { margin: 0; overflow-wrap: anywhere; }
.contacts-page__form-panel, .contacts-page__details { margin-top: var(--space-7); }
.contacts-page .feedback-form__grid { row-gap: var(--space-4); }
.contacts-page .feedback-form__field { min-width: 0; }
.contacts-page__submit { display: flex; align-items: flex-end; }
.contacts-page .feedback-form__submit .btn-default { min-height: var(--control-height); padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--border-radius-button); background: var(--color-primary); color: var(--color-text-inverse); font: var(--font-weight-bold) var(--font-size-button)/1.25 var(--font-regular); cursor: pointer; transition: background-color var(--transition-ui); }
.contacts-page .feedback-form__submit .btn-default:hover { background: var(--color-primary-hover); }
.contacts-page .feedback-form__submit .btn-default:disabled { opacity: .5; cursor: not-allowed; }
.contacts-page .feedback-form__agreement > div { display: flex; flex-wrap: wrap; column-gap: var(--space-2); row-gap: var(--space-1); }
.contacts-page .feedback-form__agreement .form-check-input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--color-primary); }
.contacts-page .feedback-form__agreement-label { flex: 1; min-width: 0; margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-small); overflow-wrap: anywhere; }
.contacts-page__details-list { margin: 0; }
.contacts-page__details-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4); padding-block: var(--space-3); border-bottom: var(--border-default); }
.contacts-page__details-row:last-child { border-bottom: 0; padding-bottom: 0; }
.contacts-page__details-title, .contacts-page__details-value { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .contacts-page { padding-bottom: var(--space-6); }
    .contacts-page__form-panel, .contacts-page__details { margin-top: var(--space-6); }
    .contacts-page .content-panel { padding: var(--space-4); }
    .contacts-page__details-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

.content-panel { padding: var(--space-5); border: var(--border-default); border-radius: var(--border-radius-large); background: var(--color-bg); }
.content-panel--muted { background: var(--color-bg-secondary); }
.notice { padding: var(--space-5); border-inline-start: 4px solid var(--color-primary); border-radius: var(--border-radius-default); background: var(--color-primary-soft); }
.notice > :last-child { margin-bottom: 0; }
.status-badge { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-small); background: var(--color-bg-secondary); color: var(--color-text-secondary); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); line-height: 1.4; }
.status-badge--available { color: var(--color-text-inverse); background: var(--color-success); }
.status-badge--order { color: var(--color-warning); background: var(--color-warning-soft); }
.status-badge--error { color: var(--color-error); background: var(--color-error-soft); }
.filter-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-tag { display: inline-flex; align-items: center; min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--border-radius-small); background: var(--color-bg); color: var(--color-text); font-size: var(--font-size-small); text-decoration: none; }
.filter-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }
.filter-tag[aria-pressed="true"], .filter-tag[aria-current="page"] { border-color: var(--color-primary); color: var(--color-text-inverse); background: var(--color-primary); }

/* Form styles intentionally scoped; keep existing CMS validation and submit JS. */
.feedback-form { color: var(--color-text); }
.feedback-form__title { margin-bottom: var(--space-5); font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
.feedback-form__grid { --bs-gutter-x: 16px; }
.feedback-form__label { margin-bottom: var(--space-2); font-size: var(--font-size-small); }
.feedback-form__control {
    display: block;
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--border-radius-form-control);
    background-color: var(--color-bg);
    color: var(--color-text);
    font: var(--font-weight-regular) var(--font-size-body)/var(--line-height-body) var(--font-regular);
}
.feedback-form__control[type="file"] { height: auto; }
.feedback-form__control[type="file"]::file-selector-button { margin-inline-end: var(--space-3); padding: var(--space-2) var(--space-3); border: var(--border-default); border-radius: var(--border-radius-small); background: var(--color-bg-secondary); color: var(--color-text); font: inherit; }
.feedback-form__control::placeholder { color: var(--color-text-muted); opacity: 1; }
.feedback-form__control:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
textarea.feedback-form__control { min-height: 128px; resize: vertical; }
.feedback-form__control:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-muted); }
.feedback-form__control[aria-invalid="true"], .feedback-form__control.is-invalid,
.feedback-form.was-validated .feedback-form__control:invalid { border-color: var(--color-error); }
.feedback-form__control[aria-invalid="true"]:focus, .feedback-form__control.is-invalid:focus { box-shadow: 0 0 0 3px rgb(189 40 58 / 18%); }
.feedback-form__help, .feedback-form__consent { color: var(--color-text-secondary); font-size: var(--font-size-small); }
.feedback-form__error { color: var(--color-error); font-size: var(--font-size-small); }
.feedback-form__check { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--color-primary); }

/* Shared modal forms; navigation modals keep their own components. */
#commonModal .modal-dialog { max-width: 560px; }
#commonModal .modal-content { border: var(--border-default); border-radius: var(--border-radius-large); background: var(--color-bg); box-shadow: var(--box-shadow-hover); }
#commonModal .modal-header { gap: var(--space-4); padding: var(--space-5); border-bottom: var(--border-default); }
#commonModal .modal-title { min-width: 0; color: var(--color-text); font-size: var(--font-size-card-title); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); overflow-wrap: anywhere; }
#commonModal .btn-close { flex-shrink: 0; }
#commonModal .modal-body { padding: var(--space-5); }
.modal-form { min-width: 0; }
.modal-form .feedback-form__title { margin-bottom: var(--space-5); color: var(--color-text-secondary); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); }
.modal-form .feedback-form__grid { row-gap: var(--space-4); }
.modal-form .feedback-form__field { min-width: 0; margin-top: 0 !important; }
.modal-form .feedback-form__label { display: block; }
.modal-form .feedback-form__agreement > div { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
.modal-form .form-check-input { float: none; flex-shrink: 0; width: 20px; height: 20px; margin: 0; border-color: var(--color-border-strong); cursor: pointer; }
.modal-form .form-check-input:checked { border-color: var(--color-primary); background-color: var(--color-primary); }
.modal-form .form-check-input:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.modal-form .feedback-form.was-validated .form-check-input:invalid { border-color: var(--color-error); }
.modal-form .feedback-form__agreement-label { min-width: 0; margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-small); line-height: var(--line-height-body); overflow-wrap: anywhere; }
.modal-form .feedback-form__agreement-label a { color: var(--color-primary); }
.modal-form .feedback-form__agreement .invalid-feedback { grid-column: 2; margin: 0 !important; color: var(--color-error); }
.modal-form__product { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.modal-form__product-image { flex: 0 0 88px; width: 88px; height: 88px; padding: var(--space-2); border: var(--border-default); border-radius: var(--border-radius-default); background: var(--color-bg-secondary); }
.modal-form__product-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.modal-form__product-title { min-width: 0; font-size: var(--font-size-body); font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    #commonModal .modal-header, #commonModal .modal-body { padding: var(--space-4); }
}

/* Table overflow is local. Never hide horizontal overflow on the whole page. */
.data-table-wrap { max-width: 100%; overflow-x: auto; border: var(--border-default); border-radius: var(--border-radius-default); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); }
.data-table th, .data-table td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-default); text-align: left; vertical-align: middle; }
.data-table th { background: var(--color-bg-secondary); font-weight: var(--font-weight-bold); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table--catalog { min-width: 880px; }
.data-table--catalog tbody tr:nth-child(even) { background: var(--color-primary-soft); }
.data-table a:not(.button) { color: var(--color-text); }

/* Editorial tables keep their intrinsic width; overflow stays inside the wrapper. */
.content-table-wrap {
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    margin-block: var(--space-5);
    overflow-x: auto;
    border: var(--border-default);
    border-radius: var(--border-radius-default);
    background: var(--color-bg);
    -webkit-overflow-scrolling: touch;
}
.content-table-wrap:focus-visible { outline-offset: 2px; }
.content-table-wrap > table {
    /* Editors may save an inline percentage width on otherwise compact tables. */
    width: auto !important;
    max-width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    table-layout: auto;
    color: var(--color-text);
    font-family: var(--font-regular);
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
    overflow-wrap: normal;
    word-break: normal;
}
.content-table-wrap > table th,
.content-table-wrap > table td {
    padding: var(--space-3) var(--space-4);
    border: var(--border-default);
    text-align: left;
    vertical-align: top;
}
.content-table-wrap > table th { background: var(--color-primary-soft); font-weight: var(--font-weight-bold); }
.content-table-wrap > table tbody tr:nth-child(even) td { background: var(--color-bg-secondary); }
.content-table-wrap > table caption { padding: var(--space-3) var(--space-4); caption-side: top; color: var(--color-text-secondary); font-weight: var(--font-weight-bold); text-align: left; }
.content-table-wrap > table a:not(.button) { color: var(--color-primary); }
.content-table-wrap > table :is(th, td) > :first-child { margin-top: 0; }
.content-table-wrap > table :is(th, td) > :last-child { margin-bottom: 0; }
.quantity-control { display: inline-flex; align-items: center; border: var(--border-default); border-radius: var(--border-radius-small); background: var(--color-bg); }
.quantity-control__button { width: var(--control-height); min-height: var(--control-height); border: 0; background: transparent; color: var(--color-text); font-size: 1.25rem; }
.quantity-control__button:hover:not(:disabled) { background: var(--color-primary-soft); color: var(--color-primary); }
.quantity-control__button:disabled { opacity: .4; cursor: not-allowed; }
.quantity-control__input { width: 60px; min-height: var(--control-height); border: 0; text-align: center; color: var(--color-text); background: transparent; font: inherit; }

/* Cart: REF-005. Bootstrap owns the outer two-column layout. */
.cart-page { padding-bottom: var(--space-7); }
.cart-page__count { color: var(--color-text-muted); font-size: var(--font-size-body-large); vertical-align: middle; }
.cart-page__section-title { margin: 0 0 var(--space-4); font-size: var(--font-size-body-large); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); text-transform: uppercase; }
.cart-list { display: flex; flex-direction: column; gap: var(--space-3); }
.cart-line { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto minmax(88px, auto); align-items: center; gap: var(--space-4); padding: var(--space-4); border: var(--border-default); border-radius: var(--border-radius-default); background: var(--color-bg); }
.cart-line__media { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; overflow: hidden; border: var(--border-default); border-radius: var(--border-radius-default); background: var(--color-bg-secondary); }
.cart-line__media img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__placeholder { padding: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-caption); text-align: center; }
.cart-line__content { min-width: 0; }
.cart-line__category { margin: 0 0 var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-caption); text-transform: uppercase; }
.cart-line__title { margin: 0; font-size: var(--font-size-body); font-weight: var(--font-weight-bold); line-height: 1.4; overflow-wrap: anywhere; }
.cart-line__title a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.cart-line__title a:hover { color: var(--color-primary); }
.cart-line__price { margin: var(--space-3) 0 0; font-size: var(--font-size-small); }
.cart-line__quantity { flex-shrink: 0; }
.cart-line__quantity-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.cart-line__quantity .quantity-control__button { width: var(--control-height); display: inline-flex; align-items: center; justify-content: center; }
.cart-line__quantity .quantity-control__value { min-width: 28px; padding-inline: var(--space-1); }
.cart-line__total { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.cart-line__sum { font-weight: var(--font-weight-bold); text-align: right; overflow-wrap: anywhere; }
.cart-line__remove { min-height: var(--control-height); padding: 0; border: 0; background: transparent; color: var(--color-text-secondary); font: inherit; font-size: var(--font-size-small); text-decoration: underline; text-underline-offset: 3px; }
.cart-line__remove:hover { color: var(--color-error); }
.cart-line.loading, .cart-line__quantity.loading { opacity: .6; }
.cart-page__continue { display: inline-flex; align-items: center; min-height: var(--control-height); margin-top: var(--space-3); }
.cart-page__sidebar { padding-top: var(--space-2); }
.order-summary { margin-bottom: var(--space-5); }
.order-summary__rows { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.order-summary__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-small); }
.order-summary__row dt { flex-shrink: 0; font-weight: var(--font-weight-regular); }
.order-summary__row dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.order-summary__delivery { max-width: 220px; color: var(--color-text-secondary); }
.order-summary__total { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-default); font-size: var(--font-size-body-large); font-weight: var(--font-weight-bold); }
.order-summary__note { margin: var(--space-3) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-small); }
.cart-checkout { padding: var(--space-4); }
.cart-checkout .feedback-form__title { margin-bottom: var(--space-4); font-size: var(--font-size-card-title); }
.cart-checkout .feedback-form__grid { --bs-gutter-x: 12px; row-gap: var(--space-3); }
.cart-checkout .feedback-form__field { min-width: 0; }
.cart-checkout .feedback-form__label { display: block; }
.cart-checkout .feedback-form__control { border-color: var(--color-border); }
.cart-checkout .feedback-form__control:focus { border-color: var(--color-primary); }
.cart-checkout textarea.feedback-form__control { min-height: 96px; }
.cart-checkout .feedback-form__file-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: var(--border-default); border-radius: var(--border-radius-button); color: var(--color-primary); background: var(--color-bg); font-size: var(--font-size-small); cursor: pointer; }
.cart-checkout .feedback-form__file-button:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.cart-checkout .feedback-form__file-list { overflow-wrap: anywhere; }
.cart-checkout .form-text, .cart-checkout .feedback-form__agreement-label { color: var(--color-text-secondary); font-size: var(--font-size-caption); line-height: 1.5; }
.cart-checkout .feedback-form__agreement .gap-6-12 { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cart-checkout .form-check-input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; }
.cart-checkout .form-check-input:checked { border-color: var(--color-primary); background-color: var(--color-primary); }
.cart-checkout .feedback-form__agreement-label { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.cart-checkout__error { margin: var(--space-3) 0 0; color: var(--color-error); font-size: var(--font-size-small); }
.cart-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.cart-empty__icon { width: 48px; height: 48px; color: var(--color-primary); }
.cart-empty__text { margin: 0; }
.cart-success__title { margin: 0 0 var(--space-3); font-size: var(--font-size-h2); }
@media (min-width: 992px) and (max-width: 1199.98px) {
    .cart-line { grid-template-columns: 72px minmax(0, 1fr) auto; }
    .cart-line__media { width: 72px; height: 72px; grid-row: span 2; }
    .cart-line__content { grid-row: span 2; }
    .cart-line__total { grid-column: 3; }
    .cart-checkout .feedback-form__field.col-sm-6 { width: 100%; }
}
@media (max-width: 575.98px) {
    .cart-page { padding-bottom: var(--space-6); }
    .cart-line { grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); }
    .cart-line__media { width: 64px; height: 64px; }
    .cart-line__quantity { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
    .cart-line__total { grid-column: 1 / -1; grid-row: 2; justify-self: end; max-width: calc(100% - 128px); }
    .cart-line__title { font-size: var(--font-size-small); }
    .cart-line__price { margin-top: var(--space-2); }
}

.site-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding: 0; margin: var(--space-6) 0 0; list-style: none; }
.site-pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height); min-height: var(--control-height); padding: var(--space-2); border: 1px solid transparent; border-radius: var(--border-radius-small); color: var(--color-text); text-decoration: none; }
.site-pagination__link:hover, .site-pagination__link[aria-current="page"] { border-color: var(--color-primary); color: var(--color-primary); }
.site-pagination__link[aria-disabled="true"] { color: var(--color-text-muted); }

/* Existing MSBasePagination markup used outside the blog layout. */
.b-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-5) 0; }
.b-pagination > .item { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--space-1); min-width: var(--control-height); min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: var(--border-default); border-radius: var(--border-radius-button); background: var(--color-bg); color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); text-decoration: none; white-space: nowrap; }
.b-pagination > a.item { transition: color var(--transition-ui), background-color var(--transition-ui), border-color var(--transition-ui); }
.b-pagination > a.item:hover { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.b-pagination > a.item:active { border-color: var(--color-primary-active); background: var(--color-primary-active); color: var(--color-text-inverse); }
.b-pagination > a.item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: var(--focus-ring); }
.b-pagination > .page-nav__item_current_true { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-inverse); }
.b-pagination > .page-nav__item_type_separator { padding-inline: var(--space-1); border-color: transparent; background: transparent; color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.product-listing__pagination .b-pagination { margin: 0; }

/* Product catalog listing. */
.bread-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-small); }
.bread-crumbs .item { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bread-crumbs .item + .item::before { content: ''; width: 7px; height: 7px; margin-inline: var(--space-2); border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.bread-crumbs a { color: var(--color-text-muted); text-decoration: none; }
.bread-crumbs a:hover { color: var(--color-primary); }
.bread-crumbs .item:last-child { color: var(--color-text); }
@media (max-width: 991.98px) {
    .bread-crumbs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .bread-crumbs .item { flex: 0 0 auto; }
}
.catalog-listing__title { margin: 0 0 var(--space-6); }
.catalog-listing__tags { margin-bottom: var(--space-5); }
.catalog-listing__tags .filter-tags__items { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; margin: 0; padding: 0; list-style: none; }
.catalog-listing__tags .filter-tags__items + .filter-tags__items { margin-top: var(--space-2); }
.catalog-listing__tags--params { margin-top: var(--space-5); }
.catalog-listing__tags--params .filter-tags__items[hidden],
.catalog-listing__tags--params .filter-tags__items > li[hidden],
.catalog-listing__tags-toggle[hidden] { display: none; }
.catalog-listing__tags-toggle { align-self: flex-start; }
.catalog-listing__tag { overflow-wrap: anywhere; }
.catalog-listing__menu { margin-bottom: var(--space-6); border: var(--border-default); border-radius: var(--border-radius-default); overflow: hidden; }
.catalog-listing__menu summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--control-height); padding: var(--space-3) var(--space-4); background: var(--color-primary); color: var(--color-text-inverse); font-weight: var(--font-weight-bold); cursor: pointer; list-style: none; }
.catalog-listing__menu summary::-webkit-details-marker { display: none; }
.catalog-listing__menu summary::after { content: '⌄'; margin-left: var(--space-2); }
.catalog-listing__menu details:not([open]) summary::after { transform: rotate(-90deg); }
.catalog-listing__menu ul { max-height: 280px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.catalog-listing__menu li + li { border-top: var(--border-default); }
.catalog-listing__menu a { display: block; padding: var(--space-3) var(--space-4); color: var(--color-text); text-decoration: none; overflow-wrap: anywhere; }
.catalog-listing__menu a:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.catalog-listing__menu a[aria-current="page"] { color: var(--color-primary); font-weight: var(--font-weight-bold); background: var(--color-primary-soft); }
.catalog-listing__feedback { margin-top: var(--space-6); }
.catalog-listing__feedback .feedback-form { padding: var(--space-4); border: var(--border-default); border-radius: var(--border-radius-default); background: var(--color-bg-secondary); }
.catalog-listing__feedback .feedback-form__title { margin-bottom: var(--space-4); font-size: var(--font-size-body-large); text-align: left; }
.catalog-listing__feedback .feedback-form__label { margin-bottom: var(--space-1); }
.catalog-listing__feedback .feedback-form__agreement > div { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2); }
.catalog-listing__feedback .form-check-input { width: 20px; height: 20px; margin: 3px 0 0; }
.catalog-listing__feedback .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.catalog-listing__feedback .feedback-form__agreement-label { min-width: 0; margin: 0; font-size: var(--font-size-caption); line-height: var(--line-height-body); overflow-wrap: anywhere; }
.catalog-listing__feedback .feedback-form__agreement .invalid-feedback { grid-column: 2; margin-left: 0 !important; }
.catalog-listing__feedback .feedback-form__submit .btn-default { min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--border-radius-button); background: var(--color-primary); color: var(--color-text-inverse); font: inherit; font-weight: var(--font-weight-bold); cursor: pointer; }
.catalog-listing__feedback .feedback-form__submit .btn-default:hover { background: var(--color-primary-hover); }
.catalog-filters { display: grid; gap: var(--space-3); }
.catalog-filters__group { border: var(--border-default); border-radius: var(--border-radius-default); background: var(--color-bg); overflow: hidden; }
.catalog-filters__header-main { display: block; width: 100%; min-height: var(--control-height); padding: var(--space-3) var(--space-4); border: 0; background: var(--color-bg); color: var(--color-text); text-align: left; cursor: pointer; }
.catalog-filters__title-row { display: flex; align-items: center; gap: var(--space-2); }
.catalog-filters__toggle { order: 2; margin-left: auto; }
.catalog-filters__toggle-icon { width: 16px; height: 16px; transition: transform var(--transition-ui); }
.catalog-filters__group.active .catalog-filters__toggle-icon { transform: rotate(180deg); }
.catalog-filters__title { font-weight: var(--font-weight-bold); }
.catalog-filters__body { display: none; padding: 0 var(--space-4) var(--space-4); }
.catalog-filters__group.active .catalog-filters__body { display: block; }
.catalog-filters__list { display: grid; gap: var(--space-2); max-height: 224px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.catalog-filters__option { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.catalog-filters__checkbox { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px; accent-color: var(--color-primary); }
.catalog-filters__label { min-width: 0; overflow-wrap: anywhere; }
.catalog-filters__count { margin-left: auto; color: var(--color-text-muted); font-size: var(--font-size-small); }
.catalog-filters__search { width: 100%; min-height: var(--control-height); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); border: var(--border-default); border-radius: var(--border-radius-default); }
.catalog-filters__actions { display: grid; gap: var(--space-2); padding-top: var(--space-3); text-align: center; }
.catalog-filters__reset { display: inline-block; padding: var(--space-2); }
.product-listing__table { min-width: 650px; }
.product-listing__table th { white-space: nowrap; text-transform: uppercase; }
.product-listing__table td { height: 76px; }
.product-listing__name { min-width: 230px; width: 48%; }
.product-listing__name a { text-decoration: underline; }
.product-listing__table--params .product-listing__name { width: auto; min-width: 180px; }
.product-listing__table .product-listing__param-heading { white-space: normal; }
.product-listing__param { overflow-wrap: anywhere; }
.product-listing__params { display: none; }
.product-listing__stock .status-badge { white-space: nowrap; }
.product-listing__price { white-space: nowrap; }
.product-listing__cart { white-space: nowrap; }
.product-listing__cart-control { width: 136px; min-width: 136px; min-height: calc(var(--control-height) + 2px); vertical-align: middle; }
.product-listing__cart-control.js-addToCart { padding: var(--space-2) var(--space-3); background: var(--color-primary); color: var(--color-text-inverse); }
.product-listing__cart-control.js-addToCart:hover { background: var(--color-primary-hover) !important; color: var(--color-text-inverse) !important; }
.product-listing__cart-control.quantity-control { justify-content: space-between; }
.quantity-control__value { min-width: 32px; text-align: center; font-weight: var(--font-weight-bold); }
.product-listing__pagination { margin-top: var(--space-6); }
@media (min-width: 992px) {
    .product-listing__table .product-listing__param-heading,
    .product-listing__table .product-listing__param,
    .product-listing__table .product-listing__stock-heading,
    .product-listing__table .product-listing__stock { border-inline: var(--border-default); }
}
@media (max-width: 991.98px) {
    .catalog-listing__tags { margin-bottom: 0; }
    .catalog-listing__menu ul { max-height: 200px; }
    .product-listing__table-wrap { overflow: visible; }
    .product-listing__table { display: block; min-width: 0; }
    .product-listing__table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .product-listing__table tbody { display: block; }
    .product-listing__table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: var(--border-default); }
    .product-listing__table tbody tr:last-child { border-bottom: 0; }
    .product-listing__table td { display: block; min-width: 0; height: auto; padding: 0; border: 0; }
    .product-listing__table .product-listing__name { flex: 0 0 100%; width: 100%; overflow-wrap: anywhere; }
    .product-listing__table .product-listing__param { display: none; }
    .product-listing__params { display: block; margin-top: var(--space-2); color: var(--color-text-secondary); }
    .product-listing__stock { flex: 0 0 auto; }
    .product-listing__table .product-listing__price { flex: 1 1 auto; min-width: max-content; font-weight: var(--font-weight-bold); }
    .product-listing__cart { flex: 0 0 auto; margin-left: auto; }
}

.prose { overflow-wrap: anywhere; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2, .prose h3 { margin-top: var(--space-6); }
.prose li::marker { color: var(--color-primary); }
.prose img { max-width: 100%; height: auto; border-radius: var(--border-radius-default); }
.prose figcaption { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-small); text-align: center; }

/* Header: the two light rows are shared by every OZINC layout. */
.site-header { position: relative; z-index: 30; background: var(--color-bg); }
.site-header__main {
    display: grid;
    grid-template-columns: auto minmax(200px, 480px) auto auto auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: 76px;
}
.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
}
.site-header__brand:hover { color: var(--color-text); }
.site-header__brand-logo { display: block; width: 40px; height: 40px; object-fit: contain; }
.site-header__brand-name { font-size: 24px; font-weight: var(--font-weight-bold); line-height: 1; letter-spacing: .02em; }
.site-header__search { position: relative; min-width: 0; }
.site-header__search-form { display: flex; align-items: center; height: var(--control-height); border: var(--border-default); border-radius: var(--border-radius-form-control); background: var(--color-bg-secondary); }
.site-header__search-form:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.site-header__search-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 var(--space-4);
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-small);
}
.site-header__search-input::placeholder { color: var(--color-text-muted); opacity: 1; }
.site-header__search-input::-webkit-search-cancel-button { cursor: pointer; }
.site-header__search-icon { display: flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height); flex: 0 0 var(--control-height); padding: 0; border: 0; border-radius: var(--border-radius-form-control); background: transparent; color: var(--color-primary); cursor: pointer; }
.site-header__search-icon:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.site-header__search-icon .button__icon { width: 20px; height: 20px; }
.site-header__search .b-search-drop {
    position: absolute;
    z-index: 2;
    top: calc(100% + var(--space-2));
    left: 0;
    display: none;
    width: min(640px, 90vw);
    max-height: min(65vh, 560px);
    overflow-y: auto;
    padding: var(--space-3);
    border: var(--border-default);
    border-radius: var(--border-radius-default);
    background: var(--color-bg);
    box-shadow: var(--box-shadow-hover);
}
.site-header__search .b-search-drop .item { display: block; padding: var(--space-2); color: var(--color-text); text-decoration: none; }
.site-header__search .b-search-drop .item:hover { background: var(--color-primary-soft); }
.site-header__search-backdrop { display: none; position: fixed; z-index: 20; inset: 0; background: transparent; }
.site-header__search-backdrop.show { display: block; }
.site-header__contacts { display: grid; gap: var(--space-1); min-width: 0; }
.site-header__contact { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; font-size: var(--font-size-small); line-height: 1.25; }
.site-header__contact-icon { width: 16px; height: 16px; color: var(--color-text); }
.site-header__contact a { color: var(--color-text); text-decoration: none; }
.site-header__contact a:hover { color: var(--color-primary); }
.site-header__request { max-width: 170px; min-width: 150px; }
.site-header__cart, .site-header__mobile-cart { position: relative; color: var(--color-text); }
.site-header__cart .b-cart-count, .site-header__mobile-cart .b-cart-count {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    place-items: center;
    border-radius: var(--border-radius-round);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: 11px;
    line-height: 1;
}
.site-header__cart .b-cart-count.d-none, .site-header__mobile-cart .b-cart-count.d-none { display: none; }
.site-header__navigation-band { border-top: var(--border-default); background: var(--color-bg-secondary); }
.site-header__navigation-row { display: flex; align-items: center; gap: var(--space-7); min-height: 60px; }
.site-header__catalog { gap: var(--space-2); min-width: 148px; padding-inline: var(--space-4); text-transform: uppercase; }
.site-header__catalog .icon-menu { width: 12px; height: 12px; order: 2; }
.site-header__catalog .icon-close { display: none; width: 16px; height: 16px; order: 2; }
body.catalog-panel-open .site-header__catalog .icon-menu { display: none; }
body.catalog-panel-open .site-header__catalog .icon-close { display: block; }
.site-header__navigation { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-6); row-gap: 0; min-width: 0; }
.site-header__navigation-link { display: inline-flex; align-items: center; min-height: var(--control-height); color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.site-header__navigation-link:hover, .site-header__navigation-link.is-active, .site-header__navigation-link[aria-current="page"] { color: var(--color-primary); }
.site-header__mobile-actions { display: none; }
.site-header__mobile-modal .modal-dialog { width: min(100%, 420px); max-width: 420px; min-height: 100%; margin: 0 0 0 auto; }
.site-header__mobile-modal .modal-content { min-height: 100dvh; border: 0; border-radius: 0; }
.site-header__mobile-modal-header { min-height: 72px; padding: var(--space-4) var(--space-5); border-bottom: var(--border-default); }
.site-header__mobile-modal-header .site-header__brand-logo { width: 32px; height: 32px; }
.site-header__mobile-modal-header .site-header__brand-name { font-size: 20px; }
.site-header__mobile-modal-body { display: flex; flex-direction: column; padding: var(--space-4) var(--space-5) var(--space-6); }
.site-header__mobile-nav { display: grid; }
.site-header__mobile-nav-link { display: flex; align-items: center; min-height: var(--control-height); padding-block: var(--space-2); border-bottom: var(--border-default); color: var(--color-text); font-weight: var(--font-weight-bold); text-decoration: none; }
.site-header__mobile-nav-link:hover, .site-header__mobile-nav-link[aria-current="page"] { color: var(--color-primary); }
.site-header__mobile-contacts { display: grid; gap: var(--space-3); margin-top: auto; padding-top: var(--space-6); }

@media (max-width: 1199.98px) {
    .site-header__main { gap: var(--space-3); }
    .site-header__brand-name { font-size: 21px; }
    .site-header__navigation-row { gap: var(--space-5); }
    .site-header__navigation { column-gap: var(--space-5); }
}

@media (max-width: 991.98px) {
    .site-header__main { display: flex; justify-content: space-between; min-height: 64px; }
    .site-header__search, .site-header__contacts, .site-header__cart, .site-header__request, .site-header__navigation { display: none; }
    .site-header__mobile-actions { display: flex; align-items: center; gap: var(--space-1); }
    .site-header__mobile-actions .button { color: var(--color-text); }
    .site-header__mobile-menu .button__icon { fill: none; stroke: currentColor; }
}

@media (max-width: 389.98px) {
    .site-header__brand-logo { width: 32px; height: 32px; }
    .site-header__brand-name { font-size: 18px; }
}

@media (max-width: 575.98px) {
    .content-panel, .notice, .service-card--icon { padding: var(--space-4); }
    .section-heading__action .button { width: 100%; }
}

/* Catalog dropdown: flat categories or a sidebar with nested groups. */
html.catalog-scrollbar-stable { scrollbar-gutter: stable; }
body.catalog-panel-open { overflow: hidden; }
.catalog-mega,
.catalog-mega__backdrop {
    position: fixed;
    top: var(--catalog-top, 136px);
    right: 0;
    left: 0;
}
.catalog-mega__backdrop { bottom: 0; z-index: 1; background: rgb(27 27 37 / 40%); }
.catalog-mega {
    z-index: 2;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--catalog-top, 136px) - var(--space-5));
    max-height: calc(100dvh - var(--catalog-top, 136px) - var(--space-5));
    margin-inline: auto;
    padding: 0;
    overflow: hidden;
    border: var(--border-default);
    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
    background: var(--color-bg);
    box-shadow: var(--box-shadow-hover);
}
.catalog-mega[hidden], .catalog-mega__backdrop[hidden], .catalog-mega .catalog-mega__hidden { display: none; }
.catalog-mega__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-shrink: 0; padding: var(--space-3) var(--space-5); border-bottom: var(--border-default); }
.catalog-mega__title { margin: 0; font-size: var(--font-size-card-title); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); overflow-wrap: anywhere; }
.catalog-mega__layout { display: flex; min-height: 0; height: min(640px, 65vh); }
.catalog-mega__sidebar { flex: 0 0 280px; min-width: 0; padding: var(--space-3); overflow-y: auto; border-right: var(--border-default); background: var(--color-bg-secondary); }
.catalog-mega__categories, .catalog-mega__group-list { margin: 0; padding: 0; list-style: none; }
.catalog-mega__category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--control-height);
    padding: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--border-radius-default);
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-body);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color var(--transition-ui), border-color var(--transition-ui);
}
.catalog-mega__arrow { fill: none; stroke: currentColor; color: var(--color-primary); }
.catalog-mega__category:hover, .catalog-mega__category:focus-visible, .catalog-mega__category--active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.catalog-mega__content { flex: 1; min-width: 0; overflow-y: auto; padding: var(--space-5); background: var(--color-bg); }
.catalog-mega__panel { display: none; }
.catalog-mega__panel--active { display: block; }
.catalog-mega__category-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); margin-bottom: var(--space-4); font-size: var(--font-size-card-title); overflow-wrap: anywhere; }
.catalog-mega__columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.catalog-mega__group-list + .catalog-mega__group-list { margin-top: var(--space-5); }
.catalog-mega__group-link, .catalog-mega__item-link { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding-block: var(--space-2); color: var(--color-text); font-size: var(--font-size-small); text-decoration: none; overflow-wrap: anywhere; }
.catalog-mega__group-link { font-weight: var(--font-weight-bold); }
.catalog-mega__item-link { color: var(--color-text-secondary); }
.catalog-mega__group-link:hover, .catalog-mega__item-link:hover { color: var(--color-primary); }
.catalog-mega__image { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--border-radius-small); background: var(--color-bg-secondary); }
.catalog-mega__image img { width: 100%; height: 100%; object-fit: contain; }
.catalog-mega__more, .catalog-mega__less { justify-content: flex-start; padding-inline: 0; text-align: left; }
.catalog-mega__mobile-head { display: none; }
.catalog-mega__empty { padding: var(--space-5); color: var(--color-text-secondary); }
.catalog-mega--flat .catalog-mega__layout { height: auto; overflow-y: auto; }
.catalog-mega--flat .catalog-mega__sidebar { flex: 1; padding: var(--space-5); border: 0; background: var(--color-bg); }
.catalog-mega--flat .catalog-mega__categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.catalog-mega--flat .catalog-mega__category { height: 100%; border-color: var(--color-border); padding: var(--space-4); background: var(--color-bg); color: var(--color-text); }
.catalog-mega--flat .catalog-mega__category:hover, .catalog-mega--flat .catalog-mega__category:focus-visible { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) {
    .catalog-mega__category { transition: none; }
}
@media (max-width: 1199.98px) {
    .catalog-mega__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .catalog-mega__layout { position: relative; height: calc(100dvh - var(--catalog-top, 64px) - 96px); overflow: hidden; }
    .catalog-mega__sidebar { flex: 0 0 100%; border-right: 0; }
    .catalog-mega__content { position: absolute; inset: 0; transform: translateX(100%); }
    .catalog-mega--subopen .catalog-mega__content { transform: translateX(0); }
    .catalog-mega--subopen .catalog-mega__sidebar { transform: translateX(-100%); }
    .catalog-mega__mobile-head { display: block; margin-bottom: var(--space-3); }
    .catalog-mega__back { padding-inline: 0; }
    .catalog-mega--flat .catalog-mega__categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .catalog-mega__top, .catalog-mega__content, .catalog-mega--flat .catalog-mega__sidebar { padding: var(--space-4); }
    .catalog-mega__columns, .catalog-mega--flat .catalog-mega__categories { grid-template-columns: minmax(0, 1fr); }
    .catalog-mega--flat .catalog-mega__category { padding: var(--space-3); }
}

/* Footer: metal artwork, CMS link groups and active-city contacts. */
.site-footer { margin-top: var(--space-7); color: var(--color-text-inverse); background: var(--color-bg-dark); }
.site-footer__visual {
    background: linear-gradient(180deg, rgb(27 27 37 / 98%), rgb(27 27 37 / 90%) 38%, rgb(27 27 37 / 70%)), url('../images/footer_bg.webp') center center / cover no-repeat;
}
.site-footer__main { padding-top: var(--space-7); padding-bottom: 136px; }
.site-footer__logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-inverse); text-decoration: none; }
.site-footer__logo:hover { color: var(--color-text-inverse); }
.site-footer__logo-image { display: block; width: 40px; height: 40px; object-fit: contain; }
.site-footer__logo-name { font-size: 24px; font-weight: var(--font-weight-bold); line-height: 1; letter-spacing: .02em; }
.site-footer__tagline { max-width: 245px; margin: var(--space-6) 0 0; color: #b5b6c0; font-size: var(--font-size-small); }
.site-footer__links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-footer__nav-title, .site-footer__contacts-title {
    position: relative;
    margin: 0 0 var(--space-5);
    padding-bottom: var(--space-3);
    color: var(--color-text-inverse);
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.site-footer__nav-title::after, .site-footer__contacts-title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 64px;
    height: 3px;
    background: var(--color-primary);
    content: '';
}
.site-footer__link { display: inline-flex; align-items: center; min-height: var(--control-height); color: #e2e3e8; text-decoration: none; }
.site-footer__link:visited { color: #e2e3e8; }
.site-footer__link:hover, .site-footer__link:focus-visible { color: var(--color-text-inverse); text-decoration: underline; }
.site-footer__contacts-list { display: grid; gap: var(--space-3); }
.site-footer__contact { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--control-height); }
.site-footer__contact-icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; color: #a7aab5; fill: currentColor; }
.site-footer__contact-icon--outline { fill: none; stroke: currentColor; }
.site-footer__contact-value { min-width: 0; color: #e2e3e8; overflow-wrap: anywhere; }
.site-footer__contact-value a { color: inherit; text-decoration: none; }
.site-footer__contact-value a:hover, .site-footer__contact-value a:focus-visible { color: var(--color-text-inverse); text-decoration: underline; }
.site-footer__contact-meta { color: #b5b6c0; font-size: var(--font-size-small); }
.site-footer__address { display: block; }
.site-footer__secondary { padding-top: var(--space-6); padding-bottom: var(--space-8); border-top: 1px solid rgb(255 255 255 / 18%); }
.site-footer__bottom { padding-block: var(--space-5); border-top: 1px solid rgb(255 255 255 / 12%); background: #101017; }
.site-footer__legal-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4) var(--space-6); }
.site-footer__copyright { color: #b5b6c0; font-size: var(--font-size-small); }
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--space-2) 0; }
.site-footer__legal-link { color: #65a8ff; font-size: var(--font-size-small); text-decoration: none; }
.site-footer__legal-link:visited { color: #65a8ff; }
.site-footer__legal-link + .site-footer__legal-link { margin-left: var(--space-3); padding-left: var(--space-3); border-left: 1px solid #737681; }
.site-footer__legal-link:hover, .site-footer__legal-link:focus-visible { color: var(--color-text-inverse); text-decoration: underline; }
.site-footer__offer-note { max-width: 900px; margin-top: var(--space-5); color: #9295a0; font-size: var(--font-size-caption); }

@media (max-width: 991.98px) {
    .site-footer__main { padding-bottom: var(--space-9); }
}

@media (max-width: 767.98px) {
    .site-footer__visual {
        background-image: linear-gradient(rgb(27 27 37 / 72%), rgb(27 27 37 / 72%)), url('../images/footer_bg.webp');
        background-position: center, center bottom;
        background-size: auto, auto 420px;
    }
    .site-footer { margin-top: var(--space-6); }
    .site-footer__main { padding-top: var(--space-6); padding-bottom: var(--space-8); }
    .site-footer__tagline { margin-top: var(--space-4); }
    .site-footer__secondary { padding-bottom: var(--space-7); }
    .site-footer__legal-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575.98px) {
    .site-footer__legal-links { flex-direction: column; align-items: flex-start; }
    .site-footer__legal-link + .site-footer__legal-link { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* Fixed mobile navigation and cookie notice share the bottom safe area. */
.b-bottom-mobile-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    height: calc(var(--height-mobile-bar) + env(safe-area-inset-bottom, 0px));
    padding: var(--space-2) max(var(--space-2), env(safe-area-inset-right, 0px)) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)) max(var(--space-2), env(safe-area-inset-left, 0px));
    border-top: var(--border-default);
    background: var(--color-bg);
    box-shadow: var(--box-shadow-default);
}
.b-bottom-mobile-bar .item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: 0;
    min-height: var(--control-height);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-body);
    text-decoration: none;
    cursor: pointer;
}
.b-bottom-mobile-bar .item:hover { color: var(--color-primary-hover); }
.b-bottom-mobile-bar .mobile-bar__icon--outline { fill: none; stroke: currentColor; }
.b-cart-mobile-bar .icon { position: relative; }
.b-cart-mobile-bar .b-cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding-inline: var(--space-1);
    border-radius: var(--border-radius-round);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: 11px;
    line-height: 1;
}
.cookies-info {
    position: fixed;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    left: 50%;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: min(680px, calc(100% - var(--space-6)));
    max-height: calc(100vh - var(--space-6) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--space-6) - env(safe-area-inset-bottom, 0px));
    padding: var(--space-4);
    overflow-y: auto;
    overflow-wrap: anywhere;
    border: var(--border-default);
    border-radius: var(--border-radius-default);
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: var(--box-shadow-hover);
    font-size: var(--font-size-small);
    transform: translateX(-50%);
}
.cookies-info .text { flex: 1; min-width: 0; }
.cookies-info p { margin-bottom: var(--space-2); }
.cookies-info .text :last-child { margin-bottom: 0; }
.cookies-info .formCookiesAcceptMore { margin-left: var(--space-1); padding: 0; border: 0; background: transparent; color: var(--color-primary); font: inherit; text-decoration: underline; cursor: pointer; }
.cookies-info .button { flex-shrink: 0; }
.cookies-info-show-more { flex-direction: column; align-items: stretch; }
.cookies-info-show-more .button { align-self: flex-end; }

@media (max-width: 767.98px) {
    .page-container:has(.b-bottom-mobile-bar) { padding-bottom: calc(var(--height-mobile-bar) + env(safe-area-inset-bottom, 0px)); }
    .cookies-info {
        flex-direction: column;
        align-items: stretch;
        bottom: calc(var(--height-mobile-bar) + var(--space-4) + env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - var(--height-mobile-bar) - var(--space-6) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - var(--height-mobile-bar) - var(--space-6) - env(safe-area-inset-bottom, 0px));
    }
    .cookies-info .button { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    .button, .category-card, .service-card, .article-card, .product-card { transition: none; }
}

/* Product page (REF-004). */
.p-catalog-item { padding-block: var(--space-6) var(--space-8); }
.product-summary { align-items: start; margin-bottom: var(--space-7); }
.product-summary__media { order: -1; }
.product-summary__media-frame {
    padding: 0;
    border: var(--border-default);
    border-radius: var(--border-radius-large);
    background: var(--color-bg);
    overflow: hidden;
}
.product-summary__media-frame img { display: block; width: 100%; height: auto; object-fit: contain; }
.product-summary__image-placeholder, .product-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-small); text-align: center; }
.product-summary__image-placeholder { aspect-ratio: 1 / 1; height: auto; }
.product-summary__content { min-width: 0; }
.product-summary__title { margin: 0 0 var(--space-4); font-size: var(--font-size-h1); }
.product-summary__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); color: var(--color-text-secondary); font-size: var(--font-size-small); }
.product-summary__price-label { color: var(--color-text-muted); font-size: var(--font-size-small); }
.product-summary__price { margin-bottom: var(--space-5); font-size: var(--font-size-price); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
.product-summary__actions { display: grid; gap: var(--space-2); }
.product-summary__actions .button { min-height: 50px; text-transform: uppercase; }
.product-summary__cart.quantity-control { justify-content: center; gap: var(--space-5); border: var(--border-default); background: var(--color-bg); color: var(--color-text); }
.product-summary__cart.quantity-control .quantity-control__button { min-width: 50px; }
.product-summary__more { display: grid; align-content: start; gap: var(--space-5); margin-top: var(--space-5); }
.product-description { margin-top: var(--space-7); }
.product-description h2, .product-details h2, .product-documents h2, .product-offer h2, .product-info h2, .b-other-variants h2, .b-other-items h2 { margin: 0 0 var(--space-4); font-size: var(--font-size-h2); }
.product-description .prose { max-width: var(--container-reading); }
.product-description .prose > :first-child { margin-top: 0; }
.product-services.content-panel { padding: var(--space-4); }
.product-services h2 { margin: 0 0 var(--space-4); font-size: var(--font-size-h2); text-align: center; }
.product-services__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); margin: 0; padding-left: var(--space-5); }
.product-services__list li { padding-left: var(--space-1); overflow-wrap: anywhere; }
.product-services__list li::marker { color: var(--color-primary); }
.product-services__list a { color: var(--color-primary); text-decoration: none; }
.product-services__list a:hover { text-decoration: underline; }
.product-details .content-panel, .product-documents .content-panel, .product-info.content-panel { padding: var(--space-4); }
.specification-list { margin: 0; }
.specification-list__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-default); }
.specification-list__row:first-child { padding-top: 0; }
.specification-list__row:last-child { padding-bottom: 0; border-bottom: 0; }
.specification-list__label { font-weight: var(--font-weight-regular); overflow-wrap: anywhere; }
.specification-list__value { margin: 0; text-align: right; overflow-wrap: anywhere; }
.specification-list__link { color: var(--color-primary); text-decoration: none; }
.specification-list__link:hover { text-decoration: underline; }
.document-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-bottom: var(--border-default); }
.document-row:first-child { padding-top: 0; }
.document-row:last-child { padding-bottom: 0; border-bottom: 0; }
.document-row__title { min-width: 0; overflow-wrap: anywhere; }
.document-row__action { flex-shrink: 0; }
.product-info h2 { font-size: var(--font-size-card-title); }
.product-info__group + .product-info__group { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-default); }
.product-info__group h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-body); }
.product-info__group ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.product-info__group li::marker { color: var(--color-primary); }
.product-offer { text-align: center; }
.product-offer > p { margin: 0 0 var(--space-4); color: var(--color-text-secondary); }
.product-offer > .content-panel { text-align: left; }
.product-offer .feedback-form__grid { row-gap: var(--space-3); }
.product-offer .feedback-form__field { margin: 0; }
.product-offer .feedback-form__label { margin-bottom: var(--space-1); }
.product-offer .feedback-form__control { border-color: var(--color-border); }
.product-offer .feedback-form__submit .btn-default { width: 100%; min-height: 50px; border: 0; border-radius: var(--border-radius-button); background: var(--color-primary); color: var(--color-text-inverse); font-weight: var(--font-weight-bold); text-transform: uppercase; }
.product-offer .feedback-form__submit .btn-default:hover { background: var(--color-primary-hover); }
.product-offer .feedback-form__agreement > div { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
.product-offer .form-check-input { float: none; width: 20px; height: 20px; margin: 0; border-color: var(--color-border-strong); cursor: pointer; }
.product-offer .form-check-input:checked { border-color: var(--color-primary); background-color: var(--color-primary); }
.product-offer .form-check-input:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.product-offer .feedback-form__agreement-label { min-width: 0; margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-small); line-height: var(--line-height-body); overflow-wrap: anywhere; }
.product-offer .feedback-form__agreement-label a { color: var(--color-primary); }
.product-offer .feedback-form__agreement .invalid-feedback { grid-column: 2; margin: 0 !important; }
.product-page__faq { margin-top: var(--space-7); }
.b-other-variants { padding: var(--space-4); border: var(--border-default); border-radius: var(--border-radius-large); }
.b-other-variants h2 { font-size: var(--font-size-card-title); }
.b-other-variants .items { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.b-other-variants .item a { display: inline-flex; align-items: center; min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: var(--border-default); border-radius: var(--border-radius-small); color: var(--color-primary); text-decoration: none; }
.b-other-variants .item a:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.wrap-b-other-items, .wrap-b-other-articles { margin-top: var(--space-8); }
.product-related__grid { margin-bottom: 0; padding-left: 0; list-style: none; }
.product-related__item { display: flex; }
.product-related__item .product-card { width: 100%; }
.product-related__item .product-card__media { margin: var(--space-2) var(--space-2) 0; border-radius: var(--border-radius-default); }
.product-related__item .product-card__body { gap: var(--space-2); padding: var(--space-3); }
.product-related__item .product-card__title { font-size: var(--font-size-small); }
.product-related__item .product-card__price { font-size: var(--font-size-body); }
.product-related__cart { width: 100%; min-height: var(--control-height); padding-inline: var(--space-2); }
.product-related__cart.quantity-control { justify-content: space-between; padding: 0; color: var(--color-text); }
.product-related__cart.quantity-control .quantity-control__button { flex-shrink: 0; }
.product-related__quick-order { width: 100%; min-height: var(--control-height); padding-inline: var(--space-2); font-size: var(--font-size-caption); }

/* Home: REF-001 composition; shared cards and forms keep their own contracts. */
.page-home__title.section-heading__title { margin: var(--space-heading) 0 0; text-align: center; }
.home-hero {
    display: flex;
    align-items: center;
    min-height: clamp(480px, 42vw, 640px);
    background: var(--color-bg-dark) url('../images/home-slide.webp') center / cover no-repeat;
    color: var(--color-text-inverse);
}
.home-hero__content { padding-block: var(--space-7); }
.home-hero__title { max-width: 9em; margin: 0 0 var(--space-5); font-family: var(--font-headers-main); font-size: var(--font-size-display); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); text-transform: uppercase; overflow-wrap: anywhere; }
.home-hero__text { max-width: 26em; color: var(--color-text-inverse); font-size: var(--font-size-body-large); }
.home-hero__text p { margin: 0 0 var(--space-4); }
.home-hero__text p + p { max-width: 26em; font-size: var(--font-size-small); }
.home-hero__action { margin-top: var(--space-3); }
.home-catalog { scroll-margin-top: var(--space-6); }
.home-about__text { color: var(--color-text-secondary); }
.home-about__text > :last-child { margin-bottom: 0; }
.home-about__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--border-radius-default); background: var(--color-bg-secondary); box-shadow: var(--box-shadow-hover); }
.home-about__media img { width: 100%; height: 100%; object-fit: cover; }
.home-about__placeholder { padding: var(--space-5); color: var(--color-text-muted); text-align: center; }
.home-about__stats { margin-top: var(--space-5); margin-bottom: 0; }
.home-about__stats > .col { display: flex; flex-direction: column; }
.home-about__stat-value { order: -1; margin: 0 0 var(--space-1); color: var(--color-primary); font-size: var(--font-size-price); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); overflow-wrap: anywhere; }
.home-about__stat-label { color: var(--color-text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-regular); }
.home-about__advantages { margin: var(--space-5) 0 0; padding-left: var(--space-5); color: var(--color-text-secondary); }
.home-about__advantages li::marker { color: var(--color-primary); }
.home-about__action { margin-top: var(--space-6); }
.home-about__features { margin-top: var(--space-6); margin-bottom: 0; padding-left: 0; list-style: none; }
.home-about__features p { margin-bottom: 0; color: var(--color-text-secondary); }
.home-about__feature-image { width: 64px; height: 64px; margin-bottom: var(--space-3); object-fit: contain; }
.home-services { background: var(--color-bg-secondary); }
.home-feedback-section { padding-block: var(--space-6); }
.home-feedback { padding: var(--space-6); border: var(--border-default); border-radius: var(--border-radius-large); background: var(--color-bg-secondary); }
.home-feedback .feedback-form__grid { row-gap: var(--space-5); }
.home-feedback .feedback-form__field { min-width: 0; }
.home-feedback .feedback-form__submit .btn-default,
.home-feedback .feedback-form__file-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); max-width: 100%; padding: var(--space-3) var(--space-5); border: 1px solid var(--color-primary); border-radius: var(--border-radius-button); font: var(--font-weight-bold) var(--font-size-button)/1.25 var(--font-regular); text-align: center; cursor: pointer; transition: background-color var(--transition-ui), color var(--transition-ui); }
.home-feedback .feedback-form__submit .btn-default { background: var(--color-primary); color: var(--color-text-inverse); }
.home-feedback .feedback-form__submit .btn-default:hover:not(:disabled) { background: var(--color-primary-hover); }
.home-feedback .feedback-form__submit .btn-default:disabled { opacity: .5; cursor: not-allowed; }
.home-feedback .feedback-form__file-button { width: 100%; background: var(--color-bg); color: var(--color-primary); }
.home-feedback .feedback-form__file-button:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.home-feedback .form-text { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-small); }
.home-feedback .feedback-form__file-list { gap: var(--space-2); overflow-wrap: anywhere; }
.home-feedback .feedback-form__file-list .item-file { max-width: 100%; }
.home-feedback .moxie-shim { width: calc(100% - var(--bs-gutter-x)) !important; }
.home-feedback .feedback-form__agreement > div { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); }
.home-feedback .form-check-input { float: none; width: 20px; height: 20px; margin: 0; border-color: var(--color-border-strong); cursor: pointer; }
.home-feedback .form-check-input:checked { border-color: var(--color-primary); background-color: var(--color-primary); }
.home-feedback .feedback-form__agreement-label { min-width: 0; margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-small); overflow-wrap: anywhere; }
.home-feedback .feedback-form__agreement .invalid-feedback { grid-column: 2; margin: 0 !important; }
.home-feedback .invalid-feedback { color: var(--color-error); }
.home-feedback .b-response { padding: var(--space-5); border-radius: var(--border-radius-default); background: var(--color-success-soft); color: var(--color-success); }
.home-partners { padding-block: var(--space-6); background: var(--color-bg-secondary); }
.home-partners .partners > .col { flex-grow: 1; }
.home-partners__title { margin: 0 0 var(--space-5); color: var(--color-text-secondary); font-size: var(--font-size-caption); text-align: center; text-transform: uppercase; }
.partners { justify-content: center; padding-left: 0; margin-bottom: 0; list-style: none; }
.partners__logo { display: flex; align-items: center; justify-content: center; height: 80px; }
.partners__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partners__placeholder { color: var(--color-text-muted); font-size: var(--font-size-caption); text-align: center; }

@media (min-width: 992px) {
    .home-partners .partners > .col { flex: 1 1 160px; width: auto; }
}
@media (max-width: 991.98px) {
    .home-hero { min-height: 440px; background-image: linear-gradient(90deg, rgb(27 27 37 / 84%), rgb(27 27 37 / 66%)), url('../images/home-slide.webp'); background-position: 65% center; }
    .home-hero__content { max-width: 640px; padding-block: var(--space-7) var(--space-6); }
    .home-hero__title { max-width: 100%; }
}
@media (max-width: 575.98px) {
    .home-hero__content { padding-block: var(--space-6); }
    .home-hero__action { width: 100%; }
    .home-feedback { padding: var(--space-5) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
    .home-feedback .feedback-form__submit .btn-default,
    .home-feedback .feedback-form__file-button { transition: none; }
}

@media (max-width: 991.98px) {
    .product-summary { flex-direction: column; row-gap: var(--space-5); margin-bottom: var(--space-6); }
    .product-summary__media, .product-summary__content { display: contents; }
    .product-summary__more { display: contents; }
    .product-summary__media-frame, .product-summary__purchase, .product-description, .product-summary__more > * { width: calc(100% - var(--bs-gutter-x)); margin-inline: calc(var(--bs-gutter-x) * .5); }
    .product-summary__media-frame { order: 1; }
    .product-summary__purchase { order: 2; }
    .product-summary__more > .product-details { order: 3; }
    .product-summary__more > .product-info { order: 4; }
    .product-description { order: 5; margin-top: 0; }
    .product-summary__more > * { order: 6; }
}

@media (max-width: 575.98px) {
    .p-catalog-item { padding-block: var(--space-5) var(--space-7); }
    .product-summary { row-gap: var(--space-4); }
    .product-summary__meta { margin-bottom: var(--space-4); }
    .product-services__list { grid-template-columns: minmax(0, 1fr); }
    .specification-list__row { grid-template-columns: minmax(0, 45%) minmax(0, 1fr); }
    .product-related__item .product-card__body { padding: var(--space-2); }
}

/* Search rendering uses the shared service and the native OZINC product listing. */
.search-hint { color: var(--color-text); font-family: var(--font-regular); }
.search-hint__categories { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.search-hint__categories a { display: inline-flex; align-items: center; min-height: var(--control-height); max-width: 100%; padding: var(--space-2) var(--space-3); border: var(--border-default); border-radius: var(--border-radius-small); color: var(--color-primary); text-decoration: none; overflow-wrap: anywhere; }
.search-hint__categories a:hover { background: var(--color-primary-soft); }
.search-hint__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: 80px; padding: var(--space-2) 0; border-bottom: var(--border-default); color: var(--color-text); text-decoration: none; }
.search-hint__item:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.search-hint__image { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; overflow: hidden; border-radius: var(--border-radius-small); background: var(--color-bg-secondary); }
.search-hint__image img { width: 100%; height: 100%; object-fit: contain; }
.search-hint__title { font-size: var(--font-size-small); line-height: var(--line-height-body); overflow-wrap: anywhere; }
.search-hint__price { max-width: 180px; font-weight: var(--font-weight-bold); font-size: var(--font-size-body); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.search-hint__price small { font-size: var(--font-size-caption); font-weight: var(--font-weight-regular); }
.search-hint__all.button.button--primary { display: flex; width: 100%; margin-top: var(--space-3); }
.search-hint__empty, .search-hint__status { margin: 0; padding: var(--space-3); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.search-page { padding-block: var(--space-6) var(--space-7); }
.container-xl > .search-page { width: 100%; max-width: none; padding-inline: 0; }
.search-page__form { margin-bottom: var(--space-6); padding: var(--space-5); border: var(--border-default); border-radius: var(--border-radius-large); background: var(--color-bg-secondary); }
.search-page__label { display: block; margin-bottom: var(--space-3); font-weight: var(--font-weight-bold); }
.search-page__input-row { display: flex; gap: var(--space-3); }
.search-page__input-row input { flex: 1; min-width: 0; min-height: var(--control-height); }
.search-page__input-row .button { min-width: 120px; }
.search-page__status { padding: var(--space-5); border: var(--border-default); border-radius: var(--border-radius-default); color: var(--color-text-secondary); }
.search-page__results { min-width: 0; }
.search-page__toolbar { margin-bottom: var(--space-4); }
.search-page__toolbar p { margin: 0; overflow-wrap: anywhere; }
.search-page__categories { margin-bottom: var(--space-5); }
.search-page__categories p { margin: 0 0 var(--space-2); color: var(--color-text-secondary); }
.search-page__category-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.search-page__category { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); max-width: 100%; padding: var(--space-2) var(--space-3); border: var(--border-default); border-radius: var(--border-radius-small); color: var(--color-primary); text-decoration: none; overflow-wrap: anywhere; }
.search-page__category:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.search-page__category-count { color: var(--color-text-muted); font-size: var(--font-size-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.search-page__categories summary { width: fit-content; min-height: var(--control-height); margin-top: var(--space-2); padding-block: var(--space-2); color: var(--color-primary); cursor: pointer; }
.search-page__categories details .search-page__category-links { margin-top: var(--space-2); }
.search-page__simple-items { padding-left: var(--space-5); }
.search-page__simple-items li { padding-block: var(--space-2); overflow-wrap: anywhere; }
.search-page__pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.mobile-search .modal-dialog { margin: var(--space-3); }
.mobile-search .modal-content { border: var(--border-default); border-radius: var(--border-radius-large); }
.mobile-search .modal-header, .mobile-search .modal-body { padding: var(--space-4); }
.mobile-search .modal-title { font-size: var(--font-size-card-title); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); overflow-wrap: anywhere; }
.mobile-search__form { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.mobile-search__form input { min-width: 0; min-height: var(--control-height); }
.mobile-search .mobile-search-result { display: none; }
@media (min-width: 576px) {
    .mobile-search .modal-dialog { margin: var(--space-6) auto; }
}
@media (max-width: 767.98px) {
    .search-hint__item { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-1) var(--space-3); }
    .search-hint__image { grid-row: span 2; width: 56px; height: 56px; }
    .search-hint__price { grid-column: 2; max-width: none; }
}
@media (max-width: 575.98px) {
    .search-page__form, .search-page__status { padding: var(--space-4); }
    .search-page__input-row { flex-direction: column; }
    .search-page__input-row .button { width: 100%; }
}