/* ==========================================================================
   Aurora — editorial general retail
   --------------------------------------------------------------------------
   Reads as a considered shop rather than a catalogue dump: a serif display
   face against a quiet sans, a warm off-white ground, hairline rules instead
   of boxes, small uppercase eyebrows above each section, and product cards
   whose "add" button only appears on hover (on a phone it is always there,
   because there is no hover to reveal it).

   Everything colour- and font-related comes from the CSS custom properties
   the layout emits from the store's theme settings — this file only ever
   composes them.
   ========================================================================== */

.theme-aurora {
    --gutter: 18px;
    --header-h: 68px;
}

.theme-aurora h1,
.theme-aurora h2,
.theme-aurora h3 {
    letter-spacing: -0.02em;
}

.theme-aurora .aurora-eyebrow,
.theme-aurora .section__head > span:first-child {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.theme-aurora .aurora-display {
    font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.3rem);
    margin-block: 2px 22px;
}

/* --------------------------------------------------------------- header */
.theme-aurora .site-header { border-block-end-color: color-mix(in srgb, var(--color-border) 70%, transparent); }
.theme-aurora .brand { font-size: 1.28rem; letter-spacing: -0.03em; }
.theme-aurora .nav__link { font-size: .88rem; letter-spacing: .01em; }
.theme-aurora .announce { letter-spacing: .04em; }

/* ----------------------------------------------------------------- hero */
.theme-aurora .aurora-hero {
    position: relative;
    display: grid;                     /* slides stack in one cell */
    background: linear-gradient(180deg, var(--color-surface), color-mix(in srgb, var(--color-surface) 55%, var(--color-bg)));
    overflow: hidden;
}
.theme-aurora .aurora-hero__slide { grid-area: 1 / 1; }

.theme-aurora .aurora-hero__eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-block-end: 12px;
}
.theme-aurora .hero__copy h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem); }
.theme-aurora .hero__sub { font-size: 1.06rem; }
.theme-aurora .hero__media img { border-radius: var(--radius); box-shadow: var(--shadow-md); }

.theme-aurora .aurora-hero__nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding-block-end: 18px;
}
/* The chevron points "next"; the previous button is the same glyph flipped,
   and the whole pair flips again under RTL. */
.theme-aurora .aurora-hero__arrow { display: inline-flex; transform: rotate(180deg); }
[dir="rtl"] .theme-aurora .aurora-hero__nav .icon-btn svg { transform: rotate(180deg); }
.theme-aurora .aurora-hero__dots { display: flex; gap: 7px; align-items: center; }
.theme-aurora .aurora-hero__dots button {
    width: 8px; height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-text) 22%, transparent);
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}
.theme-aurora .aurora-hero__dots button.is-active { background: var(--color-primary); width: 22px; }

/* ----------------------------------------------------------------- usps */
.theme-aurora .usps { background: var(--color-bg); }
.theme-aurora .usp { font-size: .86rem; letter-spacing: .01em; }

/* ---------------------------------------------------------------- cards */
.theme-aurora .product-card {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.theme-aurora .product-card:hover { box-shadow: none; transform: none; }
.theme-aurora .product-card__media {
    border-radius: var(--radius);
    background: var(--color-surface);
}
.theme-aurora .product-card__body { padding: 12px 2px 4px; gap: 4px; }
.theme-aurora .product-card__title { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 500; }
.theme-aurora .product-card__price { font-weight: 600; font-size: .96rem; }
.theme-aurora .stock-line { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }

/* Quick-add rises over the image on hover; on touch it stays in the flow,
   because there is no hover state to reveal it. */
@media (hover: hover) and (min-width: 48rem) {
    .theme-aurora .product-card { position: relative; }
    .theme-aurora .product-card__actions {
        position: absolute;
        inset-inline: 10px;
        inset-block-end: 74px;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .2s ease, transform .2s ease;
        z-index: 3;
    }
    .theme-aurora .product-card:hover .product-card__actions,
    .theme-aurora .product-card:focus-within .product-card__actions { opacity: 1; transform: none; }
    .theme-aurora .product-card__actions .btn { box-shadow: var(--shadow-md); }
}

.theme-aurora .collection-tile { aspect-ratio: 3 / 4; }
.theme-aurora .aurora-collection-grid { gap: 16px; }
.theme-aurora .collection-tile__label {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    padding: 34px 16px 14px;
}

/* --------------------------------------------------------- product page */
.theme-aurora .product__info h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
.theme-aurora .product__price-now { font-family: var(--font-body); font-size: 1.4rem; }
.theme-aurora .opt { border-radius: var(--radius-pill); }
.theme-aurora .product__stage { aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------- banner */
.theme-aurora .promo-banner {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.theme-aurora .promo-banner .muted { color: color-mix(in srgb, #fff 72%, transparent); }
.theme-aurora .promo-banner .btn { background: #fff; color: var(--color-primary); }
.theme-aurora .promo-banner .btn--ghost { background: transparent; color: #fff; border-color: color-mix(in srgb, #fff 40%, transparent); }
.theme-aurora .promo-banner .btn--ghost:hover { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; }

/* --------------------------------------------------------------- footer */
.theme-aurora .site-footer { background: var(--color-surface); }
.theme-aurora .footer-col h3 { letter-spacing: .16em; }