/* Public Company Website -- the Store's category browser.
   ============================================================
   OWNS: the two-column catalog browser produced by
   StoreContractHtmlRenderer::renderCategoryBrowser() -- .cp-catbrowse and
   everything under it (its own heading, the category tablist, the
   per-category introduction, the pager, and the item rows).

   DO NOT put here:
     - the section shell (background, padding, full-width, hide-background):
       that is .cp-home-section, owned by 07_homepage.css. The browser
       paints NO surface of its own, so an owner who hides the section
       background gets bare content rather than a card inside a card;
     - card styles for ordinary collections -- 10_custom_sections.css;
     - anything Store-wide (hero, price line) -- 14_store.css. The price
       line inside a row is .cp-store-price and is reused from there
       unchanged rather than restyled here;
     - the page a row LEADS to -- 16_offering_detail.css.

   THEME: every accent here resolves through --cp-primary / --cp-accent,
   which company_public_layout.php sets inline per company. Nothing in
   this file hard-codes a brand colour, because the same markup serves
   every business on the platform. Tints are built with color-mix() -- the
   pattern 05_header.css and 11_panel_hero.css already use -- each with a
   literal fallback declared first, so a browser without color-mix still
   renders a sane surface rather than a transparent one.

   STATE: the browser is TABS, not a menu -- one region swapping its
   contents -- and each pane's items are split into pages. Every pane and
   every page ships in the markup, with all but the first of each carrying
   [hidden]; company_public/category_browser.js only moves that attribute.
   Which means the two hidden rules below must beat every display rule in
   this file: the module reset sets display on these elements, and an
   author `display` always beats the [hidden] UA default. */

/* ------------------------------------------------------------------
   Composition
   ------------------------------------------------------------------
   The services are the point, so the reading column takes roughly seven
   parts to the navigation's three. minmax() on both tracks keeps the
   category names readable at the low end and stops a very wide viewport
   from turning the navigation into a field of whitespace. */
.cp-catbrowse {
    display: grid;
    grid-template-columns: minmax(230px, 30%) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.cp-catbrowse__pane[hidden],
.cp-catbrowse__rows[hidden] {
    display: none !important;
}

/* The browser draws its own heading, so the section shell's padding is
   all it needs from the page. Slightly roomier than a plain section
   because two columns of content need more room to breathe than one. */
.cp-home-section--catbrowse .cp-home-section__inner {
    padding-block: 28px;
}

/* ------------------------------------------------------------------
   The section's own heading, above the categories
   ------------------------------------------------------------------ */
.cp-catbrowse__nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cp-catbrowse__navhead {
    margin-bottom: 14px;
}

.cp-catbrowse__eyebrow {
    margin: 0 0 6px;
    color: var(--cp-text-faint);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cp-catbrowse__heading {
    margin: 0;
    color: var(--cp-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

/* ------------------------------------------------------------------
   The category list
   ------------------------------------------------------------------ */
.cp-catbrowse__cats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cp-catbrowse__cat {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    /* 44px is the floor for a touch target; the two-line rows run taller
       on their own. This is a tablet-first product and a category is a
       primary target. */
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--cp-radius-md);
    background: transparent;
    color: var(--cp-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--cp-transition), border-color var(--cp-transition);
}

.cp-catbrowse__cat:hover {
    border-color: var(--cp-border);
    background: var(--cp-surface-soft);
}

.cp-catbrowse__cat:focus-visible {
    outline: 2px solid var(--cp-accent, var(--cp-primary));
    outline-offset: 2px;
}

/* The selected category: a light wash of the company's own colour and a
   quiet border in it. Deliberately not a solid filled button -- a block
   of saturated colour in a list of twelve shouts, and this has to sit
   inside somebody else's brand without taking the page over. Weight and
   ink carry the state as well as the tint, so it still reads on a theme
   whose accent barely differs from the page. */
.cp-catbrowse__cat.is-active {
    border-color: var(--cp-border);
    border-color: color-mix(in srgb, var(--cp-accent, var(--cp-primary, #137A5A)) 30%, transparent);
    background: var(--cp-surface-soft);
    background: color-mix(in srgb, var(--cp-accent, var(--cp-primary, #137A5A)) 8%, transparent);
}

.cp-catbrowse__cat.is-active .cp-catbrowse__cat-name {
    color: var(--cp-heading);
    font-weight: 700;
}

/* The picture slot, or the neutral mark that stands in for one. */
.cp-catbrowse__cat-media {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface-soft);
}

.cp-catbrowse__cat-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cp-catbrowse__cat-media--blank {
    background: var(--cp-surface-soft);
    background: color-mix(in srgb, var(--cp-accent, var(--cp-primary, #137A5A)) 10%, transparent);
    color: var(--cp-primary, var(--cp-text-muted));
}

.cp-catbrowse__cat-media--blank svg {
    width: 18px;
    height: 18px;
}

.cp-catbrowse__cat-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* Long names wrap rather than being cut: the name is the one thing in
   the row a visitor must be able to read in full. */
.cp-catbrowse__cat-name {
    color: var(--cp-heading);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.cp-catbrowse__cat-tag {
    color: var(--cp-text-faint);
    font-size: .8125rem;
    line-height: 1.35;
}

.cp-catbrowse__cat-count {
    flex: 0 0 auto;
    color: var(--cp-text-faint);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.cp-catbrowse__cat.is-active .cp-catbrowse__cat-count {
    color: var(--cp-text-muted);
}

/* Chevrons are drawn in CSS rather than shipped as icons: they are pure
   affordance, carry no meaning of their own, and are already hidden from
   assistive technology in the markup. */
.cp-catbrowse__cat-go,
.cp-catbrowse__row-go {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--cp-text-faint);
    border-right: 2px solid var(--cp-text-faint);
    transform: rotate(45deg);
}

.cp-catbrowse__cat-go {
    margin-left: 2px;
}

.cp-catbrowse__row-go {
    margin-right: 6px;
}

/* ------------------------------------------------------------------
   The right column
   ------------------------------------------------------------------ */
.cp-catbrowse__panes {
    min-width: 0;
}

/* The category introduction: what this is, before the list of prices.
   A wash of the company's colour rather than a hard surface, so it reads
   as a header for the rows under it instead of a second card. */
.cp-catbrowse__intro {
    margin-bottom: 18px;
    padding: 22px 24px;
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface-soft);
    background: linear-gradient(
        100deg,
        color-mix(in srgb, var(--cp-accent, var(--cp-primary, #137A5A)) 9%, transparent),
        color-mix(in srgb, var(--cp-primary, #137A5A) 4%, transparent)
    );
}

/* With a picture, the copy takes the left two thirds and the picture
   fills the right. Without one it simply runs the full width -- most
   categories have no picture, and a reserved empty panel would read as a
   failed image rather than as a category that has none. */
.cp-catbrowse__intro--media {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding-right: 0;
    overflow: hidden;
}

.cp-catbrowse__intro-body {
    min-width: 0;
}

.cp-catbrowse__intro-eyebrow {
    margin: 0 0 6px;
    color: var(--cp-primary, var(--cp-text-muted));
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cp-catbrowse__intro-title {
    margin: 0;
    color: var(--cp-heading);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.cp-catbrowse__intro-text {
    margin: 10px 0 0;
    max-width: 62ch;
    color: var(--cp-text-muted);
    font-size: .9375rem;
    line-height: 1.55;
}

.cp-catbrowse__intro-media {
    align-self: stretch;
    min-height: 150px;
}

.cp-catbrowse__intro-media img {
    height: 215px;
    object-fit: cover;
}

/* ------------------------------------------------------------------
   The item rows
   ------------------------------------------------------------------ */
.cp-catbrowse__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-catbrowse__row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 12px 14px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--cp-transition), background var(--cp-transition), box-shadow var(--cp-transition);
}

/* Quiet on hover: this is a list of a dozen rows, and anything with real
   movement in it turns scanning the list into a light show. */
.cp-catbrowse__row--linked:hover,
.cp-catbrowse__row--linked:focus-visible {
    border-color: color-mix(in srgb, var(--cp-accent, var(--cp-primary, #137A5A)) 35%, var(--cp-border));
    box-shadow: 0 1px 3px rgba(16, 21, 29, .06);
}

.cp-catbrowse__row--linked:focus-visible {
    outline: 2px solid var(--cp-accent, var(--cp-primary));
    outline-offset: -2px;
}

.cp-catbrowse__row-media {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface-soft);
}

.cp-catbrowse__row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No picture is the ordinary state for a catalog still being filled in.
   A drawn mark, never the item's initial: a letter in a box reads as a
   person's avatar, and a list of services is not a list of people. */
.cp-catbrowse__row-media--blank {
    background: var(--cp-surface-soft);
    color: var(--cp-text-faint);
}

.cp-catbrowse__row-media--blank svg {
    width: 22px;
    height: 22px;
}

.cp-catbrowse__row-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cp-catbrowse__row-title {
    color: var(--cp-heading);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.cp-catbrowse__row-text {
    color: var(--cp-text-muted);
    font-size: .875rem;
    line-height: 1.45;
}

/* The price line is 14_store.css's .cp-store-price, reused as-is. It is
   a <p> in a flex column here, so only its spacing needs neutralising. */
.cp-catbrowse__row-body .cp-store-price {
    margin: 2px 0 0;
}

/* ------------------------------------------------------------------
   Paging within a category
   ------------------------------------------------------------------ */
.cp-catbrowse__pager {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    /* Pushed right rather than centred: it is a secondary control, and
       the left edge belongs to the list it pages through. */
    justify-content: flex-end;
    margin-bottom: 12px;
}

.cp-catbrowse__pagenums {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* "2 / 4" -- drawn only on a phone, where the numbered buttons are not.
   Hidden here rather than only shown there, so a width that reaches
   neither rule can never end up with both the numbers and the summary
   of them. Display:none also keeps it out of the accessibility tree at
   widths where aria-current on the buttons is already saying this. */
.cp-catbrowse__pagecount {
    display: none;
}

.cp-catbrowse__pagestep,
.cp-catbrowse__pagenum {
    /* 40px minimum on a tablet-first product, where these are the
       smallest targets in the whole browser. */
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface);
    color: var(--cp-text);
    font: inherit;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--cp-transition), color var(--cp-transition), border-color var(--cp-transition);
}

.cp-catbrowse__pagestep:hover:not(:disabled),
.cp-catbrowse__pagenum:hover:not(.is-active) {
    border-color: color-mix(in srgb, var(--cp-accent, var(--cp-primary, #137A5A)) 35%, var(--cp-border));
    background: var(--cp-surface-soft);
}

.cp-catbrowse__pagestep:focus-visible,
.cp-catbrowse__pagenum:focus-visible {
    outline: 2px solid var(--cp-accent, var(--cp-primary));
    outline-offset: 2px;
}

/* Dimmed, not hidden: a control that vanishes at the ends moves every
   button beside it, and the row would jump under the reader's finger. */
.cp-catbrowse__pagestep:disabled {
    opacity: .45;
    cursor: default;
}

/* The page being read is the one place a solid fill of the company's
   colour is right: it is a single small control, not a row in a list, so
   it reads as a state rather than as decoration. --cp-inverse is the
   token the platform already pairs with a filled primary. */
.cp-catbrowse__pagenum.is-active {
    border-color: var(--cp-primary, var(--cp-heading));
    background: var(--cp-primary, var(--cp-heading));
    color: var(--cp-inverse);
    font-weight: 600;
}

/* Changing category is a change of context, so the new pane arrives
   rather than appearing. Short and small on purpose: 240ms and six
   pixels read as the page keeping up with the click, where anything
   longer or further starts to read as waiting for it.

   Applied by a class the script adds on selection, NOT by a rule on the
   visible pane -- that would also fire on first paint, fading the opening
   category in a beat after everything around it had arrived.

   Only the pane animates. Turning a page inside one category leaves it
   alone: paging is a small move within the same context, and animating
   it would make the pager feel slower than it is. */
@keyframes cp-catbrowse-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cp-catbrowse__pane.is-entering {
    animation: cp-catbrowse-enter .24s ease-out both;
}

/* ------------------------------------------------------------------
   On a dark section background
   ------------------------------------------------------------------ */
.cp-catbrowse--on-dark .cp-catbrowse__heading,
.cp-catbrowse--on-dark .cp-catbrowse__cat-name,
.cp-catbrowse--on-dark .cp-catbrowse__intro-title,
.cp-catbrowse--on-dark .cp-catbrowse__row-title {
    color: var(--cp-inverse);
}

.cp-catbrowse--on-dark .cp-catbrowse__eyebrow,
.cp-catbrowse--on-dark .cp-catbrowse__cat-tag,
.cp-catbrowse--on-dark .cp-catbrowse__cat-count,
.cp-catbrowse--on-dark .cp-catbrowse__intro-eyebrow,
.cp-catbrowse--on-dark .cp-catbrowse__intro-text,
.cp-catbrowse--on-dark .cp-catbrowse__row-text {
    color: rgba(255, 255, 255, .72);
}

.cp-catbrowse--on-dark .cp-catbrowse__cat:hover,
.cp-catbrowse--on-dark .cp-catbrowse__cat.is-active {
    border-color: rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .12);
}

.cp-catbrowse--on-dark .cp-catbrowse__intro {
    background: rgba(255, 255, 255, .08);
}

.cp-catbrowse--on-dark .cp-catbrowse__row {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
}

.cp-catbrowse--on-dark .cp-catbrowse__row--linked:hover,
.cp-catbrowse--on-dark .cp-catbrowse__row--linked:focus-visible {
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .1);
}

.cp-catbrowse--on-dark .cp-catbrowse__cat-media,
.cp-catbrowse--on-dark .cp-catbrowse__cat-media--blank,
.cp-catbrowse--on-dark .cp-catbrowse__row-media,
.cp-catbrowse--on-dark .cp-catbrowse__row-media--blank {
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .8);
}

.cp-catbrowse--on-dark .cp-catbrowse__cat-go,
.cp-catbrowse--on-dark .cp-catbrowse__row-go {
    border-top-color: rgba(255, 255, 255, .72);
    border-right-color: rgba(255, 255, 255, .72);
}

.cp-catbrowse--on-dark .cp-catbrowse__pagestep,
.cp-catbrowse--on-dark .cp-catbrowse__pagenum {
    border-color: rgba(255, 255, 255, .24);
    background: transparent;
    color: var(--cp-inverse);
}

.cp-catbrowse--on-dark .cp-catbrowse__pagestep:hover:not(:disabled),
.cp-catbrowse--on-dark .cp-catbrowse__pagenum:hover:not(.is-active) {
    border-color: rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .12);
}

/* ------------------------------------------------------------------
   Tablet -- the navigation narrows before it moves
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
    .cp-catbrowse {
        grid-template-columns: minmax(190px, 34%) minmax(0, 1fr);
        gap: 22px;
    }

    .cp-catbrowse__heading {
        font-size: 1.25rem;
    }

    /* The subtitle and the icon both go here rather than at the phone
       breakpoint, because this is where they stop paying for themselves.

       Measured against the real copy: at 1264px none of the twelve
       subtitles wrap, at 1084px five do, and by 884px ten of twelve have
       gone to two lines and the rows have grown from 60px to 78px. A
       subtitle that takes two lines to say six words is no longer a
       subtitle -- it is what pushes the category names apart and turns a
       scannable list into a column to read. The icon costs the row 50px
       of its width, which is what forces that wrapping in the first
       place.

       The name and the count survive at every width, because those are
       what identify a category. These two are the parts you can lose. */
    .cp-catbrowse__cat-media,
    .cp-catbrowse__cat-tag {
        display: none;
    }

    /* The picture is the first thing to go: at this width the copy beside
       it is down to a few words a line. */
    .cp-catbrowse__intro--media {
        display: block;
        padding-right: 24px;
    }

    .cp-catbrowse__intro-media {
        display: none;
    }
}

/* ------------------------------------------------------------------
   Phone -- the two columns stop being columns
   ------------------------------------------------------------------
   The category list becomes a horizontal strip of chips above the items.
   Side by side there is no room for both, and a vertical list of twelve
   categories would push the services themselves off the screen. */
@media (max-width: 767px) {
    .cp-catbrowse {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .cp-catbrowse__navhead {
        margin-bottom: 10px;
    }

    .cp-catbrowse__cats {
        flex-direction: row;
        gap: 10px;
        margin: 0 -4px;
        padding: 0 4px 4px;
        overflow-x: auto;
        /* Momentum scrolling on touch, and each card snaps into place so
           a half-cut category does not read as the end of the list. */
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        /* No scrollbar. The strip already says it scrolls -- the next card
           is deliberately left half-visible at the edge -- so the bar adds
           nothing but a grey line under the cards, and on the platforms
           that reserve space for it, a row of cards that never quite lines
           up with the content above.

           Same treatment and same reasons as .cp-related__rail in
           16_offering_detail.css; the carousel sections in
           09_layout_alignment.css keep their thin hover-revealed bar on
           purpose, because those are reached by mouse on wide screens
           where the affordance is not obvious. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .cp-catbrowse__cats::-webkit-scrollbar {
        display: none;
    }

    /* A CARD, NOT A CHIP.
       A text-only pill makes every category look alike and leans entirely
       on reading each label; the icon is what lets someone pick one out
       at a glance, and it is the one thing a business configures per
       category. So the icon comes back at this width and the control
       becomes two stacked rows -- artwork, then name -- rather than a
       single line of text.
       Fixed width, so the strip reads as a row of equal cards and the
       next one is always partly visible. Names wrap to two lines inside
       that width instead of stretching the card, which is what kept the
       old chips from ever lining up. */
    .cp-catbrowse__cat {
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 92px;
        min-height: 96px;
        gap: 8px;
        padding: 12px 8px 10px;
        border-color: var(--cp-border);
        border-radius: var(--cp-radius-md);
        text-align: center;
        scroll-snap-align: start;
    }

    .cp-catbrowse--on-dark .cp-catbrowse__cat {
        border-color: rgba(255, 255, 255, .24);
    }

    /* Back, after being dropped at 1023px. That rule was written for a
       ROW, where the icon cost 50px of the width the name needed. Stacked,
       it costs the name nothing -- it sits above it. */
    .cp-catbrowse__cat-media {
        display: flex;
        width: 40px;
        height: 40px;
        border-radius: var(--cp-radius-md);
    }

    .cp-catbrowse__cat-body {
        flex: 0 1 auto;
        align-items: center;
        width: 100%;
    }

    .cp-catbrowse__cat-name {
        /* Two lines, then ellipsis. A third line would make the cards
           uneven, and a category whose name needs three lines on a phone
           is not going to be read in full on a strip anyway. */
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: .8125rem;
        line-height: 1.25;
    }

    /* The chevron pointed along a row that no longer exists, and the count
       would be a third row in a control the design says has two. The name
       and the icon are what identify a category; these were the parts that
       could go. */
    .cp-catbrowse__cat-go,
    .cp-catbrowse__cat-count {
        display: none;
    }

    /* The category's description panel goes entirely.
       On a phone it sat between the categories and the services, pushing
       the actual list below the fold on every category change -- so the
       one thing a visitor came to see moved off screen each time they
       tapped. The category name is already on the card they just chose;
       the blurb is the part that can wait for a wider screen. */
    .cp-catbrowse__intro {
        display: none;
    }

    /* ------------------------------------------------------------------
       Pager -- a slim row, not a bank of buttons
       ------------------------------------------------------------------
       Numbered buttons are a desktop affordance: twelve categories deep
       they are the fastest way to jump. On a phone they wrap onto a
       second line and eat the space the list needs, so the page turns
       into "where am I" plus two steps. The numbers stay in the markup
       and simply are not drawn -- the indicator carries the state, and
       announces it, so nothing is lost but the direct jump. */
    .cp-catbrowse__pager {
        flex-wrap: nowrap;
        gap: 6px;
        margin-bottom: 10px;
    }

    .cp-catbrowse__pagenums {
        display: none;
    }

    .cp-catbrowse__pagecount {
        display: block;
        /* First in the row, before the two steps, with the space between
           pushing them to the right edge where the thumb is. */
        order: -1;
        margin-right: auto;
        color: var(--cp-text-faint);
        font-size: .8125rem;
        font-variant-numeric: tabular-nums;
    }

    .cp-catbrowse--on-dark .cp-catbrowse__pagecount {
        color: rgba(255, 255, 255, .72);
    }

    /* Round, and the size of a thumb rather than a button: 34px is below
       the 40px this file uses elsewhere, which is the deliberate cost of
       "slimmer" -- these are secondary controls sitting beside a list
       whose own rows are the primary target. */
    .cp-catbrowse__pagestep {
        min-width: 34px;
        min-height: 34px;
        padding: 0;
        border-radius: 50%;
        /* The label is the accessible name and must stay; the glyph below
           is what is actually drawn. */
        font-size: 0;
        line-height: 1;
    }

    .cp-catbrowse__pagestep::before {
        content: '\2039';
        font-size: 1.375rem;
        line-height: 1;
    }

    .cp-catbrowse__pagestep[data-catbrowse-next]::before {
        content: '\203A';
    }

    /* Forward is the direction a reader is going, so it carries the
       company's colour and the back step stays quiet. */
    .cp-catbrowse__pagestep[data-catbrowse-next]:not(:disabled) {
        border-color: transparent;
        background: var(--cp-accent, var(--cp-primary));
        color: var(--cp-inverse, #fff);
    }

    .cp-catbrowse__row {
        min-height: 64px;
        padding: 10px 12px;
        gap: 12px;
    }

    .cp-catbrowse__row-media {
        width: 48px;
        height: 48px;
    }

    /* Space-between rather than right: at this width the two step buttons
       want to be at the two edges under the thumb. */
    .cp-catbrowse__pager {
        justify-content: space-between;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-catbrowse__cat,
    .cp-catbrowse__row,
    .cp-catbrowse__pagestep,
    .cp-catbrowse__pagenum {
        transition: none;
    }

    /* The pane still changes, it just stops moving to do it. */
    .cp-catbrowse__pane.is-entering {
        animation: none;
    }
}

/* The offering page (.cp-offering*) moved to 16_offering_detail.css.
   It began here as a placeholder when a row's destination was a stub;
   it is now a page of its own and does not belong in the browser's
   stylesheet. See the "CSS Ownership" rules in CLAUDE.md. */