/* ==========================================================================
   Rage — Homepage (boys' T-shirts)
   Soft cotton neutrals, deep indigo and the bronze + black of the Rage logo.
   ========================================================================== */

:root {
    --rg-cotton: #F5F5F3;
    --rg-chambray: #EDEBE7;
    --rg-paper: #FFFFFF;
    --rg-indigo: #1D3354;
    --rg-raw: #121318;            /* near the logo black, matches the hero photo backdrop */
    --rg-copper: #97754F;         /* logo bronze */
    --rg-copper-dark: #735634;    /* bronze for small text on light backgrounds */
    --rg-copper-light: #CDAE86;   /* bronze on dark backgrounds */
    --rg-copper-soft: #F3ECE2;
    --rg-ink: #16181D;
    --rg-muted: #5E6470;
    --rg-line: #E3E1DC;
    --rg-line-strong: #CBC7BF;
    --rg-wa: #1E8E4E;

    --rg-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --rg-radius: 14px;
    --rg-gap: 12px;
    --rg-pad: 16px;
    --rg-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 640px) {
    :root { --rg-gap: 18px; --rg-pad: 24px; }
}

@media (min-width: 1024px) {
    :root { --rg-gap: 24px; --rg-pad: 32px; }
}

/* Base ------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Anchor targets stop below the sticky header. Set per target rather than as
   scroll-padding on html: the browser applies scroll-padding when it keeps the
   caret in view, so typing in the sticky header search scrolled the page up. */
main [id],
[data-shop-listing],
.rg-footer { scroll-margin-top: 124px; }

@media (min-width: 1024px) {
    main [id],
    [data-shop-listing],
    .rg-footer { scroll-margin-top: 88px; }
}

body {
    margin: 0;
    background: var(--rg-cotton);
    color: var(--rg-ink);
    font: 400 15px/1.6 var(--rg-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.rg-lock { overflow: hidden; }

/* Never let stray content widen the page on phones (clip keeps the sticky header working) */
.rg-page { overflow-x: clip; }

.rg-page *,
.rg-page *::before,
.rg-page *::after { box-sizing: border-box; }

/* Resets wrapped in :where() so component classes always win */
:where(.rg-page) img { display: block; max-width: 100%; height: auto; }
:where(.rg-page) a { color: inherit; text-decoration: none; }
:where(.rg-page) :is(h1, h2, h3, p) { margin: 0; }
:where(.rg-page) ul { margin: 0; padding: 0; list-style: none; }
:where(.rg-page) button { font: inherit; color: inherit; cursor: pointer; }

.rg-page :focus-visible {
    outline: 2px solid var(--rg-copper);
    outline-offset: 2px;
}

.rg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rg-page a svg, .rg-page button svg { pointer-events: none; }

.rg-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.rg-container {
    width: 100%;
    max-width: calc(1240px + var(--rg-pad) * 2);
    margin-inline: auto;
    padding-inline: var(--rg-pad);
}

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

.rg-btn {
    position: relative; /* contains the visually-hidden label on phones */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    font: 600 14px/1.2 var(--rg-sans);
    letter-spacing: .01em;
    text-align: center;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}

.rg-btn svg { width: 18px; height: 18px; flex: none; }
.rg-btn:active { transform: scale(.98); }

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

.rg-btn--primary { background: var(--rg-indigo); color: var(--rg-cotton); }
.rg-btn--primary:hover { background: var(--rg-raw); }

.rg-btn--ghost { border-color: var(--rg-line-strong); color: var(--rg-ink); }
.rg-btn--ghost:hover { border-color: var(--rg-indigo); color: var(--rg-indigo); }

.rg-btn--wa { border-color: var(--rg-line-strong); background: var(--rg-paper); color: var(--rg-ink); }
.rg-btn--wa svg { color: var(--rg-wa); }
.rg-btn--wa:hover { border-color: var(--rg-wa); background: #EFF7F2; }

.rg-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.rg-btn.is-loading { opacity: .7; pointer-events: none; }

.rg-icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    color: var(--rg-ink);
    transition: background-color .2s, border-color .2s;
}

.rg-icon-btn svg { width: 22px; height: 22px; }
.rg-icon-btn:hover { background: var(--rg-chambray); }
.rg-icon-btn--outline { border-color: var(--rg-line-strong); }
.rg-icon-btn--outline svg { width: 18px; height: 18px; }
.rg-icon-btn:disabled { opacity: .35; cursor: default; background: none; }

.rg-link {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 6px;
    color: var(--rg-indigo);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.rg-link svg { width: 16px; height: 16px; }

/* Typography helpers ------------------------------------------------------ */

.rg-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rg-copper-dark);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.rg-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
}

.rg-section__title {
    margin-top: 8px;
    color: var(--rg-indigo);
    font: 700 clamp(1.45rem, 1.2rem + .9vw, 1.95rem)/1.2 var(--rg-sans);
    letter-spacing: -.02em;
    text-wrap: balance;
}

/* Announcement strip & header ------------------------------------------- */

.rg-strip {
    padding: 8px var(--rg-pad);
    background: var(--rg-indigo);
    color: var(--rg-cotton);
    font-size: 12.5px;
    letter-spacing: .04em;
    text-align: center;
}

.rg-strip span[aria-hidden] { margin: 0 6px; opacity: .55; }

@media (max-width: 479px) {
    .rg-strip { font-size: 12px; }
    .rg-strip__extra { display: none; }
}

.rg-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--rg-line);
    background: rgba(245, 245, 243, .94);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
}

.rg-header__bar {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
        "menu logo account cart"
        "search search search search";
    align-items: center;
    column-gap: 6px;
    row-gap: 10px;
    padding-block: 10px 12px;
}

.rg-header__menu { grid-area: menu; margin-left: -10px; }
.rg-header .rg-logo { grid-area: logo; justify-self: center; }
.rg-account-btn { grid-area: account; margin-right: -4px; }
.rg-account-btn svg { width: 21px; height: 21px; }
.rg-cart-btn { grid-area: cart; margin-right: -8px; }

/* Supplied logo (bull mark over the RAGE wordmark), transparent PNG */
.rg-logo { display: inline-flex; align-items: center; }
.rg-logo__img { width: auto; height: 46px; }

/* Footer: the black wordmark sits on its own light tile */
.rg-logo--tile {
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--rg-paper);
}

.rg-logo--tile .rg-logo__img { height: 64px; }

.rg-cart-btn__count {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--rg-copper-dark);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.rg-cart-btn__count[hidden] { display: none; }

/* Mobile navigation drops down beneath the header */
.rg-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 8px var(--rg-pad) 16px;
    border-bottom: 1px solid var(--rg-line);
    background: var(--rg-cotton);
    box-shadow: 0 18px 30px -18px rgba(23, 32, 43, .25);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s var(--rg-ease), visibility .2s;
}

.rg-nav.is-open { visibility: visible; opacity: 1; transform: none; }

.rg-nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--rg-line);
    font-size: 15px;
    font-weight: 500;
}

.rg-nav a:last-child { border-bottom: 0; }

/* Active menu item */
.rg-nav a[aria-current="page"] { color: var(--rg-indigo); font-weight: 600; }

.rg-search {
    grid-area: search;
    position: relative;
}

.rg-search input {
    width: 100%;
    height: 42px;
    padding: 0 44px 0 18px;
    border: 1px solid var(--rg-line-strong);
    border-radius: 999px;
    background: var(--rg-paper);
    color: var(--rg-ink);
    font: 400 14px var(--rg-sans);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s, box-shadow .2s;
}

.rg-search input::placeholder { color: #8D98A7; }
.rg-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.rg-search input:focus {
    outline: none;
    border-color: var(--rg-indigo);
    box-shadow: 0 0 0 3px rgba(29, 51, 84, .1);
}

.rg-search button {
    position: absolute;
    top: 3px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--rg-indigo);
}

.rg-search button svg { width: 19px; height: 19px; }

/* Live search suggestions ------------------------------------------------- */

.rg-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    max-height: min(68vh, 470px);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius);
    background: var(--rg-paper);
    box-shadow: 0 22px 44px -18px rgba(23, 32, 43, .3);
    overflow: hidden;
    animation: rg-suggest-in .18s var(--rg-ease);
}

.rg-suggest[hidden] { display: none; }

@keyframes rg-suggest-in {
    from { opacity: 0; transform: translateY(-4px); }
}

.rg-suggest__status {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 16px 8px;
    color: var(--rg-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rg-suggest.is-empty .rg-suggest__status {
    padding-block: 18px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* Spinner while suggestions load */
.rg-suggest.is-loading .rg-suggest__status::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    border: 2px solid var(--rg-line-strong);
    border-top-color: var(--rg-indigo);
    border-radius: 50%;
    animation: rg-suggest-spin .7s linear infinite;
}

@keyframes rg-suggest-spin {
    to { transform: rotate(360deg); }
}

.rg-suggest__list {
    margin: 0;
    padding: 0 6px 6px;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: opacity .15s;
}

.rg-suggest.is-loading .rg-suggest__list { opacity: .5; }
.rg-suggest__list:empty { display: none; }

.rg-suggest__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--rg-ink);
}

.rg-suggest__item.is-active,
.rg-suggest__all.is-active { background: var(--rg-cotton); }

.rg-suggest__media {
    flex: none;
    width: 48px;
    height: 60px;
    border-radius: 8px;
    background: var(--rg-chambray);
    overflow: hidden;
}

.rg-suggest__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rg-suggest__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rg-suggest__cat {
    color: var(--rg-copper-dark);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rg-suggest__name {
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rg-suggest__name mark {
    background: var(--rg-copper-soft);
    color: inherit;
    font-weight: 700;
}

.rg-suggest__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    font-size: 13px;
}

.rg-suggest__price b { color: var(--rg-indigo); font-weight: 700; }
.rg-suggest__price s { color: var(--rg-muted); font-size: 12px; }

.rg-suggest__tag {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--rg-chambray);
    color: var(--rg-muted);
    font-size: 11px;
    font-weight: 600;
}

.rg-suggest__tag--sale { background: var(--rg-copper-soft); color: var(--rg-copper-dark); }

.rg-suggest__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    padding: 12px 10px;
    border-top: 1px solid var(--rg-line);
    border-radius: 0 0 10px 10px;
    color: var(--rg-indigo);
    font-size: 14px;
    font-weight: 600;
}

.rg-suggest__all svg { width: 16px; height: 16px; }

@media (min-width: 1024px) {
    /* Wider than the compact search box, opening towards the page */
    .rg-suggest { left: auto; width: 400px; }
}

@media (min-width: 1024px) {
    .rg-header__bar {
        grid-template-columns: auto 1fr auto auto auto;
        grid-template-areas: "logo nav search account cart";
        column-gap: 24px;
        padding-block: 14px;
    }

    .rg-header__menu { display: none; }

    /* Account and cart icons sit together as one group */
    .rg-account-btn { margin-right: -18px; }

    .rg-header .rg-logo { justify-self: start; }
    .rg-header .rg-logo__img { height: 56px; }

    .rg-nav {
        grid-area: nav;
        position: static;
        flex-direction: row;
        justify-content: center;
        gap: 4px;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .rg-nav a {
        position: relative;
        padding: 8px 12px;
        border: 0;
        font-size: 14px;
        white-space: nowrap;
    }

    .rg-nav a::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 4px;
        height: 2px;
        border-radius: 2px;
        background: var(--rg-copper);
        transform: scaleX(0);
        transition: transform .25s var(--rg-ease);
    }

    .rg-nav a:hover { color: var(--rg-indigo); }
    .rg-nav a:hover::after { transform: scaleX(1); }
    .rg-nav a[aria-current="page"]::after { transform: scaleX(1); }

    .rg-search { width: 250px; }
}

@media (min-width: 1200px) {
    .rg-search { width: 280px; }
    .rg-nav { gap: 10px; }
}

/* Sections --------------------------------------------------------------- */

.rg-section { padding-block: 44px; }
.rg-section--tint { background: var(--rg-chambray); }

.rg-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.rg-section__actions { display: flex; align-items: center; gap: 16px; }

@media (min-width: 1024px) {
    .rg-section { padding-block: 64px; }
    .rg-section__head { margin-bottom: 28px; }
}

.rg-results { padding-bottom: 24px; }

.rg-empty {
    padding: 32px 20px;
    border: 1px dashed var(--rg-line-strong);
    border-radius: var(--rg-radius);
    color: var(--rg-muted);
    text-align: center;
}

/* Collections ------------------------------------------------------------ */

.rg-collections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--rg-gap);
}

.rg-collection {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 50% 50% var(--rg-radius) var(--rg-radius) / 37.5% 37.5% var(--rg-radius) var(--rg-radius);
    background: var(--rg-chambray);
    isolation: isolate;
}

.rg-collection img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--rg-ease);
}

.rg-collection::after {
    content: "";
    position: absolute;
    top: 40%;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgba(18, 19, 24, .78), rgba(18, 19, 24, 0));
    z-index: 0;
}

.rg-collection__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px;
    color: var(--rg-cotton);
    text-align: center;
}

.rg-collection__name {
    overflow: hidden;
    font: 600 15px/1.25 var(--rg-sans);
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rg-collection__meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    letter-spacing: .04em;
    opacity: .85;
}

.rg-collection__meta svg { width: 14px; height: 14px; transition: transform .25s var(--rg-ease); }

/* Mouse only: phones keep :hover after a tap, which left the image enlarged */
@media (hover: hover) {
    .rg-collection:hover img { transform: scale(1.05); }
    .rg-collection:hover .rg-collection__meta svg { transform: translateX(3px); }
}

/* Phones: swipeable row of collections */
@media (max-width: 639px) {
    .rg-collections {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - var(--rg-gap) * 2) / 2.2);
        margin-inline: calc(var(--rg-pad) * -1);
        padding: 0 var(--rg-pad) 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--rg-pad);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .rg-collections::-webkit-scrollbar { display: none; }
    .rg-collection { scroll-snap-align: start; }
    .rg-collection__body { padding: 12px 8px; }
    .rg-collection__name { font-size: 13.5px; }
    .rg-collection__meta { font-size: 11.5px; }
}

@media (min-width: 768px) {
    .rg-collections { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
    .rg-collections { grid-template-columns: repeat(6, 1fr); }
    .rg-collection__name { font-size: 14px; }
    .rg-collection__body { padding: 14px 10px; }
}

/* Product grid, rail & card ---------------------------------------------- */

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

@media (min-width: 640px) {
    .rg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

    /* Desktop cards are wide enough for one-line names */
    .rg-card .rg-card__title { min-height: 1.35em; -webkit-line-clamp: 1; line-clamp: 1; }
}

.rg-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--rg-gap)) / 1.7);
    gap: var(--rg-gap);
    margin-inline: calc(var(--rg-pad) * -1);
    padding: 2px var(--rg-pad) 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rg-pad);
    scrollbar-width: none;
}

.rg-rail::-webkit-scrollbar { display: none; }
.rg-rail > * { scroll-snap-align: start; }

.rg-rail-nav { display: none; gap: 8px; }

@media (min-width: 640px) {
    .rg-rail { grid-auto-columns: calc((100% - var(--rg-gap) * 2) / 3.2); }
    .rg-rail-nav { display: flex; }
}

@media (min-width: 1024px) {
    .rg-rail {
        grid-auto-columns: calc((100% - var(--rg-gap) * 3) / 4);
        margin-inline: 0;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }
}

.rg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius);
    background: var(--rg-paper);
    transition: box-shadow .3s, border-color .3s;
}

.rg-card:hover {
    border-color: var(--rg-line-strong);
    box-shadow: 0 20px 40px -28px rgba(19, 35, 58, .35);
}

.rg-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--rg-chambray);
}

.rg-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--rg-ease);
}

/* Mouse only: phones keep :hover after a tap, which left the image enlarged */
@media (hover: hover) {
    .rg-card:hover .rg-card__media img { transform: scale(1.04); }
}

/* Image and name open the product page */
.rg-card__link { display: block; height: 100%; }
.rg-card__title a { transition: color .2s; }
.rg-card__title a:hover { color: var(--rg-indigo); }

.rg-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--rg-ink);
    color: var(--rg-cotton);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.rg-badge--sale { background: var(--rg-copper-dark); }

/* Image position in a slider, e.g. "1/4" */
.rg-count {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(22, 24, 29, .62);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    pointer-events: none;
}

/* Product card image slider ---------------------------------------------- */

/* Slides sit side by side; swiping or scrolling snaps to one image */
.rg-card__slider { height: 100%; }

.rg-card__track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.rg-card__track::-webkit-scrollbar { display: none; }

.rg-card__slide {
    flex: 0 0 100%;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Previous / next: shown on hover with a mouse, always on touch screens */
.rg-card__nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--rg-indigo);
    box-shadow: 0 4px 12px -6px rgba(19, 35, 58, .5);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s, background .2s;
}

.rg-card__nav--prev { left: 8px; }
.rg-card__nav--next { right: 8px; }
.rg-card__nav svg { width: 16px; height: 16px; }
.rg-card__nav:hover { background: var(--rg-paper); }
.rg-card__nav:focus-visible { outline: 2px solid var(--rg-indigo); outline-offset: 2px; }

.rg-card:hover .rg-card__nav,
.rg-card__nav:focus-visible { opacity: 1; }

.rg-card .rg-card__nav:disabled { opacity: 0; pointer-events: none; }

@media (hover: none) {
    .rg-card__nav { width: 26px; height: 26px; opacity: .9; }
    .rg-card__nav--prev { left: 6px; }
    .rg-card__nav--next { right: 6px; }
    .rg-card__nav svg { width: 14px; height: 14px; }
}

/* Inside the Most popular rail, a swipe past the first / last image moves the rail */
.rg-rail .rg-card__track { overscroll-behavior-x: auto; }

.rg-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px 10px 12px;
}

.rg-card__cat {
    color: var(--rg-muted);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.rg-card__title {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: var(--rg-ink);
    min-height: 2.7em; /* always two lines tall so prices and buttons line up across a row */
    font: 500 13.5px/1.35 var(--rg-sans);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.rg-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-top: 4px;
    color: var(--rg-indigo);
    font-size: 14.5px;
    font-weight: 600;
}

.rg-card__price s { color: var(--rg-muted); font-size: 12.5px; font-weight: 400; }

.rg-card__bulk {
    margin-top: 3px;
    color: var(--rg-copper-dark);
    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 500;
}

.rg-card__bulk span { display: block; color: var(--rg-muted); font-weight: 400; white-space: nowrap; }

.rg-card__actions {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}

.rg-card__actions form { margin: 0; }

.rg-card__actions .rg-btn {
    min-height: 38px;
    padding: 6px 8px;
    gap: 6px;
    font-size: 12px;
    white-space: normal;
}

.rg-card__actions .rg-btn svg { width: 16px; height: 16px; }

@media (max-width: 639px) {
    .rg-card__actions {
        grid-template-columns: minmax(0, 1fr) 40px;
        gap: 8px;
        padding-top: 10px;
    }

    /* Matching rounded-square pair: Add to Cart + WhatsApp icon */
    .rg-card__actions .rg-btn {
        min-height: 40px;
        padding: 0 8px;
        gap: 6px;
        border-radius: 10px;
        font-size: 12.5px;
        white-space: nowrap;
    }

    .rg-card__actions .rg-btn--primary svg { width: 16px; height: 16px; }

    /* Two-up grid cards are narrow: text-only button with room either side */
    .rg-grid .rg-card__actions .rg-btn--primary { padding: 0 12px; }
    .rg-grid .rg-card__actions .rg-btn--primary svg { display: none; }

    .rg-card__actions .rg-btn--wa {
        width: 40px;
        padding: 0;
        border-color: #CDE7D7;
        background: #EFF7F2;
    }

    .rg-card__actions .rg-btn--wa svg { width: 20px; height: 20px; }

    .rg-btn__label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
}

/* Narrow phones: drop the cart icon so the label always fits */
@media (max-width: 379px) {
    .rg-card__actions .rg-btn--primary svg { display: none; }
}

@media (min-width: 640px) {
    .rg-card__body { padding: 14px 14px 16px; }
    .rg-card__cat { font-size: 11px; }
    .rg-card__title { font-size: 15px; }
    .rg-card__price { font-size: 16px; }
    .rg-card__bulk { font-size: 12.5px; }
    .rg-card__bulk span { display: inline; margin-left: 6px; }

    .rg-card__actions .rg-btn {
        min-height: 40px;
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* Phones: keep the gap between a rail section (Most popular) and the delivery card short,
   on one continuous background */
@media (max-width: 639px) {
    .rg-section--rail:has(+ .rg-benefits) { padding-bottom: 0; }
    .rg-section--rail + .rg-benefits { padding-top: 20px; }
    .rg-section--rail.rg-section--tint + .rg-benefits { background: var(--rg-chambray); }
}

/* Most popular on phones: a ranked top-5 list instead of a carousel */
@media (max-width: 639px) {
    .rg-rail {
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-columns: auto;
        gap: 10px;
        margin-inline: 0;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
        counter-reset: rg-rank;
    }

    .rg-rail > .rg-card:nth-child(n + 6) { display: none; }

    .rg-rail .rg-card {
        flex-direction: row;
        counter-increment: rg-rank;
    }

    .rg-rail .rg-card::before {
        content: counter(rg-rank);
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 1;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--rg-indigo);
        color: #fff;
        font: 600 12px/24px var(--rg-sans);
        text-align: center;
        box-shadow: 0 0 0 2px var(--rg-paper);
    }

    .rg-rail .rg-card__media {
        flex: 0 0 108px;
        aspect-ratio: auto;
        min-height: 140px;
    }

    .rg-rail .rg-badge {
        top: auto;
        bottom: 6px;
        left: 6px;
        padding: 2px 7px;
        font-size: 10.5px;
    }

    /* Small list images: swipe only, with a compact count */
    .rg-rail .rg-card__nav { display: none; }
    .rg-rail .rg-count { top: 6px; right: 6px; padding: 2px 7px; font-size: 10.5px; }

    .rg-rail .rg-card__body { min-width: 0; padding: 10px 12px 12px; }
    .rg-rail .rg-card__title { min-height: 0; -webkit-line-clamp: 1; line-clamp: 1; }
    .rg-rail .rg-card__bulk span { display: inline; margin-left: 4px; }
    .rg-rail .rg-card__actions { padding-top: 8px; }
}

/* Benefits --------------------------------------------------------------- */

.rg-benefits {
    padding-block: 40px;
    border-top: 1px solid var(--rg-line);
    background: var(--rg-paper);
}

.rg-benefits__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
}

.rg-benefit svg {
    width: 46px;
    height: 46px;
    padding: 12px;
    border-radius: 50%;
    background: var(--rg-chambray);
    color: var(--rg-indigo);
}

.rg-benefit h3 { margin-top: 12px; color: var(--rg-ink); font-size: 15px; font-weight: 600; }
.rg-benefit p { margin-top: 4px; color: var(--rg-muted); font-size: 13.5px; line-height: 1.5; }

/* Phones: one card with a row per benefit */
@media (max-width: 639px) {
    .rg-benefits { padding-block: 32px; border-top: 0; background: var(--rg-cotton); }

    .rg-benefits__grid {
        width: auto;
        margin-inline: var(--rg-pad);
        padding-inline: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--rg-line);
        border-radius: var(--rg-radius);
        background: var(--rg-paper);
    }

    .rg-benefit {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        padding: 14px 16px;
    }

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

    .rg-benefit svg {
        grid-row: span 2;
        width: 40px;
        height: 40px;
        padding: 10px;
        background: var(--rg-chambray);
    }

    .rg-benefit h3 { margin-top: 0; font-size: 14.5px; }
    .rg-benefit p { margin-top: 1px; font-size: 13px; line-height: 1.45; }
}

@media (min-width: 900px) {
    .rg-benefits { padding-block: 56px; }
    .rg-benefits__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
}

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

.rg-footer {
    padding-top: 56px;
    background: var(--rg-raw);
    color: rgba(244, 246, 249, .72);
    font-size: 14px;
}

.rg-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
.rg-footer__brand, .rg-footer__col:last-child { grid-column: 1 / -1; }

.rg-footer__brand p { max-width: 36ch; margin-top: 16px; }

.rg-footer__col h3 {
    margin-bottom: 14px;
    color: var(--rg-cotton);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.rg-footer__col li + li { margin-top: 10px; }
.rg-footer a { transition: color .2s; }
.rg-footer a:hover { color: var(--rg-copper-light); }

.rg-footer__contact li { display: flex; align-items: flex-start; gap: 10px; }
.rg-footer__contact svg { width: 17px; height: 17px; margin-top: 3px; flex: none; color: var(--rg-copper-light); }

.rg-social { display: flex; gap: 10px; margin-top: 22px; }

.rg-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(244, 246, 249, .2);
    border-radius: 50%;
    color: var(--rg-cotton);
    transition: border-color .2s, background-color .2s;
}

.rg-social a:hover { border-color: var(--rg-copper-light); background: rgba(244, 246, 249, .06); color: var(--rg-cotton); }
.rg-social svg { width: 18px; height: 18px; }

.rg-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 44px;
    padding-block: 20px calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(244, 246, 249, .12);
    font-size: 12.5px;
}

@media (min-width: 1024px) {
    .rg-footer { padding-top: 72px; }
    .rg-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; }
    .rg-footer__brand, .rg-footer__col:last-child { grid-column: auto; }
}

/* Cart drawer ------------------------------------------------------------ */

.rg-cart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    pointer-events: none;
    /* Hide only after the slide-out has finished */
    transition: visibility 0s linear .35s;
}

.rg-cart__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(23, 32, 43, .45);
    opacity: 0;
    transition: opacity .3s;
}

.rg-cart__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 86%;
    width: calc(100% - 56px); /* keep a strip of the page visible so it reads as a drawer */
    max-width: 420px;
    border-radius: 18px 0 0 18px;
    overflow: hidden;
    background: var(--rg-cotton);
    box-shadow: -20px 0 50px -20px rgba(19, 35, 58, .35);
    transform: translateX(100%);
    transition: transform .35s var(--rg-ease);
}

/* .is-open from JS; :target is the no-JS fallback, cancelled by .is-closed once JS closes it */
.rg-cart.is-open,
.rg-cart:target:not(.is-closed) { visibility: visible; pointer-events: auto; transition-delay: 0s; }

.rg-cart.is-open .rg-cart__overlay,
.rg-cart:target:not(.is-closed) .rg-cart__overlay { opacity: 1; }

.rg-cart.is-open .rg-cart__panel,
.rg-cart:target:not(.is-closed) .rg-cart__panel { transform: none; }

.rg-cart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px 14px 20px;
    border-bottom: 1px solid var(--rg-line);
}

.rg-cart__head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rg-indigo);
    font: 700 1.2rem/1.2 var(--rg-sans);
    letter-spacing: -.01em;
}

.rg-cart__head h2 span {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--rg-copper-soft);
    color: var(--rg-copper-dark);
    font: 600 12px/1.5 var(--rg-sans);
}

.rg-cart__head h2 span[hidden] { display: none; }

.rg-cart__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.rg-cart__list { padding: 0 20px; }

.rg-cart__item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    padding-block: 16px;
    border-bottom: 1px solid var(--rg-line);
}

.rg-cart__item img {
    width: 64px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--rg-chambray);
}

.rg-cart__info { min-width: 0; }
.rg-cart__name { font-size: 14px; font-weight: 500; line-height: 1.35; }
.rg-cart__unit { margin-top: 2px; color: var(--rg-muted); font-size: 12.5px; }
.rg-cart__hint { display: block; font-size: 11.5px; }
.rg-cart__line { color: var(--rg-indigo); font-size: 14px; font-weight: 600; white-space: nowrap; }

.rg-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--rg-copper-soft);
    color: var(--rg-copper-dark);
    font-size: 11px;
    font-weight: 600;
}

.rg-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.rg-qty form { margin: 0; }

.rg-qty button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--rg-line-strong);
    border-radius: 8px;
    background: var(--rg-paper);
    font-size: 16px;
    line-height: 1;
}

.rg-qty button:hover { border-color: var(--rg-indigo); }
.rg-qty > span { min-width: 26px; font-size: 14px; font-weight: 600; text-align: center; }

.rg-qty__remove { margin-left: 6px; }

.rg-qty__remove button {
    width: auto;
    height: auto;
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--rg-muted);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rg-cart__foot {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rg-line);
    background: var(--rg-cotton);
}

.rg-cart__total { display: flex; justify-content: space-between; font-size: 15px; }
.rg-cart__total strong { color: var(--rg-indigo); font-size: 17px; }
.rg-cart__note { margin: 4px 0 14px; color: var(--rg-muted); font-size: 12.5px; }
.rg-cart__foot .rg-btn { min-height: 48px; }
.rg-cart__foot .rg-btn svg { color: #8EE0AE; }

.rg-cart__view {
    display: block;
    margin-top: 10px;
    color: var(--rg-indigo);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
}

.rg-cart__empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 24px;
    color: var(--rg-muted);
    text-align: center;
}

.rg-cart__empty svg { width: 44px; height: 44px; color: var(--rg-line-strong); }

/* Toast ------------------------------------------------------------------ */

.rg-toast {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 120;
    max-width: calc(100% - 32px);
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--rg-ink);
    color: var(--rg-cotton);
    font-size: 14px;
    box-shadow: 0 16px 40px -16px rgba(23, 32, 43, .5);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity .25s, transform .3s var(--rg-ease);
}

.rg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.rg-toast.is-error { background: var(--rg-copper-dark); }

/* Touch screens ---------------------------------------------------------- */

/* Storefront only (#top): signed-in admin pages load this file too.
   manipulation drops double-tap zoom and the tap delay but keeps scrolling,
   swiping and pinch-zoom, so people can still enlarge the page. It is set on
   every element because sliders are scroll containers of their own. */
#top,
#top * { touch-action: manipulation; }

@media (pointer: coarse) {
    /* iOS zooms into any field under 16px when it is focused */
    #top .rg-search input,
    #top .rg-shop__sort select,
    #top .rg-checkout__field input,
    #top .rg-checkout__field textarea { font-size: 16px; }

    /* Bigger hit areas for the small controls, same look */
    #top .rg-card__nav::after,
    #top .rg-qty button::after {
        content: "";
        position: absolute;
        inset: -8px;
    }

    #top .rg-qty button { position: relative; }
}

/* Motion preferences ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .rg-page *,
    .rg-page *::before,
    .rg-page *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}