/* Catalogue listing, category pages, and shared products-cta (also loaded on the product sheet). */
/* === PRODUCTS PAGE LAYOUT === */
.products-selection-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid color-mix(in oklch, var(--surface-inverse) 12%, transparent);
    background: var(--color-bg-white);
    box-shadow: 0 18px 34px -30px color-mix(in oklch, var(--surface-inverse) 32%, transparent);
}

.products-selection-strip h2 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
}

.products-selection-strip p {
    margin: 0;
    color: var(--color-text-muted);
}

.products-selection-strip .eyebrow {
    color: var(--color-accent);
    margin-bottom: 0.25rem;
}

.products-page-layout {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.25rem);
    align-items: flex-start;
    margin-top: 2rem;
}

/* === PRODUCTS SIDEBAR === */
.products-sidebar {
    width: 100%;
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
    padding: 0.75rem 0;
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    background: var(--surface-raised);
    box-shadow: none;
    overflow: hidden;
}

.products-sidebar .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0 0 0.65rem;
    margin: 0 0.9rem 0.35rem;
    border-bottom: 1px solid var(--border-color);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.products-sidebar .sidebar-header::before {
    content: none;
}

.sidebar-header__meta {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.products-sidebar .sidebar-header__title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: color-mix(in oklch, var(--surface-inverse) 66%, transparent);
    margin: 0;
    text-transform: uppercase;
    font-family: var(--font-main);
}

.products-sidebar .sidebar-header__detail {
    display: none;
}

.products-sidebar__nav {
    position: relative;
    z-index: 1;
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.category-list > li:first-child {
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
}

.category-list li {
    margin: 0;
    width: 100%;
}

.category-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.55rem 0.85rem 0.55rem calc(0.85rem - 3px);
    color: var(--color-text-main);
    font-size: 0.86rem;
    font-weight: 540;
    text-decoration: none;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.category-list__label {
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-wrap: pretty;
}

.category-list__count {
    min-width: 2ch;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: right;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    transition: color 0.18s ease;
}

.category-list a:hover {
    color: var(--color-primary);
    background: var(--color-bg-light);
}

.category-list a:hover .category-list__count {
    color: var(--color-accent);
}

.category-list a.active {
    color: var(--color-primary);
    font-weight: 650;
    background: var(--surface-muted);
    border-left-color: var(--color-accent);
}

.category-list a.active .category-list__count {
    color: var(--color-accent);
}

.category-list a:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--accent-action) 24%, transparent);
    outline-offset: -3px;
}

.products-main {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .products-selection-strip {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 1.25rem;
        padding: 1.1rem;
    }

    .products-selection-strip .btn {
        width: 100%;
        justify-content: center;
    }

    .products-page-layout {
        grid-template-columns: 1fr;
    }

    .products-sidebar {
        width: 100%;
        position: static;
        padding: 0.85rem 0;
        border-radius: var(--radius-sm);
        box-shadow: none;
    }

    .products-sidebar .sidebar-header {
        padding: 0.05rem 0;
        margin: 0 1rem;
        border-bottom: none;
        min-height: 3rem; /* Improved touch target */
    }

    .products-sidebar.active .sidebar-header {
        padding-bottom: 1rem;
        margin-bottom: 0.35rem;
        border-bottom: 1px solid color-mix(in oklch, var(--text-soft) 22%, transparent);
    }

    .products-sidebar.active .sidebar-content {
        display: grid;
        gap: 0.55rem;
    }

    .products-sidebar .sidebar-header__detail {
        display: block;
        font-size: 0.92rem;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--color-primary);
        text-wrap: balance;
    }

    .products-sidebar__nav {
        max-height: min(22rem, 56dvh);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 0.1rem;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in oklch, var(--text-soft) 55%, transparent) transparent;
    }

    .category-list a {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 3.25rem;
        padding-inline: calc(1rem - 3px) 1rem;
    }
}

@media (min-width: 769px) {
    .products-sidebar {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - var(--header-height) - 2.25rem);
    }

    .products-sidebar .sidebar-header__detail {
        display: none;
    }

    .products-sidebar .sidebar-content {
        display: flex !important;
        flex-direction: column;
        min-height: 0;
    }

    .products-sidebar__nav {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 0.15rem;
        margin-right: -0.15rem;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in oklch, var(--text-soft) 55%, transparent) transparent;
    }
}

.category-brief__container--embedded {
    width: 100%;
}

.products-sidebar__nav::-webkit-scrollbar {
    width: 6px;
}

.products-sidebar__nav::-webkit-scrollbar-track {
    background: transparent;
}

.products-sidebar__nav::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--text-soft) 55%, transparent);
    border-radius: 999px;
}

.products-sidebar__nav::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklch, var(--text-muted) 72%, transparent);
}

/* === PRODUCTS PAGE HERO === */
.products-hero {
    background: var(--color-primary);
    color: var(--text-on-inverse);
    padding: 4rem 0 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.products-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--blueprint-grid);
    background-size: 40px 40px;
    opacity: 0.08;
    animation: blueprint-drift 20s linear infinite;
}

@keyframes blueprint-drift {
    from { transform: translate(0, 0); }
    to { transform: translate(40px, 40px); }
}

.products-hero h1 {
    color: var(--text-on-inverse);
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    text-wrap: balance;
    margin-bottom: 0.75rem;
}

.products-hero .lead {
    max-width: 540px;
    margin: 0 auto;
    opacity: 1;
    font-size: 1.1rem;
    color: color-mix(in oklch, var(--surface-raised) 95%, transparent);
    text-shadow: 0 1px 2px color-mix(in oklch, var(--color-black) 20%, transparent);
    text-wrap: pretty;
}

.products-hero .eyebrow {
    font-family: var(--font-main);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.7;
    margin-bottom: 0.5rem;
    display: inline-block;
    border-bottom: 1px solid color-mix(in oklch, var(--surface-raised) 15%, transparent);
    padding-bottom: 0.35rem;
}

/* === PRODUCT CARD TECHNICAL ENHANCEMENTS === */
/* Scan-line effect on hover */
.product-image-container {
    position: relative;
}

/* Secondary image reveal */
.product-image-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .product-image-secondary {
    opacity: 1;
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Machined corners animation enhancement */
.product-card.machined-corners::before,
.product-card.machined-corners::after {
    transition: border-color 0.3s var(--ease-out-expo),
                width 0.3s var(--ease-out-expo),
                height 0.3s var(--ease-out-expo);
}

.product-card.machined-corners:hover::before,
.product-card.machined-corners:hover::after {
    width: 14px;
    height: 14px;
    box-shadow: 0 0 6px color-mix(in oklch, var(--accent-action) 15%, transparent);
}

/* === TECHNICAL SECTION DIVIDER === */
.tech-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0 2rem;
    color: var(--color-text-muted);
}

.tech-divider::before,
.tech-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--border-color) 15%,
        var(--border-color) 85%,
        transparent 100%);
}

.tech-divider__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.tech-divider__icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-accent);
}

/* Products page mobile adjustments */
@media (max-width: 768px) {
    .products-hero {
        padding: 3rem 0 2rem;
    }

    .products-hero h1 {
        font-size: 1.75rem;
    }

    .product-image-secondary {
        display: none;
    }
}

/* === PRODUCTS CTA === */
.products-cta {
    padding: 4rem 0;
    background: var(--color-primary);
    position: relative;
    overflow: hidden;
}

.products-cta__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.products-cta__text {
    color: var(--text-on-inverse);
}

.products-cta__eyebrow {
    display: inline-block;
    font-family: var(--font-main);
    font-size: 0.875rem;
    color: var(--accent-on-inverse);
    margin-bottom: 0.75rem;
}

.products-cta__text h2 {
    color: var(--text-on-inverse);
    font-size: 1.75rem;
    line-height: 1.25;
    margin-bottom: 1rem;
    text-wrap: balance;
}

.products-cta__text p {
    color: var(--border-strong);
    line-height: 1.6;
    font-size: 0.95rem;
    max-width: 440px;
}

/* Contact info pills */
.products-cta__contact-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in oklch, var(--surface-raised) 10%, transparent);
}

.products-cta__info-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--border-strong);
}

.products-cta__info-item a {
    color: var(--surface-subtle);
    text-decoration: none;
    transition: color 0.2s;
}

.products-cta__info-item a:hover {
    color: var(--color-accent);
}

.products-cta__info-item svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.products-cta__info-item--separator {
    width: 1px;
    height: 16px;
    background: color-mix(in oklch, var(--surface-raised) 15%, transparent);
}

/* Form card */
.products-cta__form-card {
    background: var(--surface-inverse-soft);
    border: 1px solid var(--text-secondary);
    border-radius: var(--radius-md);
    padding: 2rem;
    position: relative;
}

.products-cta__form-card h3 {
    color: var(--text-on-inverse);
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.products-cta__form-subtitle {
    font-size: 0.8rem;
    color: var(--border-strong);
    margin-bottom: 1.5rem;
    font-family: var(--font-main);
}

/* Dark-theme form overrides inside CTA */
.products-cta__form-card .form-group label {
    color: var(--border-subtle);
    font-size: 0.8rem;
    font-weight: 500;
}

.products-cta__form-card .form-control,
.products-cta__form-card .form-group input,
.products-cta__form-card .form-group textarea {
    background: var(--color-primary);
    border: 1px solid var(--text-muted);
    color: var(--text-on-inverse);
    border-radius: 8px;
}

.products-cta__form-card .form-control::placeholder,
.products-cta__form-card .form-group input::placeholder,
.products-cta__form-card .form-group textarea::placeholder {
    color: var(--border-strong);
}

.products-cta__form-card .form-control:focus,
.products-cta__form-card .form-group input:focus,
.products-cta__form-card .form-group textarea:focus {
    background: var(--color-primary);
    border-color: var(--color-accent);
    outline: 3px solid var(--accent-on-inverse);
    outline-offset: 2px;
    box-shadow: none;
}

/* Stacked form layout for narrow card */
.products-cta__form-card .form-grid--stacked {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.products-cta__form-card .form-grid--stacked > * {
    width: 100%;
}

.products-cta__form-card .form-grid--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1rem;
    align-items: start;
}

.products-cta__form-card .product-inquiry-form__intent-block {
    margin-bottom: 0.2rem;
}

.products-cta__form-card .product-inquiry-form__intent {
    margin-bottom: 0;
    padding: 0.9rem 1rem 1rem;
    border-radius: 14px;
    border: 1px solid color-mix(in oklch, var(--accent-action) 22%, transparent);
    background: color-mix(in oklch, var(--accent-action) 8%, transparent);
    box-shadow: none;
}

.products-cta__form-card .product-inquiry-form__intent label {
    color: var(--accent-surface-strong);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}

.products-cta__form-card .product-inquiry-form__intent-select {
    min-height: 52px;
    font-weight: 600;
    border-color: color-mix(in oklch, var(--accent-on-inverse) 24%, transparent);
    background: color-mix(in oklch, var(--surface-inverse) 28%, transparent);
}

.products-cta__form-card .product-inquiry-form__intent-select:focus {
    border-color: color-mix(in oklch, var(--accent-on-inverse) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-bright) 16%, transparent);
}

.products-cta__form-card .product-inquiry-form__intent-help {
    margin: 0.55rem 0 0;
    color: color-mix(in oklch, var(--border-subtle) 72%, transparent);
    font-size: 0.77rem;
    line-height: 1.45;
}

.products-cta__form-card .product-inquiry-form__conditional-grid {
    grid-template-columns: 1fr;
}

.products-cta__form-card .form-group--conditional {
    display: none;
}

.products-cta__form-card .form-group--conditional.is-visible {
    display: block;
}

.products-cta__form-card .form-group {
    margin-bottom: 0.9rem;
}

.products-cta__form-card textarea {
    min-height: 96px;
    resize: vertical;
}

.products-cta__form-card .contact-textarea {
    min-height: 104px;
}

.products-cta__form-card .product-inquiry-form__notes {
    width: 100%;
    grid-column: 1 / -1;
    margin-top: 0.1rem;
}

.products-cta__form-card .product-inquiry-form__notes-help {
    margin: 0.5rem 0 0;
    color: color-mix(in oklch, var(--border-subtle) 72%, transparent);
    font-size: 0.77rem;
    line-height: 1.45;
}

.products-cta__form-card select.form-control option {
    color: var(--surface-inverse);
    background: var(--surface-raised);
}

.products-cta__form-card .nif-input-group {
    display: flex;
    align-items: stretch;
}

.products-cta__form-card .nif-input-group__prefix {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    background: color-mix(in oklch, var(--surface-raised) 8%, transparent);
    border: 1px solid color-mix(in oklch, var(--surface-raised) 15%, transparent);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: color-mix(in oklch, var(--text-on-inverse) 55%, transparent);
    letter-spacing: 0.05em;
    user-select: none;
    transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.products-cta__form-card .nif-input-group__prefix--faded {
    opacity: 0.35;
}

.products-cta__form-card .nif-input-group__input {
    border-radius: 0 8px 8px 0 !important;
}

.products-cta__form-card .nif-input-group:has(.nif-valid) .nif-input-group__prefix {
    border-color: color-mix(in oklch, var(--color-success) 55%, transparent);
    color: var(--color-success-soft);
    background: color-mix(in oklch, var(--color-success) 8%, transparent);
}

.products-cta__form-card .nif-input-group:has(.nif-error) .nif-input-group__prefix {
    border-color: color-mix(in oklch, var(--color-danger-soft) 55%, transparent);
    color: var(--color-danger-soft);
    background: color-mix(in oklch, var(--color-danger) 8%, transparent);
}

.products-cta__form-card .nif-feedback {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.5rem;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.products-cta__form-card .nif-feedback:empty {
    display: none;
}

.products-cta__form-card .nif-feedback--valid {
    color: var(--color-success-soft);
}

.products-cta__form-card .nif-feedback--error {
    color: var(--color-danger-soft);
}

.products-cta__form-card .nif-feedback--loading {
    color: color-mix(in oklch, var(--text-on-inverse) 65%, transparent);
}

.products-cta__form-card .nif-feedback svg {
    flex-shrink: 0;
}

.products-cta__form-card .turnstile-feedback {
    color: color-mix(in oklch, var(--border-subtle) 78%, transparent);
}

.products-cta__form-card .turnstile-feedback--error {
    color: var(--color-danger-pale);
}

.products-cta__form-card .turnstile-retry {
    color: var(--accent-on-inverse);
}

.products-cta__form-card .turnstile-retry:hover {
    color: var(--accent-border-soft);
}

.products-cta__form-card .form-control.nif-valid {
    border-color: color-mix(in oklch, var(--color-success) 55%, transparent);
    background-color: color-mix(in oklch, var(--color-success) 8%, transparent);
}

.products-cta__form-card .form-control.nif-valid:focus {
    outline-color: color-mix(in oklch, var(--color-success) 35%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 12%, transparent);
}

.products-cta__form-card .form-control.nif-error {
    border-color: color-mix(in oklch, var(--color-danger-soft) 55%, transparent);
    background-color: color-mix(in oklch, var(--color-danger) 8%, transparent);
}

.products-cta__form-card .form-control.nif-error:focus {
    outline-color: color-mix(in oklch, var(--color-danger) 30%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-danger) 12%, transparent);
}

.products-cta__form-card .nif-feedback__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in oklch, var(--surface-raised) 20%, transparent);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: nif-spin 0.6s linear infinite;
}

@keyframes nif-spin {
    to { transform: rotate(360deg); }
}

/* Submit button — full width inside card */
.products-cta__form-card .btn-primary {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/* Success panel on dark background */
.products-cta__form-card .form-success-panel__title {
    color: var(--text-on-inverse);
}

.products-cta__form-card .form-success-panel__description {
    color: color-mix(in oklch, var(--text-on-inverse) 70%, transparent);
}

.products-cta__form-card .form-success-panel__urgent {
    color: color-mix(in oklch, var(--surface-raised) 60%, transparent);
}

.products-cta__form-card .form-success-panel__urgent a {
    color: var(--color-accent);
}

@media (max-width: 768px) {
    .products-cta {
        padding: 3rem 0;
    }

    .products-cta__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .products-cta__text {
        text-align: left;
    }

    .products-cta__text p {
        max-width: none;
        margin: 0 auto;
    }

    .products-cta__contact-info {
        justify-content: flex-start;
    }

    .products-cta__form-card .form-grid--2col {
        grid-template-columns: 1fr;
    }

    .products-cta__form-card .product-inquiry-form__intent {
        padding: 0.85rem 0.9rem 0.95rem;
    }
}

/* =========================================================================
   CATEGORY AEO BLOCKS — integrated with the site design language
   -------------------------------------------------------------------------
   Three related sections rendered on category pages that have AEO copy:
     .category-brief--head   lede + spec plaque, ABOVE the product grid
     .category-brief--body   long-form prose + applications, BELOW the grid
     .category-faq           numbered questions, rule-divided list
   Visual approach: they reuse the site's existing vocabulary (body bg
   `--color-bg-body`, slate borders `--border-color`, standard radius
   `--radius-md`, Geist Sans + Geist Mono, the same tech-divider pattern
   used across product/home pages). Subtle technical "voice" comes from
   § section markers, mono data labels, and Q.NN numbering — applied as
   details, not a wholesale redesign.
   ========================================================================= */

/* Hero breathes slightly less when a category-brief head follows it, so
   the transition into the product area reads as one connected flow. */
.products-hero--tight {
    padding-bottom: 2.25rem;
}

/* When the product section is followed by body/FAQ blocks we tighten its
   bottom padding so the sections don't stack double whitespace. */
.section-padding--aeo {
    padding-bottom: 3rem;
}

/* -------------------------------------------------------------------------
   Shared primitives
   ------------------------------------------------------------------------- */
.category-brief,
.category-faq {
    color: var(--text-body);
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Head + FAQ sit on the light body background so they blend with the
   rest of the site's panel rhythm (products-info-section, home hero
   alternates, etc. all use the same token). Body block stays white so
   it reads like a document insert between the grid and the CTA. */
.category-brief--head {
    background: var(--color-bg-body);
    padding: 2.75rem 0 3rem;
}

.category-brief--body {
    background: var(--surface-raised);
    padding: 3rem 0 2.5rem;
}

.category-faq {
    background: var(--color-bg-body);
    padding: 3rem 0 3.5rem;
}

/* § marker — small mono eyebrow label that matches the site's existing
   eyebrow rhythm (mono, uppercase, tracked). The § glyph itself is the
   single distinctive flourish; otherwise the marker behaves like any
   other eyebrow on the site. */
.category-brief__marker {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-action);
    font-weight: 500;
    line-height: 1;
    padding-bottom: 0.4375rem;
    border-bottom: 1px solid var(--border-color);
}

.category-brief__marker-glyph {
    display: inline-block;
    font-size: 0.9375rem;
    color: var(--surface-inverse);
    font-weight: 600;
    transform: translateY(1px);
}

.category-brief__marker-label {
    color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   HEAD block — lede + spec plaque
   ------------------------------------------------------------------------- */
.category-brief--head .category-brief__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.category-brief__lede {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--surface-inverse-soft);
    font-weight: 400;
    max-width: 58ch;
    letter-spacing: -0.005em;
}

.category-brief__lede strong {
    color: var(--surface-inverse);
    font-weight: 600;
}

/* Spec plaque — rendered as a proper site card (white bg, soft border,
   standard radius, matching the rest of the product/home cards). The
   mono data inside is what reads "technical"; the container itself is
   consistent with every other panel on the site. */
.category-brief__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 1.125rem 1.25rem 1.25rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 1px 2px color-mix(in oklch, var(--surface-inverse) 4%, transparent);
}

.category-brief__spec {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6875rem 0.75rem 0.6875rem 0;
    border-top: 1px solid var(--border-color);
    min-width: 0;
}

/* Remove the top border from the first row (first two cells in 2-col) so
   the plaque reads as a bordered card with internal dividers, not a
   grid that starts with a rule above the first row. */
.category-brief__spec:nth-child(-n+2) {
    border-top: none;
    padding-top: 0.25rem;
}

.category-brief__spec dt {
    margin: 0;
    font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.25;
}

.category-brief__spec dd {
    margin: 0;
    font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--surface-inverse);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "ss01";
    word-break: break-word;
}

/* -------------------------------------------------------------------------
   BODY block — prose + applications aside
   ------------------------------------------------------------------------- */
.category-brief--body .category-brief__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.category-brief__prose {
    max-width: 62ch;
    color: var(--text-body);
    font-size: 1rem;
    line-height: 1.7;
}

.category-brief__prose p {
    margin: 0 0 1rem;
}

.category-brief__prose p:last-child {
    margin-bottom: 0;
}

.category-brief__prose strong {
    color: var(--surface-inverse);
    font-weight: 600;
}

.category-brief__prose a {
    color: var(--accent-action);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.category-brief__prose a:hover {
    color: var(--accent-action-hover);
}

/* Applications list — rendered as a site card to match the specs plaque
   rhythm. Keeps the section's two sub-blocks visually related. */
.category-brief__apps {
    margin: 0;
    padding: 1.125rem 1.25rem 1.125rem;
    background: var(--color-bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
}

.category-brief__apps-title {
    margin: 0 0 0.875rem;
    font-family: var(--font-main);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
}

.category-brief__apps-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-brief__apps-list li {
    position: relative;
    padding: 0.4375rem 0 0.4375rem 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-body);
    border-top: 1px solid var(--border-color);
}

.category-brief__apps-list li:first-child {
    border-top: none;
    padding-top: 0.25rem;
}

.category-brief__apps-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    top: 0.4375rem;
    color: var(--text-soft);
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

.category-brief__apps-list li:first-child::before {
    top: 0.25rem;
}

/* -------------------------------------------------------------------------
   FAQ block — numbered Q.01, Q.02 list inside a site card
   ------------------------------------------------------------------------- */
.category-faq__title {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--surface-inverse);
    margin: 0 0 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    max-width: 36ch;
}

.category-faq__list {
    list-style: none;
    counter-reset: jovalFaq;
    margin: 0;
    padding: 0.5rem 1.5rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 1px 2px color-mix(in oklch, var(--surface-inverse) 4%, transparent);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.category-faq__item {
    counter-increment: jovalFaq;
    position: relative;
    padding: 1.125rem 0 1.125rem 3rem;
    border-bottom: 1px solid var(--border-color);
}

.category-faq__item:last-child {
    border-bottom: none;
}

.category-faq__item::before {
    content: "Q." counter(jovalFaq, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1.25rem;
    font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--accent-action);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.category-faq__question {
    margin: 0 0 0.5rem;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--surface-inverse);
    line-height: 1.4;
    letter-spacing: -0.005em;
}

.category-faq__answer {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-body);
    max-width: 68ch;
}

/* -------------------------------------------------------------------------
   Tablet / desktop adjustments
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .category-brief--head,
    .category-brief--body,
    .category-faq {
        padding-top: 3.25rem;
        padding-bottom: 3.25rem;
    }

    .category-brief--head .category-brief__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2rem 3.25rem;
    }

    .category-brief__lede {
        font-size: 1.125rem;
    }

    .category-brief__specs {
        padding: 1.25rem 1.5rem 1.375rem;
    }

    .category-brief__spec dt {
        font-size: 0.6875rem;
    }

    .category-brief__spec dd {
        font-size: 1rem;
    }

    .category-brief--body .category-brief__layout {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 3rem;
        align-items: start;
    }

    .category-brief__apps {
        margin-top: 0.25rem;
    }

    .category-faq__list {
        padding: 0.5rem 2rem;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 2.5rem;
    }

    .category-faq__item {
        padding-right: 0.5rem;
    }

    .category-faq__item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    /* Add a vertical rule between the two FAQ columns, echoing the card
       dividers used elsewhere on the site. */
    .category-faq__item:nth-child(2n) {
        padding-left: 3.5rem;
        border-left: 1px solid var(--border-color);
    }

    .category-faq__item:nth-child(2n)::before {
        left: 0.5rem;
    }
}

@media (min-width: 992px) {
    .category-brief--head,
    .category-brief--body,
    .category-faq {
        padding-top: 3.5rem;
        padding-bottom: 3.75rem;
    }

    .category-brief__lede {
        font-size: 1.1875rem;
        max-width: 52ch;
    }

    .category-brief__prose {
        font-size: 1.0625rem;
    }

    .category-faq__title {
        font-size: 1.75rem;
    }
}

/* -------------------------------------------------------------------------
   Mobile refinements — sub-768px
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .category-brief--head {
        padding: 2rem 0 2.25rem;
    }

    .category-brief--body {
        padding: 2.25rem 0 2.5rem;
    }

    .category-faq {
        padding: 2.25rem 0 2.75rem;
    }

    .category-brief__marker {
        margin-bottom: 1rem;
        font-size: 0.6875rem;
    }

    .category-brief__lede {
        font-size: 1rem;
        line-height: 1.58;
    }

    /* Keep the 2-col spec grid on mobile so it stays compact. Specs 5+
       are hidden on mobile to preserve above-the-fold product access —
       the first four (Diâmetros, Potência, Altura máx, Caudal máx) are
       the actionable ones for installers. The full set is still in the
       HTML so LLM crawlers and screen readers keep the signal. Contract:
       admin must keep the four primary specs in slots 1–4 of
       specs_summary_json. */
    .category-brief__specs {
        padding: 1rem 1rem 1.125rem;
    }

    .category-brief__spec {
        padding: 0.5625rem 0.5rem 0.5625rem 0;
    }

    .category-brief__spec:nth-child(-n+2) {
        padding-top: 0.25rem;
    }

    .category-brief__spec:nth-child(n+5) {
        display: none;
    }

    .category-brief__spec dt {
        font-size: 0.625rem;
        letter-spacing: 0.08em;
    }

    .category-brief__spec dd {
        font-size: 0.875rem;
    }

    .category-brief--body .category-brief__layout {
        gap: 1.25rem;
    }

    .category-brief__prose {
        font-size: 0.9375rem;
        line-height: 1.65;
    }

    .category-brief__apps {
        padding: 1rem 1rem 1.125rem;
    }

    .category-brief__apps-list li {
        padding: 0.4375rem 0 0.4375rem 1rem;
        font-size: 0.875rem;
    }

    .category-faq__title {
        font-size: 1.25rem;
        margin-bottom: 1.125rem;
    }

    .category-faq__list {
        padding: 0.375rem 1rem;
    }

    .category-faq__item {
        padding: 1rem 0 1rem 2.5rem;
    }

    .category-faq__item::before {
        top: 1.125rem;
        font-size: 0.625rem;
    }

    .category-faq__question {
        font-size: 0.9375rem;
    }

    .category-faq__answer {
        font-size: 0.875rem;
        line-height: 1.6;
    }
}

/* -------------------------------------------------------------------------
   Embedded category summary — one coherent surface above the product grid.
   These rules intentionally follow the shared responsive rules so the
   embedded variant is not overridden by the standalone section spacing.
   ------------------------------------------------------------------------- */
.category-brief--head.category-brief--head--embedded {
    margin: 0 0 1.5rem;
    padding: 0;
    background: transparent;
}

.category-brief--head--embedded .category-brief__container--embedded {
    padding: 1.25rem;
    background: var(--color-bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.category-brief--head--embedded .category-brief__marker {
    display: flex;
    width: 100%;
    margin: 0 0 1.25rem;
    padding: 0 0 0.875rem;
}

.category-brief--head--embedded .category-brief__grid {
    gap: 1.25rem;
}

.category-brief--head--embedded .category-brief__lede {
    max-width: 56ch;
    font-size: 0.86rem;
}

.category-brief--head--embedded .category-brief__specs {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.category-brief--head--embedded .category-brief__spec dd {
    font-size: 0.86rem;
}

@media (min-width: 768px) {
    .category-brief--head--embedded .category-brief__container--embedded {
        padding: 1.5rem;
    }

    .category-brief--head--embedded .category-brief__grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(21rem, 1.1fr);
        gap: 2rem;
    }

    .category-brief--head--embedded .category-brief__specs {
        padding-left: 2rem;
        border-left: 1px solid var(--border-color);
    }
}

@media (max-width: 767px) {
    .category-brief--head.category-brief--head--embedded {
        margin-bottom: 1.25rem;
        padding: 0;
    }

    .category-brief--head--embedded .category-brief__container--embedded {
        padding: 1.125rem;
    }

    .category-brief--head--embedded .category-brief__marker {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .category-brief--head--embedded .category-brief__specs {
        padding-top: 1rem;
        border-top: 1px solid var(--border-color);
    }
}

/* -------------------------------------------------------------------------
   Accessibility — respect reduced motion on the reveal-on-scroll anim
   (already handled globally, but make sure we do not override it here)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .category-brief.reveal-on-scroll,
    .category-faq.reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* === PRODUCTS INFO SECTION === */
.products-info-section {
    padding: 4rem 0;
    background: var(--color-bg-body);
    position: relative;
    overflow: hidden;
}

.products-info-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--blueprint-grid);
    background-size: 60px 60px;
    opacity: 0.03;
}

.products-info-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
    position: relative;
}

.products-info-header h2 {
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.products-info-header .lead {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.products-info-header .tech-divider {
    margin-bottom: 1.5rem;
}

.products-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    position: relative;
}

.info-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 2rem;
    position: relative;
    transition: border-color 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}

.info-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 30px color-mix(in oklch, var(--color-black) 8%, transparent);
    transform: translateY(-2px);
}

.info-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, color-mix(in oklch, var(--accent-action) 10%, transparent) 0%, color-mix(in oklch, var(--accent-action) 5%, transparent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.info-card__icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-accent);
}

.info-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.info-card__intro {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.info-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-card__list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.5;
}

.info-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 1px;
    transform: rotate(45deg);
}

.info-card__list li:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .products-info-section {
        padding: 3rem 0;
    }

    .products-info-grid {
        grid-template-columns: 1fr;
    }

    .info-card {
        padding: 1.5rem;
    }
}


/* === CATALOGUE DISCOVERY TOOLBAR === */
.catalog-toolbar {
    position: relative;
    display: block;
    margin: 0 0 1.5rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in oklch, var(--surface-inverse) 14%, transparent);
    border-radius: 0.75rem;
    background: var(--surface-raised);
    box-shadow: none;
}

.catalog-toolbar__search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    min-width: 0;
    margin-right: 8.5rem;
}

.catalog-toolbar__search input,
.catalog-toolbar__filters select {
    min-height: 44px;
    border: 1px solid color-mix(in oklch, var(--surface-inverse) 18%, transparent);
    border-radius: 0.45rem;
    background: var(--surface-raised);
    color: var(--color-text-main);
    font: inherit;
}

.catalog-toolbar__search input {
    width: 100%;
    padding: 0.7rem 0.85rem;
}

.catalog-toolbar__search input:focus,
.catalog-toolbar__filters select:focus-visible,
.catalog-toolbar__chip:focus-visible,
.catalog-toolbar__more summary:focus-visible,
.catalog-toolbar__reset:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--surface-inverse) 20%, transparent);
    outline-offset: 2px;
}

.catalog-toolbar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    scrollbar-width: thin;
}

.catalog-toolbar__chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.45rem 0.65rem;
    border: 1px solid color-mix(in oklch, var(--surface-inverse) 16%, transparent);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--color-primary);
    font: 600 0.82rem/1 var(--font-display);
    cursor: pointer;
}

.catalog-toolbar__chip:hover,
.catalog-toolbar__chip--active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--surface-raised);
}

.catalog-toolbar__chip span {
    min-width: 1.3rem;
    padding: 0.08rem 0.3rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--surface-inverse) 8%, transparent);
    color: inherit;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.catalog-toolbar__chip--active span,
.catalog-toolbar__chip:hover span {
    background: color-mix(in oklch, var(--surface-raised) 18%, transparent);
}

.catalog-toolbar__more {
    display: block;
}

.catalog-toolbar__more summary {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 7.85rem;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    border: 1px solid color-mix(in oklch, var(--surface-inverse) 18%, transparent);
    border-radius: 0.45rem;
    background: var(--surface-raised);
    cursor: pointer;
    color: var(--color-primary);
    font-size: 0.86rem;
    font-weight: 620;
    list-style: none;
    white-space: nowrap;
}

.catalog-toolbar__more summary::-webkit-details-marker {
    display: none;
}

.catalog-toolbar__more summary:hover {
    background: var(--color-bg-light);
}

.catalog-toolbar__more summary::after {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
    transition: transform 0.18s ease;
}

.catalog-toolbar__more[open] summary::after {
    transform: translateY(0.12rem) rotate(225deg);
}

.catalog-toolbar__active-count {
    min-width: 1.25rem;
    padding: 0.12rem 0.3rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--surface-raised);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.2;
    text-align: center;
}

.catalog-toolbar__panel {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.catalog-toolbar__more:not([open]) > .catalog-toolbar__panel {
    display: none;
}

.catalog-toolbar__filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 0.7rem;
}

.catalog-toolbar__filters label {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    color: var(--color-text-muted);
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.catalog-toolbar__filters select {
    width: 100%;
    padding: 0.55rem 0.65rem;
    font-family: var(--font-display);
    font-size: 0.88rem;
    letter-spacing: normal;
    text-transform: none;
}

.catalog-toolbar__reset {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-primary);
    font-size: 0.86rem;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

@media (min-width: 768px) {
    .catalog-toolbar__reset {
        padding-bottom: 0.1rem;
    }
}

@media (max-width: 767px) {
    .catalog-toolbar {
        padding: 0.8rem;
    }

    .catalog-toolbar__search {
        margin-right: 0;
    }

    .catalog-toolbar__search .btn {
        min-width: auto;
        padding-inline: 0.9rem;
    }

    .catalog-toolbar__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .catalog-toolbar__more summary {
        position: static;
        width: 100%;
        margin-top: 0.65rem;
    }

    .catalog-toolbar__panel {
        margin-top: 0.75rem;
    }

    .catalog-toolbar__filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .review-banner { padding: 16px; }
    .review-banner__info { gap: 12px; }
}

/* Listing extras moved from core.css */
/* Products Meta Header - Shows count and active filters */
.products-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.625rem 1rem;
    background: oklch(0.588 0.139 241.966 / 0.03);
    border: 1px solid oklch(0.588 0.139 241.966 / 0.06);
    border-radius: 4px;
}

.products-count {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0.02em;
}

.products-filter-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent);
    background: oklch(0.588 0.139 241.966 / 0.08);
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    border: 1px solid oklch(0.588 0.139 241.966 / 0.15);
}
.catalog-load-more {
    margin: -1.5rem 0 4rem;
    text-align: center;
}

.catalog-load-more__status {
    margin: 0.75rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* Visual Row Dividers - Break information into digestible chunks */
.products-grid-break {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    margin: 0.5rem 0;
}

.products-grid-break .break-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--border-color) 15%,
        var(--border-color) 85%,
        transparent
    );
}

.products-grid-break .break-count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.25rem 0.75rem;
    background: oklch(0.588 0.139 241.966 / 0.03);
    border: 1px solid oklch(0.588 0.139 241.966 / 0.1);
    border-radius: 100px;
}

/* Reduced motion: Simplify animations */
@media (prefers-reduced-motion: reduce) {
    .products-grid-break .break-line {
        background: var(--border-color);
    }
}

@media (max-width: 768px) {
    /* Mobile Sidebar Toggle (Products) */
    .mobile-toggle-icon {
        display: block;
        color: var(--color-accent);
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    .products-sidebar.active .mobile-toggle-icon {
        transform: rotate(180deg);
    }

    .sidebar-content {
        display: none;
    }

    .products-sidebar.active .sidebar-content {
        display: block;
        animation: slideDown 0.3s ease-out;
    }
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

@media (min-width: 769px) {
    .mobile-toggle-icon {
        display: none;
    }

    .products-sidebar .sidebar-header {
        cursor: default;
    }

    .sidebar-content {
        display: block !important;
    }
}

/* Dark-theme overrides (inside product CTA card) */
.products-cta__form-card .form-inline-alert--error {
    background: oklch(0.637 0.208 25.331 / 0.1);
    border-color: oklch(0.637 0.208 25.331 / 0.2);
}

.products-cta__form-card .form-inline-alert--success {
    background: oklch(0.627 0.17 149.214 / 0.1);
    border-color: oklch(0.627 0.17 149.214 / 0.2);
}

.products-cta__form-card .form-inline-alert--info {
    background: oklch(0.588 0.139 241.966 / 0.1);
    border-color: oklch(0.588 0.139 241.966 / 0.2);
}

.products-cta__form-card .form-inline-alert__message {
    color: oklch(1 0 0 / 0.85);
}

.products-cta__form-card .form-inline-alert__dismiss {
    color: oklch(1 0 0 / 0.4);
}

.products-cta__form-card .form-inline-alert__dismiss:hover {
    color: oklch(1 0 0 / 0.8);
}