/* @group Category Boxes
   Redesigned per Figma node 23573:13091 (fileKey ZdODL4X6ukyBy8lXyTJqvO).
   Breakpoint pair: 768/767 — this project's real convention (confirmed in
   site-nav/mega-menu/product-map, 2026-08-18/19), NOT the legacy 961/960
   pair the old css/components/category-boxes.css used.
   Tokens reused byte-exact from css/theme.css (AGENTS.md's color-rebind
   rule): --red (#ED565A, icon fill + hover), --paragraph (#636587, label
   default color), --light-gray-2 (#E2E6EB, decorative rule lines).
   Grid: full-width .col-12-12, centered row — the Figma frame content-hugs
   (739px, auto width) rather than pinning to a fixed container width, so
   there's no canvas-vs-grid delta to reconcile the way product-map's bleed
   needed; centering the content-hugging group inside a full column
   reproduces the same visual result at any viewport.
------------------------------------ */

.category-boxes {
    padding-block: 4.6rem;
}

.category-boxes .row.center {
    justify-content: center;
}

.category-boxes__item {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin: 1rem;
    text-decoration: none;
}

/* Decorative hairline rules flanking each pill — vertical, ~90px tall.
   Figma's Line 627 is a horizontal 89.579x1 segment wrapped in a rotate-90
   transform, i.e. the rendered result is a VERTICAL line, not horizontal. */
.category-boxes__item::before,
.category-boxes__item::after {
    content: '' !important;
    flex: 0 0 .1rem;
    height: 9rem;
    background: var(--light-gray-2);
}

.category-boxes__pill {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    height: 5.8rem;
    padding: 0 2rem;
    background: var(--white);
    border-radius: 1rem;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .1);
}

.category-boxes__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 1.6rem;
}

.category-boxes__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.category-boxes__label {
    font-size: 1.4rem;
    text-transform: uppercase;
    color: var(--paragraph);
    white-space: nowrap;
    transition: color .3s linear;
}

/* Icon color comes baked into the recolored SVG file itself (#ED565A,
   matching var(--red)) — not a CSS-driven color, so it doesn't need a
   hover rule of its own; only the label transitions to var(--red) to
   match it on hover. No dark-fill inversion, no background/shadow change
   (matches this project's other 2026 pill/button hover convention). */
.category-boxes__item:hover .category-boxes__label {
    color: var(--red);
}

@media only screen and (max-width: 767px) {
    .category-boxes .row.center {
        flex-direction: column;
        align-items: stretch;
        padding: 0 1.8rem;
    }

    .category-boxes__item {
        margin: 0 0 1.2rem;
        justify-content: center;
    }

    /* Hairlines don't read well stacked vertically full-width — hidden on
       mobile, same spirit as the legacy file's mobile simplification. */
    .category-boxes__item::before,
    .category-boxes__item::after {
        display: none;
    }

    .category-boxes__pill {
        width: 100%;
        justify-content: center;
        height: auto;
        padding: 1.4rem 2.5rem;
    }
}

/* @end */