/* ==========================================================================
   rp-aura.css — the "Aura" storefront template
   ==========================================================================

   Loaded AFTER rp-core.css and rp-shop.css, never instead of them. That order is
   load-bearing:

     rp-core.css   the --rp-* design tokens and the shared primitives
     rp-shop.css   the classic storefront
     rp-aura.css   this file — Aura's own components, plus the token overrides
                   that restyle anything Aura has no view for

   A template only ships the blades it actually changes; the checkout form, the
   guest order page and the paginator fall back to the classic template's markup.
   Those pages land here wearing rp-shop-* classes, so this sheet finishes by
   softening them rather than leaving two visual languages in one shop.

   Colour comes from ONE source: --rp-red and the shades derived from it. That is
   the token a merchant's accent_color overrides through the inline block at the
   foot of the layout's <head>, so a hard-coded hex anywhere in this file is a
   merchant's branding silently ignored. There are none. The violet below is a
   DEFAULT, written into the same token, and it loses to a merchant's own colour
   exactly as it should.

   Names are rp-aura-* so nothing here can collide with rp-shop-*, which is still
   live underneath it on every inherited page.
   ========================================================================== */

:root {
    /* ---- Aura's default accent -------------------------------------------
       Overridden wholesale by StorefrontSetting::accentTokens() when the
       merchant has picked a colour. Shades match the factors that method uses
       (0.85 / 0.70), so a merchant's violet and ours behave identically. */
    --rp-red:        #6D4AD6;
    --rp-red-lit:    #6D4AD6;
    --rp-red-hover:  #5D3FB6;
    --rp-red-deep:   #4C3496;
    --rp-glow:       rgba(109, 74, 214, .22);
    --rp-red-soft:   rgba(109, 74, 214, .10);
    --rp-red-tint:   rgba(109, 74, 214, .05);
    --rp-grad-ember: linear-gradient(135deg, #6D4AD6 0%, #6041BC 55%, #4A3293 100%);

    /* ---- The canvas ------------------------------------------------------
       Not white. The whole template is white cards, and white cards on a white
       page have to be drawn with borders; on a tinted page their own edges do
       the work and the result is quieter. */
    --rp-aura-canvas:   #F5F2FE;
    --rp-aura-card:     #FFFFFF;
    --rp-aura-sunk:     #F7F5FD;
    --rp-aura-ink:      #191430;
    --rp-aura-muted:    #7A7392;
    --rp-aura-faint:    #A49EB8;
    --rp-aura-line:     #ECE7FA;

    /* Corners. Aura is a rounded template and these three values are the whole
       vocabulary — a fourth radius is how a set of cards stops looking related. */
    --rp-aura-r:        18px;
    --rp-aura-r-lg:     26px;
    --rp-aura-r-pill:   999px;

    --rp-aura-shadow:   0 8px 28px rgba(76, 52, 150, .07);
    --rp-aura-shadow-l: 0 16px 44px rgba(76, 52, 150, .12);

    /* The fixed tab bar's height, so everything that has to clear it reads the
       figure from one place instead of guessing at it. */
    --rp-aura-tabs-h:   62px;

    /* Also override the core canvas token, so an INHERITED classic page — the
       checkout, the order status page — sits on the same background as the
       pages Aura draws itself. */
    --rp-bg: #F5F2FE;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.rp-aura {
    background: var(--rp-aura-canvas);
    color: var(--rp-aura-ink);

    /* Neither rp-core.css nor rp-shop.css zeroes the body margin, so the shop
       has always rendered inside the browser's default 8px. On the classic
       template that is invisible — it has no full-bleed furniture. Aura does:
       the tab bar is `position: fixed; inset-inline: 0` and sits at the true
       page edge, while everything else would start 8px in, so the bar and the
       content would be measurably out of line and the sticky header would show
       a strip of canvas down both sides.

       Scoped to Aura rather than fixed in rp-shop.css on purpose. The same
       margin is on every live classic shop on the platform, and quietly
       reflowing all of them is not this change's to make. */
    margin: 0;
}

/* The tab bar is fixed, so the last thing on the page would otherwise sit under
   it. env() adds the home-indicator strip on an iPhone and resolves to 0
   everywhere else.

   Keyed to its own class rather than to .rp-aura, because the holding page is
   Aura-coloured but has no tab bar, and on it this would be 62px of empty canvas
   under a centred card. */
.rp-aura--tabs {
    padding-bottom: calc(var(--rp-aura-tabs-h) + env(safe-area-inset-bottom, 0px));
}

/* Only on a phone: on a wide screen the tab bar is display:none and the padding
   would be a strip of empty canvas under the footer. */
@media (min-width: 861px) {
    .rp-aura--tabs { padding-bottom: 0; }
}

.rp-aura-main { display: block; }

.rp-aura-page {
    padding-top: 1.25rem;
    padding-bottom: 2.5rem;
}

/* ==========================================================================
   Header
   ========================================================================== */

.rp-aura-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--rp-aura-canvas);
    /* Not a border: a hairline under a sticky bar draws a hard edge across the
       page the moment anything scrolls behind it. The fade reads as depth. */
    box-shadow: 0 1px 0 var(--rp-aura-line);
    padding-top: env(safe-area-inset-top, 0px);
}

.rp-aura-nav__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.rp-aura-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;             /* lets the name truncate instead of pushing the basket off */
    text-decoration: none;
    color: inherit;
    margin-inline-end: auto;
}

.rp-aura-brand__logo,
.rp-aura-brand__mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    object-fit: cover;
}

.rp-aura-brand__mark {
    display: grid;
    place-items: center;
    background: var(--rp-grad-ember);
    color: #fff;
    font-family: var(--rp-font-display, inherit);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
}

.rp-aura-brand__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rp-aura-brand__name {
    font-family: var(--rp-font-display, inherit);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--rp-aura-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-aura-brand__tagline {
    font-size: .74rem;
    color: var(--rp-aura-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-aura-nav__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

.rp-aura-nav__links { display: none; }

@media (min-width: 861px) {
    .rp-aura-nav__links { display: flex; gap: .25rem; margin-inline-end: .5rem; }
}

.rp-aura-navlink {
    padding: .5rem .9rem;
    border-radius: var(--rp-aura-r-pill);
    font-weight: 600;
    font-size: .9rem;
    color: var(--rp-aura-muted);
    text-decoration: none;
}

.rp-aura-navlink:hover { color: var(--rp-red); background: var(--rp-red-tint); }
.rp-aura-navlink.is-active { color: var(--rp-red); background: var(--rp-red-soft); }

.rp-aura-iconbtn {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--rp-aura-card);
    color: var(--rp-aura-ink);
    border: 1px solid var(--rp-aura-line);
    text-decoration: none;
    font-size: 1rem;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.rp-aura-iconbtn:hover { transform: translateY(-1px); box-shadow: var(--rp-aura-shadow); }
.rp-aura-iconbtn.is-active,
.rp-aura-iconbtn--cart:hover { background: var(--rp-red); border-color: var(--rp-red); color: #fff; }
.rp-aura-iconbtn--chat:hover { background: #25D366; border-color: #25D366; color: #fff; }

.rp-aura-iconbtn__count {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: var(--rp-aura-r-pill);
    background: var(--rp-red);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid var(--rp-aura-canvas);
}

.rp-aura-iconbtn.is-active .rp-aura-iconbtn__count,
.rp-aura-iconbtn--cart:hover .rp-aura-iconbtn__count {
    background: #fff;
    color: var(--rp-red);
}

/* ---- Search ------------------------------------------------------------- */

.rp-aura-nav__search { padding-bottom: .85rem; }

.rp-aura-search {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--rp-aura-card);
    border: 1px solid var(--rp-aura-line);
    border-radius: var(--rp-aura-r-pill);
    padding: .1rem .1rem .1rem 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rp-aura-search:focus-within {
    border-color: var(--rp-red);
    box-shadow: 0 0 0 4px var(--rp-red-tint);
}

.rp-aura-search__icon {
    color: var(--rp-aura-faint);
    font-size: .9rem;
    flex: 0 0 auto;
}

.rp-aura-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: .8rem .75rem;
    font: inherit;
    font-size: .92rem;
    color: var(--rp-aura-ink);
}

.rp-aura-search input::placeholder { color: var(--rp-aura-faint); }

/* Safari draws its own clear button inside a type=search and it collides with
   the submit button on the right. */
.rp-aura-search input::-webkit-search-decoration,
.rp-aura-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.rp-aura-search__go {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--rp-aura-r-pill);
    background: var(--rp-red);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease;
}

.rp-aura-search__go:hover { background: var(--rp-red-hover); }

/* ==========================================================================
   The bottom tab bar
   ========================================================================== */

.rp-aura-tabs {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    background: var(--rp-aura-card);
    border-top: 1px solid var(--rp-aura-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 24px rgba(76, 52, 150, .06);
}

/* Hidden, not merely moved off-screen, so it leaves the tab order too — on a
   wide screen every one of these links is already in the header. */
@media (min-width: 861px) {
    .rp-aura-tabs { display: none; }
}

.rp-aura-tab {
    flex: 1 1 0;
    min-width: 0;
    height: var(--rp-aura-tabs-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    text-decoration: none;
    color: var(--rp-aura-muted);
    font-size: .68rem;
    font-weight: 600;
}

.rp-aura-tab.is-active { color: var(--rp-red); }

.rp-aura-tab__icon {
    position: relative;
    font-size: 1.05rem;
    line-height: 1;
}

.rp-aura-tab__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-aura-tab__count {
    position: absolute;
    top: -6px;
    inset-inline-start: 62%;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--rp-aura-r-pill);
    background: var(--rp-red);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.rp-aura-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--rp-aura-r-pill);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.rp-aura-btn--primary {
    background: var(--rp-red);
    color: #fff;
    box-shadow: 0 8px 20px var(--rp-glow);
}

.rp-aura-btn--primary:hover {
    background: var(--rp-red-hover);
    color: #fff;
    transform: translateY(-1px);
}

.rp-aura-btn--ghost {
    background: var(--rp-aura-card);
    border-color: var(--rp-aura-line);
    color: var(--rp-aura-ink);
}

.rp-aura-btn--ghost:hover { border-color: var(--rp-red); color: var(--rp-red); }

/* aria-disabled, not the disabled attribute: these are anchors, and an <a> has
   no disabled state to set. pointer-events is what actually stops the tap. */
.rp-aura-btn.is-disabled {
    opacity: .5;
    pointer-events: none;
    box-shadow: none;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.rp-aura-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--rp-aura-r-lg);
    background: var(--rp-grad-ember);
    color: #fff;
    padding: 2rem 1.5rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--rp-aura-shadow-l);
}

.rp-aura-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The banner is a merchant's own photograph and the text has to stay legible
       on top of whatever they uploaded, including a white studio shot. */
    opacity: .38;
}

.rp-aura-hero--image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(20, 12, 46, .72) 0%, rgba(20, 12, 46, .30) 70%, rgba(20, 12, 46, .10) 100%);
}

.rp-aura-hero__body {
    position: relative;
    z-index: 1;
    max-width: 30rem;
}

.rp-aura-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: var(--rp-aura-r-pill);
    background: rgba(255, 255, 255, .2);
    font-size: .74rem;
    font-weight: 600;
    margin-bottom: .85rem;
}

.rp-aura .rp-aura-hero__title {
    font-family: var(--rp-font-display, inherit);
    font-weight: 700;
    font-size: clamp(1.6rem, 5.5vw, 2.4rem);
    line-height: 1.15;
    margin: 0 0 .6rem;
    color: #fff;
}

.rp-aura .rp-aura-hero__sub {
    font-size: .95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 1.35rem;
}

.rp-aura-hero .rp-aura-btn--primary {
    background: #fff;
    color: var(--rp-red-deep);
    box-shadow: 0 8px 20px rgba(20, 12, 46, .22);
}

.rp-aura-hero .rp-aura-btn--primary:hover { background: #fff; color: var(--rp-red); }

/* ==========================================================================
   Category tiles and chips
   ========================================================================== */

.rp-aura-tiles {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    margin-bottom: 1.75rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.rp-aura-tiles::-webkit-scrollbar { display: none; }

.rp-aura-tile {
    flex: 0 0 auto;
    width: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--rp-aura-muted);
    font-size: .74rem;
    font-weight: 600;
    text-align: center;
}

.rp-aura-tile__disc {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--rp-aura-card);
    border: 1px solid var(--rp-aura-line);
    color: var(--rp-red);
    font-family: var(--rp-font-display, inherit);
    font-weight: 700;
    font-size: 1.35rem;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.rp-aura-tile:hover .rp-aura-tile__disc,
.rp-aura-tile.is-active .rp-aura-tile__disc {
    background: var(--rp-red);
    border-color: var(--rp-red);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px var(--rp-glow);
}

.rp-aura-tile__disc--all { font-size: 1.05rem; }

.rp-aura-tile__name {
    /* Two lines, then ellipsis. A category called "Household & Cleaning" must
       not make its tile twice as tall as its neighbours. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

.rp-aura-tile:hover .rp-aura-tile__name,
.rp-aura-tile.is-active .rp-aura-tile__name { color: var(--rp-red); }

.rp-aura-chips {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    margin-bottom: 1.25rem;
    scrollbar-width: none;
}

.rp-aura-chips::-webkit-scrollbar { display: none; }

.rp-aura-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border-radius: var(--rp-aura-r-pill);
    background: var(--rp-aura-card);
    border: 1px solid var(--rp-aura-line);
    color: var(--rp-aura-muted);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.rp-aura-chip:hover { border-color: var(--rp-red); color: var(--rp-red); }

.rp-aura-chip.is-active {
    background: var(--rp-red);
    border-color: var(--rp-red);
    color: #fff;
}

.rp-aura-chip__count {
    font-size: .72rem;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.rp-aura-section { margin-bottom: 2.25rem; }

.rp-aura-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rp-aura .rp-aura-section__title {
    font-family: var(--rp-font-display, inherit);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 0;
    color: var(--rp-aura-ink);
}

.rp-aura-more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--rp-red);
    text-decoration: none;
    white-space: nowrap;
}

.rp-aura-more:hover { color: var(--rp-red-hover); }
.rp-aura-more i { font-size: .7rem; }

.rp-aura-sort {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border-radius: var(--rp-aura-r-pill);
    background: var(--rp-aura-card);
    border: 1px solid var(--rp-aura-line);
    color: var(--rp-aura-muted);
    font-size: .82rem;
}

.rp-aura-sort select {
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--rp-aura-ink);
    cursor: pointer;
}

/* ==========================================================================
   Product grid
   ========================================================================== */

.rp-aura-grid {
    display: grid;
    /* Two across on a phone, which is the shape the whole template is drawn
       for. auto-fill from there, so a desktop fills its width without the cards
       stretching to postcard size. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 620px) {
    .rp-aura-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 1.25rem; }
}

.rp-aura-card {
    display: flex;
    flex-direction: column;
    background: var(--rp-aura-card);
    border-radius: var(--rp-aura-r);
    overflow: hidden;
    border: 1px solid var(--rp-aura-line);
    transition: transform .18s ease, box-shadow .18s ease;
}

.rp-aura-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--rp-aura-shadow-l);
}

.rp-aura-card--out { opacity: .62; }

.rp-aura-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--rp-aura-sunk);
    overflow: hidden;
}

.rp-aura-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rp-aura-card__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--rp-aura-faint);
    font-size: 1.6rem;
}

.rp-aura-card__body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .8rem .85rem 1rem;
    flex: 1 1 auto;
}

.rp-aura-card__name {
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.3;
    color: var(--rp-aura-ink);
    text-decoration: none;
    /* Clamped for the same reason the tile names are: a grid whose rows are
       different heights stops reading as a grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rp-aura-card__name:hover { color: var(--rp-red); }

.rp-aura-card__sub {
    font-size: .74rem;
    color: var(--rp-aura-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-aura-card__foot {
    margin-top: auto;
    padding-top: .65rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
}

.rp-aura-price {
    font-family: var(--rp-font-display, inherit);
    font-weight: 700;
    font-size: 1rem;
    color: var(--rp-aura-ink);
    line-height: 1.25;
    min-width: 0;
}

.rp-aura-price__from {
    display: block;
    font-family: var(--rp-font-body, inherit);
    font-weight: 500;
    font-size: .68rem;
    color: var(--rp-aura-muted);
    text-transform: lowercase;
}

.rp-aura-price__unit {
    font-family: var(--rp-font-body, inherit);
    font-weight: 500;
    font-size: .72rem;
    color: var(--rp-aura-muted);
}

.rp-aura-add {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--rp-aura-r-pill);
    background: var(--rp-red-soft);
    color: var(--rp-red);
    font-size: .85rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.rp-aura-add:hover {
    background: var(--rp-red);
    color: #fff;
    transform: scale(1.08);
}

/* ==========================================================================
   Badges
   ========================================================================== */

.rp-aura-badge {
    position: absolute;
    top: .6rem;
    inset-inline-start: .6rem;
    z-index: 2;
    padding: .25rem .6rem;
    border-radius: var(--rp-aura-r-pill);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .01em;
    background: var(--rp-aura-card);
    color: var(--rp-aura-ink);
    box-shadow: var(--rp-aura-shadow);
}

.rp-aura-badge--out { background: var(--rp-aura-ink); color: #fff; }
.rp-aura-badge--low { background: var(--rp-amber, #B4690E); color: #fff; }

/* Outside a positioned media box — on the product page's "sold out" line — the
   badge has to fall back to sitting in the flow. */
.rp-aura-detail__gone .rp-aura-badge,
.rp-aura-line__price .rp-aura-badge {
    position: static;
    display: inline-block;
}

/* ==========================================================================
   Product detail
   ========================================================================== */

.rp-aura-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1rem;
    padding: .45rem .9rem .45rem .7rem;
    border-radius: var(--rp-aura-r-pill);
    background: var(--rp-aura-card);
    border: 1px solid var(--rp-aura-line);
    color: var(--rp-aura-muted);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}

.rp-aura-back:hover { color: var(--rp-red); border-color: var(--rp-red); }
.rp-aura-back i { font-size: .7rem; }

/* RTL: the chevron points the wrong way round when the page direction flips. */
[dir="rtl"] .rp-aura-back i { transform: scaleX(-1); }

.rp-aura-detail {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 861px) {
    .rp-aura-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }

    /* Capped, because a square that takes half of a 1280px window is a 620px
       photograph of a tube of toothpaste and it pushes the price and the Add
       button into the corner of the screen. */
    .rp-aura-detail__media { max-width: 460px; }
}

.rp-aura-detail__media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--rp-aura-r-lg);
    overflow: hidden;
    background: linear-gradient(160deg, var(--rp-red-tint) 0%, var(--rp-aura-sunk) 100%);
    box-shadow: var(--rp-aura-shadow);
}

.rp-aura-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;      /* contain, not cover: this is the one place the whole product should be visible */
    display: block;
}

.rp-aura-detail__body { min-width: 0; }

.rp-aura-detail__eyebrow {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--rp-red);
    margin-bottom: .35rem;
}

.rp-aura .rp-aura-detail__title {
    font-family: var(--rp-font-display, inherit);
    font-weight: 700;
    font-size: clamp(1.4rem, 4.5vw, 1.9rem);
    line-height: 1.2;
    margin: 0 0 .6rem;
    color: var(--rp-aura-ink);
}

.rp-aura .rp-aura-detail__price {
    font-family: var(--rp-font-display, inherit);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--rp-aura-ink);
    margin: 0 0 1rem;
}

.rp-aura-detail__desc {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--rp-aura-muted);
    margin-bottom: 1.5rem;
    white-space: pre-line;    /* merchants type descriptions with real line breaks */
}

.rp-aura-detail__gone { margin: 1.25rem 0; }

.rp-aura-detail__ask { margin-top: .85rem; }

.rp-aura .rp-aura-detail__code {
    margin-top: 1.25rem;
    font-size: .78rem;
    color: var(--rp-aura-faint);
    font-family: var(--rp-font-mono, monospace);
}

/* ---- Variant pills ------------------------------------------------------ */

.rp-aura-options {
    border: 0;
    padding: 0;
    margin: 0 0 1.35rem;
}

.rp-aura-options legend {
    padding: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--rp-aura-muted);
    margin-bottom: .6rem;
}

.rp-aura-options__list {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.rp-aura-option {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: .1rem;
    padding: .6rem 1.1rem;
    border-radius: var(--rp-aura-r);
    background: var(--rp-aura-card);
    border: 1.5px solid var(--rp-aura-line);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

/* The radio itself is the accessible control and is never removed from the
   page — display:none would take it out of the tab order and off every screen
   reader. It is laid over its own label instead, invisibly. */
.rp-aura-option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.rp-aura-option__name {
    font-size: .88rem;
    font-weight: 600;
    color: var(--rp-aura-ink);
}

.rp-aura-option__price {
    font-size: .76rem;
    color: var(--rp-aura-muted);
}

.rp-aura-option:hover { border-color: var(--rp-red); }

.rp-aura-option:has(input:checked) {
    border-color: var(--rp-red);
    background: var(--rp-red-soft);
}

.rp-aura-option:has(input:focus-visible) {
    box-shadow: 0 0 0 4px var(--rp-red-tint);
}

/* :has() is unsupported on some older Android WebViews still in use here. The
   fallback is not "no highlight" but a visible outline on the pill that holds
   focus, so the control is still operable — the server is the authority on
   which option was chosen either way. */
@supports not selector(:has(*)) {
    .rp-aura-option:focus-within { border-color: var(--rp-red); background: var(--rp-red-soft); }
}

.rp-aura-option.is-gone {
    opacity: .45;
    cursor: not-allowed;
}

.rp-aura-option.is-gone .rp-aura-option__name { text-decoration: line-through; }
.rp-aura-option.is-gone input { cursor: not-allowed; }

/* ---- Add to basket ------------------------------------------------------ */

.rp-aura-buybar {
    display: flex;
    align-items: stretch;
    gap: .65rem;
}

.rp-aura-qty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
    padding: .35rem .8rem;
    border-radius: var(--rp-aura-r-pill);
    background: var(--rp-aura-card);
    border: 1px solid var(--rp-aura-line);
    flex: 0 0 auto;
}

.rp-aura-qty__label {
    font-size: .66rem;
    font-weight: 600;
    color: var(--rp-aura-faint);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rp-aura-qty input {
    width: 3.4rem;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    color: var(--rp-aura-ink);
    padding: 0;
}

.rp-aura-buybar__cta { flex: 1 1 auto; }

/* ==========================================================================
   Basket
   ========================================================================== */

.rp-aura-lines {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-bottom: 1rem;
}

.rp-aura-line {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: .9rem;
    align-items: center;
    padding: .8rem;
    padding-inline-end: 2.4rem;   /* room for the remove button in the corner */
    background: var(--rp-aura-card);
    border: 1px solid var(--rp-aura-line);
    border-radius: var(--rp-aura-r);
}

@media (min-width: 620px) {
    .rp-aura-line { grid-template-columns: 76px minmax(0, 1fr) auto; }
}

.rp-aura-line.is-gone { opacity: .55; }

.rp-aura-line__media {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--rp-aura-sunk);
}

.rp-aura-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rp-aura-line__body { min-width: 0; }

.rp-aura-line__name {
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.3;
    margin-bottom: .15rem;
}

.rp-aura-line__name a { color: var(--rp-aura-ink); text-decoration: none; }
.rp-aura-line__name a:hover { color: var(--rp-red); }

.rp-aura-line__variant {
    font-size: .75rem;
    color: var(--rp-aura-muted);
    margin-bottom: .3rem;
}

.rp-aura-line__price {
    font-family: var(--rp-font-display, inherit);
    font-weight: 700;
    font-size: 1rem;
    color: var(--rp-aura-ink);
}

.rp-aura-line__each {
    display: block;
    font-family: var(--rp-font-body, inherit);
    font-weight: 500;
    font-size: .72rem;
    color: var(--rp-aura-muted);
}

.rp-aura-line__qty {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .2rem;
    margin-top: .5rem;
    background: var(--rp-aura-sunk);
    border-radius: var(--rp-aura-r-pill);
}

@media (min-width: 620px) {
    .rp-aura-line__qty { grid-column: 3; justify-self: end; margin-top: 0; }
}

.rp-aura-step {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--rp-aura-r-pill);
    background: var(--rp-aura-card);
    color: var(--rp-aura-ink);
    font-size: .72rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.rp-aura-step:hover { background: var(--rp-red); color: #fff; }

.rp-aura-line__qty input {
    width: 2.6rem;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    color: var(--rp-aura-ink);
    /* The spinners would sit on top of the stepper's own buttons. */
    -moz-appearance: textfield;
}

.rp-aura-line__qty input::-webkit-outer-spin-button,
.rp-aura-line__qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rp-aura-line__remove {
    position: absolute;
    top: .55rem;
    inset-inline-end: .55rem;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--rp-aura-r-pill);
    background: transparent;
    color: var(--rp-aura-faint);
    font-size: .8rem;
    cursor: pointer;
}

.rp-aura-line__remove:hover { background: var(--rp-red-soft); color: var(--rp-red); }

.rp-aura-lines__actions { margin-bottom: 1.5rem; }

.rp-aura-summary {
    background: var(--rp-aura-card);
    border: 1px solid var(--rp-aura-line);
    border-radius: var(--rp-aura-r-lg);
    padding: 1.35rem;
    box-shadow: var(--rp-aura-shadow);
}

.rp-aura-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    font-size: .92rem;
    color: var(--rp-aura-muted);
}

.rp-aura-summary__row--total {
    margin-top: .35rem;
    padding-top: .9rem;
    border-top: 1px solid var(--rp-aura-line);
    font-family: var(--rp-font-display, inherit);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--rp-aura-ink);
}

.rp-aura-summary__cta {
    width: 100%;
    margin-top: 1.1rem;
}

/* ==========================================================================
   Empty states
   ========================================================================== */

.rp-aura-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--rp-aura-card);
    border: 1px solid var(--rp-aura-line);
    border-radius: var(--rp-aura-r-lg);
}

.rp-aura-empty__icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--rp-red-soft);
    color: var(--rp-red);
    font-size: 1.5rem;
}

.rp-aura .rp-aura-empty h3 {
    font-family: var(--rp-font-display, inherit);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 .45rem;
    color: var(--rp-aura-ink);
}

.rp-aura .rp-aura-empty p {
    font-size: .92rem;
    color: var(--rp-aura-muted);
    margin: 0 auto;
    max-width: 30rem;
    line-height: 1.6;
}

.rp-aura-empty .rp-aura-btn { margin-top: 1.35rem; }

.rp-aura-pager { margin-top: 2rem; }

/* ==========================================================================
   Footer
   ========================================================================== */

.rp-aura-foot {
    background: var(--rp-aura-card);
    border-top: 1px solid var(--rp-aura-line);
    padding: 2.5rem 0 1.5rem;
    margin-top: 1rem;
}

.rp-aura-foot__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .rp-aura-foot__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
}

.rp-aura-foot__brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .75rem;
}

.rp-aura-foot__brand img,
.rp-aura-foot__brand .rp-aura-brand__mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 12px;
    object-fit: cover;
}

.rp-aura .rp-aura-foot__block h4 {
    font-family: var(--rp-font-display, inherit);
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 .75rem;
    color: var(--rp-aura-ink);
}

.rp-aura .rp-aura-foot__brand h4 { margin: 0; }

.rp-aura .rp-aura-foot__block p {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--rp-aura-muted);
    margin: 0 0 .5rem;
}

.rp-aura .rp-aura-foot__block p i {
    flex: 0 0 1rem;
    margin-top: .22rem;
    color: var(--rp-red);
    font-size: .8rem;
}

.rp-aura-foot__block a { color: var(--rp-aura-muted); text-decoration: none; }
.rp-aura-foot__block a:hover { color: var(--rp-red); }

.rp-aura-foot__legal {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rp-aura-line);
    font-size: .8rem;
    color: var(--rp-aura-faint);
}

/* ==========================================================================
   Inherited classic pages
   ==========================================================================

   The checkout, the guest order page and the holding page have no Aura blade —
   they render the classic markup, inside Aura's layout. Their components are
   already token-driven, so they pick up the violet for free; what they do not
   pick up is Aura's shape. These rules give them the same corners, the same card
   surface and the same flat borders, so a shopper who reaches the checkout does
   not feel they have left the shop.

   Deliberately shallow. The point is to stop the two templates looking like two
   websites, not to re-skin every rule in rp-shop.css from out here.
   ========================================================================== */

.rp-aura .rp-shop-checkout,
.rp-aura .rp-shop-summary,
.rp-aura .rp-shop-orderhead,
.rp-aura .rp-shop-notice,
.rp-aura .rp-shop-empty,
.rp-aura .rp-shop-holding {
    border-radius: var(--rp-aura-r-lg);
    border-color: var(--rp-aura-line);
}

.rp-aura .rp-shop-card,
.rp-aura .rp-shop-line,
.rp-aura .rp-shop-lines {
    border-radius: var(--rp-aura-r);
    border-color: var(--rp-aura-line);
}

.rp-aura .rp-btn {
    border-radius: var(--rp-aura-r-pill);
}

.rp-aura input[type="text"],
.rp-aura input[type="tel"],
.rp-aura input[type="email"],
.rp-aura input[type="number"],
.rp-aura input[type="file"],
.rp-aura textarea,
.rp-aura select {
    border-radius: 14px;
}

/* The classic header and footer are never rendered under Aura — the layout
   includes Aura's own — but a stray one would stack on top of the sticky nav. */
.rp-aura .rp-shop-nav,
.rp-aura .rp-shop-foot { display: none; }

/* ==========================================================================
   Motion
   ========================================================================== */

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