/* ───────────────────────────────────────────────────────────────────────────
   Storefront page-sections — reusable building blocks rendered by partials
   under Views/Shared/Sections/. Each block here corresponds to one partial.
   Brand-color overrides flow from the inline :root vars set by _Layout.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Section frame ──────────────────────────────────────────────────────── */
/*
   Vertical rhythm — a default, not a rule. 36px is what a section is worth when nobody has said
   otherwise; setting Padding Top / Bottom on the block (admin → block → Spacing) zeroes these two
   properties on the block wrapper, which then owns the gap, so the number the admin types is the
   whole of it rather than 36 plus it. See BlockStyle.ToInlineStyle.
*/
.sec { padding: var(--sec-pt, 36px) 0 var(--sec-pb, 36px); }
.sec .container { max-width: 1280px; }
.sec__heading {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}
.sec__sub {
    margin: 0 0 22px;
    color: #6b7280;
    font-size: 15px;
    max-width: 720px;
}
/* Breathing room between the heading/subheading block and the slider track. */
.sec-entity-slider .rail-swiper {padding-top:5px; }
.sec-entity-slider .sec__heading + .rail-swiper,
.sec-entity-slider .sec__sub + .rail-swiper { margin-top: 22px; }
.sec__head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.sec__head-row .sec__heading,
.sec__head-row .sec__sub { margin-bottom: 0; }
.sec__viewall {
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
}
.sec__viewall i { margin-left: 4px; transition: transform .15s; }
.sec__viewall:hover i { transform: translateX(3px); }

/* ── Trust strip (full-bleed bar under the nav) ───────────────────────────── */
.cms-block .nd-trust,
.cms-custom-html .nd-trust {
    /* break out of the centered .container to span the full viewport width */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    background: var(--brand-primary, #0b4da2);
    color: #fff;
}
.nd-trust__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 9px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 30px;
    font-size: 13px;
    font-weight: 500;
}
.nd-trust__inner span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nd-trust__inner i { opacity: .9; }
@media (max-width: 768px) {
    .nd-trust__inner { font-size: 12px; gap: 8px 18px; justify-content: flex-start; }
}

/* ── Hero block (generic, layout-preset driven) ───────────────────────────── */
.sec-hero { padding-top: 0px; }
.hero-grid { display: grid; gap: 16px; align-items: stretch; }

/* A slot cell: rounded image or slider that fills its grid cell. */
.hero-cell {  overflow: hidden; position: relative; min-height: 0; background: #f1f3f6; }
.hero-cell a, .hero-cell img { display: block; width: 100%; height: 100%; }
.hero-cell img { object-fit: cover; }
.hero-cell .hero-slider, .hero-cell .hero-slider .swiper-slide { height: 100%; }
.hero-cell .hero-slider .swiper-slide { aspect-ratio: auto; }
.hero-cell .hero-slider .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

/* Spotlight: tall feature (1fr) + right column (2fr) holding top tiles + a strip. */
.hero--spotlight .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.hero--spotlight .hero-cell--tall { min-height: 440px; }
.hero--spotlight .hero-right { display: grid; grid-template-rows: 1fr auto; gap: 16px; min-height: 440px; min-width: 0; }
.hero--spotlight .hero-tiles { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 16px; min-height: 0; }
.hero--spotlight .hero-cell--strip { min-height: 0; }
.hero--spotlight .hero-cell--strip img { height: auto; }

/* Rail: category menu + big banner + a stacked pair on the right. */
.hero--rail .hero-grid { grid-template-columns: 240px minmax(0, 2fr) minmax(0, 1.15fr); }
.hero--rail .hero-cell--main { min-height: 420px; }
.hero--rail .hero-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-height: 420px; }

/* Equal-tile layouts. */
.hero--quad .hero-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero--trio .hero-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero--duo  .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero--single .hero-grid { grid-template-columns: 1fr; align-items: start; }
/*.hero--quad .hero-cell, .hero--trio .hero-cell, .hero--duo .hero-cell { aspect-ratio: 3 / 4; }*/
.hero--single .hero-cell--main { aspect-ratio: 16 / 5; align-self: start; max-width: 100%; }

/* Left category rail (rail layout): each item is a bordered button. */
.hero-cats { display: flex; flex-direction: column; gap: 10px; }
.hero-cats ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.hero-cats li { display: flex; }
.hero-cats li a {
    display: flex; align-items: center; gap: 12px; width: 100%; flex: 1;
    padding: 11px 14px; background: #fff;
    border: 1px solid var(--brand-border, #e5e7eb); border-radius: 8px;
    color: var(--brand-charcoal, #1d2631); text-decoration: none;
    font-size: 14px; font-weight: 500; line-height: 1.25;
    transition: border-color .15s, color .15s, box-shadow .15s;
}
.hero-cats li a:hover { border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.hero-cats__icon { width: 24px; height: 24px; object-fit: contain; flex: 0 0 24px; }

@media (max-width: 992px) {
    .hero--spotlight .hero-grid,
    .hero--rail .hero-grid { grid-template-columns: 1fr; }
    .hero--spotlight .hero-cell--tall, .hero--spotlight .hero-right,
    .hero--rail .hero-cell--main, .hero--rail .hero-stack { min-height: 0; }
    .hero--quad .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-cats { flex-direction: row; flex-wrap: wrap; }
    .hero-cats ul { flex-direction: row; flex-wrap: wrap; height: auto; }
    .hero-cats li a { flex: 0 1 auto; }
}
@media (max-width: 560px) {
    .hero--spotlight .hero-tiles { grid-template-columns: 1fr; }
    .hero--quad .hero-grid, .hero--trio .hero-grid, .hero--duo .hero-grid { grid-template-columns: 1fr; }
}

/* ── Banner carousel ────────────────────────────────────────────────────── */
.banner-swiper .swiper-slide { aspect-ratio: 3 / 1; }
.banner-swiper .swiper-slide .banner-card,
.banner-swiper .swiper-slide .banner-card img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    object-fit: cover;
}
/* Single banner in a position → static image (no slider). */
.banner-static .banner-card { display: block; border-radius: 12px; overflow: hidden; }
.banner-static .banner-card img { display: block; width: 100%; height: auto; }
.banner-card {
    position: relative;
    text-decoration: none;
    color: #fff;
}
.banner-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 22px 24px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}
.banner-overlay h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}
.banner-overlay p {
    margin: 4px 0 8px;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
}
.banner-cta {
    display: inline-block;
    background: var(--brand-accent);
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

/* ── News marquee ───────────────────────────────────────────────────────── */
.sec-marquee { padding: 0; }
.marquee {
    overflow: hidden;
    padding: 10px 0;
    display: flex;
    width: 100%;
}
.marquee__track {
    display: flex;
    flex-shrink: 0;
    gap: 48px;
    padding-left: 48px;
    white-space: nowrap;
    animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
}
.marquee__item { font-size: 14px; font-weight: 500; opacity: .95; }
.marquee__item i { margin-right: 6px; color: var(--brand-accent); }
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* ── Rails (categories / brands / products) ─────────────────────────────── */
.rail-swiper .swiper-slide {
    height: auto;
}
.rail-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 22px 14px;
    min-height: 152px;
    text-decoration: none;
    color: #1a1a1a;
    height: 100%;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.rail-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
}
.rail-card__icon {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #eef3ff;
    color: var(--brand-primary);
    font-size: 24px;
    margin: 0;
    flex: none;
}
.rail-card__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    /* Lock to two lines so every card's content block is the same height → icons align. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.rail-card__img {
    width: 88px;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f0f0f3;
    display: grid;
    place-items: center;
    padding: 6px;
    margin: 0;
    flex: none;
}
.rail-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Product card */
.product-card { padding: 0; align-items: stretch; }
.product-card__img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f7f7f8;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.product-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
}
.product-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--brand-accent);
    color: #fff;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.product-card__body { padding: 12px 14px 16px; text-align: left; width: 100%; }
.product-card__title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}
.product-card__sku {
    font-size: 12px;
    color: #ed185f;
    margin-top: 4px;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.product-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
}
.product-card__price {
    font-size: 16px;
    font-weight: 800;
    color: var(--brand-primary);
}
.product-card__price-strike {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: line-through;
}

/* Brand card */
.brand-card {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 2;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 14px;
    transition: border-color .15s;
}
.brand-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(20%);
    opacity: .9;
    transition: filter .15s, opacity .15s;
}
.brand-card:hover { border-color: var(--brand-primary); }
.brand-card:hover img { filter: none; opacity: 1; }
.brand-card__fallback { font-weight: 700; color: #1a1a1a; }

/* Swiper nav buttons (we use Swiper's built-in but override the look) */
.swiper { position: relative; overflow: hidden; }
.swiper-button-prev, .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-10%);
    z-index: 5;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--brand-primary);
}
.swiper-button-prev::after { content: "‹"; font-size: 22px; line-height: 1; font-weight: 700; font-family:'Fontawesome'}
.swiper-button-next::after { content: "›"; font-size: 22px; line-height: 1; font-weight: 700; font-family:'Fontawesome'}
.swiper-button-prev { left: 15px; }
.sec-entity-slider .swiper-button-next { right: 15px; }
.swiper-button-prev {
    left: 15px;
}
.sec-entity-slider.swiper-button-next {
    right: 15px;
}
.swiper-button-disabled { opacity: 0; pointer-events: none; }
.swiper-pagination {
    text-align: center;
    margin-top: 14px;
    display: flex;
    gap: 6px;
    justify-content: center;
}
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d1d5db;
    transition: background .15s;
}
.swiper-pagination-bullet-active { background: var(--brand-primary); width: 22px; border-radius: 4px; }

/* ── Promo split ────────────────────────────────────────────────────────── */
.sec-promo { padding: 56px 0; }
.promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.sec-promo--image-left .promo-art { order: -1; }
.promo-eyebrow {
    color: var(--brand-accent);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}
.promo-title {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.promo-body { margin-top: 14px; font-size: 16px; color: #4b5563; line-height: 1.6; }
.promo-body p { margin: 0 0 12px; }
.btn-promo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 22px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s, background .15s;
}
.btn-promo:hover { transform: translateY(-1px); background: #002a00; color: #fff; }
.promo-art img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}
@media (max-width: 768px) {
    .promo-grid { grid-template-columns: 1fr; gap: 24px; }
    .sec-promo--image-left .promo-art { order: 0; }
    .promo-title { font-size: 26px; }
}

/* ── Feature grid ───────────────────────────────────────────────────────── */
.sec-feature-grid { padding: 48px 0; }
.feature-grid {
    display: grid;
    grid-template-columns: repeat(var(--feat-cols, 3), 1fr);
    gap: 20px;
    margin-top: 22px;
}
@media (max-width: 992px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 22px;
}
.feature-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(0, 54, 0, .06);
    color: var(--brand-primary);
    margin-bottom: 14px;
    font-size: 22px;
}
.feature-card__icon img { width: 28px; height: 28px; object-fit: contain; }
.feature-card__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #1a1a1a; }
.feature-card__body { margin: 0; color: #4b5563; font-size: 14px; line-height: 1.6; }
.feature-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.feature-card__more:hover { text-decoration: underline; }

/* ── Why choose us ──────────────────────────────────────────────────────── */
.sec-why-choose { padding: 0 0 48px; }
.why-bar {
    background: var(--brand-primary);
    color: #fff;
    padding: 22px 0;
    margin-bottom: 28px;
}
.why-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.why-bar__heading { display: flex; align-items: center; gap: 12px; }
.why-bar__heading img { width: 28px; height: 28px; object-fit: contain; }
.why-bar__heading h3 { margin: 0; font-size: 20px; font-weight: 800; }
.why-bar__badges {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
}
.why-bar__badges li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, .92);
}
.why-bar__badges img { width: 22px; height: 22px; }
.why-bar__badges i { color: var(--brand-accent); }
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 992px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 18px;
}
.why-card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}
.why-card__title i { color: var(--brand-accent); }
.why-card__title img { width: 20px; height: 20px; }
.why-card__body { margin: 0; color: #4b5563; font-size: 14px; line-height: 1.55; }

/* ── Rich text block ────────────────────────────────────────────────────── */
.richtext-block { max-width: var(--rt-max, 880px); margin: 0 auto; }
.richtext-block .cms-body { color: #1a1a1a; line-height: 1.7; }
.richtext-block .cms-body img { max-width: 100%; height: auto; border-radius: 8px; }

/* ── Mobile tweaks shared by all sections ───────────────────────────────── */
@media (max-width: 768px) {
    .sec:not(.sec-hero) { padding: var(--sec-pt, 28px) 0 var(--sec-pb, 28px); }
    .sec__heading { font-size: 22px; }
    .sec-hero{padding-bottom:0;}
    /* 16/5 is a thin sliver on a phone; give the single banner a taller, sane ratio. */
    .hero--single .hero-cell--main { aspect-ratio: 16 / 9; }
}

/* ── Admin-built form blocks (Sections/_FormBlock.cshtml) ───────────────────── */
.cms-form { padding: var(--sec-pt, 28px) 0 var(--sec-pb, 28px); }
.cms-form__form {
    max-width: 640px;
    margin-inline: auto;
    background: var(--brand-card, #fff);
    border: 1px solid var(--brand-border, #e5e7eb);
    border-radius: 14px;
    padding: 28px;
}
.cms-form__title { margin: 0 0 6px; font-size: 24px; font-weight: 800; }
.cms-form__desc { margin: 0 0 18px; color: var(--brand-muted, #6b7280); }
.cms-form__fields { display: flex; flex-direction: column; gap: 16px; }
.cms-form__field { display: flex; flex-direction: column; gap: 6px; }
.cms-form__label { font-weight: 600; font-size: 14px; }
.cms-form__req { color: #dc2626; }
.cms-form__control {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--brand-border, #d1d5db);
    border-radius: 9px;
    font: inherit;
    background: #fff;
}
.cms-form__control:focus {
    outline: none;
    border-color: var(--brand-primary, #4f46e5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #4f46e5) 18%, transparent);
}
.cms-form__choices { display: flex; flex-direction: column; gap: 8px; }
.cms-form__choice { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; cursor: pointer; }
.cms-form__choice input { margin-top: 3px; }
.cms-form__consent { font-size: 13.5px; color: var(--brand-muted, #4b5563); }
.cms-form__help { color: var(--brand-muted, #6b7280); font-size: 12.5px; }
.cms-form__actions { margin-top: 22px; }
.cms-form__submit {
    min-width: 160px;
    display: inline-block;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
    .cms-form__submit:hover {
        filter: brightness(1.25);
        color: #fff;
        transform: translateY(-1px);
    }
.cms-form__submit.is-busy { opacity: .6; pointer-events: none; }
.cms-form__alert { border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.cms-form__alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.cms-form__alert--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
@media (max-width: 600px) {
    .cms-form__form { padding: 20px; }
}

.cms-form__recaptcha { margin: 18px 0 4px; }

/* ── Form popup display mode ─────────────────────────────────────────────── */
/* Popup mode shows only a trigger button — collapse the form's section padding so it
   doesn't stack with the trigger wrap. Use block-level PaddingY for extra spacing. */
.cms-form--popup { text-align: center; padding: 0; }
.cms-form__trigger-wrap { padding: 12px 0; }
.cms-form__trigger {
    display: inline-block;
    background: var(--brand-primary, #4f46e5);
    color: #fff;
    font: inherit;
    font-weight: 700;
    padding: 12px 28px;
    border: 1px solid var(--brand-primary, #4f46e5);
    border-radius: 8px;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.cms-form__trigger:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cms-form__modal {
    position: fixed;
    inset: 0;
    /* Sit above the sticky header / mega-menu (which use very high z-indexes on this site),
       but below the toast stack (max-int). */
    z-index: 2147483000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 16px;
    overflow-y: auto;
}
.cms-form__modal[hidden] { display: none; }
.cms-form__backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); }
.cms-form--popup .cms-form__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    text-align: left;
}
.cms-form__modal .cms-form__dialog {
    position: relative;
    width: 100%;
}
    .cms-form__modal .cms-form__dialog button.cms-form__close {
        color: #000;
    }
.cms-form--popup .cms-form__form { margin: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.cms-form__close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: var(--brand-muted, #6b7280);
    cursor: pointer;
}
.cms-form__close:hover { color: var(--brand-ink, #111827); }
body.cms-form-modal-open { overflow: hidden; }

/* ── Generic Tabs block ──────────────────────────────────────────────────── */
.cms-tabs {
    background: var(--brand-card, #fff);
    border: 1px solid var(--brand-border, #e5e7eb);
    border-radius: 14px;
    padding: 1rem 1.25rem 1.25rem;
}
.cms-tabs__title { margin: 4px 2px 12px; font-size: 22px; font-weight: 800; }
.cms-tabs__nav {
    display: flex; flex-wrap: wrap; gap: 4px;
    border-bottom: 1px solid var(--brand-border, #e5e7eb);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cms-tab {
    appearance: none; background: none; border: none; cursor: pointer;
    padding: 12px 16px; margin-bottom: -1px;
    font: inherit; font-size: .95rem; font-weight: 600; white-space: nowrap;
    color: var(--brand-muted, #6b7280); border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.cms-tab:hover { color: var(--brand-ink, #111827); }
.cms-tab.is-active { color: var(--brand-ink, #111827); font-weight: 800; border-bottom-color: var(--brand-primary, #4f46e5); }
.cms-tabs__panel { display: none; padding: 22px 2px; }
.cms-tabs__panel.is-active { display: block; }

/* ── Category page: filter sidebar + product grid functional blocks ─────────── */
.cat-filter { position: relative; }
.cat-filter__form { padding: 0; }
.cat-facet { padding: 14px 0; border-bottom: 1px solid var(--brand-border, #eef0f3); }
.cat-facet__title { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--brand-muted, #6b7280); margin-bottom: 10px; }
.cat-facet__list { display: flex; flex-direction: column; gap: 8px; }
.cat-facet__list--scroll { max-height: 280px; overflow-y: auto; padding-right: 4px; }
.cat-facet__opt { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; }
.cat-facet__opt input { width: 16px; height: 16px; accent-color: var(--brand-primary, #4f46e5); flex: none; }
.cat-facet__name { flex: 1; }
.cat-facet__count { color: var(--brand-muted, #9ca3af); font-size: 12px; font-variant-numeric: tabular-nums; }
.cat-price { display: flex; align-items: center; gap: 8px; }
.cat-price input { width: 100%; padding: 8px 10px; border: 1px solid var(--brand-border, #d1d5db); border-radius: 8px; font: inherit; }
.cat-price__sep { color: var(--brand-muted, #9ca3af); }
.cat-filter__apply {
    display: block; width: calc(100% - 32px); margin: 16px; padding: 11px 14px;
    background: var(--brand-primary, #4f46e5); color: #fff; border: none; border-radius: 9px;
    font-weight: 700; font-size: 14px; cursor: pointer;
}
.cat-filter__apply:hover { filter: brightness(1.05); }

.cat-products { display: flex; flex-direction: column; gap: 18px; }
.cat-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding-bottom: 14px; border-bottom: 1px solid var(--brand-border, #e5e7eb);
}
.cat-toolbar__count { color: var(--brand-muted, #4b5563); font-size: 14px; }
.cat-toolbar__sort { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--brand-muted, #6b7280); }
.cat-toolbar__sort select { padding: 8px 10px; border: 1px solid var(--brand-border, #d1d5db); border-radius: 8px; font: inherit; background: #fff; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.cat-empty { text-align: center; padding: 60px 20px; color: var(--brand-muted, #6b7280); }
.cat-empty i { font-size: 28px; opacity: .5; display: block; margin-bottom: 12px; }
.cat-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 8px; }
.cat-pager__btn {
    padding: 9px 16px; border: 1px solid var(--brand-border, #d1d5db); border-radius: 9px;
    text-decoration: none; color: var(--brand-text, #111827); font-weight: 600; font-size: 14px; background: #fff;
}
.cat-pager__btn:hover { border-color: var(--brand-primary, #4f46e5); }
.cat-pager__btn.is-disabled { opacity: .4; pointer-events: none; }
.cat-pager__info { color: var(--brand-muted, #6b7280); font-size: 13.5px; }
@media (max-width: 600px) {
    .cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* ── Sub-category page: title + sidebar cards + description ──────────────────── */
.cat-page-title { text-align: center; margin: 8px 0 26px; font-size: 30px; font-weight: 800; color: var(--brand-charcoal, #374151); }
.cat-page-title > span { display: inline-block; padding-bottom: 8px; border-bottom: 3px solid var(--brand-primary, #003600); }
.cat-desc { margin-bottom: 22px; line-height: 1.7; color: var(--brand-text, #374151); }
.cat-desc h2, .cat-desc h3 { font-weight: 800; margin: 18px 0 6px; }
.cat-desc p { margin: 0 0 12px; }

.cat-side-card { background: var(--brand-card, #fff); border: 1px solid var(--brand-border, #e5e7eb); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.cat-side-card__head { background: var(--brand-primary, #003600); color: #fff; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; padding: 12px 16px; }
.cat-side-card__head--flex { display: flex; align-items: center; justify-content: space-between; }
.cat-filter__clear { color: #fff; font-size: 12px; font-weight: 600; text-decoration: underline; text-transform: none; letter-spacing: 0; }

.cat-cats { list-style: none; margin: 0; padding: 8px 0; }
.cat-cats__item a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; text-decoration: none; color: var(--brand-text, #374151); font-size: 14px; }
.cat-cats__item a:hover { background: var(--brand-bg, #f8fafc); }
.cat-cats__item.is-current a { font-weight: 800; color: var(--brand-primary, #003600); }
.cat-cats__count { color: var(--brand-muted, #9ca3af); font-size: 12.5px; }

.cat-filter .cat-facet { padding: 14px 16px; border-top: 1px solid var(--brand-border, #eef0f3); }
.cat-filter .cat-facet:first-of-type { border-top: none; }

/* A slide with no destination (the author slider — authors have no landing page) keeps the
   card but drops the click affordance, so it doesn't invite a click that goes nowhere. */
.rail-card:not([href]),
.brand-card:not([href]) { cursor: default; }
.rail-card:not([href]):hover {
    border-color: #eef0f3;
    transform: none;
    box-shadow: none;
}
.brand-card:not([href]):hover { border-color: #eef0f3; }