/*
 * RedBrand storefront styles.
 * Direction: black & white + one signature red, product photography first.
 * Tokens contrast-checked (tastemaker check_contrast.py): ink/white 18.4:1, red/white 5.5:1,
 * muted/white 6.4:1, red/blush 4.8:1. See .tastemaker/style-lock.md.
 * Written with logical properties so the same rules serve LTR (English) and RTL (Arabic).
 */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-latin-var.woff2") format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Brand serif: the client's Cambria where installed (Windows, macOS with Office), otherwise
   Caladea, an open-licensed font metric-compatible with Cambria. */
@font-face {
    font-family: "RB Serif";
    src: local("Cambria"), url("../fonts/caladea-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "RB Serif";
    src: local("Cambria Bold"), local("Cambria-Bold"), url("../fonts/caladea-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "RB Serif";
    src: local("Cambria Italic"), local("Cambria-Italic"), url("../fonts/caladea-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
    --rb-ink: #141414;
    --rb-white: #ffffff;
    --rb-surface: #f3f3f1;
    --rb-bar: #e4e4e2;
    --rb-line: #e2e2df;
    --rb-line-strong: #8a8a8a;
    --rb-muted: #5f5f5f;
    --rb-red: #d4001f;
    --rb-blush: #fdecee;
    --rb-green: #1d6b3a;
    --rb-footer: #101010;
    --rb-footer-text: #b8b8b8;

    --rb-font: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    /* Headings, product names, display text. Arabic glyphs fall through to Plex Sans Arabic. */
    --rb-serif: "RB Serif", Cambria, Caladea, Georgia, "IBM Plex Sans Arabic", serif;

    --rb-text-xs: 0.75rem;
    --rb-text-sm: 0.875rem;
    --rb-text-md: 1rem;
    --rb-text-lg: 1.125rem;
    --rb-text-xl: 1.5rem;
    --rb-text-2xl: 2rem;

    --rb-space-1: 0.25rem;
    --rb-space-2: 0.5rem;
    --rb-space-3: 0.75rem;
    --rb-space-4: 1rem;
    --rb-space-5: 1.5rem;
    --rb-space-6: 2rem;
    --rb-space-7: 3rem;
    --rb-space-8: 4rem;

    --rb-radius: 6px;
    --rb-radius-lg: 10px;
    --rb-shadow: 0 1px 2px rgb(20 20 20 / 6%), 0 8px 24px rgb(20 20 20 / 10%);
    --rb-container: 1320px;
    --rb-ease: cubic-bezier(0.2, 0, 0, 1);
}

[dir="rtl"] {
    --rb-font: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}

body {
    font-family: var(--rb-font);
    color: var(--rb-ink);
    background: var(--rb-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.rb-container {
    width: 100%;
    max-width: var(--rb-container);
    margin-inline: auto;
    padding-inline: var(--rb-space-4);
}

@media (min-width: 768px) {
    .rb-container {
        padding-inline: var(--rb-space-5);
    }
}

.rb-icon {
    flex: none;
    display: block;
}

[dir="rtl"] .rb-flip {
    transform: scaleX(-1);
}

:where(.rb-header, .rb-drawer, .rb-footer) a {
    color: inherit;
    text-decoration: none;
}

:where(.rb-header, .rb-drawer, .rb-footer) :focus-visible {
    outline: 2px solid var(--rb-ink);
    outline-offset: 2px;
    border-radius: 4px;
}

.rb-footer :focus-visible {
    outline-color: var(--rb-white);
}

/* ---------------------------------------------------------------- Wordmark */

.rb-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: var(--rb-ink);
    /* The logo is locked to Plex Sans in every language and never follows the body font. */
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

[dir="rtl"] .rb-wordmark {
    /* The wordmark is a Latin logotype; keep its letter order in RTL pages. */
    direction: ltr;
}

.rb-wordmark__dot {
    width: 0.32em;
    height: 0.32em;
    border-radius: 50%;
    background: var(--rb-red);
}

/* ------------------------------------------------------------------ Header */

.rb-header {
    position: sticky;
    top: 0;
    z-index: 990;
    background: var(--rb-white);
}

.rb-header.is-stuck {
    box-shadow: 0 1px 0 var(--rb-line), 0 6px 16px rgb(20 20 20 / 6%);
}

.rb-header__main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "menu brand actions"
        "search search search"
        "pills pills pills";
    align-items: center;
    column-gap: var(--rb-space-3);
    row-gap: var(--rb-space-3);
    padding-block: var(--rb-space-3);
}

/* Grid items default to min-width:auto; the scrolling pill row would otherwise widen the
   grid to its full content width and push the actions off-screen on phones. */
.rb-header__main > * {
    min-width: 0;
}

.rb-header__menu {
    grid-area: menu;
}

.rb-header__main > .rb-wordmark {
    grid-area: brand;
    justify-self: center;
}

.rb-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--rb-ink);
    cursor: pointer;
}

@media (hover: hover) {
    .rb-icon-btn:hover {
        background: var(--rb-surface);
    }
}

.rb-count {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-end: 1px;
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    border-radius: 9px;
    background: var(--rb-red);
    color: var(--rb-white);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.rb-count.is-zero {
    display: none;
}

/* Department pills */
.rb-pills {
    grid-area: pills;
    display: flex;
    gap: var(--rb-space-2);
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--rb-space-4) * -1);
    padding-inline: var(--rb-space-4);
    /* Fade the trailing edge so the row reads as scrollable on phones. */
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
}

[dir="rtl"] .rb-pills {
    -webkit-mask-image: linear-gradient(to left, #000 85%, transparent);
    mask-image: linear-gradient(to left, #000 85%, transparent);
}

.rb-pills::-webkit-scrollbar {
    display: none;
}

.rb-pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding-inline: var(--rb-space-4);
    border: 1px solid var(--rb-ink);
    border-radius: var(--rb-radius);
    color: var(--rb-ink);
    font-size: var(--rb-text-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 150ms var(--rb-ease), color 150ms var(--rb-ease);
}

.rb-pill.is-active {
    background: var(--rb-ink);
    color: var(--rb-white);
}

@media (hover: hover) {
    .rb-pill:not(.is-active):hover {
        background: var(--rb-surface);
    }
}

/* Search */
.rb-search {
    grid-area: search;
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    border-radius: var(--rb-radius);
    background: var(--rb-surface);
}

.rb-search__icon {
    position: absolute;
    inset-inline-start: var(--rb-space-3);
    color: var(--rb-muted);
    pointer-events: none;
}

/* Doubled class: the legacy theme styles every input globally (border, white fill, padding). */
.rb-search .rb-search__input.rb-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 var(--rb-space-2);
    padding-inline-start: 40px;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    box-shadow: none;
    color: var(--rb-ink);
    font: inherit;
    font-size: var(--rb-text-sm);
    line-height: normal;
}

.rb-search__input::placeholder {
    color: var(--rb-muted);
}

.rb-search__input::-webkit-search-cancel-button {
    display: none;
}

.rb-search__input:focus {
    outline: none;
}

.rb-search:focus-within {
    box-shadow: inset 0 0 0 1.5px var(--rb-ink);
}

.rb-search .rb-search__submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--rb-ink);
    cursor: pointer;
}

/* Header actions */
.rb-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: var(--rb-space-1);
}

.rb-actions__account,
.rb-actions__wishlist,
.rb-actions .rb-lang {
    display: none;
}

.rb-lang__link {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding-inline: var(--rb-space-2);
    border-radius: var(--rb-radius);
    font-size: var(--rb-text-sm);
    font-weight: 500;
    white-space: nowrap;
}

@media (hover: hover) {
    .rb-lang__link:hover {
        background: var(--rb-surface);
    }
}

/* Category bar */
.rb-catbar {
    display: none;
    background: var(--rb-bar);
}

.rb-catbar__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rb-catbar__item {
    position: relative;
}

.rb-catbar__link {
    display: flex;
    align-items: center;
    gap: var(--rb-space-1);
    height: 44px;
    padding-inline: var(--rb-space-4);
    font-size: var(--rb-text-sm);
    font-weight: 500;
    white-space: nowrap;
}

.rb-catbar__link.is-sale {
    color: var(--rb-red);
}

.rb-catbar__item.has-menu > .rb-catbar__link .rb-icon {
    transition: transform 150ms var(--rb-ease);
}

.rb-catbar__menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 5;
    min-width: 220px;
    margin: 0;
    padding: var(--rb-space-2) 0;
    list-style: none;
    border: 1px solid var(--rb-line);
    border-radius: 0 0 var(--rb-radius) var(--rb-radius);
    background: var(--rb-white);
    box-shadow: var(--rb-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 150ms var(--rb-ease), transform 150ms var(--rb-ease), visibility 0s linear 150ms;
}

.rb-catbar__menu a {
    display: block;
    padding: 9px var(--rb-space-5);
    font-size: var(--rb-text-sm);
    color: var(--rb-ink);
}

.rb-catbar__menu-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--rb-text-xs) !important;
}

@media (hover: hover) {
    .rb-catbar__link:hover,
    .rb-catbar__menu a:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

.rb-catbar__item.has-menu:hover > .rb-catbar__menu,
.rb-catbar__item.has-menu:focus-within > .rb-catbar__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.rb-catbar__item.has-menu:hover > .rb-catbar__link .rb-icon,
.rb-catbar__item.has-menu:focus-within > .rb-catbar__link .rb-icon {
    transform: rotate(180deg);
}

@media (min-width: 640px) {
    .rb-actions__wishlist {
        display: inline-flex;
    }
}

@media (min-width: 1024px) {
    .rb-header__main {
        grid-template-columns: auto auto minmax(200px, 1fr) auto;
        grid-template-areas: "brand pills search actions";
        column-gap: var(--rb-space-5);
        row-gap: 0;
        min-height: 76px;
    }

    .rb-header__menu {
        display: none;
    }

    .rb-header__main > .rb-wordmark {
        justify-self: start;
        font-size: 1.5rem;
    }

    .rb-pills,
    [dir="rtl"] .rb-pills {
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .rb-search {
        max-width: 360px;
        justify-self: end;
        width: 100%;
    }

    .rb-actions__account,
    .rb-actions .rb-lang {
        display: inline-flex;
    }

    .rb-catbar {
        display: block;
    }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
    .rb-pill {
        padding-inline: var(--rb-space-3);
    }
}

/* ------------------------------------------------------------------ Drawer */

.rb-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.rb-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(20 20 20 / 45%);
    opacity: 0;
    transition: opacity 200ms var(--rb-ease);
}

.rb-drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    display: flex;
    flex-direction: column;
    width: min(86vw, 360px);
    background: var(--rb-white);
    transform: translateX(-100%);
    transition: transform 240ms var(--rb-ease);
    overflow-y: auto;
    overscroll-behavior: contain;
}

[dir="rtl"] .rb-drawer__panel {
    transform: translateX(100%);
}

.rb-drawer.is-open .rb-drawer__backdrop {
    opacity: 1;
}

.rb-drawer.is-open .rb-drawer__panel {
    transform: none;
}

.rb-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rb-space-3) var(--rb-space-3) var(--rb-space-3) var(--rb-space-4);
    border-bottom: 1px solid var(--rb-line);
}

.rb-drawer__nav {
    flex: 1;
    padding-block: var(--rb-space-2);
}

.rb-drawer__group {
    border-bottom: 1px solid var(--rb-line);
}

.rb-drawer__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding-inline: var(--rb-space-4);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.rb-drawer__summary::-webkit-details-marker {
    display: none;
}

.rb-drawer__group[open] .rb-drawer__summary .rb-icon {
    transform: rotate(180deg);
}

.rb-drawer__list {
    margin: 0;
    padding: 0 0 var(--rb-space-3);
    list-style: none;
}

.rb-drawer__list a {
    display: block;
    padding: 10px var(--rb-space-5);
    color: var(--rb-ink);
    font-size: var(--rb-text-sm);
}

.rb-drawer__all {
    font-weight: 600;
}

.rb-drawer__foot {
    display: grid;
    gap: var(--rb-space-1);
    padding: var(--rb-space-4);
    border-top: 1px solid var(--rb-line);
}

.rb-drawer__link {
    display: flex;
    align-items: center;
    gap: var(--rb-space-3);
    min-height: 44px;
    font-size: var(--rb-text-sm);
    font-weight: 500;
}

.rb-drawer__lang .rb-lang__link {
    padding-inline: 0;
}

html.rb-scroll-lock {
    overflow: hidden;
}

/* ------------------------------------------------------------------ Footer */

.rb-footer {
    margin-top: var(--rb-space-8);
    padding-block: var(--rb-space-7) var(--rb-space-5);
    background: var(--rb-footer);
    color: var(--rb-footer-text);
    font-size: var(--rb-text-sm);
}

.rb-footer .rb-wordmark {
    color: var(--rb-white);
}

.rb-footer__grid {
    display: grid;
    gap: var(--rb-space-6) var(--rb-space-5);
    grid-template-columns: 1fr;
}

.rb-footer__about {
    max-width: 34ch;
    margin: var(--rb-space-4) 0 0;
    line-height: 1.6;
}

.rb-footer__title {
    margin: 0 0 var(--rb-space-4);
    color: var(--rb-white);
    font-size: var(--rb-text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rb-footer__links {
    display: grid;
    gap: var(--rb-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rb-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: var(--rb-space-2);
    color: var(--rb-footer-text);
}

@media (hover: hover) {
    .rb-footer__links a:hover,
    .rb-footer__social a:hover,
    .rb-footer .rb-lang__link:hover {
        color: var(--rb-white);
        background: transparent;
    }
}

.rb-footer__address {
    line-height: 1.6;
}

.rb-footer__lang {
    margin-top: var(--rb-space-3);
}

.rb-footer .rb-lang__link {
    height: auto;
    padding: 6px 12px;
    border: 1px solid #3a3a3a;
    color: var(--rb-white);
}

.rb-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rb-space-4);
    margin-top: var(--rb-space-7);
    padding-top: var(--rb-space-5);
    border-top: 1px solid #2a2a2a;
}

.rb-footer__copyright {
    margin: 0;
}

.rb-footer__social {
    display: flex;
    gap: var(--rb-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rb-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--rb-footer-text);
}

@media (min-width: 640px) {
    .rb-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .rb-footer__grid {
        grid-template-columns: 1.6fr repeat(4, 1fr);
    }
}

/* ----------------------------------------------------------------- Buttons */

.rb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rb-space-2);
    height: 44px;
    padding-inline: var(--rb-space-5);
    border: 1px solid var(--rb-ink);
    border-radius: var(--rb-radius);
    background: var(--rb-ink);
    color: var(--rb-white);
    font: inherit;
    font-size: var(--rb-text-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms var(--rb-ease), color 150ms var(--rb-ease);
}

.rb-btn--outline {
    background: var(--rb-white);
    color: var(--rb-ink);
}

@media (hover: hover) {
    .rb-btn:hover {
        background: #2c2c2c;
        color: var(--rb-white);
    }

    .rb-btn--outline:hover {
        background: var(--rb-surface);
        color: var(--rb-ink);
    }
}

.rb-btn:focus-visible,
.rb-select:focus-visible {
    outline: 2px solid var(--rb-ink);
    outline-offset: 2px;
}

/* -------------------------------------------------------------- Breadcrumb */

.rb-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rb-space-1) var(--rb-space-4);
    padding-block: var(--rb-space-4) var(--rb-space-2);
    font-size: 0.8125rem;
    color: var(--rb-muted);
}

.rb-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rb-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rb-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--rb-space-1);
}

.rb-breadcrumb__item a {
    color: var(--rb-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rb-breadcrumb__item [aria-current] {
    color: var(--rb-ink);
}

.rb-breadcrumb__sep {
    color: var(--rb-line-strong);
}

.rb-breadcrumb__count {
    color: var(--rb-ink);
}

/* -------------------------------------------------------------------- Shop */

.rb-shop {
    padding-block: var(--rb-space-3) var(--rb-space-7);
}

.rb-shop__layout {
    display: grid;
    gap: var(--rb-space-6);
}

.rb-shop__filters-title {
    margin: 0 0 var(--rb-space-2);
    font-size: var(--rb-text-lg);
    font-weight: 600;
}

.rb-shop__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rb-space-3);
    margin-bottom: var(--rb-space-5);
}

.rb-shop__title {
    margin: 0;
    font-size: var(--rb-text-xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--rb-ink);
}

.rb-shop__controls {
    display: flex;
    align-items: center;
    gap: var(--rb-space-2);
}

.rb-shop__filter-btn {
    height: 38px;
}

.rb-shop__toolbar--compact {
    padding-bottom: var(--rb-space-3);
    border-bottom: 1px solid var(--rb-line);
}

.rb-shop__count {
    margin: 0;
    color: var(--rb-muted);
    font-size: var(--rb-text-sm);
}

.rb-shop__intro {
    max-width: 72ch;
    margin-bottom: var(--rb-space-5);
    color: var(--rb-muted);
    font-size: var(--rb-text-sm);
    line-height: 1.6;
}

.rb-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--rb-space-2);
    margin: 0;
    font-size: var(--rb-text-sm);
}

.rb-select {
    height: 38px;
    min-width: 170px;
    padding-inline: var(--rb-space-3) 36px;
    border: 1px solid var(--rb-ink);
    border-radius: var(--rb-radius);
    background: var(--rb-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--rb-ink);
    font: inherit;
    font-size: var(--rb-text-sm);
    cursor: pointer;
    appearance: none;
}

[dir="rtl"] .rb-select {
    background-position: left 12px center;
}

/* Filters (markup comes from the ecommerce plugin; restyled here) */
:is(.rb-shop__filters, .bb-shop-detail) .bb-shop-sidebar,
:is(.rb-shop__filters, .bb-shop-detail) .bb-product-form-filter {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter,
:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-attribute-item {
    margin: 0;
    padding: var(--rb-space-4) 0;
    border: 0;
    border-bottom: 1px solid var(--rb-line);
    border-radius: 0;
    background: none;
}

/* Category folder icons add noise; the expand toggles stay. */
:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-link > svg {
    display: none;
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-link {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
}

:is(.rb-shop__filters, .bb-shop-detail) [data-bb-toggle="toggle-product-categories-tree"] {
    margin-inline-start: auto;
    color: var(--rb-muted);
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-title {
    margin: 0 0 var(--rb-space-3);
    padding: 0;
    border: 0;
    font-size: var(--rb-text-sm);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--rb-ink);
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-title::before,
:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-title::after {
    display: none;
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-items {
    display: grid;
    gap: var(--rb-space-2);
    max-height: 260px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-items .bb-product-filter-items {
    max-height: none;
    margin-top: var(--rb-space-2);
    padding-inline-start: var(--rb-space-4);
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rb-space-2);
    margin: 0;
    padding: 0;
    font-size: var(--rb-text-sm);
    color: var(--rb-ink);
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-item label {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-item label::before,
:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-item label::after {
    display: none;
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-item input[type="checkbox"],
:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-item input[type="radio"] {
    position: static;
    width: 16px;
    height: 16px;
    margin: 0;
    opacity: 1;
    accent-color: var(--rb-ink);
    cursor: pointer;
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-link {
    color: var(--rb-ink);
    font-size: var(--rb-text-sm);
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-filter-link.active {
    font-weight: 600;
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-product-attribute-swatch-display {
    width: 16px;
    height: 16px;
    margin-inline-start: auto;
    border: 1px solid var(--rb-line-strong);
    border-radius: 50%;
}

:is(.rb-shop__filters, .bb-shop-detail) .bb-filter-offcanvas-close {
    display: none;
}

@media (max-width: 1023.98px) {
    /* The filter column becomes an off-canvas panel; it must not take a grid row. */
    .rb-shop__filters {
        display: contents;
    }

    .rb-shop__filters-title {
        display: none;
    }

    :is(.rb-shop__filters, .bb-shop-detail) .bb-filter-offcanvas-area {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 1100;
        width: min(86vw, 360px);
        padding: var(--rb-space-4);
        overflow-y: auto;
        background: var(--rb-white);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 240ms var(--rb-ease), visibility 0s linear 240ms;
    }

    [dir="rtl"] :is(.rb-shop__filters, .bb-shop-detail) .bb-filter-offcanvas-area {
        transform: translateX(100%);
    }

    :is(.rb-shop__filters, .bb-shop-detail) .bb-filter-offcanvas-area.offcanvas-opened {
        transform: none;
        visibility: visible;
        transition-delay: 0s;
    }

    :is(.rb-shop__filters, .bb-shop-detail) .bb-filter-offcanvas-close {
        display: flex;
        justify-content: flex-end;
    }

    :is(.rb-shop__filters, .bb-shop-detail) .bb-filter-offcanvas-close-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--rb-space-1);
        padding: var(--rb-space-2);
        border: 0;
        background: none;
        font-size: var(--rb-text-sm);
        font-weight: 600;
    }
}

@media (min-width: 1024px) {
    .rb-shop__layout.has-filters {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: var(--rb-space-7);
    }

    .rb-shop__filter-btn:not(.is-always) {
        display: none;
    }

    .rb-shop__filters {
        align-self: start;
        /* Line the "Filters" heading up with the page title. */
        padding-top: 6px;
    }

    :is(.rb-shop__filters, .bb-shop-detail) .bb-filter-offcanvas-area {
        position: static;
        width: auto;
        padding: 0;
        transform: none;
        visibility: visible;
        background: none;
    }
}

/* Active filter chips */
.bb-product-filter-result {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rb-space-2);
    margin-bottom: var(--rb-space-5);
}

.bb-product-filter-clear,
.bb-product-filter-clear-all {
    display: inline-flex;
    align-items: center;
    gap: var(--rb-space-1);
    height: 32px;
    padding-inline: var(--rb-space-3);
    border: 1px solid var(--rb-line-strong);
    border-radius: var(--rb-radius);
    color: var(--rb-ink);
    font-size: 0.8125rem;
}

.bb-product-filter-clear-all {
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* -------------------------------------------------------------- Card grid */

.rb-grid {
    --rb-grid-gap: var(--rb-space-3);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rb-space-6) var(--rb-grid-gap);
}

@media (min-width: 768px) {
    .rb-grid {
        --rb-grid-gap: var(--rb-space-5);
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .rb-grid {
        grid-template-columns: repeat(var(--rb-grid-cols, 4), minmax(0, 1fr));
    }
}

.rb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rb-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--rb-radius);
    background: var(--rb-surface);
}

.rb-card__image,
.rb-card__image img {
    display: block;
    width: 100%;
    height: 100%;
}

.rb-card__image img {
    object-fit: cover;
    transition: transform 300ms var(--rb-ease);
}

@media (hover: hover) {
    .rb-card:hover .rb-card__image img {
        transform: scale(1.03);
    }
}

.rb-card.is-out-of-stock .rb-card__image img {
    opacity: 0.55;
}

.rb-card__wish {
    position: absolute;
    inset-block-start: var(--rb-space-2);
    inset-inline-end: var(--rb-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 88%);
    color: var(--rb-ink);
    cursor: pointer;
}

.rb-card__wish.active {
    color: var(--rb-red);
}

.rb-card__wish.active svg {
    fill: currentColor;
}

.rb-card__tags {
    position: absolute;
    inset-block-end: var(--rb-space-2);
    inset-inline-start: var(--rb-space-2);
    display: flex;
    gap: var(--rb-space-1);
}

.rb-tag {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.rb-tag--sale {
    background: var(--rb-red);
    color: var(--rb-white);
}

.rb-tag--muted {
    background: var(--rb-white);
    color: var(--rb-ink);
}

.rb-card__label {
    position: absolute;
    inset-block-start: var(--rb-space-2);
    inset-inline-start: var(--rb-space-2);
    padding: 3px 6px;
    border-radius: 3px;
    background: var(--rb-white);
    color: var(--rb-ink);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.3;
}

.rb-card__add {
    position: absolute;
    inset-block-end: var(--rb-space-2);
    inset-inline-end: var(--rb-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--rb-blush);
    color: var(--rb-ink);
    cursor: pointer;
    transition: background-color 150ms var(--rb-ease), color 150ms var(--rb-ease);
}

.rb-card__add-plus {
    position: absolute;
    inset-block-start: 15px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

@media (hover: hover) {
    .rb-card__add:hover {
        background: var(--rb-ink);
        color: var(--rb-white);
    }
}

.rb-card__add.button-loading,
.rb-card__add.btn-loading {
    opacity: 0.6;
    pointer-events: none;
}

.rb-card__body {
    display: grid;
    gap: var(--rb-space-1);
    padding-top: var(--rb-space-3);
}

.rb-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rb-space-2);
    margin: 0;
}

.rb-price {
    color: var(--rb-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rb-price--sale {
    color: var(--rb-red);
}

.rb-price-was {
    color: var(--rb-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.rb-card__title {
    margin: 0;
    font-size: var(--rb-text-sm);
    font-weight: 400;
    line-height: 1.4;
    color: var(--rb-ink);
}

.rb-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.rb-card__title a::after {
    /* Whole card is clickable through the title link. */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

.rb-card__wish,
.rb-card__add {
    z-index: 1;
}

.rb-card__vendor {
    margin: 0;
    color: var(--rb-muted);
    font-size: 0.75rem;
}

.rb-empty {
    padding: var(--rb-space-7) var(--rb-space-5);
    border-radius: var(--rb-radius-lg);
    background: var(--rb-surface);
    text-align: center;
}

.rb-empty__title {
    margin: 0 0 var(--rb-space-1);
    font-weight: 600;
}

.rb-empty__text {
    margin: 0;
    color: var(--rb-muted);
    font-size: var(--rb-text-sm);
}

/* Pagination */
.tp-pagination {
    margin-top: var(--rb-space-7);
}

.tp-pagination .pagination {
    display: flex;
    justify-content: center;
    gap: var(--rb-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-pagination .pages-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: var(--rb-space-2);
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-radius);
    background: var(--rb-white);
    color: var(--rb-ink);
    font-size: var(--rb-text-sm);
}

.tp-pagination .page-item.active .pages-number {
    border-color: var(--rb-ink);
    background: var(--rb-ink);
    color: var(--rb-white);
}

.tp-pagination .page-item.disabled .pages-number {
    color: var(--rb-line-strong);
}

[dir="rtl"] .tp-pagination svg {
    transform: scaleX(-1);
}

.bb-infinite-scroll-trigger {
    display: flex;
    justify-content: center;
    margin-top: var(--rb-space-7);
}

/* ------------------------------------------------------------ Home blocks */

.rb-section {
    margin-block: var(--rb-space-7);
}

.rb-section:first-child {
    margin-top: var(--rb-space-4);
}

.rb-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rb-space-2) var(--rb-space-4);
    margin-bottom: var(--rb-space-5);
}

.rb-section__title {
    margin: 0;
    font-size: var(--rb-text-xl);
    font-weight: 600;
    line-height: 1.2;
    color: var(--rb-ink);
}

.rb-section__link {
    display: inline-flex;
    align-items: center;
    gap: var(--rb-space-1);
    color: var(--rb-ink);
    font-size: var(--rb-text-sm);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Departments mosaic */
.rb-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rb-space-2);
}

.rb-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--rb-radius);
    background: var(--rb-surface);
    color: var(--rb-white);
    text-decoration: none;
    isolation: isolate;
}

.rb-tile::after {
    content: "";
    position: absolute;
    inset: 50% 0 0;
    z-index: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 55%), transparent);
}

.rb-tile.is-plain {
    color: var(--rb-ink);
}

.rb-tile.is-plain::after {
    display: none;
}

.rb-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms var(--rb-ease);
}

@media (hover: hover) {
    .rb-tile:hover .rb-tile__img {
        transform: scale(1.03);
    }
}

.rb-tile__name {
    position: absolute;
    inset-inline-start: var(--rb-space-4);
    inset-block-end: var(--rb-space-4);
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
}

.rb-tile__dot {
    width: 0.3em;
    height: 0.3em;
    border-radius: 50%;
    background: var(--rb-red);
}

.rb-tile__go {
    position: absolute;
    inset-inline-end: var(--rb-space-4);
    inset-block-end: var(--rb-space-4);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

@media (min-width: 1024px) {
    .rb-mosaic {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 260px);
    }

    .rb-tile {
        aspect-ratio: auto;
        height: 100%;
    }

    /* Tall tiles first, the rest stack in the remaining columns (REDTAG-style). */
    .rb-mosaic[data-count="6"] .rb-tile:nth-child(-n + 2),
    .rb-mosaic[data-count="5"] .rb-tile:nth-child(-n + 3),
    .rb-mosaic[data-count="4"] .rb-tile,
    .rb-mosaic[data-count="3"] .rb-tile:first-child {
        grid-row: span 2;
    }

    .rb-mosaic[data-count="3"] {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .rb-mosaic[data-count="3"] .rb-tile:not(:first-child) {
        grid-row: span 2;
    }

    .rb-tile__name {
        font-size: 1.625rem;
    }
}

/* Horizontal scroller (category tiles) */
.rb-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    gap: var(--rb-space-3);
    margin: 0;
    padding: 0 0 var(--rb-space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    list-style: none;
}

.rb-scroller > * {
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .rb-scroller {
        grid-auto-columns: calc((100% - 3 * var(--rb-space-3)) / 3.3);
    }
}

@media (min-width: 1200px) {
    .rb-scroller {
        grid-auto-columns: calc((100% - 3 * var(--rb-space-3)) / 4.2);
    }
}

.rb-cat {
    display: grid;
    gap: var(--rb-space-4);
    color: var(--rb-ink);
    text-decoration: none;
}

.rb-cat__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--rb-radius);
    background: var(--rb-surface);
}

.rb-cat__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms var(--rb-ease);
}

@media (hover: hover) {
    .rb-cat:hover .rb-cat__media img {
        transform: scale(1.03);
    }

    .rb-cat:hover .rb-cat__name {
        text-decoration: underline;
        text-underline-offset: 6px;
        text-decoration-thickness: 1px;
    }
}

.rb-cat__name {
    font-size: clamp(1.25rem, 2vw, 1.875rem);
    font-weight: 400;
    line-height: 1.15;
    text-align: center;
}

/* Banner */
.rb-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    overflow: hidden;
    border-radius: var(--rb-radius);
    background: var(--rb-ink);
    color: var(--rb-white);
    isolation: isolate;
}

.rb-banner:not(.is-plain)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgb(0 0 0 / 60%), rgb(0 0 0 / 5%) 60%);
}

.rb-banner__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rb-banner__body {
    display: grid;
    justify-items: start;
    gap: var(--rb-space-3);
    max-width: 640px;
    padding: var(--rb-space-6) var(--rb-space-5);
}

.rb-banner__title {
    margin: 0;
    color: inherit;
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
}

.rb-banner__text {
    margin: 0;
    font-size: var(--rb-text-md);
    line-height: 1.5;
    opacity: 0.9;
}

.rb-btn--light {
    border-color: var(--rb-white);
    background: var(--rb-white);
    color: var(--rb-ink);
}

@media (hover: hover) {
    .rb-btn--light:hover {
        background: var(--rb-surface);
        color: var(--rb-ink);
    }
}

@media (min-width: 1024px) {
    .rb-banner {
        min-height: 520px;
    }

    .rb-banner__body {
        padding: var(--rb-space-8) var(--rb-space-7);
    }
}

/* ------------------------------------------------------------ Product page */

.rb-pdp {
    padding-block: var(--rb-space-3) var(--rb-space-6);
}

.rb-pdp__top {
    display: grid;
    gap: var(--rb-space-5);
}

/* The gallery carousel's track is very wide; without this the grid column grows to fit it. */
.rb-pdp__top > * {
    min-width: 0;
}

@media (min-width: 1024px) {
    .rb-pdp__top {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: var(--rb-space-7);
        align-items: start;
    }

    .rb-pdp__info {
        position: sticky;
        top: 140px;
    }
}

/* Gallery (plugin markup, slick + lightgallery) */
.rb-pdp .bb-product-gallery-wrapper,
.rb-pdp .bb-product-gallery {
    margin: 0;
}

.rb-pdp .bb-product-gallery-images,
.rb-pdp .bb-product-gallery-images .slick-slide {
    border-radius: var(--rb-radius);
    background: var(--rb-surface);
    overflow: hidden;
}

.rb-pdp .bb-product-gallery-images img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.rb-pdp .bb-product-gallery-thumbnails img {
    border: 1px solid transparent;
    border-radius: var(--rb-radius);
    background: var(--rb-surface);
    opacity: 0.7;
}

.rb-pdp .bb-product-gallery-thumbnails .slick-current img {
    border-color: var(--rb-ink);
    opacity: 1;
}

/* Buy box */
.rb-buy {
    display: grid;
    gap: var(--rb-space-3);
}

.rb-buy__vendor {
    justify-self: start;
    color: var(--rb-muted);
    font-size: 0.8125rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rb-buy__title {
    margin: 0;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--rb-ink);
}

.rb-buy__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--rb-space-2);
    justify-self: start;
    color: var(--rb-muted);
    font-size: 0.8125rem;
}

.rb-buy__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rb-space-3);
    padding-block: var(--rb-space-2);
}

.rb-price--lg {
    font-size: var(--rb-text-xl);
}

.rb-buy__price .rb-price-was {
    font-size: var(--rb-text-md);
}

.rb-buy__note,
.rb-buy__flash {
    margin: 0;
    color: var(--rb-muted);
    font-size: 0.8125rem;
}

.rb-buy__flash {
    color: var(--rb-red);
    font-weight: 600;
}

.rb-buy__summary {
    color: var(--rb-muted);
    font-size: var(--rb-text-sm);
    line-height: 1.65;
}

.rb-buy__summary > :last-child {
    margin-bottom: 0;
}

.rb-buy__form {
    display: grid;
    gap: var(--rb-space-4);
    margin-top: var(--rb-space-2);
    padding-top: var(--rb-space-4);
    border-top: 1px solid var(--rb-line);
}

/* Swatches (plugin markup) */
.rb-buy .bb-product-attribute-swatch {
    margin: 0 0 var(--rb-space-4);
}

.rb-buy .bb-product-attribute-swatch-title {
    margin: 0 0 var(--rb-space-2);
    font-size: var(--rb-text-sm);
    font-weight: 600;
    color: var(--rb-ink);
}

.rb-buy .bb-product-attribute-swatch-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rb-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rb-buy .bb-product-attribute-swatch-item {
    margin: 0;
}

.rb-buy .bb-product-attribute-swatch-item label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.rb-buy .bb-product-attribute-swatch-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rb-buy .bb-product-attribute-text-display {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    height: 38px;
    padding-inline: var(--rb-space-3);
    border: 1px solid var(--rb-line-strong);
    border-radius: var(--rb-radius);
    background: var(--rb-white);
    color: var(--rb-ink);
    font-size: var(--rb-text-sm);
    justify-content: center;
}

.rb-buy .bb-product-attribute-swatch-item input:checked + .bb-product-attribute-text-display {
    border-color: var(--rb-ink);
    background: var(--rb-ink);
    color: var(--rb-white);
}

.rb-buy .bb-product-attribute-swatch-display {
    display: block;
    width: 32px;
    height: 32px;
    border: 1px solid var(--rb-line-strong);
    border-radius: 50%;
}

.rb-buy .bb-product-attribute-swatch-item input:checked + .bb-product-attribute-swatch-display {
    box-shadow: 0 0 0 2px var(--rb-white), 0 0 0 4px var(--rb-ink);
}

.rb-buy .bb-product-attribute-swatch-item input:focus-visible + * {
    outline: 2px solid var(--rb-ink);
    outline-offset: 2px;
}

/* Drop the legacy checkmark badge on selected swatches; the filled state is enough. */
.rb-buy .bb-product-attribute-swatch-item label::after,
.rb-buy .bb-product-attribute-text-display::after,
.rb-buy .bb-product-attribute-swatch-display::after {
    display: none;
}

.rb-buy .bb-product-attribute-swatch:last-child {
    margin-bottom: 0;
}

.rb-buy .number-items-available,
.rb-buy__form > :empty {
    margin: 0;
}

.rb-buy .bb-product-attribute-swatch-item.disabled {
    opacity: 0.4;
}

.rb-buy .bb-product-attribute-swatch-item.disabled .bb-product-attribute-text-display {
    text-decoration: line-through;
}

.rb-buy .number-items-available {
    font-size: 0.8125rem;
}

/* Quantity + actions */
.rb-buy__actions {
    display: flex;
    align-items: stretch;
    gap: var(--rb-space-2);
}

.rb-qty {
    display: inline-flex;
    align-items: center;
    height: 48px;
    border: 1px solid var(--rb-line-strong);
    border-radius: var(--rb-radius);
}

.rb-qty__btn {
    width: 40px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rb-ink);
    font-size: 1.125rem;
    cursor: pointer;
}

.rb-buy .rb-qty__input {
    width: 44px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rb-ink);
    font: inherit;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}

.rb-qty__input::-webkit-outer-spin-button,
.rb-qty__input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.rb-buy__add {
    flex: 1;
    height: 48px;
    font-size: var(--rb-text-md);
}

.rb-buy__add:disabled {
    border-color: var(--rb-line-strong);
    background: var(--rb-line-strong);
    cursor: not-allowed;
}

.rb-buy__wish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    border: 1px solid var(--rb-line-strong);
    border-radius: var(--rb-radius);
    background: var(--rb-white);
    color: var(--rb-ink);
    cursor: pointer;
}

.rb-buy__wish.active {
    border-color: var(--rb-red);
    color: var(--rb-red);
}

.rb-buy__wish.active svg {
    fill: currentColor;
}

.rb-buy__now {
    width: 100%;
    height: 48px;
}

.rb-buy__meta {
    display: grid;
    gap: var(--rb-space-1);
    margin: var(--rb-space-2) 0 0;
    font-size: 0.8125rem;
}

.rb-buy__meta > div {
    display: flex;
    gap: var(--rb-space-2);
}

.rb-buy__meta dt {
    min-width: 72px;
    color: var(--rb-muted);
    font-weight: 400;
}

.rb-buy__meta dd {
    margin: 0;
}

.rb-buy__meta a {
    color: var(--rb-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1023.98px) {
    /* Keep the primary action in reach while scrolling the buy box on phones. */
    .rb-buy__actions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin-inline: calc(var(--rb-space-4) * -1);
        padding: var(--rb-space-3) var(--rb-space-4);
        border-top: 1px solid var(--rb-line);
        background: var(--rb-white);
    }
}

/* "Buy together" bundle (plugin markup) brought into the RedBrand palette */
.rb-pdp .ec-upsell-bundle,
.rb-pdp .ec-upsell-bundle-wrapper {
    border: 1px solid var(--rb-line) !important;
    border-radius: var(--rb-radius-lg) !important;
    background: var(--rb-white) !important;
    box-shadow: none !important;
}

.rb-pdp .ec-upsell-bundle-icon {
    background: var(--rb-ink) !important;
    color: var(--rb-white) !important;
}

.rb-pdp .ec-upsell-bundle-title {
    color: var(--rb-ink) !important;
}

.rb-pdp .ec-upsell-bundle-add-all,
.rb-pdp .ec-upsell-add-btn {
    border-color: var(--rb-ink) !important;
    border-radius: var(--rb-radius) !important;
    background: var(--rb-ink) !important;
    color: var(--rb-white) !important;
}

.rb-pdp .ec-upsell-discount-badge {
    background: var(--rb-red) !important;
    color: var(--rb-white) !important;
}

.rb-pdp .ec-upsell-price-sale,
.rb-pdp .ec-upsell-total-price {
    color: var(--rb-red) !important;
}

.rb-pdp .ec-upsell-bundle input[type="checkbox"] {
    accent-color: var(--rb-ink);
}

.rb-pdp .ec-upsell-checkmark {
    border-color: var(--rb-line-strong) !important;
}

.rb-pdp .ec-upsell-checkbox input:checked ~ .ec-upsell-checkmark {
    border-color: var(--rb-ink) !important;
    background: var(--rb-ink) !important;
}

.rb-pdp .ec-upsell-bundle-wrapper .container {
    max-width: none;
    padding: 0;
}

/* Detail sections */
.rb-pdp__sections {
    max-width: 880px;
    margin-top: var(--rb-space-7);
    border-top: 1px solid var(--rb-line);
}

.rb-acc {
    border-bottom: 1px solid var(--rb-line);
}

.rb-acc__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    font-size: var(--rb-text-md);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.rb-acc__head::-webkit-details-marker {
    display: none;
}

.rb-acc__head::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
}

.rb-acc[open] > .rb-acc__head::after {
    content: "\2212";
}

.rb-acc__head:focus-visible {
    outline: 2px solid var(--rb-ink);
    outline-offset: 4px;
}

.rb-acc__body {
    padding-bottom: var(--rb-space-5);
    color: var(--rb-ink);
    font-size: var(--rb-text-sm);
    line-height: 1.7;
}

.rb-acc__body img {
    height: auto;
    border-radius: var(--rb-radius);
}

/* Related products scroller + loading skeleton */
.rb-related__list {
    grid-auto-columns: 46%;
}

@media (min-width: 768px) {
    .rb-related__list {
        grid-auto-columns: calc((100% - 3 * var(--rb-space-3)) / 3.3);
    }
}

@media (min-width: 1200px) {
    .rb-related__list {
        grid-auto-columns: calc((100% - 3 * var(--rb-space-3)) / 4);
    }
}

.rb-skeleton {
    border-radius: var(--rb-radius);
    background: linear-gradient(90deg, var(--rb-surface) 25%, #e9e9e6 37%, var(--rb-surface) 63%) 0 0 / 400% 100%;
    animation: rb-shimmer 1.4s ease infinite;
}

.rb-skeleton--title {
    width: 220px;
    height: 28px;
    margin-bottom: var(--rb-space-5);
}

.rb-related__skeleton {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rb-space-3);
}

@media (min-width: 1200px) {
    .rb-related__skeleton {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.rb-skeleton--card {
    aspect-ratio: 4 / 6;
}

@keyframes rb-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

/* ------------------------------------------------- Cart surfaces (legacy markup) */

.tp-cart-area {
    padding-block: var(--rb-space-3) var(--rb-space-7) !important;
}

.tp-cart-list table thead,
.tp-cart-list table thead th,
.tp-cart-list .bb-ecommerce-table thead tr {
    border-bottom: 1px solid var(--rb-ink);
    background: none !important;
    color: var(--rb-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tp-cart-list tbody tr {
    border-bottom: 1px solid var(--rb-line);
}

.tp-cart-title a,
.tp-cart-title {
    color: var(--rb-ink);
    font-size: var(--rb-text-sm);
    font-weight: 500;
}

.tp-cart-list img {
    border-radius: var(--rb-radius);
    background: var(--rb-surface);
}

.tp-cart-quantity .tp-product-quantity,
.cartmini__wrapper .tp-product-quantity {
    border: 1px solid var(--rb-line-strong);
    border-radius: var(--rb-radius) !important;
    background: var(--rb-white);
}

.tp-cart-checkout-wrapper {
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-radius-lg);
    box-shadow: none !important;
}

.tp-cart-checkout-btn,
.tp-cart-coupon-input button,
.cartmini__checkout-btn .tp-btn,
.cartmini__wrapper .tp-btn {
    border-radius: var(--rb-radius) !important;
    background: var(--rb-ink) !important;
    color: var(--rb-white) !important;
}

.cartmini__wrapper .tp-btn-border {
    border: 1px solid var(--rb-ink) !important;
    background: var(--rb-white) !important;
    color: var(--rb-ink) !important;
}

.tp-cart-coupon-input input {
    border: 1px solid var(--rb-line-strong) !important;
    border-radius: var(--rb-radius) !important;
}

.cartmini__area .cartmini__wrapper {
    font-family: var(--rb-font);
}

/* Toasts: quiet ink for success, red for errors. */
.toastify.toastify-success,
.toastify.toastify-info {
    border-radius: var(--rb-radius) !important;
    background: var(--rb-ink) !important;
    box-shadow: var(--rb-shadow) !important;
    font-size: var(--rb-text-sm);
}

.toastify.toastify-error,
.toastify.toastify-danger {
    border-radius: var(--rb-radius) !important;
    background: var(--rb-red) !important;
}

/* ------------------------------------- Shared components (Bootstrap/platform) */
/* Account pages, auth, vendor stores, checkout, contact and blog are built from these;
   one quiet layer keeps them in the RedBrand system. Scoped to <body> (front end only). */

body .btn {
    border-radius: var(--rb-radius);
    font-family: var(--rb-font);
    font-size: var(--rb-text-sm);
    font-weight: 600;
    box-shadow: none;
}

body .btn:not(.btn-sm):not(.btn-close):not(.btn-link) {
    min-height: 44px;
    padding-inline: var(--rb-space-5);
}

body .btn-primary,
body .btn-success,
body .btn-warning,
body .btn-info,
body .btn-dark,
body .btn-auth-submit {
    border-color: var(--rb-ink) !important;
    background: var(--rb-ink) !important;
    color: var(--rb-white) !important;
}

body .btn-primary:hover,
body .btn-success:hover,
body .btn-dark:hover {
    border-color: #2c2c2c !important;
    background: #2c2c2c !important;
}

body .btn-outline-secondary,
body .btn-outline-primary,
body .btn-light,
body .btn-secondary {
    border: 1px solid var(--rb-ink) !important;
    background: var(--rb-white) !important;
    color: var(--rb-ink) !important;
}

body .btn-danger,
body .btn-outline-danger {
    border: 1px solid var(--rb-red) !important;
    background: var(--rb-white) !important;
    color: var(--rb-red) !important;
}

body .form-control,
body .form-select {
    min-height: 44px;
    border: 1px solid var(--rb-line-strong);
    border-radius: var(--rb-radius);
    background-color: var(--rb-white);
    color: var(--rb-ink);
    font-family: var(--rb-font);
    font-size: var(--rb-text-sm);
    box-shadow: none;
}

body textarea.form-control {
    min-height: 120px;
}

body .form-control:focus,
body .form-select:focus {
    border-color: var(--rb-ink);
    box-shadow: 0 0 0 1px var(--rb-ink);
}

body .form-label,
body label.required {
    margin-bottom: 6px;
    color: var(--rb-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

body .form-check-input:checked {
    border-color: var(--rb-ink);
    background-color: var(--rb-ink);
}

body .form-check-input:focus {
    border-color: var(--rb-ink);
    box-shadow: 0 0 0 2px rgb(20 20 20 / 15%);
}

body main .card,
body .bb-customer-card,
body .bb-customer-sidebar,
body .bb-store-item {
    border: 1px solid var(--rb-line) !important;
    border-radius: var(--rb-radius-lg) !important;
    background: var(--rb-white) !important;
    box-shadow: none !important;
}

body main .shadow-sm,
body main .shadow,
body .bb-customer-page .shadow-sm {
    box-shadow: none !important;
}

/* Coloured tint panels and icon chips become neutral; only errors keep red. */
body main .bg-opacity-10,
body main .bg-opacity-20,
body .bb-customer-page .bg-primary,
body .bb-customer-page .bg-success,
body .bb-customer-page .bg-warning,
body .bb-customer-page .bg-info {
    background: var(--rb-surface) !important;
    color: var(--rb-ink) !important;
}

body .bb-customer-page .bg-danger.bg-opacity-10 {
    background: var(--rb-blush) !important;
}

body main .alert {
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--rb-surface);
    color: var(--rb-ink);
    font-size: var(--rb-text-sm);
}

body main .alert-danger,
body main .alert-warning {
    background: var(--rb-blush);
    color: var(--rb-ink);
}

body .nav-pills .nav-link {
    border-radius: var(--rb-radius);
    color: var(--rb-ink);
}

body .nav-pills .nav-link.active,
body .nav-pills .show > .nav-link {
    background: var(--rb-ink);
    color: var(--rb-white);
}

body .nav-tabs {
    border-bottom: 1px solid var(--rb-line);
}

body .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--rb-muted);
    font-weight: 500;
}

body .nav-tabs .nav-link.active {
    border-bottom-color: var(--rb-ink);
    background: none;
    color: var(--rb-ink);
}

body .modal-content {
    border: 0;
    border-radius: var(--rb-radius-lg);
    box-shadow: var(--rb-shadow);
}

body main .badge {
    border-radius: 3px;
    font-weight: 600;
}

body main table {
    font-size: var(--rb-text-sm);
}

body main .table > :not(caption) > * > * {
    padding-block: var(--rb-space-3);
    border-bottom-color: var(--rb-line);
}

body main .table thead th {
    color: var(--rb-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Serif for page and card headings in these areas */
body .bb-customer-page h1,
body .bb-customer-page h2,
body .bb-customer-page h3,
body .bb-customer-card-title,
body .bb-store-item-content h4,
body .bb-shop-banner-name,
body .auth-card__title,
body .checkout-content-wrap h2,
body .checkout-content-wrap h3,
body main .card-title,
body .tp-postbox-title,
body .tp-postbox-details-title,
body .tp-blog-title,
body .contact-form-title,
body .tp-contact-title {
    font-family: var(--rb-serif) !important;
    font-weight: 400 !important;
    color: var(--rb-ink);
}

/* Auth (login, register, password) */
body#page-auth main,
#page-auth .auth-card,
#page-auth .auth-form-wrapper {
    background: none !important;
    box-shadow: none !important;
}

#page-auth .auth-card {
    max-width: 440px;
    margin: var(--rb-space-6) auto var(--rb-space-7);
    padding: 0 !important;
    border: 0 !important;
}

#page-auth .auth-card .card-body {
    padding: 0 !important;
}

#page-auth .auth-card__title,
#page-auth h3,
#page-auth h4 {
    font-size: 2rem;
}

/* Customer account */
.bb-customer-page {
    padding-block: var(--rb-space-5) var(--rb-space-7);
}

.bb-customer-navigation .nav-link {
    display: flex;
    align-items: center;
    gap: var(--rb-space-2);
    padding: 10px var(--rb-space-3);
    font-size: var(--rb-text-sm);
}

.bb-customer-sidebar-heading {
    border-bottom: 1px solid var(--rb-line) !important;
}

.bb-customer-card-header {
    border-bottom: 1px solid var(--rb-line) !important;
    background: none !important;
}

/* Vendor stores */
.bb-store-item-logo img {
    border: 1px solid var(--rb-line);
    border-radius: 50%;
}

.bb-store-item-footer {
    border-top: 1px solid var(--rb-line) !important;
    background: none !important;
}

.bb-shop-banner {
    width: calc(100% - 2 * var(--rb-space-4));
    max-width: calc(var(--rb-container) - 2 * var(--rb-space-5));
    margin: var(--rb-space-4) auto 0;
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-radius-lg);
    background: var(--rb-white) !important;
    color: var(--rb-ink) !important;
    min-height: 0 !important;
}

.bb-shop-banner-overlay {
    display: none !important;
}

.bb-shop-banner-content,
.bb-shop-banner-content a,
.bb-shop-banner-name,
.bb-shop-banner-contact,
.bb-shop-banner-description {
    color: var(--rb-ink) !important;
}

.bb-shop-banner-name {
    font-size: 2rem !important;
}

.bb-shop-banner-logo img {
    border: 1px solid var(--rb-line);
    border-radius: 50%;
    background: var(--rb-white);
}

/* Checkout (platform checkout layout) */
.checkout-content-wrap {
    font-family: var(--rb-font);
    color: var(--rb-ink);
}

/* Checkout uses Bootstrap's primary colour for links, radios and coupon buttons. */
body:has(.checkout-content-wrap) {
    --bs-primary: #141414;
    --bs-primary-rgb: 20, 20, 20;
    --bs-link-color: #141414;
    --bs-link-color-rgb: 20, 20, 20;
    --bs-link-hover-color: #141414;
    font-family: var(--rb-font);
}

.checkout-logo img,
img.checkout-logo,
.checkout-content-wrap .checkout-logo img {
    max-height: 28px !important;
    width: auto !important;
}

.checkout-content-wrap a {
    color: var(--rb-ink);
}

.checkout-content-wrap .vendor-information-section,
.checkout-content-wrap [style*="background"] {
    background: var(--rb-surface) !important;
}

.checkout__coupon-item {
    border: 1px dashed var(--rb-line-strong) !important;
    border-radius: var(--rb-radius) !important;
    background: var(--rb-white) !important;
}

.checkout__coupon-item-icon {
    background: var(--rb-surface) !important;
    color: var(--rb-ink) !important;
}

.checkout__coupon-item-code {
    color: var(--rb-red) !important;
}

.checkout-order-info,
.checkout-content-wrap .bg-light {
    background: var(--rb-surface) !important;
}

.checkout-content-wrap .img-thumbnail {
    border-color: var(--rb-line);
    border-radius: var(--rb-radius);
}

.checkout-content-wrap .total-text,
.checkout-content-wrap .raw-total-text {
    color: var(--rb-ink);
    font-weight: 600;
}

/* -------------------------------------------------------------------- 404 */

.rb-error {
    display: grid;
    justify-items: center;
    gap: var(--rb-space-4);
    max-width: 560px;
    padding-block: var(--rb-space-8);
    text-align: center;
}

.rb-error__code {
    margin: 0;
    color: var(--rb-red);
    font-size: var(--rb-text-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
}

.rb-error__title {
    margin: 0;
    font-family: var(--rb-serif);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
}

.rb-error__text {
    margin: 0;
    color: var(--rb-muted);
}

.rb-error__search {
    /* .rb-search carries grid-area: search for the header grid; here it must not create
       implicit grid columns. */
    grid-area: auto;
    width: 100%;
    margin-top: var(--rb-space-2);
}

.rb-error__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--rb-space-2);
}

/* --------------------------------------------- Cookie notice (plugin markup) */

.js-site-notice.site-notice {
    position: fixed;
    inset-inline: var(--rb-space-3);
    inset-block-end: var(--rb-space-3);
    z-index: 1050;
    max-width: 380px;
    padding: var(--rb-space-4) !important;
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-radius-lg);
    background: var(--rb-white) !important;
    color: var(--rb-ink) !important;
    box-shadow: var(--rb-shadow);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.site-notice .site-notice__inner,
.site-notice .site-notice-body {
    display: grid;
    gap: var(--rb-space-3);
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.site-notice .site-notice__message,
.site-notice .site-notice__message a {
    margin: 0;
    color: var(--rb-ink) !important;
}

.site-notice .site-notice__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rb-space-2);
    margin: 0;
}

.site-notice .site-notice__actions button {
    height: 36px;
    padding-inline: var(--rb-space-4);
    border: 1px solid var(--rb-ink) !important;
    border-radius: var(--rb-radius);
    background: var(--rb-white) !important;
    color: var(--rb-ink) !important;
    font-size: 0.8125rem;
    font-weight: 600;
}

.site-notice .site-notice__actions .site-notice__agree {
    background: var(--rb-ink) !important;
    color: var(--rb-white) !important;
}

/* -------------------------------------------------------- Brand typography */
/* Serif (Cambria/Caladea) for names and headings; Plex Sans for UI, prices and small text. */

.rb-shop__title,
.rb-section__title,
.rb-buy__title,
.rb-banner__title,
.rb-tile__name,
.rb-cat__name,
.rb-card__title,
.rb-acc__head,
.rb-empty__title,
.rb-shop__filters-title {
    font-family: var(--rb-serif);
    font-weight: 400;
    letter-spacing: -0.005em;
}

.rb-section__title,
.rb-shop__title {
    font-size: clamp(1.625rem, 2.6vw, 2.125rem);
    line-height: 1.15;
}

.rb-buy__title {
    font-size: clamp(1.75rem, 2.8vw, 2.25rem);
    line-height: 1.15;
}

.rb-banner__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.02;
}

.rb-tile__name {
    font-size: 1.625rem;
}

@media (min-width: 1024px) {
    .rb-tile__name {
        font-size: 2.125rem;
    }
}

.rb-card__title {
    font-size: 0.9375rem;
    line-height: 1.35;
}

.rb-acc__head {
    font-size: 1.25rem;
}

.rb-shop__filters-title {
    font-size: 1.375rem;
}

/* The logo's red dot, echoed once per section title. */
.rb-section__title::after,
.rb-banner__title::after {
    content: "";
    display: inline-block;
    width: 0.2em;
    height: 0.2em;
    margin-inline-start: 0.08em;
    border-radius: 50%;
    background: var(--rb-red);
    vertical-align: baseline;
}

/* ------------------------------------------------------------ Motion prefs */

@media (prefers-reduced-motion: reduce) {
    .rb-drawer__panel,
    .rb-drawer__backdrop,
    .rb-catbar__menu,
    .rb-pill,
    .rb-catbar__item.has-menu > .rb-catbar__link .rb-icon,
    .rb-btn,
    .rb-card__image img,
    .rb-tile__img,
    .rb-cat__media img,
    .rb-card__add,
    :is(.rb-shop__filters, .bb-shop-detail) .bb-filter-offcanvas-area {
        transition: none;
    }

    .rb-skeleton {
        animation: none;
    }
}