/* ============================================================
   mySeraph Living — Seraph brand layer
   Loaded last. Ivory/stone surfaces, botanical green actions,
   soft gold detail, Cormorant display + Jost UI (from the
   packaging boards). Layout engine and motion hooks stay as-is.
   ============================================================ */

:root {
    --nav-h: 76px;
    --header-total: 76px;
    --hairline: 1px solid var(--border);
    --track-caps: 0.16em;
}

body { background: var(--base); color: var(--text); font-weight: 400; }
::selection { background: var(--green); color: var(--on-green); }

/* ---------- Type ---------- */
.display, .h1, .h2, .seraph-display, .seraph-h2,
.page > .container > .display, .shop-hero .display {
    font-family: var(--font-title);
    font-weight: 500;
    letter-spacing: -0.01em;
}
.h3 { font-family: var(--font-title); font-weight: 600; font-size: 22px; }
.eyebrow,
.seraph-eyebrow {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-text);
}
.seraph-display {
    font-size: clamp(46px, 6.4vw, 96px);
    line-height: 0.98;
    text-wrap: balance;
}
.seraph-h2 {
    font-size: clamp(32px, 3.6vw, 54px);
    line-height: 1.04;
    text-wrap: balance;
}

/* ---------- Buttons: squared, tracked caps ---------- */
.btn {
    border-radius: var(--r-minimal);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    min-height: 44px;
    padding: 12px 22px;
    transition-property: background-color, color, border-color, transform;
}
.btn--lg { min-height: 52px; padding: 16px 30px; font-size: 12px; }
.btn--sm { min-height: 38px; padding: 8px 14px; font-size: 11px; }
.btn--primary { background: var(--green); color: var(--on-green); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--text); }
.btn--light { background: var(--base); color: var(--text); border-color: var(--base); }
@media (hover: hover) and (pointer: fine) {
    .btn:hover { background: var(--text); }
    .btn--primary:hover { background: var(--green-deep); }
    .btn--ghost:hover { background: var(--text); color: var(--base); border-color: var(--text); }
    .btn--light:hover { background: var(--surface-3); border-color: var(--surface-3); }
}

/* ---------- Logo lockup: my / SERAPH / — LIVING — ---------- */
.logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: var(--text);
    line-height: 1;
}
.logo__my {
    font-family: var(--font-title);
    font-style: italic;
    font-size: 14px;
    margin-bottom: -1px;
    color: var(--gold-text);
}
.logo__word {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: 27px;
    letter-spacing: 0.38em;
    padding-left: 0.38em; /* optical centre: tracking adds trailing space */
    text-transform: uppercase;
}
.logo__sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-ui);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.5em;
    padding-left: 0.5em;
    text-transform: uppercase;
}
.logo__sub::before,
.logo__sub::after { content: ''; width: 14px; height: 1px; background: var(--gold); }
.logo--light { color: var(--on-green); }
.logo--light .logo__my { color: var(--gold); }

/* ---------- Header: links | logo | tools ---------- */
.header {
    background: rgba(252, 252, 249, 0.92);
    border-bottom: var(--hairline);
}
.header--scrolled { background: rgba(252, 252, 249, 0.985); border-bottom-color: var(--border-strong); }
.header__inner {
    height: var(--nav-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--sp-6);
}
.header__nav { grid-column: 1; justify-content: flex-start; gap: clamp(1rem, 2vw, 2rem); }
.header__brand { grid-column: 2; }
.header__tools { grid-column: 3; justify-self: end; }
.header__link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 28px 0 26px;
}
.header__link::after { background: var(--gold); bottom: 20px; }
.header__link--active { font-weight: 500; color: var(--text); }
.header__tool, .header__utility-link { border-radius: var(--r-minimal); color: var(--text-tertiary); }
.header__tool-label, .header__utility-link { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.header__bag {
    border-radius: var(--r-minimal);
    background: var(--green);
    color: var(--on-green);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.header__badge { background: var(--gold); color: #fff; border-color: var(--base); }
.header__user-trigger { border-radius: var(--r-minimal); }
.header__user-avatar, .mobile-menu__user-avatar { background: var(--green); color: var(--on-green); }
.header__user-dropdown { border-radius: var(--r-comfortable); background: var(--base); }
@media (hover: hover) and (pointer: fine) {
    .header__tool:hover, .header__utility-link:hover { background: var(--surface-2); color: var(--text); }
    .header__bag:hover { background: var(--green-deep); transform: none; }
}
.mobile-menu { background: var(--base); }
.mobile-menu__links a { font-family: var(--font-title); font-weight: 500; font-size: 30px; }

@media (max-width: 760px) {
    :root { --nav-h: 64px; --header-total: 64px; }
    .header__inner { grid-template-columns: auto 1fr; height: var(--nav-h); }
    .header__brand { grid-column: 1; }
    .header__tools { grid-column: 2; }
    .header .logo__word { font-size: 21px; }
    .header .logo__my { font-size: 12px; }
    .header .logo__sub { font-size: 7.5px; }
}

/* ---------- Cards ---------- */
.card { border: 0; background: transparent; border-radius: 0; }
.card__top { border-radius: var(--r-minimal); }
.card__media { aspect-ratio: 4 / 5; background: var(--surface); }
.card__body { padding: var(--sp-4) 0 0; }
.card__cat { color: var(--gold-text); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; }
.card__name {
    font-family: var(--font-title);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.15;
    min-height: 2.3em;
}
.card__price { font-weight: 500; font-size: var(--fs-base); letter-spacing: 0.02em; }
.card__badge { background: var(--green); color: var(--on-green); border-radius: var(--r-minimal); font-weight: 500; letter-spacing: 0.14em; }
.card__badge--sale { background: var(--negative); }
.card__quickadd .btn { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
@media (hover: hover) and (pointer: fine) {
    .card:hover { transform: none; }
    .card__quickadd .btn:hover { background: var(--green); border-color: var(--green); color: var(--on-green); }
    .card__name:hover { text-decoration: none; color: var(--gold-text); }
}

/* ---------- Fields, links, misc ---------- */
.field__input, .field__select, .field__textarea { background: #FFFFFF; border-color: var(--border-strong); border-radius: var(--r-minimal); }
.field__input:focus, .field__select:focus, .field__textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--accent-soft); }
.link { color: var(--text); font-size: 12px; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--gold-text); } }
.status-dot { background: var(--gold); box-shadow: none; }
.stars { color: var(--gold); }
.toast { background: var(--green); color: var(--on-green); border-radius: var(--r-minimal); }
.toast__icon { color: var(--gold); }

/* ---------- Home: shared section header ---------- */
.seraph-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-6);
    margin-bottom: clamp(28px, 4vw, 48px);
}
.seraph-head .seraph-eyebrow { margin-bottom: var(--sp-3); }
.seraph-head--center { flex-direction: column; align-items: center; text-align: center; }

/* ---------- Home: hero ----------
   Split, not overlaid: copy sits on solid ivory so contrast never depends on the photo. */
.seraph-hero {
    padding: var(--header-total) 0 0;
    background: var(--base);
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    min-height: min(92svh, 880px);
    overflow: hidden;
}
.seraph-hero__copy {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    max-width: none;
    padding: var(--sp-16) clamp(24px, 5vw, 80px);
}
.seraph-hero__media { grid-column: 2; grid-row: 1; background: var(--surface-2); }
.seraph-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 60%; }
.seraph-hero .seraph-display { margin: var(--sp-4) 0 var(--sp-5); max-width: 9ch; }
.seraph-hero__sub { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-tertiary); max-width: 34ch; }
.seraph-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.first-visit .seraph-hero [data-hero-media] { animation: seraphUnveil 1.1s var(--ease-out) both; }
@keyframes seraphUnveil { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
    .seraph-hero { grid-template-columns: 1fr; min-height: 0; }
    .seraph-hero__media { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
    .seraph-hero__copy { grid-column: 1; grid-row: 2; padding: var(--sp-10) var(--gutter) var(--sp-12); }
}

/* ---------- Home: values ---------- */
.seraph-values { border-bottom: var(--hairline); background: var(--base); }
.seraph-values__list { display: grid; grid-template-columns: repeat(4, 1fr); }
.seraph-value { padding: var(--sp-10) var(--sp-6); text-align: center; }
.seraph-value + .seraph-value { border-left: var(--hairline); }
.seraph-value .ti { font-size: 26px; color: var(--gold); }
.seraph-value__name {
    margin: var(--sp-4) 0 var(--sp-2);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}
.seraph-value p { color: var(--text-secondary); font-size: var(--fs-base); line-height: 1.55; max-width: 26ch; margin-inline: auto; }
@media (max-width: 900px) {
    .seraph-values__list { grid-template-columns: repeat(2, 1fr); }
    .seraph-value:nth-child(3) { border-left: 0; }
    .seraph-value:nth-child(n + 3) { border-top: var(--hairline); }
}

/* ---------- Home: collection grid (five essentials) ---------- */
.seraph-grid { grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 28px); }
@media (max-width: 1100px) { .seraph-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .seraph-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Home: sets ---------- */
.seraph-sets { background: var(--surface); }
.seraph-sets__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.set-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--base); border: var(--hairline); }
.set-card__media { display: block; overflow: hidden; background: var(--surface-2); }
.set-card__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.set-card__body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: var(--sp-3); }
.set-card__name { font-family: var(--font-title); font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; }
.set-card__line { font-family: var(--font-title); font-style: italic; font-size: 19px; color: var(--gold-text); }
.set-card__steps { margin: var(--sp-3) 0; border-top: var(--hairline); }
.set-card__steps li { display: flex; gap: var(--sp-3); align-items: baseline; padding: 12px 0; border-bottom: var(--hairline); font-size: var(--fs-base); }
.set-card__num { font-size: 11px; letter-spacing: 0.12em; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.set-card__note { color: var(--text-secondary); font-size: var(--fs-base); line-height: 1.55; flex: 1; }
.set-card .btn { align-self: flex-start; }
@media (max-width: 1100px) { .seraph-sets__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .set-card { grid-template-columns: 1fr; } .set-card__media img { aspect-ratio: 4 / 3; } }

/* ---------- Home: story ---------- */
.seraph-story { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--base); }
.seraph-story__media { min-height: 520px; background: var(--surface-2); }
.seraph-story__media img { width: 100%; height: 100%; object-fit: cover; }
.seraph-story__copy {
    padding: clamp(40px, 7vw, 112px) clamp(24px, 6vw, 96px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-5);
}
.seraph-story__copy p:not(.eyebrow) { color: var(--text-tertiary); font-size: var(--fs-md); line-height: 1.7; max-width: 46ch; }
.seraph-story .link { align-self: flex-start; margin-top: var(--sp-2); }
@media (max-width: 900px) {
    .seraph-story { grid-template-columns: 1fr; }
    .seraph-story__media { min-height: 0; aspect-ratio: 3 / 2; }
}

/* ---------- Home: ingredients ---------- */
.seraph-ingredients__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.ingredient__media { aspect-ratio: 1; overflow: hidden; background: var(--surface); border-radius: var(--r-minimal); }
.ingredient__media img { width: 100%; height: 100%; object-fit: cover; }
.ingredient__name { font-family: var(--font-title); font-weight: 500; font-size: 26px; margin-top: var(--sp-4); }
.ingredient__text { color: var(--text-secondary); font-size: var(--fs-base); line-height: 1.55; margin-top: var(--sp-1); }
.ingredient__in { margin-top: var(--sp-3); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); }
@media (max-width: 900px) { .seraph-ingredients__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Home: gift band ---------- */
.seraph-gift { display: grid; grid-template-columns: 1fr 1.2fr; background: var(--green); color: var(--on-green); }
.seraph-gift__copy {
    padding: clamp(48px, 7vw, 112px) clamp(24px, 6vw, 96px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-5);
}
.seraph-gift .seraph-eyebrow { color: var(--gold); }
.seraph-gift__copy p:not(.eyebrow) { color: rgba(244, 241, 232, 0.78); line-height: 1.7; max-width: 42ch; }
.seraph-gift__buy { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-3); }
.seraph-gift__price { font-family: var(--font-title); font-size: 30px; }
.seraph-gift__media { min-height: 480px; background: var(--green-deep); }
.seraph-gift__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
    .seraph-gift { grid-template-columns: 1fr; }
    .seraph-gift__media { min-height: 0; aspect-ratio: 3 / 2; order: -1; }
}

/* ---------- Footer: botanical green closing scene ---------- */
.footer { background: var(--green-deep); color: var(--on-green); padding: clamp(56px, 8vw, 96px) 0 var(--sp-8); }
.footer__mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    padding-bottom: clamp(40px, 6vw, 72px);
    margin-bottom: clamp(40px, 6vw, 64px);
    border-bottom: 1px solid rgba(244, 241, 232, 0.14);
}
.footer__logo .logo__word { font-size: clamp(34px, 5vw, 56px); }
.footer__logo .logo__my { font-size: 18px; }
.footer__logo .logo__sub { font-size: 10px; }
.footer__tagline { font-family: var(--font-title); font-style: italic; font-size: 20px; color: var(--gold); }
.footer__about { color: rgba(244, 241, 232, 0.72); line-height: 1.7; max-width: 34ch; margin-bottom: var(--sp-5); }
.footer__shop-link { color: var(--on-green); border-bottom-color: rgba(244, 241, 232, 0.35); font-size: 12px; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; }
.footer__col h4 { color: var(--gold); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.footer__col a, .footer__bottom { color: rgba(244, 241, 232, 0.72); }
.footer__bottom { border-top-color: rgba(244, 241, 232, 0.14); }
.footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .footer__col a:hover, .footer__bottom a:hover, .footer__shop-link:hover { color: #fff; border-color: var(--gold); }
}

/* ---------- Active states: botanical green, not black ---------- */
.account-nav__link.is-active,
.cats-filter a.is-active { background: var(--green); color: var(--on-green); border-color: var(--green); }
.product__thumbs .thumb.is-active { border-color: var(--green); }

/* ---------- Nav hover: text roll + hairline draw ----------
   The label slides up while its text-shadow twin rolls in from below (no duplicate
   DOM text for screen readers); the gold hairline draws left to right.
   Transform only, 260ms ease-out, hover-capable pointers only. */
.roll { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; vertical-align: top; }
.roll > span { display: block; text-shadow: 0 1.3em 0 currentColor; transition: transform 0.26s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .header__link:hover .roll > span { transform: translateY(-1.3em); }
    .header__link:hover { color: var(--text); }
}
.header__link:focus-visible .roll > span { transform: translateY(-1.3em); }

/* ============================================================
   Depth system — reusable elevation + media frame
   Depth comes from layered surfaces, warm-green shadows and a
   1px low-opacity image outline, never from hover movement.
   ============================================================ */
:root {
    --elev-1: 0 1px 1px rgba(17, 17, 15, 0.03);
    --elev-2: 0 1px 2px rgba(17, 17, 15, 0.03), 0 6px 16px -12px rgba(17, 17, 15, 0.08);
    --elev-3: 0 1px 2px rgba(17, 17, 15, 0.03), 0 12px 28px -20px rgba(17, 17, 15, 0.12);
    --frame-outline: inset 0 0 0 1px rgba(17, 17, 15, 0.05);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Surface component: a raised panel. */
.surface-raised,
.set-card,
.account-card,
.cart-summary,
.checkout-summary { background: #fff; border: 1px solid var(--border); box-shadow: var(--elev-2); border-radius: var(--r-comfortable); }

/* Media frame component: every product/editorial image sits in a framed, softly lifted tile. */
.media-frame,
.card__media,
.set-card__media,
.ingredient__media,
.product__hero,
.product__thumbs .thumb {
    position: relative;
    background: var(--surface);
    border-radius: var(--r-comfortable);
    box-shadow: var(--elev-1);
    overflow: hidden;
}
.media-frame::after,
.card__media::after,
.set-card__media::after,
.ingredient__media::after,
.product__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: var(--frame-outline);
    pointer-events: none;
    z-index: 3;
}
.card__top { border-radius: var(--r-comfortable); overflow: visible; }
.set-card { overflow: hidden; }
.set-card__media { border-radius: 0; box-shadow: none; }

/* Textured sections: fine grain over sage keeps large fields from reading flat. */
.seraph-sets,
.seraph-values,
.footer,
.seraph-gift,
.seraph-hero__copy { background-image: var(--grain); }

/* Layered editorial blocks: framed image lifted off its section. */
.seraph-story { background: var(--surface); padding: clamp(32px, 5vw, 72px) 0; grid-template-columns: 1.1fr 1fr; align-items: center; }
.seraph-story__media { margin-left: clamp(16px, 5vw, 72px); border-radius: var(--r-comfortable); overflow: hidden; box-shadow: var(--elev-2); min-height: 0; aspect-ratio: 3 / 2; }
.seraph-story__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Parallax frames: the image is taller than its frame so the drift never shows an edge. */
[data-parallax] { overflow: hidden; }
[data-parallax] img { position: relative; top: -8%; height: 116% !important; }
.seraph-gift__media { position: relative; }
.seraph-gift__media img { box-shadow: none; }

/* ---------- Hero: deep green copy panel, image beside it ---------- */
.seraph-hero { background: var(--green); }
.seraph-hero__copy { background-color: var(--green); color: var(--on-green); }
.seraph-hero .seraph-eyebrow { color: var(--gold); }
.seraph-hero .seraph-display { color: #fff; }
.seraph-hero__sub { color: rgba(244, 241, 232, 0.82); }
.seraph-hero .btn--primary { background: var(--on-green); color: var(--green); border-color: var(--on-green); }
.seraph-hero .btn--ghost { color: var(--on-green); border-color: rgba(244, 241, 232, 0.55); }
@media (hover: hover) and (pointer: fine) {
    .seraph-hero .btn--primary:hover { background: #fff; border-color: #fff; color: var(--green-deep); }
    .seraph-hero .btn--ghost:hover { background: var(--on-green); color: var(--green); border-color: var(--on-green); }
}

/* Sets section on sage, values on white */
.seraph-sets { background-color: var(--surface); }
.seraph-values { background-color: #fff; }

/* ---------- Wishlist: saved state in brand green, AA in every state ---------- */
.product__wishlist.is-wishlisted { color: var(--green); border-color: var(--green); background: var(--accent-soft); }
.product__wishlist.is-wishlisted .heart-icon,
.card__wishlist.is-wishlisted .heart-icon { fill: var(--green); stroke: var(--green); }
@media (hover: hover) and (pointer: fine) {
    .product__wishlist.is-wishlisted:hover { background: var(--green); color: var(--on-green); border-color: var(--green); }
    .product__wishlist.is-wishlisted:hover .heart-icon { fill: var(--on-green); stroke: var(--on-green); }
    .card__wishlist.is-wishlisted:hover { color: var(--green); }
    .card__wishlist.is-wishlisted:hover .heart-icon { fill: var(--green-deep); stroke: var(--green-deep); }
}

/* ============================================================
   Still hover: nothing moves, scales or distorts on hover.
   Feedback is colour, fill and outline only. No magnetic effects.
   ============================================================ */
.btn, .btn:hover, .btn:active,
.btn--primary:hover, .btn--ghost:hover, .btn--danger:hover,
.header__bag:hover, .header__tool:hover,
.card, .card:hover,
.cat-tile:hover, .feature-card:hover,
.card__wishlist:hover, .card:hover .card__wishlist { transform: none; }
.btn .arrow, .btn:hover .arrow,
.link .arrow, .link:hover .arrow { transform: none; }
.card:hover .card__media img,
.cat-tile:hover img,
.set-card:hover .set-card__media img { transform: none; }
.card__wishlist { transform: none; }

/* ---------- Currency switcher (footer) ---------- */
.footer__bottom { align-items: center; }
.currency-switcher__select {
    appearance: none;
    min-height: 36px;
    padding: 6px 30px 6px 12px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C79A4B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: var(--on-green);
    border: 1px solid rgba(244, 241, 232, 0.3);
    border-radius: var(--r-minimal);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition-property: border-color;
    transition-duration: var(--dur-fast);
}
.currency-switcher__select option { color: var(--text); background: #fff; }
.currency-switcher__select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .currency-switcher__select:hover { border-color: var(--gold); } }

/* ============================================================
   Material — grained inner shadows
   Buttons, tiles and frames read as pressed paper/stone:
   fine grain + an inset top highlight + inset lower shade.
   ============================================================ */
:root {
    --grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --inner-dark: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -6px 10px -8px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    --inner-light: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(17, 17, 15, 0.05);
    --micro: 220ms;
    --micro-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Shared grain layer: any element with .grain (and the listed components) gets it. */
.grain, .btn, .set-card, .seraph-value, .ingredient, .card, .header__bag { position: relative; isolation: isolate; }
.grain::before, .btn::before, .set-card::before, .seraph-value::before, .ingredient::before, .card::before, .header__bag::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--grain-fine);
    background-size: 120px;
    mix-blend-mode: soft-light;
    opacity: 0.22;
    pointer-events: none;
    z-index: -1;
}

/* ---------- Buttons: material + fill micro-interaction (no movement) ---------- */
.btn { box-shadow: var(--inner-light), var(--elev-1); transition-property: background-color, color, border-color, box-shadow; transition-duration: var(--micro); transition-timing-function: var(--micro-ease); }
.btn--primary,
.header__bag { border: 1px solid var(--green-deep); box-shadow: var(--inner-dark), 0 1px 2px rgba(17, 17, 15, 0.14); }
.btn--ghost { background-color: rgba(255, 255, 255, 0.55); border-color: rgba(21, 32, 26, 0.7); }
.btn--light { box-shadow: var(--inner-light), 0 10px 24px -12px rgba(0, 0, 0, 0.5); }
.seraph-hero .btn--primary { box-shadow: var(--inner-light), 0 10px 24px -12px rgba(0, 0, 0, 0.55); }
.seraph-hero .btn--ghost { background-color: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(244, 241, 232, 0.12); }
.btn .arrow { transition: color var(--micro) var(--micro-ease); }

@media (hover: hover) and (pointer: fine) {
    /* Ghost: ink rises from the bottom edge as an inset fill */
    .btn--ghost:hover { background-color: rgba(255, 255, 255, 0.55); color: var(--base); box-shadow: inset 0 -64px 0 0 var(--text), var(--elev-1); border-color: var(--text); }
    .seraph-hero .btn--ghost:hover { background-color: transparent; color: var(--green); box-shadow: inset 0 -64px 0 0 var(--on-green); }
    .card__quickadd .btn:hover { background: transparent; color: var(--on-green); box-shadow: inset 0 -48px 0 0 var(--green), var(--elev-1); }
    /* Primary: the green deepens and the inner glow lifts */
    .btn--primary:hover, .header__bag:hover { background-color: #24493A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -12px 20px -10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 6px -2px rgba(17, 17, 15, 0.25); }
    .btn:hover .arrow { color: var(--gold); }
}
/* Press: the shade sinks inward instead of the button moving */
.btn:active, .header__bag:active { box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.2); transition-duration: 80ms; }

/* ---------- Tiles: values, ingredients, product cards ---------- */
.seraph-values { background-color: var(--surface); }
.seraph-values__list { gap: clamp(12px, 1.6vw, 20px); padding-block: clamp(28px, 4vw, 48px); }
.seraph-value { background: #fff; border-radius: var(--r-medium); box-shadow: var(--inner-light), var(--elev-2); }
.seraph-value + .seraph-value { border-left: 0; }
.seraph-value .ti {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 2px 6px rgba(17, 17, 15, 0.14), inset 0 -1px 0 #fff;
}
@media (max-width: 900px) { .seraph-value:nth-child(n + 3) { border-top: 0; } }

.card { background: #fff; padding: 10px 10px 14px; border-radius: var(--r-medium); box-shadow: var(--inner-light), var(--elev-2); }
.card__media { border-radius: var(--r-standard); box-shadow: none; }
.card__body { padding: var(--sp-4) 6px 0; }
.card__media::after { box-shadow: var(--frame-outline); }

.ingredient { background: #fff; padding: 10px 10px 18px; border-radius: var(--r-medium); box-shadow: var(--inner-light), var(--elev-2); }
.ingredient__name, .ingredient__text, .ingredient__in { padding-inline: 6px; }

.set-card { box-shadow: var(--inner-light), var(--elev-3); border-radius: var(--r-medium); }

/* ============================================================
   Micro-interactions (colour, fill, crossfade — never position)
   ============================================================ */
/* Links: hairline draws left → right */
.link, .footer__col a, .footer__shop-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 3px;
    transition: background-size 260ms var(--micro-ease), color var(--micro) var(--micro-ease);
}
.footer__shop-link { border-bottom-color: transparent; }
@media (hover: hover) and (pointer: fine) {
    .link:hover, .footer__col a:hover, .footer__shop-link:hover { background-size: 100% 1px; }
}
.link:focus-visible, .footer__col a:focus-visible { background-size: 100% 1px; }

/* Card: second image crossfades in (exists in markup), name tints */
.card__media .alt { transition: opacity 300ms var(--micro-ease); }
.card__name { transition: color var(--micro) var(--micro-ease); }

/* Heart: fills with a small pop when saved (the icon, not the container) */
.heart-icon { transition: fill var(--micro) var(--micro-ease), stroke var(--micro) var(--micro-ease); }
.is-wishlisted .heart-icon { animation: heartPop 320ms var(--micro-ease); }
@keyframes heartPop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Value icons: tint shifts to gold as the tile scrolls in */
.seraph-value .ti { color: var(--text-secondary); transition: color 600ms var(--micro-ease) calc(var(--i, 0) * 90ms + 300ms); }
.is-in .seraph-value .ti, html:not(.js) .seraph-value .ti { color: var(--gold); }

/* Header badge count: soft flash on change (set by JS via .is-bumped) */
.header__badge.is-bumped { animation: badgeFlash 420ms var(--micro-ease); }
@keyframes badgeFlash { 0% { box-shadow: 0 0 0 0 rgba(199, 154, 75, 0.6); } 100% { box-shadow: 0 0 0 8px rgba(199, 154, 75, 0); } }

/* Fields: label and ring ease in */
.field__input, .field__select, .field__textarea { transition-property: border-color, box-shadow; transition-duration: var(--micro); transition-timing-function: var(--micro-ease); box-shadow: inset 0 1px 3px rgba(17, 17, 15, 0.06); }

@media (prefers-reduced-motion: reduce) {
    .is-wishlisted .heart-icon, .header__badge.is-bumped { animation: none; }
}

/* Lenis (from lenis@1.3.11/dist/lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* Split headings keep their descenders inside the line masks */
[data-split] { font-kerning: none; }
@media (max-width: 900px) { .seraph-story__media { margin: 0 var(--gutter); } }

/* ---------- Bag: count sits inside the button as a chip ---------- */
.header__bag { gap: 10px; padding-inline: 16px; min-height: 42px; }
.header__bag .header__badge {
    position: static;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 0;
    border-radius: 10px;
    background: var(--on-green);
    color: var(--green);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: inset 0 1px 2px rgba(17, 17, 15, 0.18);
    font-variant-numeric: tabular-nums;
}
.header__tool .header__badge { background: var(--green); color: var(--on-green); border-color: var(--base); }
/* Desktop has the full nav; the burger is a mobile control only */
/* Desktop has the full nav; the burger only appears once the nav folds away (≤1024px). */
@media (min-width: 1025px) { .header__burger { display: none; } }

/* Tablet / fold widths: keep the header on one line when signed in. */
@media (max-width: 1180px) {
    .header__tool-label, .header__user-name { display: none; }
    .header__user-trigger { padding: 4px; }
    .header__inner { gap: var(--sp-4); }
    .header__nav { gap: clamp(0.75rem, 1.4vw, 1.25rem); }
}
@media (max-width: 1024px) {
    .header__nav { display: none; }
    .header__burger { display: flex; }
    .header__tools { gap: 2px; }
}

/* ---------- Halftone brand marks (Codex-generated, luminance → alpha masks, tinted gold) ---------- */
.seraph-hero__copy,
.seraph-gift__copy { position: relative; isolation: isolate; overflow: hidden; }
.seraph-hero__copy::after,
.seraph-gift__copy::after {
    content: '';
    position: absolute;
    background: var(--gold);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    pointer-events: none;
    z-index: -1;
}
/* Hero: the S monogram sits whole inside the green panel (copy column fills the panel height) */
.seraph-hero__copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.seraph-hero__copy::after {
    inset: 6% 3% 6% auto;
    width: 82%;
    opacity: 0.12;
    -webkit-mask-image: url('../img/halftone-monogram.webp'); mask-image: url('../img/halftone-monogram.webp');
    -webkit-mask-position: right center; mask-position: right center;
}
/* Gift band: a shea branch rising behind the copy */
.seraph-gift__copy::after {
    right: -6%;
    bottom: 0;
    width: min(60%, 420px);
    aspect-ratio: 2 / 3;
    opacity: 0.12;
    -webkit-mask-image: url('../img/halftone-sprig.webp'); mask-image: url('../img/halftone-sprig.webp');
    -webkit-mask-position: right bottom; mask-position: right bottom;
}
@media (max-width: 900px) {
    .seraph-hero__copy::after { inset: 8% 4% 8% auto; width: 70%; }
    .seraph-gift__copy::after { width: 55%; }
}
/* Footer: gypsophila + fern halftone rising from the lower right, dissolving left */
.footer { position: relative; overflow: hidden; isolation: isolate; }
.footer > .container { position: relative; }
.footer::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    aspect-ratio: 3 / 2;
    max-width: 100%;
    background: var(--gold);
    opacity: 0.16;
    -webkit-mask: url('../img/footer-halftone.webp') right bottom / contain no-repeat;
            mask: url('../img/footer-halftone.webp') right bottom / contain no-repeat;
    pointer-events: none;
    z-index: -1;
}

/* ---------- Value icons: wandering, breathing halftone ----------
   A field of gold halftone dots fills each icon disc. A soft light drifts to a
   random point inside the circle (--ht-x/--ht-y), revealing the dots under it,
   while the dot size and the light's reach swell and settle. seraph-motion.js
   picks a new random target every few seconds per disc; these registered
   properties ease between targets. The glyph sits above (.ti draws its icon in
   ::before, so the field lives in ::after at z -1). Reduced motion: still field. */
@property --ht-x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --ht-y { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --ht-dot { syntax: '<length>'; inherits: false; initial-value: 0.45px; }
@property --ht-reach { syntax: '<percentage>'; inherits: false; initial-value: 46%; }

.seraph-value .ti { position: relative; isolation: isolate; overflow: hidden; }
.seraph-value .ti::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    background: radial-gradient(circle, rgba(199, 154, 75, 0.38) 0 var(--ht-dot), transparent calc(var(--ht-dot) + 0.35px)) 0 0 / 3px 3px;
    -webkit-mask-image: radial-gradient(circle at var(--ht-x) var(--ht-y), #000 0%, transparent var(--ht-reach));
            mask-image: radial-gradient(circle at var(--ht-x) var(--ht-y), #000 0%, transparent var(--ht-reach));
    transition: --ht-x var(--ht-dur, 3.2s) cubic-bezier(0.45, 0, 0.55, 1),
                --ht-y var(--ht-dur, 3.2s) cubic-bezier(0.45, 0, 0.55, 1),
                --ht-dot var(--ht-dur, 3.2s) cubic-bezier(0.45, 0, 0.55, 1),
                --ht-reach var(--ht-dur, 3.2s) cubic-bezier(0.45, 0, 0.55, 1);
}
/* Targets are set on the icon and inherited by the field (inherits:false needs explicit pass-through) */
.seraph-value .ti::after { --ht-x: var(--t-x, 50%); --ht-y: var(--t-y, 50%); --ht-dot: var(--t-dot, 0.45px); --ht-reach: var(--t-reach, 40%); }

/* ---------- Logo: halftone vine wreath ----------
   Two halftone vines frame the wordmark (the wreath's centre is empty, so letters
   stay clean). On load the vines grow outward from the middle (--wr widens an
   elliptical reveal mask intersected with the wreath), then breathe softly. */
@property --wr { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.logo { position: relative; isolation: isolate; }
.logo::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 205%;
    aspect-ratio: 1100 / 449;
    translate: -50% -50%;
    background: var(--gold);
    -webkit-mask-image: url('../img/halftone-wreath.webp'), radial-gradient(ellipse at 50% 50%, #000 var(--wr), transparent calc(var(--wr) + 12%));
            mask-image: url('../img/halftone-wreath.webp'), radial-gradient(ellipse at 50% 50%, #000 var(--wr), transparent calc(var(--wr) + 12%));
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-composite: source-in; mask-composite: intersect;
    --wr: 80%;
    opacity: 0.55;
    pointer-events: none;
    z-index: -1;
    animation: wreathGrow 1.8s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both, wreathBreathe 6s ease-in-out 2s infinite alternate;
}
.header .logo::after { width: 142%; aspect-ratio: auto; height: 118%; opacity: 0.5; }
/* Footer logo stays clean: the wreath is a header-only detail */
.footer .logo::after { content: none; }
.logo--light::after { opacity: 0.5; }
@keyframes wreathGrow { from { --wr: 0%; } to { --wr: 80%; } }
@keyframes wreathBreathe { from { opacity: 0.55; } to { opacity: 0.32; } }
.logo--light::after { animation-name: wreathGrow, wreathBreatheLight; }
@keyframes wreathBreatheLight { from { opacity: 0.5; } to { opacity: 0.28; } }
@media (max-width: 760px) { .header .logo::after { width: 138%; } }
@media (prefers-reduced-motion: reduce) { .logo::after { animation: none; --wr: 80%; } }

/* Phone + tablet: logo sits left once the nav folds into the menu */
@media (max-width: 1024px) {
    .header__inner { grid-template-columns: auto 1fr; }
    .header__brand { grid-column: 1; justify-self: start; }
    .header__tools { grid-column: 2; }
}