/* ==========================================================================
   منتصر — واجهة المتجر
   --------------------------------------------------------------------------
   Bootstrap is loaded before this file and is used for its reset and its grid
   only. Every visual decision — colour, type, spacing, elevation — is made
   here, so the storefront does not look like an admin template wearing a
   different logo.

   Nothing in this file is generated and nothing is fetched from a CDN.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Ink and paper. Warm rather than pure grey: pure grey photographs cold. */
    --st-ink: #14181f;
    --st-ink-soft: #5b6472;
    --st-ink-faint: #8b93a1;
    --st-paper: #ffffff;
    --st-paper-sunk: #f6f7f9;
    --st-line: #e6e9ee;

    /* One accent, used sparingly. A storefront with five accents has none. */
    --st-accent: #1c5de0;
    --st-accent-dark: #1447ad;
    --st-accent-wash: #eef3fe;

    --st-radius-sm: 8px;
    --st-radius: 14px;
    --st-radius-lg: 22px;

    /* Elevation as light, not as a grey box under everything. */
    --st-lift: 0 1px 2px rgba(20, 24, 31, .04), 0 8px 24px rgba(20, 24, 31, .06);
    --st-lift-hover: 0 2px 4px rgba(20, 24, 31, .06), 0 16px 40px rgba(20, 24, 31, .10);

    /* A type scale that steps rather than drifts. */
    --st-step-0: 1rem;
    --st-step-1: 1.125rem;
    --st-step-2: 1.375rem;
    --st-step-3: 1.875rem;
    --st-step-4: 2.5rem;

    --st-gap: 1.25rem;
    --st-gap-lg: 2.5rem;
    --st-gap-xl: 4rem;

    --st-ease: cubic-bezier(.2, .7, .3, 1);
    --st-speed: .18s;
}

/* --------------------------------------------------------------------------
   2. Page
   -------------------------------------------------------------------------- */

.st-body {
    margin: 0;
    background: var(--st-paper);
    color: var(--st-ink);
    font-family: 'Cairo', system-ui, sans-serif;
    font-size: var(--st-step-0);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.st-container {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.st-main {
    min-height: 60vh;
}

/* --------------------------------------------------------------------------
   3. Brand mark (the navigation itself lives in section 21)
   -------------------------------------------------------------------------- */

.st-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: inherit;
}

.st-brand__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--st-radius-sm);
    background: var(--st-accent);
    color: #fff;
    font-size: 1.25rem;
}

.st-brand__logo {
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

.st-brand__text {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    line-height: 1.25;
}

.st-brand__text small {
    font-weight: 400;
    font-size: .8125rem;
    color: var(--st-ink-faint);
}

/* --------------------------------------------------------------------------
   5. Sections
   -------------------------------------------------------------------------- */

.st-section {
    padding-block: var(--st-gap-lg);
}

.st-section__title {
    margin: 0 0 var(--st-gap);
    font-size: var(--st-step-2);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. Aisles
   -------------------------------------------------------------------------- */

.st-aisles {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

.st-aisle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border: 1px solid var(--st-line);
    border-radius: 999px;
    background: var(--st-paper);
    font-size: .9375rem;
    transition: border-color var(--st-speed) var(--st-ease),
                box-shadow var(--st-speed) var(--st-ease);
}

.st-aisle:hover {
    border-color: var(--st-accent);
    box-shadow: var(--st-lift);
}

.st-aisle__count {
    min-width: 1.5rem;
    padding-inline: .35rem;
    border-radius: 999px;
    background: var(--st-paper-sunk);
    color: var(--st-ink-faint);
    font-size: .8125rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   7. Product grid
   -------------------------------------------------------------------------- */

.st-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--st-gap);
}

.st-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    transition: transform var(--st-speed) var(--st-ease),
                box-shadow var(--st-speed) var(--st-ease),
                border-color var(--st-speed) var(--st-ease);
}

.st-card:hover {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: var(--st-lift-hover);
}

.st-card__media {
    display: grid;
    place-items: center;
    /* A fixed ratio, so a row of cards does not stagger with the photographs. */
    aspect-ratio: 4 / 3;
    background: var(--st-paper-sunk);
}

.st-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
}

.st-card__placeholder {
    font-size: 2.5rem;
    color: var(--st-ink-faint);
}

.st-card__body {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: 1rem;
}

.st-card__title {
    margin: 0;
    font-size: var(--st-step-0);
    font-weight: 700;
    line-height: 1.45;
}

.st-card__text {
    margin: 0;
    font-size: .875rem;
    color: var(--st-ink-soft);
    /* Two lines, so an unusually chatty description cannot stretch its card. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.st-card__price {
    margin: .25rem 0 0;
    font-weight: 700;
    font-size: var(--st-step-1);
}

.st-card__price span {
    font-weight: 400;
    font-size: .8125rem;
    color: var(--st-ink-faint);
}

/* --------------------------------------------------------------------------
   8. Closed
   -------------------------------------------------------------------------- */

.st-closed__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding-block: 6rem;
    text-align: center;
}

.st-closed__icon {
    font-size: 3rem;
    color: var(--st-ink-faint);
}

.st-closed__title {
    margin: 0;
    font-size: var(--st-step-3);
    font-weight: 800;
}

.st-closed__text {
    margin: 0;
    color: var(--st-ink-soft);
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

/*
   The same dark the navigation capsule is drawn in, so the page opens and
   closes on one colour instead of fading out into grey.
*/
.st-footer {
    position: relative;
    overflow: hidden;
    /*
     * No margin above it. Every section already carries its own bottom
     * padding, and a margin on top of that leaves a white band between the
     * last section and the footer on any page that does not end on a dark
     * panel.
     */
    padding-block: clamp(2.5rem, 5vw, 4rem) 0;
    background: linear-gradient(180deg, #0d1424 0%, #0a101e 100%);
    color: #fff;
}

/* The same soft light the slider uses, so the two ends of the page rhyme. */
.st-footer::before {
    content: '';
    position: absolute;
    inset-inline-start: -10%;
    top: -8rem;
    width: min(40rem, 80%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 107, 240, .16) 0%, transparent 62%);
    pointer-events: none;
}

/*
 * Laid out with flex rather than fixed grid tracks. A shop that has not filled
 * in its telephone renders three columns, and four declared tracks leave a
 * whole empty one at the end of the row — so the footer of a half-configured
 * shop looks broken rather than shorter.
 */
.st-footer__top {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.st-footer__brand {
    flex: 1 1 20rem;
}

.st-footer__col {
    flex: 1 1 11rem;
}

.st-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: 32rem;
}

.st-footer .st-brand { color: #fff; }

.st-footer .st-brand__mark {
    background: linear-gradient(140deg, var(--st-tone-0-lit), var(--st-tone-3-lit));
    box-shadow: 0 6px 18px rgba(47, 107, 240, .38);
}

.st-footer__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
}

.st-footer__heading {
    position: relative;
    margin: 0 0 .25rem;
    padding-bottom: .6rem;
    font-size: .9375rem;
    font-weight: 700;
    color: #fff;
}

/* A short rule under each heading rather than a full-width border. */
.st-footer__heading::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--st-tone-0-lit);
}

.st-footer__text {
    margin: 0;
    max-width: 42ch;
    color: rgba(255, 255, 255, .62);
    font-size: .875rem;
    line-height: 1.9;
}

.st-footer__list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-footer__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    color: rgba(255, 255, 255, .66);
    font-size: .875rem;
    text-decoration: none;
    transition: color var(--st-speed) var(--st-ease),
                transform var(--st-speed) var(--st-ease);
}

.st-footer__link:hover {
    color: #fff;
    /* Toward the leading edge, which is the right in a right-to-left page. */
    transform: translateX(-3px);
}

.st-footer__link--strong {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.st-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.st-social {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background var(--st-speed) var(--st-ease),
                border-color var(--st-speed) var(--st-ease),
                transform var(--st-speed) var(--st-ease);
}

.st-social:hover {
    transform: translateY(-2px);
    border-color: transparent;
    background: var(--st-accent);
    color: #fff;
}

/* The line at the very bottom, ruled off from everything above it. */
.st-footer__bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-block: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.st-footer__line {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: .8125rem;
}

.st-footer__line--muted {
    color: rgba(255, 255, 255, .38);
}

/* --------------------------------------------------------------------------
   10. Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   11. Header actions
   -------------------------------------------------------------------------- */

.st-header__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-inline-start: auto;
}

.st-header__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border: 1px solid var(--st-line);
    border-radius: 999px;
    color: var(--st-ink);
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
    transition: border-color var(--st-speed) var(--st-ease),
                color var(--st-speed) var(--st-ease);
}

.st-header__link:hover {
    border-color: var(--st-accent);
    color: var(--st-accent);
}

/* The name is the first thing to go on a narrow screen; the icon still says what it is. */
@media (max-width: 575.98px) {
    .st-header__link-text,
    .st-header__call span {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   12. Alerts
   -------------------------------------------------------------------------- */

.st-alert {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-top: 1rem;
    padding: .875rem 1rem;
    border-radius: var(--st-radius-sm);
    font-size: .9375rem;
}

.st-alert--success {
    background: #e9f7ef;
    color: #17603a;
}

.st-alert--danger {
    background: #fdecec;
    color: #96231f;
}

/* --------------------------------------------------------------------------
   13. Panels and forms
   -------------------------------------------------------------------------- */

.st-narrow {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    padding: var(--st-gap-lg) 1.25rem;
}

.st-panel {
    padding: 1.75rem;
    margin-bottom: var(--st-gap);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-paper);
    box-shadow: var(--st-lift);
}

.st-panel__head {
    margin-bottom: 1.25rem;
}

.st-panel__title {
    margin: 0;
    font-size: var(--st-step-3);
    font-weight: 800;
    letter-spacing: -.01em;
}

.st-panel__text {
    margin: .375rem 0 0;
    color: var(--st-ink-soft);
    font-size: .9375rem;
}

.st-panel__foot {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .9375rem;
    color: var(--st-ink-soft);
}

.st-panel__foot a {
    color: var(--st-accent);
    font-weight: 600;
    text-decoration: none;
}

.st-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.st-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.st-field {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.st-label {
    font-weight: 600;
    font-size: .875rem;
}

.st-input {
    width: 100%;
    padding: .6875rem .875rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-sm);
    background: var(--st-paper);
    color: var(--st-ink);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--st-speed) var(--st-ease),
                box-shadow var(--st-speed) var(--st-ease);
}

.st-input:focus {
    outline: none;
    border-color: var(--st-accent);
    box-shadow: 0 0 0 3px var(--st-accent-wash);
}

.st-input:disabled {
    background: var(--st-paper-sunk);
    color: var(--st-ink-faint);
}

.st-input.is-invalid {
    border-color: #c0392b;
}

.st-hint {
    margin: 0;
    font-size: .8125rem;
    color: var(--st-ink-faint);
}

.st-error {
    margin: 0;
    font-size: .8125rem;
    color: #c0392b;
}

.st-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    cursor: pointer;
}

.st-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

/* --------------------------------------------------------------------------
   14. Buttons
   -------------------------------------------------------------------------- */

.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6875rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--st-radius-sm);
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--st-speed) var(--st-ease),
                border-color var(--st-speed) var(--st-ease),
                color var(--st-speed) var(--st-ease);
}

.st-btn--block {
    width: 100%;
}

.st-btn--primary {
    background: var(--st-accent);
    color: #fff;
}

.st-btn--primary:hover {
    background: var(--st-accent-dark);
    color: #fff;
}

.st-btn--ghost {
    border-color: var(--st-line);
    color: var(--st-ink);
}

.st-btn--ghost:hover {
    border-color: var(--st-accent);
    color: var(--st-accent);
}

.st-btn--danger {
    border-color: transparent;
    color: #c0392b;
}

.st-btn--danger:hover {
    background: #fdecec;
}

/* --------------------------------------------------------------------------
   15. Account
   -------------------------------------------------------------------------- */

.st-account {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--st-gap-lg);
    align-items: start;
}

@media (max-width: 767.98px) {
    .st-account {
        grid-template-columns: 1fr;
        gap: var(--st-gap);
    }
}

.st-account__nav {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    /* Stays beside the content on a desktop, flows above it on a phone. */
    position: sticky;
    top: 88px;
}

@media (max-width: 767.98px) {
    .st-account__nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.st-account__link {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .625rem .75rem;
    border: none;
    border-radius: var(--st-radius-sm);
    background: none;
    color: var(--st-ink-soft);
    font: inherit;
    font-size: .9375rem;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--st-speed) var(--st-ease),
                color var(--st-speed) var(--st-ease);
}

.st-account__link:hover {
    background: var(--st-paper-sunk);
    color: var(--st-ink);
}

.st-account__link.is-active {
    background: var(--st-accent-wash);
    color: var(--st-accent-dark);
    font-weight: 700;
}

.st-account__link--danger {
    color: #c0392b;
}

.st-account__logout {
    margin: 0;
}

.st-account__body {
    min-width: 0;
}

.st-account__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--st-gap);
    margin-bottom: var(--st-gap);
}

.st-account__head:empty { display: none; }

/* A titled block inside the account body, under the tiles. */
.st-account__block { margin-top: calc(var(--st-gap) * 1.5); }

.st-account__block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .875rem;
}

.st-account__block-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
}

.st-account__more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--st-accent-dark);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
}

.st-account__more:hover { text-decoration: underline; }

/* The tiles open the body, so they need no head above them. */
.st-account__body > .st-tiles:first-child { margin-top: 0; }

.st-text-muted {
    color: var(--st-ink-soft);
    font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   16. Tiles
   -------------------------------------------------------------------------- */

.st-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--st-gap);
    margin-top: var(--st-gap);
}

.st-tile {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1.25rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    color: inherit;
    text-decoration: none;
    transition: transform var(--st-speed) var(--st-ease),
                box-shadow var(--st-speed) var(--st-ease);
}

.st-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--st-lift);
}

.st-tile__icon {
    font-size: 1.5rem;
    color: var(--st-accent);
}

.st-tile__label {
    font-size: .8125rem;
    color: var(--st-ink-faint);
}

.st-tile__value {
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   17. Addresses
   -------------------------------------------------------------------------- */

.st-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--st-gap);
    margin-top: var(--st-gap);
}

.st-address {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1.25rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
}

.st-address.is-default {
    border-color: var(--st-accent);
    box-shadow: 0 0 0 3px var(--st-accent-wash);
}

.st-address__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.st-address__title {
    margin: 0;
    font-size: var(--st-step-0);
    font-weight: 700;
}

.st-address__line {
    margin: 0;
    font-size: .875rem;
    color: var(--st-ink-soft);
}

.st-address__note {
    margin: .25rem 0 0;
    font-size: .8125rem;
    color: var(--st-ink-faint);
}

.st-address__foot {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--st-line);
}

.st-address__foot form {
    margin: 0;
}

.st-badge {
    padding: .1875rem .625rem;
    border-radius: 999px;
    background: var(--st-accent-wash);
    color: var(--st-accent-dark);
    font-size: .75rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   18. Empty states
   -------------------------------------------------------------------------- */

.st-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 3rem 1rem;
    border: 1px dashed var(--st-line);
    border-radius: var(--st-radius);
    color: var(--st-ink-faint);
    text-align: center;
}

/*
 * The direct child only. Written loosely it also swelled the icon inside the
 * button underneath, which turned a normal button into a blue block.
 */
.st-empty > i {
    font-size: 2rem;
    color: var(--st-ink-faint);
}

.st-empty p {
    margin: 0;
}

.st-empty .st-btn { margin-top: .75rem; }

/* Inside a card that already has its own frame. */
.st-empty--flat {
    padding: 2.5rem 1rem;
    background: var(--st-paper-sunk);
}

/* --------------------------------------------------------------------------
   19. Stock state
   -------------------------------------------------------------------------- */

.st-stock {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .25rem;
    font-size: .8125rem;
    font-weight: 600;
}

.st-stock--in {
    color: #17603a;
}

.st-stock--low {
    color: #a35a08;
}

.st-stock--out {
    color: var(--st-ink-faint);
}

/*
 * The card of something sold out is dimmed rather than removed. A customer who
 * came looking for it needs to be told it exists and is gone; a card that
 * simply is not there reads as a shop that never carried it.
 */
.st-card:has(.st-stock--out) .st-card__media {
    opacity: .55;
}

/* ==========================================================================
   20. The front page
   --------------------------------------------------------------------------
   Built for a catalogue with no photography, which is the honest constraint
   here. A premium storefront usually leans entirely on pictures; this one
   leans on the things this catalogue actually has — the part's name, its model
   number, its maker and whether it is on the shelf — and treats those as the
   material rather than apologising for the missing photograph with a grey box.
   ========================================================================== */

.st-numeric {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: plaintext;
}

/* --------------------------------------------------------------------------
   20.1 Shared marks
   -------------------------------------------------------------------------- */

.st-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #b9cbff;
    font-size: .8125rem;
    font-weight: 600;
}

/*
   The figures the shop will stand behind, centred under the promises. Read
   number first and label second, because the number is the claim and the label
   only says what it counts.
*/
/*
   The card's own footer strip. Inside the card rather than floating below it,
   because two things floating in a row is what made this corner of the page
   look unfinished.
*/
.st-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.75rem;
    margin: 0;
    padding: 1rem clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--st-line);
    background: var(--st-paper-sunk);
}

.st-fact {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    margin: 0;
}

.st-fact dd {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1;
    color: var(--st-accent-dark);
}

.st-fact dt {
    color: var(--st-ink-soft);
    font-size: .875rem;
    font-weight: 500;
}

/* The telephone at the far end, where a strip of facts naturally ends. */
.st-facts__call {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-inline-start: auto;
    padding: .45rem .95rem;
    border-radius: 999px;
    background: var(--st-accent);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--st-speed) var(--st-ease);
}

.st-facts__call:hover {
    background: var(--st-accent-dark);
    color: #fff;
}

/*
   Four promises across the card. The mark sits above its words rather than
   beside them, so each sentence gets the whole column and stops breaking in
   the middle of a phrase — which is what a row of icons-on-the-side does the
   moment the text is Arabic and the column is a quarter of a screen.
*/
.st-pledges {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 991.98px) {
    .st-pledges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .st-pledges { grid-template-columns: 1fr; }
}

.st-pledge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    transition: background var(--st-speed) var(--st-ease);
}

.st-pledge:hover {
    background: var(--st-paper-sunk);
}

/* A hairline between columns, drawn rather than bordered so it can be inset. */
.st-pledge + .st-pledge::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 1.25rem;
    bottom: 1.25rem;
    width: 1px;
    background: var(--st-line);
}

@media (max-width: 991.98px) {
    .st-pledge + .st-pledge::before {
        inset-inline: 1.25rem;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
    }

    .st-pledge:nth-child(2)::before { display: none; }
}

@media (max-width: 575.98px) {
    .st-pledge:nth-child(2)::before { display: block; }
}

.st-pledge__mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: .9rem;
    border-radius: 16px;
    color: #fff;
    font-size: 1.35rem;
}

/* One tone each, matching the slides — the shop reads as one palette. */
.st-pledge__mark--0 { background: linear-gradient(140deg, var(--st-tone-0), var(--st-tone-0-lit)); }
.st-pledge__mark--1 { background: linear-gradient(140deg, var(--st-tone-1), var(--st-tone-1-lit)); }
.st-pledge__mark--2 { background: linear-gradient(140deg, var(--st-tone-2), var(--st-tone-2-lit)); }
.st-pledge__mark--3 { background: linear-gradient(140deg, var(--st-tone-3), var(--st-tone-3-lit)); }

.st-pledge__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--st-ink);
}

.st-pledge__text {
    color: var(--st-ink-soft);
    font-size: .875rem;
    line-height: 1.8;
}

/* --------------------------------------------------------------------------
   20.2 Bands
   -------------------------------------------------------------------------- */

.st-band {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.st-band:nth-of-type(even) {
    background: var(--st-paper-sunk);
}

/*
 * Centred, every band on the page. A heading pinned to the leading edge over a
 * grid that fills the whole column leaves the row looking lopsided, and the
 * page reads as a sequence of announcements rather than as a column of
 * left-over text.
 */
.st-band__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    text-align: center;
}

.st-band__title {
    margin: 0;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.01em;
}

.st-band__lede {
    max-width: 62ch;
    margin: .35rem auto 0;
    color: var(--st-ink-soft);
    font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   20.3 The aisles
   -------------------------------------------------------------------------- */

/*
 * A row per aisle. The old version was a coloured block with a title pinned to
 * one corner and an icon to the other, which is mostly empty colour the moment
 * a shop has fewer than eight aisles — and this one has two. A row is the same
 * information at the size the information actually is.
 */
.st-aisle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--st-gap);
}

.st-aisle-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    overflow: hidden;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--st-speed) var(--st-ease),
                box-shadow var(--st-speed) var(--st-ease),
                transform var(--st-speed) var(--st-ease);
}

.st-aisle-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--st-lift);
    color: inherit;
}

/* A stripe of the aisle's own colour down its leading edge. */
.st-aisle-card::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    transition: width var(--st-speed) var(--st-ease);
}

.st-aisle-card:hover::before {
    width: 6px;
}

/*
 * Four deliberate colourways rather than one repeated. A grid of identical
 * tiles reads as a placeholder; four that clearly belong together reads as a
 * decision somebody made.
 */
.st-aisle-card--0::before { background: linear-gradient(180deg, var(--st-tone-0), var(--st-tone-0-lit)); }
.st-aisle-card--1::before { background: linear-gradient(180deg, var(--st-tone-1), var(--st-tone-1-lit)); }
.st-aisle-card--2::before { background: linear-gradient(180deg, var(--st-tone-2), var(--st-tone-2-lit)); }
.st-aisle-card--3::before { background: linear-gradient(180deg, var(--st-tone-3), var(--st-tone-3-lit)); }

.st-aisle-card--0:hover { border-color: var(--st-tone-0-lit); }
.st-aisle-card--1:hover { border-color: var(--st-tone-1-lit); }
.st-aisle-card--2:hover { border-color: var(--st-tone-2-lit); }
.st-aisle-card--3:hover { border-color: var(--st-tone-3-lit); }

.st-aisle-card__mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    color: #fff;
    font-size: 1.4rem;
}

.st-aisle-card--0 .st-aisle-card__mark { background: linear-gradient(140deg, var(--st-tone-0), var(--st-tone-0-lit)); }
.st-aisle-card--1 .st-aisle-card__mark { background: linear-gradient(140deg, var(--st-tone-1), var(--st-tone-1-lit)); }
.st-aisle-card--2 .st-aisle-card__mark { background: linear-gradient(140deg, var(--st-tone-2), var(--st-tone-2-lit)); }
.st-aisle-card--3 .st-aisle-card__mark { background: linear-gradient(140deg, var(--st-tone-3), var(--st-tone-3-lit)); }

/* A photograph of the aisle, where the shop has uploaded one. */
.st-aisle-card__img {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
}

.st-aisle-card__body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.st-aisle-card__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-aisle-card__count {
    color: var(--st-ink-faint);
    font-size: .8125rem;
}

.st-aisle-card__go {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--st-paper-sunk);
    color: var(--st-ink-soft);
    font-size: .9rem;
    transition: transform var(--st-speed) var(--st-ease),
                background var(--st-speed) var(--st-ease),
                color var(--st-speed) var(--st-ease);
}

.st-aisle-card:hover .st-aisle-card__go {
    /* Leftward, because that is where the arrow points in a right-to-left page. */
    transform: translateX(-3px);
    background: var(--st-accent);
    color: #fff;
}

/* --------------------------------------------------------------------------
   20.4 The product tile
   -------------------------------------------------------------------------- */

.st-product {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    color: inherit;
    text-decoration: none;
    transition: transform var(--st-speed) var(--st-ease),
                box-shadow var(--st-speed) var(--st-ease),
                border-color var(--st-speed) var(--st-ease);
}

.st-product:hover {
    transform: translateY(-3px);
    border-color: var(--st-accent);
    box-shadow: var(--st-lift-hover);
    color: inherit;
}

.st-product.is-out { opacity: .72; }

.st-product__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--st-paper-sunk);
}

.st-product__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform .4s var(--st-ease);
}

.st-product:hover .st-product__img { transform: scale(1.04); }

/*
 * The stand-in when there is no photograph. The model number set large is the
 * whole picture, not a watermark behind an icon: a bearing is ordered by its
 * number, and a page of identical grey boxes with a tiny cog in the middle
 * tells a customer nothing at all about which one is which.
 */
.st-product__plate {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 1rem;
    background:
        radial-gradient(80% 80% at 50% 30%, rgba(28, 93, 224, .10), transparent 70%),
        var(--st-paper-sunk);
}

.st-product__glyph {
    position: absolute;
    inset-inline-end: .85rem;
    bottom: .7rem;
    font-size: 1.1rem;
    color: rgba(28, 93, 224, .28);
}

.st-product__stamp {
    max-width: 100%;
    padding: .3rem .7rem;
    border: 1px dashed rgba(28, 93, 224, .28);
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
    color: var(--st-accent-dark);
    font-family: ui-monospace, monospace;
    font-size: clamp(.95rem, 2vw, 1.25rem);
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
    direction: ltr;
    overflow-wrap: anywhere;
}

.st-product__flags {
    position: absolute;
    inset-inline-start: .6rem;
    top: .6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: flex-start;
}

.st-flag {
    padding: .22rem .6rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.6;
    box-shadow: 0 1px 3px rgba(20, 24, 31, .12);
}

.st-flag--new { background: var(--st-accent); color: #fff; }
.st-flag--low { background: #fef3c7; color: #92600b; }

.st-product__body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem 1rem;
    flex: 1 1 auto;
}

.st-product__brand {
    color: var(--st-accent);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.st-product__title {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.55;
    /* Two lines, so one long name cannot stretch its whole row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.st-product:hover .st-product__title { color: var(--st-accent-dark); }

.st-product__code {
    color: var(--st-ink-faint);
    font-family: ui-monospace, monospace;
    font-size: .75rem;
}

/* The money line, ruled off from the name above it. */
.st-product__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .7rem;
    border-top: 1px solid var(--st-line);
}

.st-product__price {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--st-ink);
    font-variant-numeric: tabular-nums;
}

.st-product__price small {
    font-size: .75rem;
    font-weight: 500;
    color: var(--st-ink-faint);
}

.st-product__in {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: #e8f6ee;
    color: #17603a;
    font-size: .75rem;
    font-weight: 700;
}

.st-product__out {
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--st-paper-sunk);
    color: var(--st-ink-faint);
    font-size: .75rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   20.5 The strip — why this shop
   -------------------------------------------------------------------------- */

.st-strip {
    padding-block: clamp(2rem, 4vw, 3rem);
}

/*
 * A panel inside the page rather than a full-width tinted band. A band edge to
 * edge cuts the page in half; a panel sits in the same column as everything
 * else and reads as part of the argument rather than as an interruption.
 */
.st-strip__inner {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: var(--st-radius-lg);
    background:
        radial-gradient(60rem 24rem at 100% 0%, rgba(47, 107, 240, .18), transparent 60%),
        linear-gradient(135deg, #0d1424 0%, #16233d 100%);
    color: #fff;
}

.st-strip__text {
    max-width: 62ch;
}

.st-strip__title {
    margin: 0;
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.01em;
}

.st-strip__lede {
    margin: .6rem 0 0;
    color: rgba(255, 255, 255, .72);
    line-height: 1.85;
}

/* Three across the foot of the panel, so the panel fills evenly. */
.st-strip__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 767.98px) {
    .st-strip__list { grid-template-columns: 1fr; }
}

.st-strip__list li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--st-radius);
    background: rgba(255, 255, 255, .05);
    font-size: .9375rem;
    line-height: 1.7;
}

.st-strip__list i {
    flex: 0 0 auto;
    color: #6ee7b7;
    font-size: 1.2rem;
}

/* --------------------------------------------------------------------------
   20.6 Brands
   -------------------------------------------------------------------------- */

/*
   The makers, moving.

   Full-bleed rather than inside the column, because a row that stops at the
   column edge reads as a list that ends there — and the point of a moving row
   is that it does not. The two runs are identical, so shifting the track by
   exactly half its width lands the copy where the original started and the
   loop has no seam.
*/
.st-marquee {
    position: relative;
    overflow: hidden;
    padding-block: .5rem;
    /* Faded at both ends, so names enter and leave rather than appearing. */
    mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

.st-marquee__track {
    display: flex;
    width: max-content;
    animation: st-marquee 32s linear infinite;
}

.st-marquee:hover .st-marquee__track,
.st-marquee:focus-within .st-marquee__track {
    animation-play-state: paused;
}

/*
 * Spacing carried on each chip rather than as a `gap`. A gap sits *between*
 * items, so the join between the two runs ends up half a gap wider than every
 * other join and the strip visibly breaks apart each time it comes round. A
 * trailing margin makes every chip identical, and half the track is then
 * exactly the other half.
 */
.st-marquee__run {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

@keyframes st-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    /* Still readable, simply not moving. */
    .st-marquee__track { animation: none; }
    .st-marquee { mask-image: none; -webkit-mask-image: none; }
    .st-marquee__track { flex-wrap: wrap; justify-content: center; width: 100%; }
    .st-marquee__run { flex-wrap: wrap; justify-content: center; }
    .st-marquee__run[aria-hidden="true"] { display: none; }
}

.st-brand-chip {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-inline-end: .75rem;
    width: 158px;
    height: 82px;
    padding: .75rem 1rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    color: var(--st-ink-soft);
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    transition: border-color var(--st-speed) var(--st-ease),
                color var(--st-speed) var(--st-ease),
                box-shadow var(--st-speed) var(--st-ease);
}

.st-brand-chip:hover {
    border-color: var(--st-accent);
    color: var(--st-accent-dark);
    box-shadow: var(--st-lift);
}

.st-brand-chip img {
    max-width: 110px;
    max-height: 40px;
    object-fit: contain;
    /*
     * Drained of colour until pointed at. Nine logos in nine palettes turn a
     * quiet strip into a fairground; grey lets the row read as one row.
     */
    filter: grayscale(1);
    opacity: .7;
    transition: filter var(--st-speed) var(--st-ease), opacity var(--st-speed) var(--st-ease);
}

.st-brand-chip:hover img {
    filter: none;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   20.7 The closing call
   -------------------------------------------------------------------------- */

.st-cta {
    padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}

.st-cta__inner {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--st-gap-lg);
    padding: clamp(2rem, 5vw, 3.25rem);
    border-radius: var(--st-radius-lg);
    background:
        radial-gradient(40rem 20rem at 0% 100%, rgba(139, 92, 246, .35), transparent 60%),
        linear-gradient(135deg, #14213d 0%, var(--st-accent) 130%);
    color: #fff;
}

/* A faint grid in the corner, so the panel is not a flat rectangle of colour. */
.st-cta__inner::after {
    content: '';
    position: absolute;
    inset-inline-end: -6rem;
    top: -6rem;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 3rem rgba(255, 255, 255, .04);
    pointer-events: none;
}

.st-cta__title {
    margin: 0;
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.01em;
}

.st-cta__lede {
    margin: .5rem 0 0;
    max-width: 46ch;
    color: rgba(255, 255, 255, .82);
    line-height: 1.85;
}

.st-cta__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

/* --------------------------------------------------------------------------
   20.8 Buttons the front page adds
   -------------------------------------------------------------------------- */

.st-btn--lg {
    padding: .85rem 1.5rem;
    font-size: 1rem;
}

.st-btn--light {
    background: #fff;
    color: var(--st-accent-dark);
}

.st-btn--light:hover {
    background: #eef3fe;
    color: var(--st-accent-dark);
}

.st-btn--ghost-light {
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.st-btn--ghost-light:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* On a dark band the ghost button has to be light, not the page's own ghost. */
.st-hero .st-btn--ghost {
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.st-hero .st-btn--ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* ==========================================================================
   21. The shell — floating navigation and the hero slider
   --------------------------------------------------------------------------
   The navigation is deliberately not a bar welded to the top edge. It is a
   capsule that floats over the page, sits away from the edge while the visitor
   is still at the top, and settles onto the edge once they scroll — so the
   first thing seen is the shop, not a strip of chrome.

   The slider under it turns through things that are true (the shop's line, its
   fullest aisles, a live offer) rather than through invented promises, and
   every slide is already in the page: the first one reads correctly before a
   single line of script has run.
   ========================================================================== */

:root {
    /* How much room the floating capsule needs above the content. */
    --st-nav-h: 104px;

    /* The four tones the slides and the aisle marks are drawn in. */
    --st-tone-0: #1e3a8a;
    --st-tone-0-lit: #2f6bf0;
    --st-tone-1: #0f766e;
    --st-tone-1-lit: #14b8a6;
    --st-tone-2: #7c2d12;
    --st-tone-2-lit: #ea580c;
    --st-tone-3: #4c1d95;
    --st-tone-3-lit: #8b5cf6;
}

@media (max-width: 991.98px) {
    :root { --st-nav-h: 84px; }
}

/* --------------------------------------------------------------------------
   21.1 The floating navigation
   -------------------------------------------------------------------------- */

.st-nav {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 60;
    padding-block: 1.25rem;
    transition: padding-block var(--st-speed) var(--st-ease);
}

.st-nav.is-scrolled {
    padding-block: .5rem;
}

.st-nav__bar {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1.75rem);
    min-height: 64px;
    padding-inline: 1rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(13, 20, 36, .72);
    backdrop-filter: saturate(1.6) blur(16px);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    box-shadow: 0 10px 34px rgba(8, 12, 24, .28);
    color: #fff;
    transition: background var(--st-speed) var(--st-ease),
                border-color var(--st-speed) var(--st-ease),
                box-shadow var(--st-speed) var(--st-ease);
}

/*
 * Once the page is scrolled the capsule is no longer sitting over the dark
 * slider, so it turns opaque rather than staying translucent over white text.
 */
.st-nav.is-scrolled .st-nav__bar {
    background: rgba(10, 16, 30, .94);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 6px 24px rgba(8, 12, 24, .34);
}

.st-nav .st-brand {
    margin-inline-end: auto;
    color: #fff;
}

.st-nav .st-brand__mark {
    background: linear-gradient(140deg, var(--st-tone-0-lit), var(--st-tone-3-lit));
    box-shadow: 0 6px 18px rgba(47, 107, 240, .38);
}

.st-nav .st-brand__text small {
    color: rgba(255, 255, 255, .62);
}

.st-nav__links {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.st-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .9rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .82);
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--st-speed) var(--st-ease),
                color var(--st-speed) var(--st-ease);
}

.st-nav__link:hover,
.st-nav__link:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.st-nav__link--trigger i {
    font-size: .75rem;
    transition: transform var(--st-speed) var(--st-ease);
}

.st-nav__link[aria-expanded="true"] {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.st-nav__link[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.st-nav__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.st-nav__call {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--st-speed) var(--st-ease);
}

.st-nav__call:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.st-nav__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1.15rem;
    text-decoration: none;
    transition: background var(--st-speed) var(--st-ease),
                transform var(--st-speed) var(--st-ease);
}

.st-nav__icon:hover {
    background: var(--st-tone-0-lit);
    color: #fff;
    transform: translateY(-1px);
}

/* The burger, three lines that fold into a cross. */
.st-nav__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    cursor: pointer;
}

.st-nav__burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform var(--st-speed) var(--st-ease),
                opacity var(--st-speed) var(--st-ease);
}

.st-nav__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.st-nav__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.st-nav__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   21.2 The aisles panel
   -------------------------------------------------------------------------- */

.st-mega {
    margin-top: .5rem;
    animation: st-mega-in .22s var(--st-ease);
}

.st-mega[hidden] {
    display: none;
}

.st-mega__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--st-radius-lg);
    background: rgba(13, 20, 36, .94);
    backdrop-filter: saturate(1.6) blur(16px);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    box-shadow: 0 24px 60px rgba(8, 12, 24, .38);
}

.st-mega__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border-radius: var(--st-radius);
    color: #fff;
    text-decoration: none;
    transition: background var(--st-speed) var(--st-ease);
}

.st-mega__item:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.st-mega__item strong {
    display: block;
    font-size: .9375rem;
}

.st-mega__item small {
    display: block;
    margin-top: .1rem;
    color: rgba(255, 255, 255, .55);
    font-size: .8125rem;
}

.st-mega__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #fff;
    font-size: 1.1rem;
}

.st-mega__mark--0 { background: linear-gradient(140deg, var(--st-tone-0), var(--st-tone-0-lit)); }
.st-mega__mark--1 { background: linear-gradient(140deg, var(--st-tone-1), var(--st-tone-1-lit)); }
.st-mega__mark--2 { background: linear-gradient(140deg, var(--st-tone-2), var(--st-tone-2-lit)); }
.st-mega__mark--3 { background: linear-gradient(140deg, var(--st-tone-3), var(--st-tone-3-lit)); }

.st-mega__empty {
    margin: 0;
    padding: .75rem;
    color: rgba(255, 255, 255, .6);
    font-size: .9375rem;
}

@keyframes st-mega-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* On a narrow screen the links become the drawer the burger opens. */
@media (max-width: 991.98px) {
    .st-nav__burger { display: flex; }
    .st-nav__call { display: none; }

    .st-nav__links {
        position: absolute;
        inset-inline: var(--st-gap);
        top: calc(100% + .5rem);
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
        padding: .75rem;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: var(--st-radius-lg);
        background: rgba(13, 20, 36, .96);
        backdrop-filter: saturate(1.6) blur(16px);
        -webkit-backdrop-filter: saturate(1.6) blur(16px);
        box-shadow: 0 24px 60px rgba(8, 12, 24, .38);
    }

    .st-nav__links:not(.is-open) { display: none; }

    .st-nav__link {
        justify-content: space-between;
        padding: .75rem 1rem;
    }
}

/* --------------------------------------------------------------------------
   21.3 Where the navigation sits relative to the page
   -------------------------------------------------------------------------- */

/*
 * The banner first, then the notice, then the page.
 *
 * The notice stays first in the markup so a screen reader reaches it straight
 * away, and is moved below the banner visually — a green bar floating above
 * the slider reads as part of the chrome rather than as an answer to what the
 * visitor just did.
 */
.st-main {
    display: flex;
    flex-direction: column;
    padding-top: var(--st-nav-h);
}

.st-main > * { order: 2; }
.st-main > .st-slider,
.st-main > .st-crown { order: 0; }
.st-main > .st-alerts { order: 1; }

/* The slider reaches up behind the capsule; it carries the offset itself. */
.st-main:has(> .st-slider) {
    padding-top: 0;
}

.st-alerts { padding-top: 1rem; }

.st-alerts {
    padding-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   21.4 The slider
   -------------------------------------------------------------------------- */

.st-slider {
    position: relative;
    overflow: hidden;
    background: #0b1120;
    color: #fff;
    isolation: isolate;
}

.st-slider__track {
    display: grid;
}

/*
 * Every slide occupies the same cell. The one in view is opaque; the rest stay
 * in the page — hidden from assistive technology, not removed — so the markup
 * is complete and the first slide is readable with the script switched off.
 */
.st-slide {
    position: relative;
    isolation: isolate;
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    min-height: clamp(38rem, 92vh, 54rem);
    padding-block: calc(var(--st-nav-h) + 1.5rem) 3.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s var(--st-ease), visibility .5s var(--st-ease);
}

.st-slide.is-current {
    opacity: 1;
    visibility: visible;
}

.st-slide--0 { background: linear-gradient(135deg, #0b1120 0%, var(--st-tone-0) 100%); }
.st-slide--1 { background: linear-gradient(135deg, #071b1a 0%, var(--st-tone-1) 100%); }
.st-slide--2 { background: linear-gradient(135deg, #1c0e07 0%, var(--st-tone-2) 100%); }
.st-slide--3 { background: linear-gradient(135deg, #140a2b 0%, var(--st-tone-3) 100%); }

/* One soft light per slide, drawn rather than downloaded. */
/* Only where there is no photograph — over one it is just haze. */
.st-slide:has(.st-slide__photo) .st-slide__glow {
    display: none;
}

/* With a photograph the veil carries the tone; a flat fill only fights it. */
.st-slide:has(.st-slide__photo) {
    background: #0b1120;
}

.st-slide__glow {
    position: absolute;
    inset-inline-end: -12%;
    top: -35%;
    width: min(48rem, 95%);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.st-slide--0 .st-slide__glow { background: radial-gradient(circle, rgba(47, 107, 240, .45) 0%, transparent 62%); }
.st-slide--1 .st-slide__glow { background: radial-gradient(circle, rgba(20, 184, 166, .40) 0%, transparent 62%); }
.st-slide--2 .st-slide__glow { background: radial-gradient(circle, rgba(234, 88, 12, .38) 0%, transparent 62%); }
.st-slide--3 .st-slide__glow { background: radial-gradient(circle, rgba(139, 92, 246, .42) 0%, transparent 62%); }

.st-slide__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    width: 100%;
}

@media (max-width: 767.98px) {
    .st-slide__inner { grid-template-columns: 1fr; }
    .st-slide__glyph { display: none; }
}

/* The text rises as its slide arrives, and only for visitors who want motion. */
.st-slide.is-current .st-slide__text > * {
    animation: st-slide-rise .55s var(--st-ease) backwards;
}

.st-slide.is-current .st-slide__text > *:nth-child(2) { animation-delay: .06s; }
.st-slide.is-current .st-slide__text > *:nth-child(3) { animation-delay: .12s; }
.st-slide.is-current .st-slide__text > *:nth-child(4) { animation-delay: .18s; }

@keyframes st-slide-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.st-slide__title {
    margin: 1rem 0 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
    max-width: 20ch;
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.st-slide__lede {
    margin: 1rem 0 1.75rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
    max-width: 52ch;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.85;
}

.st-slide__glyph {
    display: grid;
    place-items: center;
    justify-self: center;
    width: min(16rem, 100%);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 32%;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, .85);
    font-size: clamp(4rem, 9vw, 6.5rem);
}

/* --------------------------------------------------------------------------
   21.5 The photograph
   --------------------------------------------------------------------------
   It drifts and closes in slowly while its slide is showing — the only motion
   on the page that is decoration rather than feedback, which is why it is the
   first thing switched off for a visitor who asked for less of it.
   -------------------------------------------------------------------------- */

.st-slide__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: scale(1.06);
}

.st-slide.is-current .st-slide__photo {
    animation: st-slide-drift 14s var(--st-ease) forwards;
}

@keyframes st-slide-drift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.18) translate3d(1.5%, -1.5%, 0); }
}

/*
 * The veil. A photograph taken in a workshop is not a background anybody can
 * read white text over, so the text side is darkened and the far side is left
 * as the picture — the photograph still reads as a photograph.
 */
.st-slide__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.st-slide--0 .st-slide__veil { background: linear-gradient(to right, rgba(11, 17, 32, 0) 0%, rgba(11, 17, 32, .12) 38%, rgba(11, 17, 32, .52) 72%, rgba(30, 58, 138, .74) 100%); }
.st-slide--1 .st-slide__veil { background: linear-gradient(to right, rgba(7, 27, 26, 0) 0%, rgba(7, 27, 26, .12) 38%, rgba(7, 27, 26, .52) 72%, rgba(15, 118, 110, .74) 100%); }
.st-slide--2 .st-slide__veil { background: linear-gradient(to right, rgba(28, 14, 7, 0) 0%, rgba(28, 14, 7, .12) 38%, rgba(28, 14, 7, .52) 72%, rgba(124, 45, 18, .74) 100%); }
.st-slide--3 .st-slide__veil { background: linear-gradient(to right, rgba(20, 10, 43, 0) 0%, rgba(20, 10, 43, .12) 38%, rgba(20, 10, 43, .52) 72%, rgba(76, 29, 149, .74) 100%); }

@media (max-width: 767.98px) {
    /* No room for a clear half of the picture on a phone; readability wins. */
    .st-slide__veil { background-image: linear-gradient(to top, rgba(11, 17, 32, .88) 30%, rgba(11, 17, 32, .42) 100%); }
}

/* Where the picture came from, small and out of the way but present. */
.st-slide__credit {
    position: absolute;
    inset-inline-start: 1rem;
    bottom: clamp(.6rem, 6vw, 5.5rem);
    z-index: 2;
    color: rgba(255, 255, 255, .5);
    font-size: .6875rem;
    letter-spacing: .01em;
}

@media (max-width: 767.98px) {
    .st-slide__credit { display: none; }
}

/* --------------------------------------------------------------------------
   21.5 Slider controls
   -------------------------------------------------------------------------- */

.st-slider__controls {
    position: absolute;
    inset-inline: 0;
    /* Clear of the card that overlaps the bottom of the slider. */
    bottom: clamp(1.5rem, 7vw, 6.5rem);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.st-slider__arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background var(--st-speed) var(--st-ease),
                transform var(--st-speed) var(--st-ease);
}

.st-slider__arrow:hover {
    background: rgba(255, 255, 255, .2);
    transform: scale(1.06);
}

.st-slider__dots {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.st-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
    cursor: pointer;
    transition: width var(--st-speed) var(--st-ease),
                background var(--st-speed) var(--st-ease);
}

.st-slider__dot.is-current {
    width: 26px;
    background: #fff;
}

/* --------------------------------------------------------------------------
   21.6 The rail under the slider
   -------------------------------------------------------------------------- */

/*
   Not a band. One card, lifted off the page and pulled up over the bottom of
   the slider so the two read as a single opening rather than as a picture with
   a strip of text stranded underneath it.
*/
.st-hero-rail {
    position: relative;
    z-index: 3;
    margin-top: clamp(-5rem, -6vw, -3rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.st-promise {
    overflow: hidden;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-paper);
    box-shadow: 0 2px 6px rgba(20, 24, 31, .05), 0 24px 56px rgba(20, 24, 31, .12);
}

@media (max-width: 767.98px) {
    /* No room to overlap on a phone; the card simply follows the slider. */
    .st-hero-rail { margin-top: 1.5rem; }
}

/* --------------------------------------------------------------------------
   21.7 Visitors who asked for less motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .st-slide,
    .st-slide.is-current .st-slide__photo,
    .st-slide.is-current .st-slide__text > *,
    .st-mega {
        transition-duration: .01ms;
        animation: none;
    }
}

/* ==========================================================================
   22. The shelf and the part
   --------------------------------------------------------------------------
   The two pages a customer actually shops on. Both open under the floating
   capsule, so both start with a band dark enough for it to sit over.
   ========================================================================== */

/* --------------------------------------------------------------------------
   22.1 The crown — the band every inner page opens with
   -------------------------------------------------------------------------- */

.st-crown {
    padding-block: calc(var(--st-nav-h) + 1.5rem) 2.25rem;
    background: linear-gradient(135deg, #0b1120 0%, var(--st-tone-0) 100%);
    color: #fff;
}

.st-main:has(> .st-crown) {
    padding-top: 0;
}



.st-crown__title {
    margin: .75rem 0 0;
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.st-crown__lede {
    margin: .5rem 0 0;
    max-width: 62ch;
    color: rgba(255, 255, 255, .74);
    line-height: 1.8;
}

.st-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    font-size: .875rem;
    color: rgba(255, 255, 255, .6);
}

.st-crumbs a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}

.st-crumbs a:hover {
    color: #fff;
    text-decoration: underline;
}

.st-crumbs i {
    font-size: .7rem;
    opacity: .6;
}

/* --------------------------------------------------------------------------
   22.2 The filters
   -------------------------------------------------------------------------- */

.st-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-paper);
    box-shadow: var(--st-lift);
}

.st-filters__group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1 1 12rem;
}

.st-filters__label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--st-ink-soft);
}

.st-input {
    width: 100%;
    padding: .65rem .85rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-sm);
    background: var(--st-paper);
    color: var(--st-ink);
    font: inherit;
    font-size: .9375rem;
    transition: border-color var(--st-speed) var(--st-ease),
                box-shadow var(--st-speed) var(--st-ease);
}

.st-input:focus {
    outline: 0;
    border-color: var(--st-accent);
    box-shadow: 0 0 0 3px var(--st-accent-wash);
}

/* --------------------------------------------------------------------------
   22.3 The aisle chips
   -------------------------------------------------------------------------- */

.st-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

.st-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid var(--st-line);
    border-radius: 999px;
    background: var(--st-paper);
    color: var(--st-ink-soft);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--st-speed) var(--st-ease),
                background var(--st-speed) var(--st-ease),
                color var(--st-speed) var(--st-ease);
}

.st-chip:hover {
    border-color: var(--st-accent);
    color: var(--st-accent-dark);
}

.st-chip.is-current {
    border-color: transparent;
    background: var(--st-accent);
    color: #fff;
}

.st-chip small {
    padding: .1rem .4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .07);
    font-size: .75rem;
}

.st-chip.is-current small {
    background: rgba(255, 255, 255, .22);
}

.st-shelf__count {
    margin: 1.25rem 0 .75rem;
    color: var(--st-ink-faint);
    font-size: .875rem;
}

/* --------------------------------------------------------------------------
   22.4 Paging
   -------------------------------------------------------------------------- */

.st-pager {
    margin-top: 2rem;
}

.st-pager .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-pager .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: .65rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-sm);
    background: var(--st-paper);
    color: var(--st-ink-soft);
    font-weight: 600;
    text-decoration: none;
}

.st-pager .page-item.active .page-link {
    border-color: transparent;
    background: var(--st-accent);
    color: #fff;
}

.st-pager .page-item.disabled .page-link {
    opacity: .45;
}

/* --------------------------------------------------------------------------
   22.5 The part's own page
   -------------------------------------------------------------------------- */

.st-part {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

@media (max-width: 767.98px) {
    .st-part { grid-template-columns: 1fr; }
}

.st-part__media {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-paper-sunk);
    aspect-ratio: 4 / 3;
}

.st-part__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Where the photograph is not, the number stands. */
.st-part__plate {
    position: relative;
    display: grid;
    place-items: center;
    height: 100%;
    background:
        radial-gradient(60% 60% at 50% 40%, rgba(28, 93, 224, .10), transparent 70%),
        repeating-linear-gradient(135deg, rgba(20, 24, 31, .03) 0 10px, transparent 10px 20px);
}

.st-part__glyph {
    font-size: clamp(3rem, 8vw, 5rem);
    color: rgba(28, 93, 224, .32);
}

.st-part__stamp {
    position: absolute;
    inset-inline: 0;
    bottom: 12%;
    text-align: center;
    color: rgba(20, 24, 31, .22);
    font-size: clamp(1.5rem, 5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: .04em;
    direction: ltr;
}

.st-part__brand {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--st-accent-wash);
    color: var(--st-accent-dark);
    font-size: .8125rem;
    font-weight: 700;
}

.st-part__title {
    margin: .75rem 0 0;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.st-specs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem;
    margin: 1.25rem 0;
    padding: 1rem 0;
    border-block: 1px solid var(--st-line);
}

/* Centred, so the four facts read as one row of labelled figures. */
.st-spec {
    margin: 0;
    text-align: center;
}

.st-spec dt {
    color: var(--st-ink-faint);
    font-size: .8125rem;
}

.st-spec dd {
    margin: .2rem 0 0;
    font-weight: 700;
}

.st-part__price {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: 1rem;
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    font-weight: 800;
    color: var(--st-accent-dark);
}

.st-part__price small {
    font-size: 1rem;
    font-weight: 600;
    color: var(--st-ink-soft);
}

.st-part__lede {
    margin: 1rem 0 0;
    color: var(--st-ink-soft);
    font-size: 1.0625rem;
    line-height: 1.85;
}

.st-part__text {
    margin-top: .75rem;
    color: var(--st-ink-soft);
    line-height: 1.9;
}

.st-part__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

/* ==========================================================================
   23. Signing in and opening an account
   --------------------------------------------------------------------------
   A customer is asked to open an account at the moment they are deciding
   whether the shop is worth buying from. A bare form on a white page answers
   that with nothing, so the screen is split: the shop makes its case on one
   side and asks for details on the other.
   ========================================================================== */

.st-auth {
    padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}

.st-auth__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-paper);
    box-shadow: 0 2px 6px rgba(20, 24, 31, .05), 0 24px 56px rgba(20, 24, 31, .12);
}

@media (max-width: 767.98px) {
    /* The form first on a phone; the case for the shop is below it. */
    .st-auth__inner { grid-template-columns: 1fr; }
    .st-auth__aside { order: 2; }
    .st-auth__panel { order: 1; }
}

/* --------------------------------------------------------------------------
   23.1 The half that argues
   -------------------------------------------------------------------------- */

.st-auth__aside {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: clamp(2rem, 4vw, 3.25rem);
    background: linear-gradient(140deg, #0d1424 0%, var(--st-tone-0) 140%);
    color: #fff;
    isolation: isolate;
}

.st-auth__glow {
    position: absolute;
    inset-inline-end: -20%;
    top: -25%;
    width: min(30rem, 90%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 107, 240, .40) 0%, transparent 62%);
    pointer-events: none;
    z-index: -1;
}

.st-auth__aside .st-brand { color: #fff; }

.st-auth__aside .st-brand__mark {
    background: linear-gradient(140deg, var(--st-tone-0-lit), var(--st-tone-3-lit));
    box-shadow: 0 6px 18px rgba(47, 107, 240, .38);
}

.st-auth__title {
    margin: .5rem 0 0;
    max-width: 18ch;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.st-auth__lede {
    margin: 0;
    max-width: 44ch;
    color: rgba(255, 255, 255, .74);
    font-size: .9375rem;
    line-height: 1.9;
}

.st-auth__points {
    display: grid;
    gap: .6rem;
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
}

.st-auth__points li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9375rem;
}

.st-auth__points i {
    color: #6ee7b7;
    font-size: 1.15rem;
}

.st-auth__call {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    padding: .6rem 1rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--st-speed) var(--st-ease);
}

.st-auth__call:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* --------------------------------------------------------------------------
   23.2 The half that asks
   -------------------------------------------------------------------------- */

.st-auth__panel {
    padding: clamp(2rem, 4vw, 3.25rem);
}

.st-auth__head {
    margin-bottom: 1.5rem;
}

.st-auth__heading {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.01em;
}

.st-auth__sub {
    margin: .4rem 0 0;
    color: var(--st-ink-soft);
    font-size: .9375rem;
}

.st-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 575.98px) {
    .st-field-row { grid-template-columns: 1fr; }
}

/* An icon inside the box rather than a label doing all the work. */
.st-control {
    position: relative;
}

.st-control__icon {
    position: absolute;
    inset-inline-start: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--st-ink-faint);
    font-size: 1rem;
    pointer-events: none;
}

.st-control .st-input {
    padding-inline-start: 2.5rem;
}

.st-control:focus-within .st-control__icon {
    color: var(--st-accent);
}

.st-auth__foot {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--st-line);
    color: var(--st-ink-soft);
    font-size: .9375rem;
    text-align: center;
}

.st-auth__foot a {
    color: var(--st-accent-dark);
    font-weight: 700;
    text-decoration: none;
}

.st-auth__foot a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   24. The pages about the shop
   ========================================================================== */

.st-section--tight { padding-block: clamp(1.5rem, 3vw, 2rem); }
.st-section--sunk { background: var(--st-paper-sunk); }

/* --------------------------------------------------------------------------
   24.1 The figures, set larger than the front page sets them
   -------------------------------------------------------------------------- */

.st-scoreboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin: 0;
}

.st-score {
    margin: 0;
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    text-align: center;
}

.st-score dd {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--st-accent-dark);
}

.st-score dt {
    margin-top: .4rem;
    color: var(--st-ink-soft);
    font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   24.2 Prose
   -------------------------------------------------------------------------- */

.st-prose {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.st-prose__block {
    padding-inline-start: 1.25rem;
    border-inline-start: 3px solid var(--st-accent-wash);
}

.st-prose__title {
    margin: 0 0 .6rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.st-prose__text {
    margin: 0;
    color: var(--st-ink-soft);
    line-height: 2;
}

/* --------------------------------------------------------------------------
   24.3 Ways of reaching the shop
   -------------------------------------------------------------------------- */

.st-reach {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--st-gap);
}

.st-reach__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    padding: 1.5rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-paper);
    color: inherit;
    text-decoration: none;
    transition: transform var(--st-speed) var(--st-ease),
                border-color var(--st-speed) var(--st-ease),
                box-shadow var(--st-speed) var(--st-ease);
}

a.st-reach__card:hover {
    transform: translateY(-3px);
    border-color: var(--st-accent);
    box-shadow: var(--st-lift);
    color: inherit;
}

.st-reach__mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: .75rem;
    border-radius: 16px;
    color: #fff;
    font-size: 1.35rem;
}

.st-reach__card--0 .st-reach__mark { background: linear-gradient(140deg, var(--st-tone-0), var(--st-tone-0-lit)); }
.st-reach__card--1 .st-reach__mark { background: linear-gradient(140deg, var(--st-tone-1), var(--st-tone-1-lit)); }
.st-reach__card--2 .st-reach__mark { background: linear-gradient(140deg, var(--st-tone-2), var(--st-tone-2-lit)); }
.st-reach__card--3 .st-reach__mark { background: linear-gradient(140deg, var(--st-tone-3), var(--st-tone-3-lit)); }

.st-reach__card strong {
    font-size: 1rem;
    font-weight: 700;
}

.st-reach__value {
    color: var(--st-accent-dark);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.st-reach__card small {
    color: var(--st-ink-faint);
    font-size: .8125rem;
    line-height: 1.7;
}

.st-reach__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
    color: var(--st-accent-dark);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
}

.st-reach__link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   24.4 What to have to hand
   -------------------------------------------------------------------------- */

.st-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--st-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.st-step {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.25rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
}

.st-step__number {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--st-accent-wash);
    color: var(--st-accent-dark);
    font-weight: 800;
}

.st-step strong { display: block; font-size: .9375rem; }

.st-step small {
    display: block;
    margin-top: .2rem;
    color: var(--st-ink-soft);
    font-size: .8125rem;
    line-height: 1.7;
}

/* On a light page the social marks need the page's own colours, not the
   footer's; the footer sets its own on top of these. */
.st-socials--wide .st-social {
    width: 48px;
    height: 48px;
    border-color: var(--st-line);
    background: var(--st-paper);
    color: var(--st-ink-soft);
    font-size: 1.2rem;
}

.st-socials--wide .st-social:hover {
    border-color: transparent;
    background: var(--st-accent);
    color: #fff;
}

/* ==========================================================================
   25. The basket, the checkout and the orders
   ========================================================================== */

.st-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The lines on one side, what it comes to on the other. */
.st-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
    align-items: start;
    gap: clamp(1.25rem, 3vw, 2rem);
}

@media (max-width: 991.98px) {
    .st-checkout { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   25.1 A line in the basket
   -------------------------------------------------------------------------- */

.st-lines {
    display: grid;
    gap: .75rem;
}

/*
 * A basket line reads left to right as the four things it is: which part, how
 * many, what one costs, what that comes to. Stacking the last three into one
 * column left the row with a wide empty middle and a tall thin stack at the
 * end — which is a shape, not an answer.
 */
.st-line {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(.85rem, 2vw, 1.5rem);
    padding: 1rem 1.25rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    transition: border-color var(--st-speed) var(--st-ease);
}

.st-line:hover { border-color: var(--st-accent-wash); }

@media (max-width: 767.98px) {
    .st-line { grid-template-columns: 68px minmax(0, 1fr); }

    .st-line__qty,
    .st-line__money { grid-column: 2 / -1; }

    .st-line__money {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .75rem;
    }
}

.st-line__media {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--st-radius-sm);
    background: var(--st-paper-sunk);
}

.st-line__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .35rem;
}

.st-line__stamp {
    padding: .2rem;
    color: var(--st-accent-dark);
    font-family: ui-monospace, monospace;
    font-size: .7rem;
    font-weight: 800;
    text-align: center;
    overflow-wrap: anywhere;
}

.st-line__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    min-width: 0;
}

.st-line__brand {
    color: var(--st-accent);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.st-line__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}

.st-line__title a {
    color: inherit;
    text-decoration: none;
}

.st-line__title a:hover { color: var(--st-accent-dark); }

/*
 * Shrunk to its own width. As a full-width block with `dir="ltr"` the code
 * sat against the far edge of the row, adrift from the name it belongs to.
 */
.st-line__code {
    display: inline-block;
    color: var(--st-ink-faint);
    font-family: ui-monospace, monospace;
    font-size: .75rem;
    unicode-bidi: plaintext;
}

.st-line__qty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
}

.st-line__label {
    color: var(--st-ink-faint);
    font-size: .75rem;
    font-weight: 600;
}

.st-line__money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
    min-width: 8.5rem;
}

.st-line__unit {
    color: var(--st-ink-faint);
    font-size: .8125rem;
}

.st-line__total {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--st-ink);
}

/* While the new count is on its way to the server. */
.st-qty.is-saving { opacity: .55; }

.st-qty__save {
    padding: .45rem .7rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-sm);
    background: var(--st-paper-sunk);
    color: var(--st-ink-soft);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--st-speed) var(--st-ease),
                border-color var(--st-speed) var(--st-ease);
}

.st-qty__save:hover {
    border-color: var(--st-accent);
    color: var(--st-accent-dark);
}

.st-line__drop {
    padding: 0;
    border: 0;
    background: none;
    color: var(--st-ink-faint);
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
    transition: color var(--st-speed) var(--st-ease);
}

.st-line__drop:hover { color: #b42318; }

/* --------------------------------------------------------------------------
   25.2 What it comes to
   -------------------------------------------------------------------------- */

.st-summary {
    position: sticky;
    top: calc(var(--st-nav-h) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-paper);
    box-shadow: var(--st-lift);
}

.st-summary__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.st-summary__lines {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--st-line);
    list-style: none;
    font-size: .875rem;
}

.st-summary__lines li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.st-summary__name {
    color: var(--st-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-summary__name small {
    color: var(--st-ink-faint);
    margin-inline-start: .25rem;
}

.st-totals {
    display: grid;
    gap: .55rem;
    margin: 0;
}

.st-totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .9375rem;
}

.st-totals__row dt { color: var(--st-ink-soft); }
.st-totals__row dd { margin: 0; font-weight: 600; }

.st-totals__row--off dd { color: #17603a; }

.st-totals__pending {
    color: var(--st-ink-faint);
    font-size: .8125rem;
    font-weight: 500;
}

.st-totals__row--sum {
    margin-top: .35rem;
    padding-top: .75rem;
    border-top: 1px solid var(--st-line);
    font-size: 1.15rem;
}

.st-totals__row--sum dt { color: var(--st-ink); font-weight: 700; }
.st-totals__row--sum dd { font-weight: 800; color: var(--st-accent-dark); }

.st-totals__nudge {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .6rem .8rem;
    border-radius: var(--st-radius-sm);
    background: var(--st-accent-wash);
    color: var(--st-accent-dark);
    font-size: .8125rem;
    font-weight: 600;
}

.st-summary__note {
    margin: 0;
    color: var(--st-ink-faint);
    font-size: .8125rem;
    line-height: 1.8;
    text-align: center;
}

.st-summary__back {
    color: var(--st-ink-soft);
    font-size: .875rem;
    text-align: center;
    text-decoration: none;
}

.st-summary__back:hover { color: var(--st-accent-dark); }

/* The discount code. */
.st-coupon__row {
    display: flex;
    gap: .5rem;
    margin-top: .35rem;
}

.st-coupon__row .st-input { flex: 1 1 auto; }

.st-coupon__applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .8rem;
    border: 1px dashed var(--st-accent);
    border-radius: var(--st-radius-sm);
    background: var(--st-accent-wash);
    color: var(--st-accent-dark);
    font-size: .875rem;
}

.st-coupon__drop {
    padding: 0;
    border: 0;
    background: none;
    color: var(--st-ink-soft);
    font: inherit;
    font-size: .8125rem;
    text-decoration: underline;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   25.3 The three decisions
   -------------------------------------------------------------------------- */

.st-steps-panel {
    display: grid;
    gap: 1rem;
}

.st-panel {
    padding: 1.5rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-paper);
}

.st-panel + .st-panel,
form + .st-panel { margin-top: 1rem; }

/*
 * One rhythm for everything inside a step. Without it the note field lands
 * hard against the last payment option and reads as a fourth way to pay.
 */
.st-panel > * + * { margin-top: 1.25rem; }

.st-panel__head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.st-panel__step {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--st-accent);
    color: #fff;
    font-weight: 800;
    font-size: .9375rem;
}

.st-panel__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.st-panel__head .st-badge { margin-inline-start: auto; }

.st-panel__text {
    margin: 0 0 1rem;
    color: var(--st-ink-soft);
    font-size: .9375rem;
}

.st-panel__text--warn { color: #92600b; }

.st-choices {
    display: grid;
    gap: .5rem;
}

.st-choice {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    cursor: pointer;
    transition: border-color var(--st-speed) var(--st-ease),
                background var(--st-speed) var(--st-ease);
}

.st-choice:hover { border-color: var(--st-accent); }

/*
 * The dot the browser draws is a grey ring nobody notices at a glance, so the
 * whole row carries the answer: picking one has to be visible from across the
 * screen, and it has to happen the moment it is clicked rather than after a
 * round trip.
 */
.st-choice input[type="radio"] {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--st-accent);
    cursor: inherit;
}

.st-choice.is-current,
.st-choice:has(input:checked) {
    border-color: var(--st-accent);
    background: var(--st-accent-wash);
    box-shadow: inset 0 0 0 1px var(--st-accent);
}

.st-choice.is-off {
    opacity: .55;
    cursor: not-allowed;
    background: var(--st-paper-sunk);
}

.st-choice.is-off:hover { border-color: var(--st-line); }

.st-choice__body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.st-choice__body strong { font-size: .9375rem; }

.st-choice__body small {
    color: var(--st-ink-soft);
    font-size: .8125rem;
}

.st-choice__price {
    margin-inline-start: auto;
    font-weight: 800;
    color: var(--st-accent-dark);
}

/*
 * With scripting, choosing is the decision and the confirm button is noise.
 * The class is added by the script, so without it the button stays.
 */
.st-choices.is-autopick .st-choices__confirm { display: none; }

.st-choices.is-saving { opacity: .6; pointer-events: none; }

.st-choices__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: .5rem;
}

/*
 * The note and the button that ends the order are not payment options, so a
 * rule separates them from the three above.
 */
.st-panel__part {
    padding-top: 1.25rem;
    border-top: 1px solid var(--st-line);
}

.st-panel__text:last-child { margin-bottom: 0; }

/*
 * A step waiting on the one above it. A bare sentence in a tall white box
 * reads as a step that failed; a framed one reads as a step whose turn has
 * not come.
 */
.st-panel__wait {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1.125rem 1.25rem;
    border: 1px dashed var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper-sunk);
}

.st-panel__wait i {
    flex: none;
    font-size: 1.375rem;
    color: var(--st-ink-faint);
}

.st-panel__wait p {
    margin: 0;
    color: var(--st-ink-soft);
    font-size: .9375rem;
}

.st-panel__wait--warn {
    border-style: solid;
    border-color: #e6c15a;
    background: #fdf7e6;
}

.st-panel__wait--warn i,
.st-panel__wait--warn p { color: #92600b; }

.st-choices__add {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--st-accent-dark);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
}

/*
 * The buy row. The count and its button sit on one baseline inside a framed
 * block, so the part page has one obvious thing to do rather than three
 * buttons of equal weight scattered under the price.
 */
.st-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin: 1.5rem 0 0;
    padding: 1.15rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-paper-sunk);
}

.st-buy__count {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.st-buy__label {
    color: var(--st-ink-soft);
    font-size: .8125rem;
    font-weight: 600;
}

.st-buy__label span {
    color: var(--st-ink-faint);
    font-weight: 500;
}

.st-buy .st-btn { flex: 1 1 12rem; }

/*
 * The two below carry the same weight as each other and split the row, so the
 * block under the price reads as one column of decisions rather than as three
 * buttons of three different widths.
 */
.st-part__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .75rem;
}

.st-part__actions .st-btn { flex: 1 1 12rem; }

/* --------------------------------------------------------------------------
   25.6 The quantity stepper
   --------------------------------------------------------------------------
   The browser's own spinner appears only on hover, is a different size in
   every browser, and is all but unhittable on a touch screen. These are the
   same behaviour with a target somebody can actually press.
   -------------------------------------------------------------------------- */

.st-stepper {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-sm);
    background: var(--st-paper);
    transition: border-color var(--st-speed) var(--st-ease),
                box-shadow var(--st-speed) var(--st-ease);
}

.st-stepper:focus-within {
    border-color: var(--st-accent);
    box-shadow: 0 0 0 3px var(--st-accent-wash);
}

.st-stepper__input {
    width: 4.5rem;
    padding: .6rem .5rem;
    border: 0;
    background: transparent;
    color: var(--st-ink);
    font: inherit;
    font-weight: 700;
    text-align: center;
}

.st-stepper__input:focus { outline: 0; }

/* The browser's own arrows are replaced, not doubled up. */
.st-stepper__input::-webkit-outer-spin-button,
.st-stepper__input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.st-stepper__input[type='number'] { appearance: textfield; }

.st-stepper__arrows {
    display: flex;
    flex-direction: column;
    border-inline-start: 1px solid var(--st-line);
}

.st-stepper__arrow {
    display: grid;
    place-items: center;
    width: 2rem;
    flex: 1 1 50%;
    padding: 0;
    border: 0;
    background: var(--st-paper-sunk);
    color: var(--st-ink-soft);
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--st-speed) var(--st-ease),
                color var(--st-speed) var(--st-ease);
}

.st-stepper__arrow + .st-stepper__arrow {
    border-top: 1px solid var(--st-line);
}

.st-stepper__arrow:hover {
    background: var(--st-accent);
    color: #fff;
}

.st-part__per {
    color: var(--st-ink-faint);
    font-size: .875rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   25.4 Notices
   -------------------------------------------------------------------------- */

.st-notice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: var(--st-radius);
    font-size: .9375rem;
}

.st-notice--warn {
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92600b;
}

.st-notice > i { font-size: 1.15rem; }
.st-notice strong { display: block; }

.st-notice ul {
    margin: .35rem 0 0;
    padding-inline-start: 1.1rem;
}

/* --------------------------------------------------------------------------
   25.5 An order
   -------------------------------------------------------------------------- */

.st-order {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
    align-items: start;
    gap: clamp(1.25rem, 3vw, 2rem);
}

@media (max-width: 991.98px) {
    .st-order { grid-template-columns: 1fr; }
}

.st-order__main {
    display: grid;
    gap: 1rem;
}

.st-badge {
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 700;
}

.st-badge--info { background: var(--st-accent-wash); color: var(--st-accent-dark); }
.st-badge--success { background: #e8f6ee; color: #17603a; }
.st-badge--warning { background: #fef3c7; color: #92600b; }
.st-badge--danger { background: #fee4e2; color: #b42318; }
.st-badge--secondary { background: var(--st-paper-sunk); color: var(--st-ink-soft); }
.st-badge--primary { background: var(--st-accent); color: #fff; }

/* The order's own history, drawn from what actually happened to it. */
.st-track {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-track__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding-bottom: 1.1rem;
}

.st-track__step:last-child { padding-bottom: 0; }

/* The thread between the dots, drawn on every step but the last. */
.st-track__step:not(:last-child)::before {
    content: '';
    position: absolute;
    inset-inline-start: 6px;
    top: 1.1rem;
    bottom: 0;
    width: 2px;
    background: var(--st-line);
}

.st-track__dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: .25rem;
    border-radius: 50%;
    background: var(--st-accent);
    box-shadow: 0 0 0 4px var(--st-accent-wash);
}

.st-track__step strong { display: block; font-size: .9375rem; }

.st-track__step small {
    display: block;
    margin-top: .15rem;
    color: var(--st-ink-faint);
    font-size: .8125rem;
}

/*
 * The road the order travels. Every step is drawn, reached or not, because
 * half the answer to "where is my order" is what has not happened yet.
 */
.st-road {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-road__step {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    padding: .7rem 0;
}

/* The thread joining one mark to the next. */
.st-road__step:not(:last-child)::before {
    content: '';
    position: absolute;
    inset-inline-start: 12px;
    top: calc(50% + 13px);
    height: calc(100% - 26px);
    width: 2px;
    background: var(--st-line);
}

.st-road__step.is-done:not(:last-child)::before { background: var(--st-accent); }

.st-road__mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 2px solid var(--st-line);
    border-radius: 50%;
    background: var(--st-paper);
    color: #fff;
    font-size: .8125rem;
}

.st-road__pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--st-line);
}

.st-road__step.is-done .st-road__mark {
    border-color: var(--st-accent);
    background: var(--st-accent);
}

/* Where it stands now: the one step that should catch the eye. */
.st-road__step.is-now .st-road__mark {
    border-color: var(--st-accent);
    background: var(--st-paper);
    box-shadow: 0 0 0 4px var(--st-accent-wash);
}

.st-road__step.is-now .st-road__pip { background: var(--st-accent); }

.st-road__name { font-size: .9375rem; }

.st-road__step.is-now .st-road__name { font-weight: 800; }

.st-road__step.is-next .st-road__name,
.st-road__step.is-next .st-road__when { color: var(--st-ink-faint); }

.st-road__when {
    color: var(--st-ink-soft);
    font-size: .8125rem;
}

.st-panel__count {
    margin-inline-start: auto;
    color: var(--st-ink-faint);
    font-size: .8125rem;
}

.st-order__lines {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-order__line {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--st-line);
    font-size: .9375rem;
}

.st-order__line:first-child { padding-top: 0; }
.st-order__line:last-child { border-bottom: 0; padding-bottom: 0; }

.st-order__thumb {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-sm);
    background: var(--st-paper-sunk);
    color: var(--st-ink-faint);
    font-size: 1.25rem;
}

.st-order__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.st-order__name strong { display: block; font-weight: 700; }

.st-order__name small {
    display: block;
    color: var(--st-ink-faint);
    font-family: ui-monospace, monospace;
    font-size: .75rem;
}

.st-order__each { color: var(--st-ink-soft); }

.st-order__line-total { font-weight: 700; }

@media (max-width: 575.98px) {
    .st-order__line {
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    .st-order__each { grid-column: 2; }
    .st-order__thumb { width: 48px; height: 48px; }
}

.st-order__facts {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--st-line);
    font-size: .875rem;
}

.st-order__facts dt { color: var(--st-ink-faint); }
.st-order__facts dd { margin: .1rem 0 0; font-weight: 600; }

.st-order-list {
    display: grid;
    gap: .6rem;
}

.st-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--st-speed) var(--st-ease),
                transform var(--st-speed) var(--st-ease);
}

.st-order-row:hover {
    transform: translateY(-2px);
    border-color: var(--st-accent);
    color: inherit;
}

@media (max-width: 767.98px) {
    .st-order-row { grid-template-columns: minmax(0, 1fr) auto; }
    .st-order-row__count { display: none; }
}

.st-order-row__ref strong { display: block; font-weight: 800; }

.st-order-row__ref small {
    color: var(--st-ink-faint);
    font-size: .8125rem;
}

.st-order-row__count,
.st-order-row__total {
    color: var(--st-ink-soft);
    font-size: .9375rem;
}

.st-order-row__total { font-weight: 800; color: var(--st-ink); }

.st-order-row__go {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--st-paper-sunk);
    color: var(--st-ink-soft);
}

/* The bag in the navigation. */
.st-nav__icon--cart { position: relative; }

.st-nav__count {
    position: absolute;
    inset-inline-end: -2px;
    top: -2px;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border-radius: 999px;
    background: var(--st-tone-2-lit);
    color: #fff;
    font-size: .6875rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* ==========================================================================
   26. The page about the shop
   --------------------------------------------------------------------------
   What the shop is, beside a picture of what it sells. The photographs are the
   shop's own aisle pictures rather than a stock image of a warehouse — a page
   about a business that opens on somebody else's building is a page nobody
   believes twice.
   ========================================================================== */

/* On the page's own paper. No slab behind it. */
.st-about {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.st-about__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

@media (max-width: 991.98px) {
    .st-about__inner { grid-template-columns: 1fr; }
}

.st-about__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.st-about__title {
    margin: 0;
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.st-about__lede {
    margin: 0;
    max-width: 52ch;
    color: var(--st-ink-soft);
    font-size: clamp(1rem, 1.5vw, 1.0625rem);
    line-height: 2;
}

.st-about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .5rem;
}

.st-eyebrow--light {
    border-color: var(--st-line);
    background: var(--st-accent-wash);
    color: var(--st-accent-dark);
}

.st-crumbs--dark { color: var(--st-ink-faint); }
.st-crumbs--dark a { color: var(--st-ink-soft); }

/* --------------------------------------------------------------------------
   26.1 The collage
   --------------------------------------------------------------------------
   Three photographs on a small grid rather than a stack: one tall on the
   leading side, two beside it. Each is cropped to its cell, so pictures of
   wildly different shapes still line up.
   -------------------------------------------------------------------------- */

.st-collage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    aspect-ratio: 1 / .82;
}

@media (max-width: 575.98px) {
    .st-collage { aspect-ratio: 1 / 1; }
}

.st-collage__glow { display: none; }

.st-collage__frame {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-paper-sunk);
    transition: transform var(--st-speed) var(--st-ease),
                box-shadow var(--st-speed) var(--st-ease);
}

.st-collage__frame:hover {
    transform: translateY(-4px);
    box-shadow: var(--st-lift);
}

/* The first fills the leading column; the other two stack beside it. */
.st-collage__frame--0 { grid-row: 1 / span 2; }
.st-collage__frame--1 { grid-column: 2; grid-row: 1; }
.st-collage__frame--2 { grid-column: 2; grid-row: 2; }

/* One picture on its own should not leave two empty cells. */
.st-collage__frame--0:only-child { grid-column: 1 / -1; }

.st-collage__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-collage__frame figcaption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.75rem .9rem .7rem;
    background: linear-gradient(to top, rgba(6, 10, 20, .85), transparent);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
}

/* One figure, floating over the corner of the collage. */
.st-collage__badge {
    position: absolute;
    inset-inline-start: -1rem;
    bottom: -1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .9rem 1.15rem;
    border-radius: var(--st-radius);
    border: 1px solid var(--st-line);
    background: var(--st-paper);
    box-shadow: var(--st-lift);
    color: var(--st-ink);
}

.st-collage__badge b {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--st-accent-dark);
}

.st-collage__badge small {
    color: var(--st-ink-faint);
    font-size: .75rem;
}

@media (max-width: 575.98px) {
    .st-collage__badge { inset-inline-start: auto; inset-inline-end: -.5rem; }
}

/* ==========================================================================
   27. What customers said, and what they kept
   ========================================================================== */

.st-stars {
    display: inline-flex;
    gap: .1rem;
    color: #f79009;
    font-size: .875rem;
}

.st-reviews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--st-gap);
}

.st-reviews:empty { display: none; }

.st-review {
    padding: 1.25rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
}

.st-review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.st-review__head strong { font-size: .9375rem; }

.st-review__head .st-stars { margin-inline-start: auto; }

/* The shop can see this person actually bought the part. */
.st-review__verified {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #e8f6ee;
    color: #17603a;
    font-size: .6875rem;
    font-weight: 700;
}

.st-review__title {
    margin: 0 0 .35rem;
    font-size: 1rem;
    font-weight: 700;
}

.st-review__body {
    margin: 0;
    color: var(--st-ink-soft);
    font-size: .9375rem;
    line-height: 1.85;
}

.st-review__when {
    display: block;
    margin-top: .6rem;
    color: var(--st-ink-faint);
    font-size: .75rem;
}

/*
 * A rating is a thing people press. Five radios drawn as stars: the chosen one
 * and every one below it light up through the plain sibling combinator, which
 * is why the markup counts down from five.
 */
.st-rate {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .25rem;
    margin-top: .35rem;
}

/* Off-screen rather than display:none, so it can still be tabbed to. */
.st-rate__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.st-rate__star {
    color: var(--st-line);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    transition: color var(--st-speed) var(--st-ease),
                transform var(--st-speed) var(--st-ease);
}

/* The one chosen, and everything under it. */
.st-rate__input:checked ~ .st-rate__star { color: #f0a500; }

/* The same again while the pointer is over it. */
.st-rate:hover .st-rate__star { color: var(--st-line); }
.st-rate__star:hover,
.st-rate__star:hover ~ .st-rate__star { color: #f0a500; }

.st-rate__star:hover { transform: scale(1.1); }

.st-rate__input:focus-visible + .st-rate__star {
    outline: 2px solid var(--st-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.st-review-form {
    /*
     * Centred. With a max width and no margin it pinned itself to the start
     * edge and left half the band empty beside it.
     */
    max-width: 38rem;
    margin: var(--st-gap-lg) auto 0;
    padding: 1.75rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-paper);
    box-shadow: var(--st-lift);
}

.st-review-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.st-review-form legend { padding: 0; }

.st-review-form .st-field + .st-field { margin-top: 1rem; }

.st-review-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--st-line);
}

.st-review-form__foot .st-hint { margin: 0; }

.st-review-form__title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.st-reviews__signin {
    margin-top: var(--st-gap-lg);
    color: var(--st-ink-soft);
    font-size: .9375rem;
}

.st-reviews__signin a {
    color: var(--st-accent-dark);
    font-weight: 700;
}

/* The heart, once it is filled. */
.st-btn.is-kept {
    border-color: #f97066;
    color: #b42318;
}