/* ==========================================================================
   Category page

   Plain CSS, loaded from Magento_Theme/layout/default_head_blocks.xml after
   every other stylesheet — same arrangement as header.css.

   Everything the category page owns — the sidebar's category card and the
   "Shop by Product Category" grid — plus the breadcrumbs, which are site-wide
   rather than category-only but are styled here because this is where the new
   design first calls for them.

   The application tiles, resource cards and FAQ land here as they are built.

   The one rule: no raw hex values and no repeated magic numbers below the
   :root block. Colour, spacing, type and motion are custom properties, so a
   rebrand is an edit to :root and nothing else.
   ========================================================================== */

:root {
    /* Colour */
    --rs-navy: #0C1E35;          /* headings, primary ink */
    --rs-navy-800: #12233f;      /* image panel when a category has no photo */
    --rs-blue: #1249A0;          /* links */
    --rs-text-muted: #5A6B7E;    /* secondary text, idle glyphs */
    --rs-border: #DDE3EC;        /* card edge, row dividers */
    --rs-rule: #C9D2DF;          /* breadcrumb separator */
    --rs-surface: #fff;

    /* Elevation */
    --rs-shadow: 0 12px 32px -24px rgba(16, 29, 54, 0.55);

    /* Radius */
    --rs-radius: 8px;
    --rs-radius-lg: 12px;

    /* Spacing — a 4px scale, named by step */
    --rs-space-1: 4px;
    --rs-space-2: 8px;
    --rs-space-3: 12px;
    --rs-space-4: 16px;
    --rs-space-5: 20px;
    --rs-space-10: 40px;

    /* Type */
    --rs-font: "Lato-Regular", sans-serif;
    /* Lato ships here as separate weight files, so bold is a different
       family rather than a weight on --rs-font. */
    --rs-font-bold: "Lato-Bold", sans-serif;
    --rs-fs-s: 12px;
    --rs-fs-base: 14px;
    --rs-fs-sm: 16px;
    --rs-fs-lg: 18px;
    --rs-lh-snug: 1.35;

    /* Motion and targets */
    --rs-ease: 0.2s ease;
    --rs-tap: 44px;              /* minimum comfortable tap target */
}

/* --------------------------------------------------------------------------
   1. Category sidebar

   A single bordered card: a heading, then one row per category in the
   section, each parent row expanding to its own children. Rules run
   card > heading > row > sub-list, matching the markup.
   -------------------------------------------------------------------------- */

.rs-catnav {
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-lg);
    box-shadow: var(--rs-shadow);
    padding: var(--rs-space-5);
    font-family: var(--rs-font);
}

.rs-catnav__title {
    margin: 0;
    /* The rule under the heading is drawn by the first row's top border, not
       by a border here — one source for the divider means the spacing above
       and below it can never drift apart. */
    padding: 0 0 var(--rs-space-5);
    font-family: var(--rs-font-bold);
    font-size: var(--rs-fs-lg);
    line-height: var(--rs-lh-snug);
    color: var(--rs-navy);
}

.rs-catnav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-catnav__item {
    margin: 0;
    border-top: 1px solid var(--rs-border);
}

/* The chevron is absolutely placed, so the row is its containing block. */
.rs-catnav__row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--rs-tap);
}

/* Padded on the right by the chevron's width so a long name wraps before it
   reaches the button rather than running underneath it. */
.rs-catnav__link {
    flex: 1 1 auto;
    padding: 14px 44px 14px 0;
    font-family: var(--rs-font-bold);
    font-size: var(--rs-fs-base);
    line-height: var(--rs-lh-snug);
    color: var(--rs-navy);
    text-decoration: none;
}

.rs-catnav__link:hover {
    color: var(--rs-blue);
    text-decoration: none;
}

/* Doubled for the same reason as .rs-subnav-toggle in the header: Magento
   paints bare buttons as grey rounded boxes, and keeps painting them on
   :focus and :active after a tap. */
.rs-catnav__toggle.rs-catnav__toggle {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: var(--rs-tap);
    height: var(--rs-tap);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--rs-text-muted);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.rs-catnav__toggle.rs-catnav__toggle:hover,
.rs-catnav__toggle.rs-catnav__toggle:focus,
.rs-catnav__toggle.rs-catnav__toggle:active {
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--rs-blue);
}

/* One glyph for both states, rotated — a closed row points right, an open one
   points down, and the turn is the whole animation. */
.rs-catnav__toggle.rs-catnav__toggle::before {
    content: "\203A";
    display: block;
    font-size: 18px;
    line-height: 1;
    transition: transform var(--rs-ease);
}

/* Doubled to match the base rule above, which is itself doubled to beat
   Magento's button styling — at equal specificity this would win only by
   source order, which is too fragile for a state rule. */
.rs-catnav__item.is-open .rs-catnav__toggle.rs-catnav__toggle::before {
    transform: rotate(90deg);
}

.rs-catnav__sub {
    display: none;
    margin: 0;
    /* Indented to sit under the label it belongs to, and given the same bottom
       breathing space the rows above have. */
    padding: 0 0 var(--rs-space-4) var(--rs-space-4);
    list-style: none;
}

.rs-catnav__item.is-open > .rs-catnav__sub {
    display: block;
}

.rs-catnav__subitem {
    margin: 0;
}

.rs-catnav__subitem a {
    display: block;
    padding: var(--rs-space-2) 0;
    font-size: 13px;
    line-height: var(--rs-lh-snug);
    color: var(--rs-blue);
    text-decoration: none;
}

.rs-catnav__subitem a:hover {
    text-decoration: underline;
}

.rs-catnav__subitem.is-current a {
    font-family: var(--rs-font-bold);
}

/* The page you are on, marked in the list that got you here. Not in the
   mockup, which only ever shows a landing page, but the list is a navigation
   and needs to say where you are. */
.rs-catnav__item.is-current > .rs-catnav__row > .rs-catnav__link {
    color: var(--rs-blue);
}

/* --------------------------------------------------------------------------
   2. Shop by Product Category

   The landing-page grid: four cards a row, each an image panel over a name,
   a product count and a "View range" prompt. The whole card is the link — a
   separate anchor on the prompt alone would give the row two tap targets to
   the same place.
   -------------------------------------------------------------------------- */

.rs-catgrid {
    display: block;
    margin: 0 0 var(--rs-space-10);
    font-family: var(--rs-font);
}

.rs-catgrid__head {
    margin: 0 0 var(--rs-space-5);
}

.rs-catgrid__title {
    margin: 0;
    font-family: var(--rs-font-bold);
    font-size: 20px;
    line-height: var(--rs-lh-snug);
    color: var(--rs-navy);
}

.rs-catgrid__meta {
    margin: var(--rs-space-1) 0 0;
    font-size: 13px;
    line-height: var(--rs-lh-snug);
    color: var(--rs-text-muted);
}

.rs-catgrid__dot {
    margin: 0 var(--rs-space-1);
}

/* Grid rather than flex: the cards must share a row height so the "View range"
   prompts line up across a row even when one name wraps to two lines. */
.rs-catgrid__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--rs-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-catgrid__item {
    margin: 0;
    padding: 0;
    /* Legacy list rules in custom.css draw bullets and floats inside the main
       column; the grid places its own items. */
    float: none;
    list-style: none;
}

.rs-catgrid__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    box-shadow: var(--rs-shadow);
    text-decoration: none;
    transition: transform var(--rs-ease), box-shadow var(--rs-ease), border-color var(--rs-ease);
}

.rs-catgrid__card:hover {
    transform: translateY(-2px);
    border-color: var(--rs-blue);
    text-decoration: none;
}

/* Fixed aspect so a row of cards lines up whatever the source images measure.
   The navy fill is what shows when a category has no image of its own. */
.rs-catgrid__media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--rs-navy-800);
}

.rs-catgrid__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Grows to fill the card so the count and prompt sit at a common baseline
   across the row rather than riding up under a short name. */
.rs-catgrid__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: var(--rs-space-4);
}

.rs-catgrid__name {
    display: block;
    font-family: var(--rs-font-bold);
    font-size: 15px;
    line-height: var(--rs-lh-snug);
    color: var(--rs-navy);
}

.rs-catgrid__count {
    display: block;
    margin-top: var(--rs-space-1);
    font-size: var(--rs-fs-s);
    line-height: var(--rs-lh-snug);
    color: #7A8CA0;
}

/* margin-top: auto is what pins this to the bottom of the tallest card. */
.rs-catgrid__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--rs-space-2);
    margin-top: auto;
    padding-top: var(--rs-space-3);
    font-family: var(--rs-font-bold);
    font-size: var(--rs-fs-s);
    line-height: var(--rs-lh-snug);
    color: var(--rs-blue);
}

.rs-catgrid__arrow {
    transition: transform var(--rs-ease);
}

.rs-catgrid__card:hover .rs-catgrid__arrow {
    transform: translateX(3px);
}

@media (max-width: 1199px) {
    .rs-catgrid__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .rs-catgrid__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .rs-catgrid__list {
        grid-template-columns: 1fr;
        gap: var(--rs-space-4);
    }
}

/* --------------------------------------------------------------------------
   3. Breadcrumbs

   Site-wide, not category-only — styled here because this is the first page
   of the new design to call for them. Magento's markup is an <ul> of <li>,
   so the separator is drawn with ::before on every item but the first.
   -------------------------------------------------------------------------- */

.breadcrumbs {
    max-width: none;
    margin: 0;
    padding: var(--rs-space-5) 0;
    font-family: var(--rs-font);
    font-size: var(--rs-fs-sm);
    line-height: var(--rs-lh-snug);
}

.breadcrumbs .items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--rs-text-muted);
    list-style: none;
}

.breadcrumbs .item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    float: none;
    list-style: none;
}

.breadcrumbs .item a {
    color: var(--rs-text-muted);
    text-decoration: none;
}

.breadcrumbs .item a:hover {
    color: var(--rs-blue);
    text-decoration: none;
}

/* The current page. Magento wraps the last crumb in <strong>. */
.breadcrumbs .item strong {
    font-family: var(--rs-font-bold);
    font-weight: normal;
    color: var(--rs-navy);
}

.breadcrumbs .item:not(:first-child)::before {
    content: "/";
    margin: 0 var(--rs-space-3);
    color: var(--rs-rule);
}

/* Luma and custom.css both draw their own separator in an ::after on the item
   — custom.css a yellow Glyphicons chevron. The ::before above replaces both,
   so these are switched off. `content` carries !important because the legacy
   selector (:not(:last-child)) out-specifies anything sane written here. */
.breadcrumbs .item::after {
    content: none !important;
    display: none !important;
}

/* The old theme dropped the word "Home" to font-size 0 and drew a Glyphicons
   house in its place. The design spells the word out, so the link is given its
   text back and the glyph removed. Selectors mirror custom.css's exactly and
   win on load order — category.css is last in default_head_blocks.xml. */
.breadcrumbs .items li.item.home a,
.breadcrumbs .items li.item.account a {
    font-size: var(--rs-fs-sm);
    padding: 0;
}

.breadcrumbs .items li.item.home a::after,
.breadcrumbs .items li.item.account a::after {
    content: none !important;
    display: none !important;
}