/*
 * Stroyka theme — scheme-aware overrides on top of stroyka.css.
 *
 * Architecture: each section root carries a `color-scheme-N` class. The platform
 * injects per-scheme CSS variables onto those classes following Dawn's verbatim
 * naming (see github.com/Shopify/dawn `layout/theme.liquid`):
 *
 *     .color-scheme-1 {
 *         --color-background: 255,255,255;
 *         --gradient-background: #FFFFFF;
 *         --color-foreground: 38,38,38;
 *         --color-background-contrast: ...;     (derived from background brightness)
 *         --color-shadow: 38,38,38;
 *         --color-button: 64,162,230;
 *         --color-button-text: 255,255,255;
 *         --color-secondary-button: 255,255,255;
 *         --color-secondary-button-text: 38,38,38;
 *         --color-link: 38,38,38;
 *         --color-badge-foreground: 38,38,38;
 *         --color-badge-background: 255,255,255;
 *         --color-badge-border: 38,38,38;
 *     }
 *
 * Descendants of a colored section read those vars through the cascade.
 * stroyka.css's hardcoded brand colors (#ffd333, #3d464d, #1a66ff) are overridden
 * here with scheme-var equivalents so primary buttons, accents, and active
 * states adapt per section.
 *
 * The :root fallbacks below match scheme-1 and provide a sane render when the
 * platform's scheme-injection hasn't kicked in yet (or for unscoped page chrome).
 */

:root {
    --color-background: 255, 255, 255;
    --gradient-background: #FFFFFF;
    --color-foreground: 38, 38, 38;
    --color-background-contrast: 245, 245, 245;
    --color-shadow: 38, 38, 38;
    --color-button: 64, 162, 230;
    --color-button-text: 255, 255, 255;
    --color-secondary-button: 255, 255, 255;
    --color-secondary-button-text: 38, 38, 38;
    --color-link: 38, 38, 38;
    --color-badge-foreground: 38, 38, 38;
    --color-badge-background: 255, 255, 255;
    --color-badge-border: 38, 38, 38;
}

/* Typography — fed by settings.type_header_font / .type_body_font and the heading/body scale ranges.
   Hierarchy follows the design spec: H1 22pt / H2 18pt / H3 14pt / H4 12pt / body 10pt,
   headings in the channel font's ExtraBold (weight 800), body Regular (400). */
body {
    font-family: var(--font-body-family);
    font-weight: var(--font-body-weight, 400);
    font-size: 10pt;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading-family);
    font-weight: var(--font-heading-weight, 800);
}

h1, .h1 { font-size: 22pt; }
h2, .h2 { font-size: 18pt; }
h3, .h3 { font-size: 14pt; }
h4, .h4 { font-size: 12pt; }
h5, .h5 { font-size: 11pt; }
h6, .h6 { font-size: 10pt; }

/* Page width — pulled from settings.page_width via the inline :root style in the layout. */
.container,
.container-fluid {
    max-width: var(--page-width);
}

/* Buttons — Stroyka uses #ffd333/#3d464d brand colors. Rebind to scheme button colors. */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary.btn-loading:not(:disabled):not(.disabled) {
    background: rgb(var(--color-button));
    border-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    fill: rgb(var(--color-button-text));
    border-radius: var(--buttons-radius, 2px);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background: color-mix(in srgb, rgb(var(--color-button)) 88%, black);
    border-color: color-mix(in srgb, rgb(var(--color-button)) 88%, black);
    color: rgb(var(--color-button-text));
    fill: rgb(var(--color-button-text));
}
.btn-primary .fake-svg-icon,
.btn-primary.disabled .fake-svg-icon,
.btn-primary:disabled .fake-svg-icon {
    color: rgb(var(--color-button-text));
}
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus {
    color: rgb(var(--color-button-text));
}

/* Secondary buttons follow the scheme's foreground/background — outline-style. */
.btn-secondary {
    background: rgb(var(--color-background));
    border-color: rgba(var(--color-foreground), 0.2);
    color: rgb(var(--color-foreground));
    border-radius: var(--buttons-radius, 2px);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
    background: rgb(var(--color-foreground));
    border-color: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    fill: rgb(var(--color-background));
}
.btn-light {
    border-radius: var(--buttons-radius, 2px);
}

/* Links — follow the scheme's secondary_button_label (Dawn's "links" role). */
a {
    color: rgb(var(--color-link));
}
a:hover,
a:focus {
    color: rgb(var(--color-link));
    text-decoration: underline;
}
/* Unstyled component links — depart cards, megamenu, product cards — inherit so they paint over scheme surfaces correctly. */
.departments a,
.product-card a,
.megamenu a,
.nav-links a,
.mobile-header a,
.topbar-dropdown__btn,
.dropcart a {
    color: inherit;
}

/* Forms — inputs and selects pick up scheme background/foreground when inside a colored section. */
.form-control {
    border-radius: var(--inputs-radius, 2px);
}
.form-control:focus {
    border-color: rgb(var(--color-button));
    box-shadow: 0 0 0 0.2rem rgba(var(--color-button), 0.18);
}

/* Checkbox / radio active fills use scheme button color. */
.input-check__input:checked ~ .input-check__box {
    background: rgb(var(--color-button));
}
.input-check__input:checked ~ .input-check__box .input-check__icon {
    fill: rgb(var(--color-button-text));
}
.input-radio__input:checked ~ .input-radio__circle {
    background: rgb(var(--color-button));
}
.input-radio-label__list input:checked ~ span {
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
}

/* Range slider (noUiSlider) — connect bar and handle use scheme button. */
.noUi-connect,
.noUi-handle {
    background: rgb(var(--color-button));
}

/* Pagination — active page picks up the scheme button. */
.page-item.active .page-link {
    background: rgb(var(--color-button));
    border-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
}

/* Block header arrows and group tabs hover/active. */
.block-header__arrow:hover,
.block-header__arrow:focus {
    background: rgb(var(--color-button));
    fill: rgb(var(--color-button-text));
}
.block-header__group--active,
.block-header__group--active:focus,
.block-header__group--active:hover {
    box-shadow: 0 0 0 2px rgb(var(--color-button)) inset;
}

/* Product / category tabs underline. */
.product-tabs__item--active,
.product-tabs__item--active:hover {
    border-bottom-color: rgb(var(--color-button));
}
.product-tabs__list { display: flex; justify-content: center; }

/* Layout switcher in collection toolbar. */
.layout-switcher__button--active,
.layout-switcher__button--active:hover {
    border-color: rgb(var(--color-button));
    background: rgb(var(--color-button));
    fill: rgb(var(--color-button-text));
}

/* Tags hover / focus. */
.tags__list a:focus,
.tags__list a:hover {
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
}

/* Product card hover accent — yellow box-shadow becomes scheme button. */
.product-card:hover::before {
    box-shadow: 0 0 0 2px rgb(var(--color-button)) inset;
    -webkit-box-shadow: 0 0 0 2px rgb(var(--color-button)) inset;
}
.product-card:hover .product-card__quickview {
    background: rgb(var(--color-button));
    fill: rgb(var(--color-button-text));
}
.product-gallery__carousel-item--active {
    box-shadow: 0 0 0 2px rgb(var(--color-button)) inset;
    -webkit-box-shadow: 0 0 0 2px rgb(var(--color-button)) inset;
}

/* Technical-drawing placeholder slot (slide + thumb).
   Real image swaps in via window.Stroyka.productDrawing.set(). */
.product-image--drawing .product-image__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: rgba(var(--color-foreground), 0.6);
    border: 1px dashed rgba(var(--color-foreground), 0.2);
}
.product-gallery__featured .product-image--drawing .product-image__placeholder {
    font-size: 1rem;
}

/* Drawing wrapper inside the gallery slide. The slide's .product-image__body is a
   square (padding-bottom: 100% trick), so the wrapper must be absolutely positioned
   to fill it. The Turbo Stream replace at #technical-drawing-{instanceId} drops in
   a bare <div> without our classes, so target via the slide's --drawing modifier. */
.product-image--drawing .product-image__body > div {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.product-image--drawing .product-image__body svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* Product card — missing-image placeholder.
   Renders inside <a class="product-card__image"> when product.image is null, so the
   card's image area keeps its square footprint and the surrounding grid stays aligned. */
.product-card__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(var(--color-foreground), 0.25);
    background-color: rgba(var(--color-foreground), 0.04);
    border-radius: 2px;
}
.product-card__image-placeholder--inline {
    position: absolute;
    inset: 0;
}

/* Nav-links font weight — Stroyka's stroyka.css:6340 declares the top-level
   nav anchors at font-weight: 700, which reads too heavy against the modern
   channel's webfont. Lighter weight to match the visual of the source theme
   preview (whose default font has a thinner 700 glyph). */
.nav-links__item-link {
    font-weight: 500;
}

/* Menu dividers — added because StorefrontMenuItem now supports a DIVIDER
   link type. Stroyka has no native --divider modifier, so we render a thin
   separator scoped to the three places menus appear in the merged header
   section: top-level main nav (horizontal), submenus (vertical), and the
   departments dropdown (vertical). */
.menu__item--divider,
.departments__item--divider,
.mobile-links__item--divider {
    list-style: none;
    pointer-events: none;
    height: 1px;
    margin: 6px 0;
    background-color: rgba(var(--color-foreground), 0.12);
}
/* Departments dropdown sits on a dark band, so its dividers need a much
   higher contrast against the panel — 0.12 white-on-dark is technically
   present but invisible. Bump alpha and add side padding so the gap reads
   as an intentional separator rather than dead space. */
.departments__item--divider {
    margin: 10px 20px;
    background-color: rgba(var(--color-foreground), 0.3);
}

/* Mobile menu sub-links — Stroyka's native .mobile-links__item-sub-links
   has height: 0 / opacity: 0 by default and only expands when JS toggles
   .mobile-links__item--open on the parent. We always-open every parent in
   the markup (no collapse interaction), so the existing CSS already does
   the right thing. This rule just indents the nested ul a touch so the
   hierarchy reads visually. */
.mobile-links__item-sub-links .mobile-links__item-link {
    padding-left: 16px;
    font-size: 14px;
    color: rgba(var(--color-foreground), 0.7);
}
.nav-links__item--divider {
    /* Top-level main nav is horizontal — a thin vertical line between items
       reads as a divider, while still being keyboard- and screen-reader-
       neutral via role="separator" + aria-hidden in the markup. */
    list-style: none;
    pointer-events: none;
    width: 1px;
    height: 18px;
    align-self: center;
    margin: 0 8px;
    background-color: rgba(var(--color-foreground), 0.15);
}

/* Favorites toggle — active state. Stroyka has no built-in "filled heart"
   modifier, so we give the active button the scheme's button color/contrast
   plus a stronger icon weight. Matches the pattern used by btn-primary so it
   reads as a state, not a separate component. */
.product-card__wishlist--active {
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    fill: rgb(var(--color-button-text));
}
.product-card__wishlist--active:hover,
.product-card__wishlist--active:focus {
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    fill: rgb(var(--color-button-text));
    opacity: 0.85;
}

/* Grid card layout — equal-height cards so the Add-to-Cart row aligns across the
   row regardless of card content height. Image aspect is handled by Stroyka's
   native .product-image__body (padding-bottom: 100%) + .product-image__img
   (object-fit: scale-down) — no override needed here. */
.products-list[data-layout^="grid-"] .products-list__item {
    align-items: stretch;
}
.products-list[data-layout^="grid-"] .product-card {
    height: 100%;
}
.products-list[data-layout^="grid-"] .product-card__info {
    flex-grow: 1;
}

/* Add-to-cart card-header — Stroyka's global `.card-header { padding: 1.5rem 2rem }`
   forces a tall header with the title floating in dead space, and the rule's vertical
   padding shifts visually depending on whether the optional info icon is present.
   The add-to-cart cards already get their breathing room from .card-body padding,
   so collapse the header padding here to keep titles flush at the top-left edge. */
.product__sidebar .card-header {
    padding: 1rem 1.25rem 0.25rem;
}

/* Product-option info icon — square hit target. Size matches the h6 line-height
   so the flex card-header doesn't grow when the icon is present. */
.product-option-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(var(--color-foreground), 0.45);
    font-size: 1rem;
    line-height: 1;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.product-option-info:hover,
.product-option-info:focus {
    color: rgb(var(--color-button));
    background-color: rgba(var(--color-foreground), 0.06);
    text-decoration: none;
    outline: none;
}

/* Info modal — uses Bootstrap modal-lg + dialog-scrollable; this layer adds
   spacing, an overlapping close button, and rich-content typography. */
.info-modal .modal-content {
    border: none;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(var(--color-shadow), 0.18);
}
.info-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    z-index: 2;
    font-size: 1.75rem;
    line-height: 1;
    opacity: 0.55;
}
.info-modal__close:hover,
.info-modal__close:focus {
    opacity: 1;
    outline: none;
}
.info-modal__body {
    padding: 2.25rem 2.5rem;
}
.info-modal__title {
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-right: 2rem;
}
.info-modal__content {
    color: rgb(var(--color-foreground));
    line-height: 1.6;
}
.info-modal__content p:last-child {
    margin-bottom: 0;
}
.info-modal__content img,
.info-modal__content svg {
    max-width: 100%;
    height: auto;
}
.info-modal__loading {
    text-align: center;
    color: rgba(var(--color-foreground), 0.5);
    padding: 2rem 0;
    font-size: 1.5rem;
}

/* Dropcart loading placeholder — sits inside <turbo-frame id="dropcart-content">
   until theme.js triggers the lazy fetch on indicator open. */
.dropcart__loading {
    text-align: center;
    padding: 3rem 1rem;
    color: rgba(var(--color-foreground), 0.45);
    font-size: 1.5rem;
}

/* Search border focus indicator. */
.search--location--header .search__input:focus ~ .search__border {
    box-shadow: 0 0 0 2px rgb(var(--color-button)) inset;
    -webkit-box-shadow: 0 0 0 2px rgb(var(--color-button)) inset;
}

/* Address card badge — used in account pages. */
.address-card__badge {
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
}

/* Owl Carousel dots. */
.block-slideshow .owl-carousel .owl-dot.active,
.teammates .owl-carousel .owl-dot.active {
    background: rgb(var(--color-button));
}

/* Logo column alignment fix (kept from legacy chrome work). */
.site-header__logo {
    justify-content: flex-start;
}

/* Header phone number — uses scheme foreground. */
.site-header__phone-number {
    color: rgb(var(--color-foreground));
    font-weight: 700;
}

/* Topbar / mobile-header / nav-panel skin from scheme tokens.
   stroyka.css hardcodes these surfaces; the section root's inline style sets the bg,
   but child elements need explicit overrides for color and dropdown hover behaviour. */
.topbar a,
.topbar-link,
.topbar__item-value {
    color: inherit;
}
.topbar-link:hover,
.topbar a:hover {
    color: rgb(var(--color-button));
    text-decoration: underline;
}
.topbar-dropdown__btn {
    color: inherit;
    fill: currentColor;
    opacity: 0.85;
}
.topbar-dropdown__btn:focus,
.topbar-dropdown__btn:hover {
    background: rgba(var(--color-foreground), 0.08);
    opacity: 1;
}

/* Active main-nav link. */
.nav-links__item--active .nav-links__item-link,
.nav-links__item--active .nav-links__item-body {
    color: rgb(var(--color-button));
}

/* Departments megamenu — two surfaces from the active scheme:
   - Main button + top-level list (.departments__body) → solid button colors.
   - Submenu pane (.departments__submenu) → scheme background colors. */
.departments,
.departments__body {
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
}
/* .departments__body holds the dropdown content. Stroyka's stylesheet leaves it
   at z-index:auto, so adjacent .nav-panel__nav-links (also positioned) paints
   over the open dropdown. Bump body above row siblings, and the button above
   body so the icon/label aren't hidden behind body's background fill. */
.departments__body {
    z-index: 2;
}
.departments__button {
    z-index: 3;
}
.departments__item--hover .departments__item-link,
.departments__item-link:hover {
    background: rgba(var(--color-button-text), 0.12);
    color: rgb(var(--color-button-text));
    text-decoration: none;
}
.departments__submenu {
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
}
.departments__submenu .menu__item-link {
    color: rgb(var(--color-foreground));
}
.departments__submenu .menu__item-link:hover {
    background: rgba(var(--color-foreground), 0.08);
    color: rgb(var(--color-foreground));
    text-decoration: none;
}

/* Site footer surface — actual bg comes from the section's inline style, but child
   widgets need their text/headings/links readable on the dark surface. */
.site-footer .footer-contacts__title,
.site-footer .footer-links__title,
.site-footer .footer-newsletter__title,
.site-footer__copyright {
    color: rgb(var(--color-foreground));
}
.site-footer .footer-links__link,
.site-footer .footer-contacts__contacts a {
    color: rgb(var(--color-foreground));
    opacity: 0.78;
}
.site-footer .footer-links__link:hover,
.site-footer .footer-contacts__contacts a:hover {
    color: rgb(var(--color-button));
    opacity: 1;
}

/* Social-link brand colors that stroyka.css doesn't ship. */
.social-links__link--type--linkedin,
.social-links__link--type--linkedin-in { background: #0a66c2; }
.social-links__link--type--tiktok       { background: #010101; }
.social-links__link--type--pinterest    { background: #e60023; }

.page-header__breadcrumb {
    padding-bottom: 16px;
}

/* ---- Theme-specific customisations carried over from the legacy theme.css ---- */

/* Announcement bar — not native to Stroyka, so the rules live here.
   Thin centered strip above the topbar; one item visible at a time when
   the section's auto-rotate is on (handled in theme.js); all items shown
   inline (separated) when off. */
.announcement-bar {
    padding: 8px 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}
.announcement-bar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0;
}
.announcement-bar__item {
    display: inline-flex;
    align-items: center;
}
.announcement-bar__link,
.announcement-bar__link:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.announcement-bar[data-auto-rotate="true"] .announcement-bar__list {
    /* Auto-rotate hides all but the active item via theme.js — keep them
       stacked so the visible one stays centred regardless of length. */
    gap: 0;
}

/* Cart table should span full width. */
.cart-table__table { width: 100%; }
.cart { margin-bottom: 40px; }

/* Mega menu category images. */
.megamenu__item-image { margin: 8px 0; }
.megamenu__item-image img {
    max-width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: cover;
    border-radius: var(--media-radius, 2px);
}

/* Dynamic-form loader overlay — uses Stroyka's preloader-animation keyframe. */
.theme-loader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
}
.theme-loader__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    animation: preloader-animation 0.5s linear infinite;
}

/* Skip-to-content — visually hidden until focused. */
.skip-to-content-link.visually-hidden:focus,
.skip-to-content-link.visually-hidden:active {
    clip: auto;
    width: auto;
    height: auto;
    overflow: visible;
    position: fixed;
    top: 0;
    left: 0;
    padding: 8px 12px;
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    z-index: 9999;
}

/* Visually-hidden utility for accessibility. */
.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Slide image fit modes — Stroyka's .block-slideshow__slide-image has no
   background-size by default; these per-slide variants drive it. */
.block-slideshow__slide-image--fit-cover {
    background-size: cover;
    background-position: center;
}
.block-slideshow__slide-image--fit-contain {
    background-size: contain;
    background-position: center;
}
.block-slideshow__slide-image--fit-stretch {
    background-size: 100% 100%;
}
.block-slideshow__slide-image--fit-centered {
    background-size: auto;
    background-position: center;
}

/* Slide content position — 9-way grid driven by per-block CSS vars
   (--slide-content-x, --slide-content-y) so the slide schema can expose
   offsets. Selector starts with `section.block-slideshow` to give us
   specificity (0,2,1) — beats Stroyka's `[dir=ltr] .block-slideshow__slide-content`
   (0,2,0) and the `@media (max-width: 767px)` overrides at the same selector.
   Each rule sets all four directional properties explicitly (auto where
   unused) rather than relying on a separate reset — a [class*="--position-"]
   reset would have specificity (0,3,1), beating the per-position rules and
   pinning everything to the top-left. */
section.block-slideshow .block-slideshow__slide-content--position-top-left      { top: var(--slide-content-y, 30px); left: var(--slide-content-x, 30px); right: auto; bottom: auto; transform: none; text-align: left; }
section.block-slideshow .block-slideshow__slide-content--position-top-center    { top: var(--slide-content-y, 30px); left: 50%; right: auto; bottom: auto; transform: translateX(-50%); text-align: center; }
section.block-slideshow .block-slideshow__slide-content--position-top-right     { top: var(--slide-content-y, 30px); left: auto; right: var(--slide-content-x, 30px); bottom: auto; transform: none; text-align: right; }
section.block-slideshow .block-slideshow__slide-content--position-middle-left   { top: 50%; left: var(--slide-content-x, 30px); right: auto; bottom: auto; transform: translateY(-50%); text-align: left; }
section.block-slideshow .block-slideshow__slide-content--position-middle-center { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); text-align: center; }
section.block-slideshow .block-slideshow__slide-content--position-middle-right  { top: 50%; left: auto; right: var(--slide-content-x, 30px); bottom: auto; transform: translateY(-50%); text-align: right; }
section.block-slideshow .block-slideshow__slide-content--position-bottom-left   { top: auto; left: var(--slide-content-x, 30px); right: auto; bottom: var(--slide-content-y, 30px); transform: none; text-align: left; }
section.block-slideshow .block-slideshow__slide-content--position-bottom-center { top: auto; left: 50%; right: auto; bottom: var(--slide-content-y, 30px); transform: translateX(-50%); text-align: center; }
section.block-slideshow .block-slideshow__slide-content--position-bottom-right  { top: auto; left: auto; right: var(--slide-content-x, 30px); bottom: var(--slide-content-y, 30px); transform: none; text-align: right; }

/* Sidebar nav tree — denser rows than Stroyka's default. Stroyka ships
   filter-categories at 15px / 6px vertical padding; we drop to 14px / 3px
   so deep trees on category pages fit without scrolling. */
.filter-categories__list,
.filter-categories__item--child {
    font-size: 14px;
}
.filter-categories__item {
    padding: 3px 0;
}
/* Stroyka pins the back-arrow at `top: 10px` to land mid-row when items
   carry 6px vertical padding. With our 3px padding rows are ~24px tall,
   so center the arrow on the item instead of relying on the fixed offset. */
.filter-categories__arrow {
    top: 50%;
    transform: translateY(-50%);
}

/* Page banner image tint — overlay is a separate layer so the color comes from
   the top-level `overlay_color` setting and the opacity from the per-section
   `image_overlay_opacity` slider. Position relative + absolute keeps the page-header
   content above the tint. */
.page-banner--has-image {
    position: relative;
}
.page-banner__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.page-banner--has-image .page-header {
    position: relative;
    z-index: 1;
}