/* ==========================================================================
   ELORA — inner-page components  (loaded AFTER elora.css on every page
   except the homepage). Reuses the homepage tokens and chrome; adds only the
   pieces the multi-page build needs: page headers, breadcrumb, the scent-finder
   consultation, the product page, collection filters, and story long-form.
   Same locked language: Playfair display · Newsreader body · ink/cream ·
   Elias blue for the men's world only · flat corners · keyline as signature.
   ========================================================================== */

/* ----------------------------------------------------------- PAGE HEADER */
.phero { padding-block: clamp(2.4rem, 5vw, 4.2rem) clamp(1.6rem, 3vw, 2.6rem); }
.phero--line { border-bottom: 1px solid var(--line); }
.phero__kick { margin-bottom: 1.1rem; }
.phero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.0; letter-spacing: -0.015em; }
.phero__title em { font-style: italic; font-weight: 400; }
.phero__lead { margin-top: 1.3rem; max-width: 58ch; }
.phero--center { text-align: center; }
.phero--center .phero__kick { justify-content: center; }
.phero--center .phero__lead { margin-inline: auto; }
.phero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.9rem; }
.phero--center .phero__cta { justify-content: center; }

/* breadcrumb */
.crumb { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; flex-wrap: wrap; gap: 0.55em; }
.crumb a { transition: color var(--d2) var(--ease); }
.crumb a:hover { color: var(--ink); }
.crumb .sep { opacity: 0.5; }
.crumb .here { color: var(--fg-1); }

/* ----------------------------------------------------- COLLECTION FILTERS */
.collhead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.collhead__count { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.filtergroups { display: grid; gap: 1rem; min-width: min(100%, 52rem); }
.filtergroup { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.filtergroup__label { font-family: var(--ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--fg-3); }
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip-f { font-family: var(--ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.78em 1.25em; border: 1px solid var(--line); color: var(--fg-2); background: transparent; transition: color var(--d2) var(--ease), background var(--d2) var(--ease), border-color var(--d2) var(--ease); }
.chip-f:hover { color: var(--ink); border-color: var(--line-strong); }
.chip-f.is-on { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* the empty-state if a filter has nothing (defensive) */
.coll-empty { padding: 3rem 0; text-align: center; color: var(--fg-2); }

/* ============================================== SCENT FINDER (signature) */
.finder { max-width: 780px; margin-inline: auto; }
.finder__card { position: relative; border: 1px solid var(--line); background: var(--cream-soft); padding: clamp(1.6rem, 4vw, 3.2rem); }
.finder__card::after { content: ""; position: absolute; inset: clamp(7px, 1vw, 12px); border: 1px solid var(--line); pointer-events: none; }
.finder__inner { position: relative; }
.finder__progress { display: flex; gap: 0.4rem; margin-bottom: 1.7rem; }
.finder__seg { height: 2px; flex: 1; background: var(--fg-4); transition: background var(--d2) var(--ease); }
.finder__seg.is-done { background: var(--ink); }
.finder__count { font-family: var(--ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); }
.finder__q { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.04; letter-spacing: -0.012em; margin-top: 0.7rem; }
.finder__q em { font-style: italic; font-weight: 400; }
.finder__opts { display: grid; gap: 0.7rem; margin-top: 1.7rem; }
.finder__opt { text-align: left; border: 1px solid var(--line-strong); background: transparent; padding: 1.05em 1.3em; display: flex; flex-direction: column; gap: 0.15rem; transition: background var(--d2) var(--ease), color var(--d2) var(--ease), transform var(--d1) var(--ease); }
.finder__opt b { font-family: var(--serif); font-weight: 500; font-size: 1.28rem; line-height: 1.1; }
.finder__opt span { font-family: var(--ui); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--fg-2); transition: color var(--d2) var(--ease); }
.finder__opt:hover { background: var(--cream-deep); transform: translateX(3px); }
.finder__opt.is-on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.finder__opt.is-on span { color: rgba(246,243,237,0.66); }
.finder__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; }
.finder__back { font-family: var(--ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); display: inline-flex; gap: 0.5em; align-items: center; transition: color var(--d2) var(--ease); }
.finder__back:hover { color: var(--ink); }
.finder__hint { font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.finder__step { animation: fstep var(--d3) var(--ease); }
@keyframes fstep { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* finder result */
.fresult { animation: fstep var(--d3) var(--ease); }
.fresult__head { text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.fmatch { display: grid; grid-template-columns: 1fr 1.05fr; border: 1px solid var(--line); background: var(--cream); overflow: hidden; }
.fmatch__media { position: relative; aspect-ratio: 1/1; background: var(--cream-deep); }
.fmatch__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fmatch__seal { position: absolute; top: 1rem; left: 1rem; z-index: 2; font-family: var(--ui); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); background: var(--ink); padding: 0.5em 0.9em; }
.fmatch__body { padding: clamp(1.6rem, 3.5vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.fmatch__name { font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 0.98; margin-top: 0.4rem; }
.fmatch__essence { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--t-lead); color: var(--fg-2); margin-top: 0.5rem; }
.fmatch__body > p { color: var(--fg-2); margin-top: 1rem; max-width: 44ch; }
.fmatch__reason { border: 1px solid var(--line); background: var(--cream-soft); padding: 1rem 1.1rem; margin-top: 1.2rem; }
.fmatch__reason .kicker { font-size: 0.58rem; letter-spacing: 0.16em; }
.fmatch__reason p { color: var(--fg-2); font-size: var(--t-support); line-height: 1.5; margin-top: 0.55rem; max-width: 48ch; }
.reason-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.reason-chip { border: 1px solid var(--line); background: var(--cream); padding: 0.42em 0.7em; font-family: var(--ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.reason-chip em { font-style: normal; color: var(--fg-3); margin-right: 0.45em; }
.fmatch__meta { display: flex; flex-wrap: wrap; gap: 1.6rem 2rem; margin-top: 1.5rem; }
.fmatch__meta .data { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.fmatch__meta b { display: block; font-family: var(--serif); font-size: 1.32rem; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 400; margin-top: 0.25rem; }
.fmatch__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.fmatch.is-elias .fmatch__media { background: var(--elias-blue); }
.fmatch.is-elias .fmatch__seal { background: var(--elias-blue); }
.fresult__alts { margin-top: clamp(2.2rem, 4vw, 3.4rem); }
.fresult__alts-title { margin-bottom: 1.4rem; font-family: var(--serif); font-size: var(--t-h3); font-weight: 400; line-height: 1.1; text-align: center; }
.fresult__restart { text-align: center; margin-top: 2rem; }

/* =============================================================== PRODUCT */
.pdp { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
.pdp__left { grid-column: 1; grid-row: 1; }
.pdp__gallery { position: relative; }
.pdp__buy { grid-column: 2; grid-row: 1; }
.pdp__hero { position: relative; aspect-ratio: 1; background: var(--cream-deep); overflow: hidden; }
.pdp__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp.is-elias .pdp__hero { background: var(--elias-blue); }
.pdp__thumbs { display: flex; gap: 0.6rem; margin-top: 0.7rem; }
.pdp__thumb { width: 74px; aspect-ratio: 1; border: 1px solid var(--line); overflow: hidden; cursor: pointer; transition: border-color var(--d2) var(--ease); background: var(--cream-deep); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb.is-on { border-color: var(--ink); }
.pdp__buy { display: flex; flex-direction: column; }
.pdp__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 0.98; margin-top: 0.5rem; }
.pdp__essence { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--t-lead); color: var(--fg-2); margin-top: 0.6rem; }
.pdp__rating { display: flex; align-items: center; gap: 0.7em; margin-top: 1rem; font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--fg-2); }
.pdp__rating .stars { color: var(--ink); letter-spacing: 0.14em; }
.pdp__desc { color: var(--fg-2); margin-top: 1.2rem; max-width: 46ch; font-size: var(--t-lead); }
.pdp__label { font-family: var(--ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); margin: 1.8rem 0 0.8rem; }
.sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.size-opt { position: relative; border: 1px solid var(--line-strong); padding: 1em 1.15em; cursor: pointer; transition: background var(--d2) var(--ease), color var(--d2) var(--ease), border-color var(--d2) var(--ease); }
.size-opt__badge { display: block; min-height: 1.2em; margin-bottom: 0.55rem; font-family: var(--ui); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; color: var(--fg-3); transition: color var(--d2) var(--ease); }
.size-opt__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.size-opt__name { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.size-opt__price { font-family: var(--ui); font-size: 0.84rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.size-opt__note { font-family: var(--ui); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.04em; color: var(--fg-2); margin-top: 0.3rem; transition: color var(--d2) var(--ease); }
.size-opt.is-on { background: transparent; color: var(--ink); border-color: #1D1C19; box-shadow: inset 0 0 0 2px #1D1C19; }
.size-opt.is-on .size-opt__badge { color: var(--ink); }
.size-opt.is-on .size-opt__note { color: var(--fg-2); }
.size-opt.is-on::after { content: ""; position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; background-color: #1D1C19; border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; box-shadow: 0 0 0 2px var(--cream); }
.pdp.is-elias .size-opt.is-on { background: var(--elias-blue); border-color: var(--elias-blue); }
.bundles { display: grid; gap: 0.65rem; }
.bundle-opt { position: relative; text-align: left; border: 1px solid var(--line); background: var(--cream-soft); padding: 1rem 1.1rem; display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; transition: border-color var(--d2) var(--ease), background var(--d2) var(--ease), transform var(--d1) var(--ease); }
.bundle-opt:hover { border-color: var(--ink); background: var(--cream); transform: translateY(-1px); }
.bundle-opt.is-on { border-color: var(--ink); background: var(--cream); box-shadow: inset 0 0 0 2px var(--ink); }
.bundle-opt.is-on::after { content: ""; position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 2px var(--cream); }
.bundle-opt__badge { grid-column: 1 / -1; width: fit-content; font-family: var(--ui); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); background: var(--ink); padding: 0.38em 0.7em; margin-bottom: 0.25rem; }
.bundle-opt__name { font-family: var(--serif); font-size: 1.18rem; line-height: 1.08; }
.bundle-opt__desc { grid-column: 1 / -1; color: var(--fg-2); font-size: var(--t-support); line-height: 1.4; }
.bundle-opt__price { grid-column: 2; grid-row: 2; align-self: start; font-family: var(--ui); font-size: 0.84rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bundle-opt__price s { color: var(--fg-3); font-weight: 500; margin-left: 0.25rem; }
.pdp__order { margin-top: 1.3rem; }
.pdp__order .btn {
  width: 100%;
  font-size: 0.95rem;
  padding-block: 1.25em;
  letter-spacing: 0.2em;
}
.pdp__priceline { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; }
.pdp__pricenow { font-family: var(--serif); font-size: 1.7rem; }
.pdp__pricesub { font-family: var(--ui); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--fg-2); }
.trustrow { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--line-soft); }
.trustrow span { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--fg-2); display: inline-flex; align-items: center; gap: 0.45em; }
.trustrow span::before { content: ""; width: 5px; height: 5px; background: var(--ink); border-radius: 50%; display: inline-block; }
.pdp.is-elias .trustrow span::before { background: var(--elias-blue); }
.pdp-proof {
  border: 0;
  border-left: 2px solid var(--ink);
  background: transparent;
  padding: clamp(1.2rem, 2.6vw, 1.65rem) clamp(1.15rem, 2.6vw, 1.5rem);
  margin-top: 1.1rem;
}
.pdp-proof__head { display: flex; align-items: flex-start; gap: 0.5rem; }
.pdp-proof__mark { font-family: var(--serif); font-size: 2.3rem; line-height: 0.5; color: var(--fg-4); margin-top: 0.38rem; flex-shrink: 0; }
.pdp-proof .kicker.pdp-proof__kicker { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.13em; color: var(--ink); margin-top: 0.5rem; }
.pdp-proof__lead { font-family: var(--book); font-style: italic; font-weight: 400; font-size: clamp(1.16rem, 2vw, 1.34rem); line-height: 1.5; color: var(--ink); margin-top: 0.45rem; }
.pdp-proof__sign { font-family: var(--script); font-size: 2rem; line-height: 1; color: var(--ink); margin-top: 0.85rem; }
.pdp-quote { margin: 1.15rem 0 0; border-left: 2px solid var(--ink); padding: 0.15rem 0 0.15rem 1rem; }
.pdp-quote blockquote { margin: 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.35; color: var(--ink); }
.pdp-quote figcaption { display: grid; gap: 0.2rem; margin-top: 0.55rem; font-family: var(--ui); font-size: 0.66rem; line-height: 1.4; color: var(--fg-3); }
.pdp-quote figcaption b { color: var(--fg-2); font-weight: 600; }
.pdp__msg { font-size: var(--t-support); color: var(--fg-2); margin-top: 1.1rem; }
.pdp-sticky { display: none; }

/* Elias PDP world: a stronger Elias room inside the shared Elora store. */
.pdp-elias-world .pdp-stage { background: var(--elias-blue); color: var(--white); }
.pdp-elias-world .pdp-stage .crumb,
.pdp-elias-world .pdp-stage .crumb a { color: rgba(255,255,255,0.62); }
.pdp-elias-world .pdp-stage .crumb a:hover,
.pdp-elias-world .pdp-stage .crumb .here { color: var(--white); }
.pdp.is-elias-world { gap: clamp(2rem, 5vw, 5.2rem); }
.pdp-elias-lockup { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.28); }
.pdp-elias-lockup__mark { position: relative; display: block; width: 8.5rem; height: 2.7rem; overflow: hidden; }
.pdp-elias-lockup__mark img { position: absolute; left: 0; top: 50%; width: 8.5rem; height: auto; transform: translateY(-45.6%); }
.pdp-elias-lockup em { font-family: var(--ui); font-size: 0.58rem; font-style: normal; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.62); white-space: nowrap; }
.pdp.is-elias-world .pdp__title,
.pdp.is-elias-world .pdp__pricenow,
.pdp.is-elias-world .pdp-proof__lead { color: var(--white); }
.pdp.is-elias-world .pdp__essence,
.pdp.is-elias-world .pdp__desc,
.pdp.is-elias-world .pdp__rating,
.pdp.is-elias-world .pdp__pricesub,
.pdp.is-elias-world .pdp__msg,
.pdp.is-elias-world .pdp-proof__lead { color: rgba(255,255,255,0.76); }
.pdp.is-elias-world .pdp__buy > .kicker,
.pdp.is-elias-world .pdp__label,
.pdp.is-elias-world .pdp-proof .kicker { color: rgba(255,255,255,0.58); }
.pdp.is-elias-world .pdp__rating .stars { color: var(--white); }
.pdp.is-elias-world .pdp__thumb { border-color: rgba(255,255,255,0.28); background: var(--elias-deep); }
.pdp.is-elias-world .pdp__thumb.is-on { border-color: var(--white); }
.pdp.is-elias-world .size-opt { border-color: rgba(255,255,255,0.42); color: var(--white); background: transparent; }
.pdp.is-elias-world .size-opt__badge,
.pdp.is-elias-world .size-opt__note { color: rgba(255,255,255,0.6); }
.pdp.is-elias-world .size-opt.is-on { background: var(--white); border-color: var(--white); color: var(--elias-blue); }
.pdp.is-elias-world .size-opt.is-on .size-opt__badge,
.pdp.is-elias-world .size-opt.is-on .size-opt__note { color: rgba(0,78,122,0.68); }
.pdp.is-elias-world .pdp__order .btn { --bg: var(--white); --fg: var(--elias-blue); --bd: var(--white); }
.pdp.is-elias-world .pdp__order .btn:hover { --bg: var(--cream); --bd: var(--cream); }
.pdp.is-elias-world .trustrow { border-color: rgba(255,255,255,0.22); }
.pdp.is-elias-world .trustrow span { color: rgba(255,255,255,0.68); }
.pdp.is-elias-world .trustrow span::before { background: var(--white); }
.pdp.is-elias-world .pdp__msg .linku { color: var(--white); }
.pdp.is-elias-world .pdp-proof { border: 0; border-left: 2px solid var(--white); background: transparent; }
.pdp.is-elias-world .pdp-proof .pdp-proof__kicker { color: var(--white); }
.pdp.is-elias-world .pdp-proof__mark { color: rgba(255,255,255,0.34); }
.pdp.is-elias-world .pdp-proof__sign { color: var(--white); }
.pdp.is-elias-world .bundle-opt { border-color: rgba(255,255,255,0.25); background: var(--elias-deep); color: var(--white); }
.pdp.is-elias-world .bundle-opt:hover { border-color: var(--white); background: var(--elias-blue); }
.pdp.is-elias-world .bundle-opt.is-on { border-color: var(--white); background: var(--elias-blue); box-shadow: inset 0 0 0 2px var(--white); }
.pdp.is-elias-world .bundle-opt.is-on::after { background-color: var(--white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004e7a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); box-shadow: 0 0 0 2px var(--elias-deep); }
.pdp.is-elias-world .bundle-opt__badge { color: var(--elias-blue); background: var(--white); }
.pdp.is-elias-world .bundle-opt__desc,
.pdp.is-elias-world .bundle-opt__price s { color: rgba(255,255,255,0.62); }
.pdp.is-elias-world .buildbox { border-color: rgba(255,255,255,0.52); background: transparent; color: var(--white); }
.pdp.is-elias-world .buildbox small { color: rgba(255,255,255,0.64); }
.pdp.is-elias-world .buildbox:hover { background: var(--white); color: var(--elias-blue); }
.pdp.is-elias-world .buildbox:hover small { color: rgba(0,78,122,0.68); }
/* A2 scent profile: image-led notes followed by a separate skin chapter */
.pdp-detail-stage { background: var(--cream); }
.scent-profile__header { display: grid; grid-template-columns: minmax(22rem, .88fr) minmax(0, 1.12fr); gap: clamp(2.5rem, 6vw, 5.25rem); align-items: end; }
.scent-notes { display: grid; grid-template-columns: minmax(22rem, .88fr) minmax(0, 1.12fr); gap: clamp(2.5rem, 6vw, 5.25rem); }
.scent-profile__intro { max-width: 58rem; }
.scent-profile__intro > p { font-size: var(--t-lead); }
.scent-profile__title { font-size: var(--t-h1); }
.scent-profile__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); align-self: end; margin: 0; padding: 0; }
.scent-profile__facts p { display: grid; gap: .2rem; min-width: min(100%, 12rem); }
.scent-profile__facts span { font-family: var(--ui); font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.scent-profile__facts strong { font-family: var(--serif); font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 400; line-height: 1.1; }
.scent-profile__facts small { color: var(--fg-2); font-size: .75rem; }
.scent-notes { align-items: start; margin-top: clamp(2.8rem, 5vw, 4rem); }
.scent-notes__media { display: block; width: 100%; max-height: 650px; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); background: var(--cream-deep); }
.scent-notes__media img { width: 100%; height: 100%; object-fit: cover; }
.scent-notes__list { display: grid; }
.scent-note { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 1.25rem; padding-block: clamp(1.35rem, 2.5vw, 2rem); border-bottom: 1px solid var(--line); }
.scent-note:last-of-type { border-bottom: 0; }
.scent-note__stage { padding-top: .35rem; font-family: var(--ui); font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.scent-note__title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; }
.scent-note__ingredients { margin-top: .55rem; font-family: var(--ui); font-size: .68rem; letter-spacing: .06em; color: var(--fg-1); }
.scent-note__description { max-width: 50ch; margin-top: .75rem; color: var(--fg-2); font-size: var(--t-body); }
.skin-journey { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 7vw, 5.75rem); margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(2.8rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.skin-journey__head h3 { max-width: 14ch; font-size: var(--t-h2); }
.skin-journey__head p { max-width: 46ch; font-size: var(--t-body); }
.skin-journey__head h3 + p { margin-top: clamp(0.875rem, 1.2vw, 1rem); }
.skin-journey__rows { display: grid; }
.skin-journey__item { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; padding-block: 1.35rem; border-bottom: 1px solid var(--line); }
.skin-journey__item:last-of-type { border-bottom: 0; }
.skin-journey__label { font-family: var(--serif); font-size: 1.15rem; line-height: 1.15; }
.skin-journey__item p { margin: 0; color: var(--fg-2); font-size: var(--t-body); }
.skin-journey__note { margin-top: 1rem; font-size: var(--t-support); }
.pdp-care__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 7vw, 5.75rem); align-items: end; }
.pdp-care__head h2 { max-width: 13ch; font-size: var(--t-h2); }
.pdp-care__body p { max-width: 48ch; }

@media (max-width: 1023px) {
  .scent-profile__header { grid-template-columns: 1fr; row-gap: 2rem; }
  .scent-notes { grid-template-columns: 1fr; }
  .scent-notes__media { width: min(100%, 34rem); max-height: none; }
  .scent-profile__facts { margin-top: 0; }
  .skin-journey,
  .pdp-care__inner { grid-template-columns: 1fr; row-gap: 2rem; }
}

@media (max-width: 560px) {
  /* Keep the existing wardrobe contract visible to source-level tooling. */
  .wardrobe-scent-grid { grid-template-columns: 1fr; }
  .scent-profile__facts { grid-template-columns: 1fr; gap: 1.15rem; }
  .scent-profile__facts p { min-width: 0; padding: 0; }
  .scent-note { grid-template-columns: 1fr; gap: .55rem; }
  .scent-note__stage { padding-top: 0; }
  .skin-journey__item { grid-template-columns: 1fr; gap: .55rem; }
}

/* Elias keeps the same structure while using its blue ink discipline. */
.pdp-elias-world .pdp-detail-stage { border-bottom: 1px solid rgba(0, 78, 122, .18); }
.pdp-elias-world .pdp-detail-stage .kicker,
.pdp-elias-world .pdp-detail-stage .scent-note__stage,
.pdp-elias-world .pdp-detail-stage .scent-profile__facts span { color: rgba(0, 78, 122, .72); }
.pdp-elias-world .pdp-detail-stage .scent-notes__media,
.pdp-elias-world .pdp-detail-stage .scent-notes__list,
.pdp-elias-world .pdp-detail-stage .scent-note,
.pdp-elias-world .pdp-detail-stage .skin-journey,
.pdp-elias-world .pdp-detail-stage .skin-journey__rows,
.pdp-elias-world .pdp-detail-stage .skin-journey__item { border-color: rgba(0, 78, 122, .24); }

/* ---------------------------------------------------------- STORY / LONG-FORM */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.metric { padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.8rem); border-left: 1px solid var(--line); }
.metric:first-child { border-left: 0; padding-left: 0; }
.metric__n { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; }
.metric__l { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--fg-3); margin-top: 0.8rem; line-height: 1.5; }
.bigquote { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.36; letter-spacing: -0.01em; }
.bigquote em { font-style: italic; }
.proseblock { max-width: 60ch; }
.proseblock p { margin-top: 1.1rem; color: var(--fg-2); }
.proseblock p:first-child { margin-top: 0; }
.proseblock--lead p:first-child { font-size: var(--t-lead); color: var(--fg-1); font-weight: 300; line-height: 1.55; }

/* the pharmacist method — numbered because it IS a sequence (measure->blend->correct) */
.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2.4rem); }
.method__step { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.method__no { font-family: var(--ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; color: var(--fg-3); }
.method__step h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin-top: 0.5rem; }
.method__step p { color: var(--fg-2); margin-top: 0.6rem; font-size: var(--t-body); }

/* honest-hours page: line toggle + summary stats */
.hours-tabs { display: flex; gap: 0.55rem; }
.hours-stat { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-top: 1.6rem; }
.hours-stat > div { padding: clamp(1.1rem, 2.4vw, 1.7rem); border-left: 1px solid var(--line); }
.hours-stat > div:first-child { border-left: 0; }
.hours-stat b { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 400; }
.hours-stat span { font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin-top: 0.4rem; display: block; }

/* simple gift checklist + faq intro reuse .acc/.giftfeats from elora.css */
.tick { display: grid; gap: 0.7rem; margin-top: 1.4rem; }
.tick li { display: flex; gap: 0.7em; align-items: flex-start; color: var(--fg-2); }
.tick li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 0.55em; background: var(--ink); }
.setgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 1.5vw, 1.2rem); }
.setcard { border: 1px solid var(--line); background: var(--cream-soft); padding: clamp(1.1rem, 2vw, 1.45rem); min-height: 100%; display: flex; flex-direction: column; }
.setcard span { font-family: var(--ui); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.setcard h3 { font-family: var(--serif); font-weight: 400; font-size: 1.34rem; line-height: 1.05; margin-top: 0.7rem; }
.setcard p { color: var(--fg-2); font-size: var(--t-support); line-height: 1.45; margin-top: 0.65rem; flex: 1; }
.setcard .linku { margin-top: 1.1rem; font-size: 0.62rem; }
.setcard.is-elias { background: var(--elias-blue); color: var(--white); border-color: var(--elias-blue); }
.setcard.is-elias h3 { color: var(--white); }
.setcard.is-elias span, .setcard.is-elias p { color: rgba(255,255,255,0.72); }

/* real customer proof wall */
.proofwall { column-count: 2; column-gap: clamp(1rem, 2vw, 1.6rem); }
.proofcard { min-width: 0; display: inline-block; width: 100%; margin: 0 0 clamp(1rem, 2vw, 1.6rem); padding: clamp(1.35rem, 2.6vw, 2.35rem); border: 1px solid var(--line); background: var(--cream-deep); break-inside: avoid; vertical-align: top; }
.proofcard:nth-child(2n) { background: var(--cream-soft); }
.proofcard blockquote { margin-top: 1rem; font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.34; }
.proofcard__context { margin-top: 0.8rem; color: var(--fg-2); font-size: var(--t-support); line-height: 1.48; }
.proofcard__person { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.proofcard__avatar { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; flex: none; overflow: hidden; border-radius: 50%; background: var(--ink); color: var(--cream); }
.proofcard__avatar img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.proofcard__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 1.3rem; }
.proofcard__identity { min-width: 0; display: grid; gap: 0.18rem; }
.proofcard__identity strong { color: var(--fg-1); font-family: var(--serif); font-size: 1.25rem; font-weight: 400; line-height: 1.05; }
.proofcard__identity small { color: var(--fg-2); font-family: var(--ui); font-size: 0.68rem; line-height: 1.35; letter-spacing: 0.05em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .proofcard.reveal { opacity: 1; transform: none; transition: none; }
}

/* perfume care sequence */
.caresteps { border-top: 1px solid var(--line); }
.carestep { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(1.6rem, 3.4vw, 2.8rem) 0; border-bottom: 1px solid var(--line); }
.carestep > span { font-family: var(--ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; color: var(--fg-3); }
.carestep h2 { max-width: 22ch; font-size: clamp(1.45rem, 2.6vw, 2.15rem); }
.carestep p { max-width: 55ch; margin-top: 0.65rem; color: var(--fg-2); }

/* gifting planner: retail estimate only, no invented bulk discount */
.giftplanner { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.giftplanner__intro h2 { margin-top: 1rem; font-size: var(--t-h2); }
.giftplanner__intro h2 + .lead { margin-top: clamp(1rem, 1.5vw, 1.25rem); }
.giftplanner__tool { border: 1px solid var(--line); padding: clamp(1.25rem, 2.8vw, 2rem); background: var(--cream-soft); }
.giftplanner__fields { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 0.8rem; }
.giftplanner label { display: grid; gap: 0.4rem; min-width: 0; }
.giftplanner label span { font-family: var(--ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.giftplanner input, .giftplanner select { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 0; background: var(--cream); padding: 0.72rem 0.8rem; font-family: var(--ui); font-size: 1rem; color: var(--ink); }
.giftplanner__output { display: grid; gap: 0.3rem; margin: 1.3rem 0; padding: 1.15rem 0; border-block: 1px solid var(--line); }
.giftplanner__output span { font-family: var(--ui); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.giftplanner__output b { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1; }
.giftplanner__output small, .giftplanner__fine { color: var(--fg-2); font-size: var(--t-support); }
.giftplanner__fine { margin-top: 0.8rem; }

/* shared closing CTA band (matches homepage closing tone, reusable) */
.ctaband { text-align: center; }
.ctaband .kicker { justify-content: center; color: rgba(246,243,237,0.5); }
.ctaband__big { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.06; color: var(--cream); margin-top: 0; letter-spacing: -0.015em; }
.ctaband__big em { font-style: italic; }
.ctaband__sub { color: rgba(246,243,237,0.72); margin: 1.2rem auto 0; max-width: 46ch; }
.ctaband .btn { margin-top: 1.9rem; --bg: var(--cream); --fg: var(--ink); --bd: var(--cream); }
.ctaband .btn:hover { --bg: #fff; --bd: #fff; }

/* =========================================================== RESPONSIVE */
@media (max-width: 920px) {
  .pdp { grid-template-columns: 1fr; gap: 1.8rem; }
  .pdp__left { display: contents; }
  .pdp__gallery { grid-column: auto; grid-row: auto; order: 1; max-width: 460px; }
  .pdp__buy { grid-column: auto; grid-row: auto; order: 2; }
  .pdp__left > .pdp-proof { grid-column: auto; grid-row: auto; order: 3; margin-top: 0; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(3) { border-left: 0; padding-left: 0; }
  .metric { border-top: 1px solid var(--line-soft); }
  .metric:nth-child(1), .metric:nth-child(2) { border-top: 0; }
  .method { grid-template-columns: 1fr; gap: 1.4rem; }
  .giftplanner { grid-template-columns: 1fr; }
  .giftplanner__fields { grid-template-columns: 1fr; }
  .setgrid { grid-template-columns: repeat(2, 1fr); }
  .wardrobe-grid { grid-template-columns: repeat(2, 1fr); }
  .builder-shell { grid-template-columns: 1fr; }
  .builder-panel { position: static; }
  .fmatch { grid-template-columns: 1fr; }
  .fmatch__media { aspect-ratio: 5/4; }
}
@media (max-width: 560px) {
  .wardrobe-scent-grid { grid-template-columns: 1fr !important; }
  .sizes { grid-template-columns: 1fr; }
  .bundle-opt { grid-template-columns: 1fr; }
  .bundle-opt__price { grid-column: auto; grid-row: auto; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); }
  .metric:first-child { border-top: 0; }
  .hours-stat { grid-template-columns: 1fr; }
  .setgrid { grid-template-columns: 1fr; }
  .proofwall { column-count: 1; }
  .carestep { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .wardrobe-components, .builder-grid { grid-template-columns: 1fr; }
  .buildbox { align-items: flex-start; flex-direction: column; }
  .pdp-elias-lockup { align-items: flex-start; flex-direction: column; gap: 0.45rem; }
  .hours-stat > div { border-left: 0; border-top: 1px solid var(--line); }
  .hours-stat > div:first-child { border-top: 0; }
  .collhead { flex-direction: column; align-items: flex-start; }
  .filtergroup { grid-template-columns: 1fr; gap: 0.55rem; }
}

@media (max-width: 760px) {
  body:has(.pdp) { padding-bottom: 76px; }
  .pdp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 220; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(246,243,237,0.96); border-top: 1px solid var(--line); padding: 0.8rem var(--gutter); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(100%); transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease), visibility 0s linear var(--d2); }
  .pdp-sticky.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .pdp-sticky b { display: block; font-family: var(--serif); font-size: 1rem; line-height: 1.05; font-weight: 400; }
  .pdp-sticky span { display: block; font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); margin-top: 0.18rem; }
  .pdp-sticky .btn { flex: none; padding: 0.95em 1.35em; font-size: 0.68rem; }
  .pdp-elias-world .pdp-sticky { background: rgba(1,54,80,0.97); border-color: rgba(255,255,255,0.24); color: var(--white); }
  .pdp-elias-world .pdp-sticky span { color: rgba(255,255,255,0.68); }
  .pdp-elias-world .pdp-sticky .btn { --bg: var(--white); --fg: var(--elias-blue); --bd: var(--white); }
}

/* active nav link (inner pages only) */
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--ink); }

/* --- finder result: give the match plate room, fix grid blowout/clipping --- */
.finder { max-width: none; }                 /* quiz card carries its own width now */
.finder__card { max-width: 780px; margin-inline: auto; }
.fresult { max-width: 1060px; margin-inline: auto; }
.fmatch { min-width: 0; }
.fmatch__media, .fmatch__body { min-width: 0; }   /* prevent grid item from overflowing + being clipped */
.fmatch__body > p, .fmatch__essence { overflow-wrap: break-word; }
.fresult__alts .pgrid { grid-template-columns: repeat(2, 1fr); max-width: 680px; margin-inline: auto; }
@media (max-width: 560px) { .fresult__alts .pgrid { grid-template-columns: 1fr 1fr; } }

/* ============================================================ CART / BAG */
/* header bag button (added to the chrome on every page) */
.nav__bag { position: relative; display: inline-flex; align-items: center; gap: 0.4em; color: var(--ink); }
.nav__bagicon { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.bag-count { font-family: var(--ui); font-size: 0.6rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 16px; height: 16px; padding: 0 4px; background: var(--ink); color: var(--cream); border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.bag-count.is-zero { display: none; }

/* slide-out drawer */
.bag-overlay { position: fixed; inset: 0; z-index: 290; background: rgba(20,18,15,0.42); opacity: 0; visibility: hidden; transition: opacity var(--d2) var(--ease), visibility var(--d2); }
.bag-overlay.is-on { opacity: 1; visibility: visible; }
.bag { position: fixed; top: 0; right: 0; z-index: 300; width: min(420px, 92vw); height: 100%; background: var(--cream); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--d2) var(--ease); box-shadow: -20px 0 60px rgba(20,18,15,0.14); }
.bag.is-open { transform: none; }
.bag__head { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem clamp(1.2rem,3vw,1.8rem); border-bottom: 1px solid var(--line); }
.bag__title { font-family: var(--serif); font-size: 1.5rem; }
.bag__close { font-family: var(--ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.bag__close:hover { color: var(--ink); }
.bag__body { flex: 1; overflow-y: auto; padding: 0.6rem clamp(1.2rem,3vw,1.8rem); }
.bag__empty { text-align: center; padding: 3rem 0; color: var(--fg-2); }
.bag__empty .btn { margin-top: 1.4rem; }
.bag__emptysub { font-size: var(--t-support); color: var(--fg-3); margin-top: 0.5rem; }
.bagitem { display: grid; grid-template-columns: 60px 1fr auto; gap: 0.9rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-soft); }
.bagitem__img { display: block; width: 60px; height: 72px; background: var(--cream-deep); overflow: hidden; }
.bagitem__img img { width: 100%; height: 100%; object-fit: cover; }
.bagitem__name { font-family: var(--serif); font-size: 1.18rem; line-height: 1.1; display: block; }
.bagitem__meta { font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin-top: 0.25rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); margin-top: 0.6rem; }
.qty button { width: 30px; height: 28px; font-size: 1.05rem; line-height: 1; color: var(--ink); }
.qty button:hover { background: var(--cream-deep); }
.qty span { min-width: 30px; text-align: center; font-family: var(--ui); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.bagitem__right { text-align: right; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.bagitem__price { font-family: var(--ui); font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bagitem__rm { font-family: var(--ui); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); text-decoration: underline; text-underline-offset: 2px; }
.bagitem__rm:hover { color: var(--ink); }
.bag__foot { border-top: 1px solid var(--line); padding: 1.2rem clamp(1.2rem,3vw,1.8rem) clamp(1.2rem,3vw,1.8rem); }
.bag-progress { border-bottom: 1px solid var(--line-soft); padding-bottom: 0.9rem; margin-bottom: 0.95rem; }
.bag-progress__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.bag-progress__top b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bag-progress__track { height: 4px; background: var(--line-soft); margin-top: 0.55rem; overflow: hidden; }
.bag-progress__track span { display: block; height: 100%; background: var(--ink); transition: width var(--d2) var(--ease); }
.bag-progress.is-free .bag-progress__track span { background: var(--elias-blue); }
.bag-reco { border: 1px solid var(--line); background: var(--cream-soft); padding: 0.95rem; margin-bottom: 1rem; }
.bag-reco small { display: block; font-family: var(--ui); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 0.45rem; }
.bag-reco b { display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 400; line-height: 1.12; }
.bag-reco span { display: block; margin-top: 0.35rem; color: var(--fg-2); font-size: var(--t-support); line-height: 1.45; }
.bag-reco .linku { margin-top: 0.75rem; font-size: 0.62rem; }
.bag-reco__btn { width: 100%; margin-top: 0.8rem; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); padding: 0.82em 1em; font-family: var(--ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: background var(--d2) var(--ease), color var(--d2) var(--ease); }
.bag-reco a.bag-reco__btn { display: block; text-align: center; text-decoration: none; }
.bag-reco__btn:hover { background: var(--cream); color: var(--ink); }
.bag-reco--empty { margin: 1.4rem auto 0; text-align: left; max-width: 22rem; }

/* build-a-set + Scent Wardrobes */
.buildbox { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--ink); background: var(--cream); color: var(--ink); padding: 0.95rem 1.05rem; margin-top: 0.85rem; text-decoration: none; transition: background var(--d2) var(--ease), color var(--d2) var(--ease); }
.buildbox b { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 400; line-height: 1.1; }
.buildbox small { display: block; color: var(--fg-2); font-size: var(--t-support); line-height: 1.35; margin-top: 0.25rem; }
.buildbox em { flex: none; font-family: var(--ui); font-style: normal; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.buildbox:hover { background: var(--ink); color: var(--cream); }
.buildbox:hover small { color: rgba(246,243,237,0.7); }
.sets-hero { padding-block: clamp(1.8rem, 4vw, 3.6rem); }
.sets-hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sets-hero__copy { padding-block: clamp(1rem, 3vw, 2.5rem); }
.sets-hero .phero__title { max-width: 12ch; font-size: clamp(2.6rem, 4.7vw, 4.9rem); }
.sets-hero .phero__lead { max-width: 50ch; }
.sets-hero__media { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--cream-deep); aspect-ratio: 3 / 2; }
.sets-hero__media picture, .sets-hero__media img { display: block; width: 100%; height: 100%; }
.sets-hero__media img { object-fit: cover; }
.sets-hero__media.is-missing picture { display: none; }
.sets-hero__media.is-missing::after { content: attr(data-fallback); position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.6rem); color: var(--fg-2); }

.wardrobe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.wardrobe-card { border: 1px solid var(--line); background: var(--cream-soft); min-height: 100%; display: flex; flex-direction: column; transition: border-color var(--d2) var(--ease), background var(--d2) var(--ease); }
.wardrobe-card:hover { border-color: rgba(28,26,23,0.36); background: var(--cream); }
.wardrobe-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--cream-deep), var(--cream)); }
.wardrobe-media picture, .wardrobe-media img { display: block; width: 100%; height: 100%; }
.wardrobe-media img { object-fit: cover; transition: transform 500ms var(--ease); }
.wardrobe-card:hover .wardrobe-media img { transform: scale(1.018); }
.wardrobe-media__tab { position: absolute; left: 0; bottom: 0; z-index: 1; padding: 0.62rem 0.8rem; background: var(--ink); color: var(--cream); font-family: var(--ui); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.wardrobe-media.is-missing picture { display: none; }
.wardrobe-media.is-missing::after { content: attr(data-fallback); position: absolute; left: 1rem; bottom: 3.4rem; max-width: 18ch; font-family: var(--serif); font-size: 1.35rem; line-height: 1.02; color: var(--fg-2); }
.wardrobe-media--detail { min-width: 0; min-height: 0; width: 100%; align-self: center; border: 1px solid var(--line); }
.wardrobe-card__body { padding: clamp(1rem, 2vw, 1.3rem); display: flex; flex-direction: column; flex: 1; }
.wardrobe-card__eyebrow { font-family: var(--ui); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.wardrobe-card h3 { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 400; line-height: 1.05; margin-top: 0.65rem; }
.wardrobe-card p { color: var(--fg-2); font-size: var(--t-support); line-height: 1.45; margin-top: 0.65rem; flex: 1; }
.wardrobe-card__meta { font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); margin-top: 0.9rem; }
.wardrobe-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-top: 1rem; }
.wardrobe-card__actions .btn { width: 100%; min-height: 44px; justify-content: center; }
.wardrobe-hero { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr); gap: clamp(1.4rem, 4vw, 4rem); align-items: stretch; }
.wardrobe-components { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 1.4rem; }

/* Wardrobe detail pages: an editorial purchase story built around the register. */
.wardrobe-page { overflow: clip; background: var(--cream); }
.wardrobe-detail-hero { padding-block: clamp(1.35rem, 3vw, 2.4rem) clamp(2.8rem, 6vw, 5.4rem); background: var(--cream); }
.wardrobe-detail-hero .crumb { margin-bottom: clamp(1.8rem, 4vw, 3.5rem); }
.wardrobe-detail-hero .wardrobe-hero { align-items: center; }
.wardrobe-detail-hero .wardrobe-media--detail { aspect-ratio: 3 / 2; box-shadow: 1rem 1rem 0 var(--cream-deep); }
.wardrobe-buybox { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(0.5rem, 2vw, 1.8rem) 0; }
.wardrobe-buybox .phero__title { max-width: 10ch; font-size: clamp(2.8rem, 5.2vw, 5.5rem); }
.wardrobe-buybox .phero__lead { max-width: 42ch; }
.wardrobe-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem 0.85rem; margin-top: clamp(1.5rem, 3vw, 2.1rem); padding-block: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--ui); font-variant-numeric: tabular-nums; }
.wardrobe-price strong { display: inline-flex; align-items: baseline; gap: 0.65rem; font-family: var(--serif); font-size: clamp(1.65rem, 2.7vw, 2.25rem); font-weight: 400; }
.wardrobe-price__label { font-family: var(--ui); font-size: 0.59rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.wardrobe-price s { color: var(--fg-3); font-size: 0.78rem; }
.wardrobe-price > span { padding: 0.35em 0.58em; background: var(--ink); color: var(--cream); font-size: 0.59rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.wardrobe-includes { margin-top: 1rem; font-family: var(--ui); font-size: 0.65rem; font-weight: 650; line-height: 1.6; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.wardrobe-buybox__note { max-width: 48ch; margin-top: 1rem; color: var(--fg-3); font-family: var(--ui); font-size: var(--t-caption); line-height: 1.55; }
[data-wardrobe-cta] { min-height: 44px; }
.wardrobe-final :focus-visible,
.wardrobe-page--elias .wardrobe-detail-hero :focus-visible { outline-color: var(--white); }

.wardrobe-register-section { padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); background: var(--cream-soft); }
.wardrobe-register__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.6rem, 3vw, 2.5rem); }
.wardrobe-register__head h2 { max-width: 11ch; margin-top: 0.8rem; font-size: clamp(2rem, 3.8vw, 3.6rem); }
.wardrobe-register__head > p { max-width: 42ch; color: var(--fg-2); }
.wardrobe-register { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.wardrobe-register--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wardrobe-register__item { min-width: 0; padding: clamp(1.25rem, 2.5vw, 2rem); border-right: 1px solid var(--line); }
.wardrobe-register__item:last-child { border-right: 0; }
.wardrobe-register__number { display: block; font-family: var(--ui); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; color: var(--fg-3); }
.wardrobe-register__item h3 { margin-top: 1.65rem; font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.wardrobe-register__item p { margin-top: 0.5rem; color: var(--fg-2); font-family: var(--ui); font-size: 0.62rem; font-weight: 650; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; }
.wardrobe-register__item small { display: block; margin-top: 1rem; color: var(--fg-2); font-size: var(--t-support); line-height: 1.45; }

.wardrobe-reason { padding-block: clamp(3.8rem, 8vw, 7rem); background: var(--ink); color: var(--cream); }
.wardrobe-reason__grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(2.4rem, 7vw, 7.5rem); align-items: center; }
.wardrobe-reason h2 { max-width: 12ch; margin-top: 0; color: var(--cream); font-size: clamp(2.35rem, 5vw, 5rem); }
.wardrobe-reason .kicker { color: rgba(246,243,237,0.58); }
.wardrobe-reason__grid > p { max-width: 44ch; color: rgba(246,243,237,0.76); font-family: var(--serif); font-size: clamp(1.25rem, 2.25vw, 1.8rem); line-height: 1.48; }

.wardrobe-scents { padding-block: clamp(4rem, 8vw, 7rem); }
.wardrobe-scent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.5rem); }
.wardrobe-scent-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wardrobe-scent-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--cream-soft); }
.wardrobe-scent-card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--cream-deep); }
.wardrobe-scent-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 650ms var(--ease); }
.wardrobe-scent-card:hover .wardrobe-scent-card__media img { transform: scale(1.025); }
.wardrobe-scent-card__hours { position: absolute; top: 0.7rem; right: 0.7rem; padding: 0.35em 0.55em; background: rgba(246,243,237,0.9); color: var(--fg-2); font-family: var(--ui); font-size: 0.57rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }
.wardrobe-scent-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(1rem, 2vw, 1.35rem); }
.wardrobe-scent-card__role { font-family: var(--ui); font-size: 0.57rem; font-weight: 750; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-3); }
.wardrobe-scent-card h3 { margin-top: 0.7rem; font-size: clamp(1.35rem, 2vw, 1.75rem); }
.wardrobe-scent-card__meta { margin-top: 0.45rem !important; font-family: var(--ui); font-size: 0.58rem !important; font-weight: 650; line-height: 1.45 !important; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-3) !important; }
.wardrobe-scent-card__body > p:not(.wardrobe-scent-card__meta) { margin-top: 0.9rem; color: var(--fg-2); font-size: var(--t-support); line-height: 1.5; }
.wardrobe-scent-card .linku { margin-top: auto; padding-top: 1.25rem; }

.wardrobe-fit { padding-block: clamp(3.8rem, 8vw, 7rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--cream-deep); }
.wardrobe-fit__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2.4rem, 7vw, 7rem); align-items: center; }
.wardrobe-fit h2 { max-width: 13ch; margin-top: 1rem; font-size: clamp(2.25rem, 4.7vw, 4.6rem); }
.wardrobe-fit__grid > div:last-child > p { max-width: 46ch; color: var(--fg-2); font-size: clamp(1.05rem, 1.6vw, 1.24rem); line-height: 1.65; }
.wardrobe-fit .btn { margin-top: 1.7rem; }

.wardrobe-guide { padding-block: clamp(4rem, 8vw, 7rem); background: var(--cream); }
.wardrobe-guide__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 8vw, 8rem); align-items: start; }
.wardrobe-guide h2 { max-width: 13ch; margin-top: 1rem; font-size: clamp(2.1rem, 4vw, 3.8rem); }
.wardrobe-guide__grid > div:first-child > p { max-width: 44ch; margin-top: 1.2rem; color: var(--fg-2); }
.wardrobe-faq-list { border-top: 1px solid var(--ink); }
.wardrobe-faq { border-bottom: 1px solid var(--line); }
.wardrobe-faq summary { position: relative; cursor: pointer; list-style: none; padding: 1.35rem 2.2rem 1.35rem 0; font-family: var(--serif); font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
.wardrobe-faq summary::-webkit-details-marker { display: none; }
.wardrobe-faq summary::after { content: "+"; position: absolute; top: 50%; right: 0; translate: 0 -50%; font-family: var(--ui); font-size: 1rem; font-weight: 400; }
.wardrobe-faq[open] summary::after { content: "−"; }
.wardrobe-faq p { max-width: 58ch; padding: 0 2.2rem 1.35rem 0; color: var(--fg-2); font-size: var(--t-body); line-height: 1.6; }
.wardrobe-faq a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* Word-of-mouth close: give the editorial headline room to breathe before the proof invitation. */
.word-of-mouth__close h2 + p { margin-top: clamp(0.875rem, 1.2vw, 1rem); }

.wardrobe-final { padding-block: clamp(4rem, 8vw, 7rem); background: var(--ink); color: var(--cream); }
.wardrobe-final__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr); gap: clamp(2.5rem, 8vw, 8rem); align-items: center; }
.wardrobe-final h2 { max-width: 12ch; margin-top: 0; color: var(--cream); font-size: clamp(2.4rem, 5.2vw, 5rem); }
.wardrobe-final .kicker { color: rgba(246,243,237,0.55); }
.wardrobe-final__grid > div:first-child > p { max-width: 47ch; margin-top: 1.2rem; color: rgba(246,243,237,0.7); }
.wardrobe-final__offer { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid rgba(246,243,237,0.3); }
.wardrobe-final__offer > span { display: block; color: rgba(246,243,237,0.58); font-family: var(--ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.wardrobe-final__offer > strong { display: block; margin-top: 1rem; font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 400; font-variant-numeric: tabular-nums; }
.wardrobe-final__offer > div { display: flex; align-items: baseline; gap: 0.8rem; margin-top: 0.4rem; font-family: var(--ui); font-size: 0.68rem; }
.wardrobe-final__offer s { color: rgba(246,243,237,0.48); }
.wardrobe-final__offer em { padding: 0.3em 0.55em; background: var(--cream); color: var(--ink); font-style: normal; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; }
.wardrobe-final__offer .btn { width: 100%; margin-top: 1.6rem; justify-content: center; --bg: var(--cream); --fg: var(--ink); --bd: var(--cream); }
.wardrobe-final__offer .btn:hover { --bg: var(--white); --bd: var(--white); }
.wardrobe-final__offer > a { display: block; margin-top: 1rem; color: rgba(246,243,237,0.64); font-family: var(--ui); font-size: 0.62rem; font-weight: 650; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.25em; }

/* Elias and mixed wardrobes keep the same hierarchy while changing the room. */
.wardrobe-page--elias .wardrobe-detail-hero { border-color: rgba(255,255,255,0.2); background: var(--elias-blue); color: var(--white); }
.wardrobe-page--elias .wardrobe-detail-hero h1 { color: var(--white); }
.wardrobe-page--elias .wardrobe-detail-hero .crumb,
.wardrobe-page--elias .wardrobe-detail-hero .crumb a,
.wardrobe-page--elias .wardrobe-detail-hero .phero__lead,
.wardrobe-page--elias .wardrobe-buybox__note,
.wardrobe-page--elias .wardrobe-includes { color: rgba(255,255,255,0.68); }
.wardrobe-page--elias .wardrobe-detail-hero .crumb .here { color: var(--white); }
.wardrobe-page--elias .wardrobe-detail-hero .kicker { color: rgba(255,255,255,0.62); }
.wardrobe-page--elias .wardrobe-price { border-color: rgba(255,255,255,0.25); }
.wardrobe-page--elias .wardrobe-price__label,
.wardrobe-page--elias .wardrobe-price s { color: rgba(255,255,255,0.58); }
.wardrobe-page--elias .wardrobe-price > span { background: var(--white); color: var(--elias-blue); }
.wardrobe-page--elias .wardrobe-detail-hero .btn--fill { --bg: var(--white); --fg: var(--elias-blue); --bd: var(--white); }
.wardrobe-page--elias .wardrobe-detail-hero .btn--ghost { --fg: var(--white); --bd: rgba(255,255,255,0.52); }
.wardrobe-page--elias .wardrobe-detail-hero .btn--ghost:hover { --bg: var(--white); --fg: var(--elias-blue); --bd: var(--white); }
.wardrobe-page--elias .wardrobe-reason,
.wardrobe-page--elias .wardrobe-final { background: var(--elias-deep); }
.wardrobe-page--elias .wardrobe-scent-card { border-color: rgba(0,78,122,0.24); }
.wardrobe-page--both .wardrobe-detail-hero { box-shadow: inset 0 5px 0 var(--elias-blue); }
.wardrobe-page--both .wardrobe-reason { background: linear-gradient(90deg, var(--ink) 0 50%, var(--elias-deep) 50% 100%); }
.wardrobe-page--both .wardrobe-final__offer { border-left: 4px solid var(--elias-blue); }

.builder-shell { display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.builder-panel { position: sticky; top: 96px; border: 1px solid var(--line); background: var(--cream-soft); padding: clamp(1rem, 2vw, 1.4rem); }
.builder-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-top: 1rem; }
.builder-tab { border: 1px solid var(--line); padding: 0.8rem; text-align: left; background: var(--cream); }
.builder-tab.is-on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.builder-tab b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.08rem; }
.builder-tab span { display: block; font-family: var(--ui); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.3rem; opacity: 0.72; }
.builder-status { color: var(--fg-2); font-size: var(--t-support); margin-top: 1rem; }
.builder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.builder-choice { position: relative; text-align: left; border: 1px solid var(--line); background: var(--cream); padding: 0.8rem; min-height: 100%; }
.builder-choice.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.builder-choice img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--cream-deep); display: block; }
.builder-choice b { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 400; line-height: 1.06; margin-top: 0.7rem; }
.builder-choice span { display: block; font-size: var(--t-support); color: var(--fg-2); margin-top: 0.25rem; }
@media (max-width: 920px) {
  .wardrobe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builder-shell { grid-template-columns: 1fr; }
  .builder-panel { position: static; }
  .wardrobe-scent-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wardrobe-register--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wardrobe-register--4 .wardrobe-register__item:nth-child(2) { border-right: 0; }
  .wardrobe-register--4 .wardrobe-register__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 899px) {
  .sets-hero__grid, .wardrobe-hero { grid-template-columns: 1fr; }
  .sets-hero__grid { gap: 1.4rem; }
  .sets-hero__copy { padding-bottom: 0; }
  .sets-hero .phero__title { max-width: 16ch; }
  .wardrobe-detail-hero .wardrobe-media--detail { box-shadow: 0.7rem 0.7rem 0 var(--cream-deep); }
  .wardrobe-detail-hero .wardrobe-buybox { padding-top: 1.2rem; }
  .wardrobe-register__head { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .wardrobe-register { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wardrobe-register__item:nth-child(2) { border-right: 0; }
  .wardrobe-register__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .wardrobe-reason__grid { grid-template-columns: 1fr; }
  .wardrobe-fit__grid { grid-template-columns: 1fr; }
  .wardrobe-guide__grid { grid-template-columns: 1fr; }
  .wardrobe-final__grid { grid-template-columns: 1fr; }
  .wardrobe-reason__grid,
  .wardrobe-fit__grid,
  .wardrobe-guide__grid,
  .wardrobe-final__grid { gap: 2rem; }
  .wardrobe-page--both .wardrobe-reason { background: var(--ink); box-shadow: inset 5px 0 0 var(--elias-blue); }
}
@media (max-width: 719px) {
  .wardrobe-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wardrobe-scent-grid { grid-template-columns: 1fr; }
  .wardrobe-components, .builder-grid { grid-template-columns: 1fr; }
  .wardrobe-card__actions { grid-template-columns: 1fr; }
  .buildbox { align-items: flex-start; flex-direction: column; }
  .wardrobe-detail-hero .wardrobe-media--detail { box-shadow: 0.45rem 0.45rem 0 var(--cream-deep); }
  .wardrobe-buybox .phero__title { font-size: clamp(2.55rem, 13vw, 4rem); }
  .wardrobe-buybox .phero__cta { display: grid; grid-template-columns: 1fr; }
  .wardrobe-buybox .phero__cta .btn { width: 100%; justify-content: center; }
  .wardrobe-register { grid-template-columns: 1fr; }
  .wardrobe-register__item { border-top: 1px solid var(--line); border-right: 0; }
  .wardrobe-register__item:first-child { border-top: 0; }
  .wardrobe-register--4 .wardrobe-register__item:nth-child(-n+2) { border-bottom: 0; }
  .wardrobe-scent-card__media { aspect-ratio: 5 / 4; }
  .wardrobe-final__offer { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wardrobe-media img { transition: none; }
  .wardrobe-card:hover .wardrobe-media img { transform: none; }
  .wardrobe-scent-card img { transition: none; }
  .wardrobe-scent-card:hover .wardrobe-scent-card__media img { transform: none; }
}
.bag__row { display: flex; align-items: baseline; justify-content: space-between; }
.bag__row span:first-child { font-family: var(--ui); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.bag__sub { font-family: var(--serif); font-size: 1.5rem; }
.bag__shipnote { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--fg-3); margin-top: 0.5rem; }
.bag__checkout { width: 100%; margin-top: 1rem; }
.bag__cont { display: block; width: 100%; text-align: center; margin-top: 0.8rem; font-family: var(--ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.bag__cont:hover { color: var(--ink); }

/* ============================================================== CHECKOUT */
.checkout-page #chrome .announce,
.checkout-page #chrome .nav__links,
.checkout-page #chrome .nav__right,
.checkout-page .mnav,
.checkout-page #foot,
.checkout-page .crumb { display: none; }
.checkout-page #chrome .nav { justify-content: center; }
.co { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.6rem, 4vw, 3.6rem); align-items: start; }
.co__sectlabel { margin-bottom: 1.1rem; }
.field { margin-top: 1rem; }
.field > label { font-family: var(--ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: 0.45rem; }
.field input, .field select, .field textarea { width: 100%; background: var(--cream); border: 1px solid var(--line-strong); border-radius: 0; padding: 0.95em 1em; font-family: var(--ui); font-size: 1rem; color: var(--ink); transition: border-color var(--d2) var(--ease); }
.field input, .field select { height: 3.55rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.email-field input.is-email-invalid { border-color: #c94c58; box-shadow: 0 0 0 1px rgba(201, 76, 88, 0.12); }
.email-field input.is-email-invalid:focus { border-color: #b33e4b; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-4); }
.phone-input { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); }
.phone-input select {
  min-width: 0;
  appearance: none;
  padding: 0 1.35rem 0 0.55rem;
  font-size: 0.84rem;
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%231c1a17' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 0.62rem auto;
}
.phone-input input { min-width: 0; border-left: 0; }
.field-help { display: block; margin-top: 0.35rem; color: var(--fg-3); font-family: var(--ui); font-size: 0.66rem; line-height: 1.35; }
.email-suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-top: 0.45rem; color: var(--fg-2); font-family: var(--ui); font-size: 0.68rem; line-height: 1.35; }
.email-suggestion[hidden] { display: none; }
.email-suggestion:not([hidden]) { color: #b33e4b; }
.email-suggestion strong { color: var(--ink); font-weight: 700; }
.email-suggestion:not([hidden]) strong { color: #8f2935; }
.email-suggestion button { border: 0; padding: 0; background: none; color: var(--ink); font-family: var(--ui); font-size: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field.two > .field--cell { margin-top: 0; }
.cosum { border: 1px solid var(--line); background: var(--cream-soft); padding: clamp(1.3rem,2.6vw,2rem); position: sticky; top: calc(var(--header-h) + 1rem); }
.cosum h3 { font-family: var(--serif); font-size: var(--t-h3); margin-bottom: 0.4rem; }
.coitem { display: grid; grid-template-columns: 52px 1fr auto; gap: 0.8rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.coitem img { width: 52px; height: 62px; object-fit: cover; background: var(--cream-deep); }
.coitem b { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; }
.coitem .sm { font-family: var(--ui); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-top: 0.15rem; }
.coitem .lp { font-family: var(--ui); font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.corow { display: flex; justify-content: space-between; align-items: baseline; padding: 0.45rem 0; font-family: var(--ui); font-size: 0.86rem; letter-spacing: 0.02em; color: var(--fg-2); }
.corow span:last-child { font-variant-numeric: tabular-nums; color: var(--fg-1); }
.corow.grand { font-family: var(--serif); font-size: 1.7rem; color: var(--ink); border-top: 1px solid var(--line); margin-top: 0.5rem; padding-top: 0.9rem; }
.corow.grand span:last-child { font-family: var(--serif); }
.co__shiprow span:last-child.is-pending { color: var(--fg-3); font-style: italic; }
.co-payment-note { max-width: 48ch; margin: 0.85rem auto 0; text-align: center; color: var(--fg-3); font-family: var(--ui); font-size: var(--t-support); line-height: 1.5; }
.co-order-error { margin-top: 1rem; border: 1px solid var(--ink); background: var(--cream-deep); padding: 0.9rem 1rem; font-family: var(--ui); font-size: var(--t-support); line-height: 1.5; }
.co-order-error b, .co-order-error span { display: block; }
.co-order-error span { color: var(--fg-2); margin-top: 0.15rem; }
.co-empty { padding: 2rem 0 4rem; }

@media (max-width: 860px) {
  .co { grid-template-columns: 1fr; }
  .cosum { position: static; order: -1; }
}
@media (max-width: 480px) {
  .field.two { grid-template-columns: 1fr; }
}

/* Post-order payment completion */
.is-payment-screen #chrome,
.is-payment-screen #foot,
.is-payment-screen .checkout-intro { display: none; }
.is-payment-screen main > .section--tight { padding-top: clamp(1.2rem, 3vw, 2.5rem); }
.is-payment-screen main,
.is-payment-screen main > .section--tight,
.is-payment-screen .wrap,
.is-payment-screen #coConfirm { min-width: 0; width: 100%; max-width: 100%; }
.is-payment-screen main,
.is-payment-screen main > .section--tight { overflow-x: clip; }
.payment-screen { --proof-accent: #d8aa3d; --proof-accent-deep: #7b5a12; --proof-accent-soft: #ead18a; --proof-accent-wash: #fff4d8; --proof-complete: #2f7d4f; --proof-complete-deep: #1f5e3b; --proof-complete-soft: #a7d3b5; --proof-complete-wash: #e8f5ec; min-width: 0; width: 100%; max-width: 1120px; margin: 0 auto; padding-bottom: clamp(3rem, 7vw, 6rem); overflow-x: clip; }
.payment-screen.is-proof-complete { max-width: 600px; }
.payment-rail { list-style: none; margin: 0; padding: 0.8rem 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.payment-rail li { min-width: 0; display: grid; grid-template-rows: auto auto; justify-items: center; align-content: start; gap: 0.35rem; color: var(--fg-3); font-family: var(--ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-align: center; text-transform: uppercase; }
.payment-rail__dot { width: 1.6rem; height: 1.6rem; display: inline-grid; flex: 0 0 auto; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 0.62rem; }
.payment-rail li.is-current { color: var(--proof-complete-deep); }
.payment-rail li.is-current .payment-rail__dot { color: var(--proof-complete-deep); border-color: var(--proof-complete); background: var(--proof-complete-wash); }
.payment-rail li.is-done { color: var(--proof-complete-deep); }
.payment-rail li.is-done .payment-rail__dot { color: var(--proof-complete-deep); border-color: var(--proof-complete); background: var(--proof-complete-wash); }
.payment-screen[data-payment-step-state="proof"] [data-payment-step="proof"],
.payment-screen[data-payment-step-state="selected"] [data-payment-step="proof"] { color: var(--proof-complete-deep); }
.payment-screen[data-payment-step-state="complete"] [data-payment-step="proof"] { color: var(--proof-complete-deep); }
.payment-screen[data-payment-step-state="proof"] [data-payment-step="proof"] .payment-rail__dot,
.payment-screen[data-payment-step-state="selected"] [data-payment-step="proof"] .payment-rail__dot { border-color: var(--proof-complete); background: var(--proof-complete-wash); color: var(--proof-complete-deep); }
.payment-screen[data-payment-step-state="complete"] .payment-rail li.is-done { color: var(--proof-complete-deep); }
.payment-screen[data-payment-step-state="complete"] .payment-rail li.is-done .payment-rail__dot { border-color: var(--proof-complete); background: var(--proof-complete-wash); color: var(--proof-complete-deep); }
.payment-rail li,
.payment-rail li > span,
.payment-actions,
.payment-reserve,
.payment-reserve > div,
.payment-panel,
.payment-qr,
.receipt-compact { min-width: 0; max-width: 100%; }
.payment-rail li > span:last-child { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.payment-screen__header { max-width: 600px; margin: 0 auto; text-align: center; padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(1.8rem, 4vw, 2.5rem); }
.payment-screen__title { margin-top: 1rem; font-family: var(--serif); font-size: clamp(3.1rem, 7vw, 4.8rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.92; text-wrap: balance; }
.payment-screen__header p { max-width: 48ch; margin: 1.2rem auto 0; color: var(--fg-2); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; }
.is-proof-complete .payment-screen__header,
.is-proof-complete .payment-actions { display: none; }
.proof-success-hero { --proof-accent: #d8aa3d; --proof-accent-deep: #fff4d8; --proof-accent-soft: rgba(255,244,216,0.34); --proof-accent-wash: #58241C; width: min(100%, 600px); min-width: 0; margin: clamp(0.75rem, 2vw, 1.2rem) auto 0; padding: clamp(1.15rem, 3vw, 1.8rem); border: 1px solid var(--proof-accent-soft); border-radius: 6px; background: var(--proof-accent-wash); box-shadow: 0 18px 42px rgba(88, 36, 28, 0.18); text-align: center; }
.success-sticker { display: grid; width: clamp(2.8rem, 8vw, 3.5rem); aspect-ratio: 1; place-items: center; margin: 0 auto 0.8rem; border-radius: 50%; background: var(--proof-accent); color: var(--cream); font-family: var(--ui); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; transform: rotate(-7deg); }
.proof-success-hero > .kicker { display: block; }
.proof-success-hero .kicker { color: rgba(246,243,237,0.72); }
.proof-success-hero h1 { width: 100%; max-width: 16ch; margin: 0.65rem auto 0; font-family: var(--serif); font-size: clamp(2.25rem, 4.7vw, 3.5rem); font-weight: 400; letter-spacing: -0.02em; line-height: 0.92; color: var(--cream); overflow-wrap: anywhere; text-wrap: balance; }
.proof-success-hero__lede { width: 100%; max-width: 38ch; margin: 0.7rem auto 0; color: rgba(246,243,237,0.82); font-size: clamp(0.95rem, 1.5vw, 1.05rem); line-height: 1.4; overflow-wrap: anywhere; }
.elaine-slip { --note-paper: #f5f1e9; width: min(100%, 500px); min-width: 0; margin: 1rem auto 0; padding: clamp(1rem, 3vw, 1.55rem); background: var(--note-paper); border: 1px solid rgba(123, 90, 18, 0.18); border-radius: 4px; box-shadow: 0 12px 22px rgba(123, 90, 18, 0.08); text-align: left; }
.elaine-slip > span { display: block; padding: 0.2rem 0.35rem 0.65rem; color: #58241C; font-family: var(--ui); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.elaine-note-copy { margin: 0.85rem 0 0; color: var(--fg-2); font-size: var(--t-support); line-height: 1.62; overflow-wrap: anywhere; }
.elaine-signature { margin: 1rem 0 0; text-align: right; }
.elaine-signature img { display: block; width: min(55%, 220px); max-width: 100%; height: auto; margin-left: auto; background: var(--note-paper); }
.elaine-signature figcaption { margin: 0; }
.payment-actions { max-width: 600px; margin: 0 auto; border: 1px solid var(--line); background: var(--cream); overflow: hidden; }
.payment-reserve { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 0.85rem; align-items: center; padding: 0.9rem; border-bottom: 1px solid var(--line); background: var(--cream-deep); text-align: left; }
.payment-reserve img { width: 58px; height: 58px; object-fit: cover; border: 1px solid var(--line); background: var(--cream); }
.payment-reserve span { display: block; font-family: var(--serif); font-size: 1.04rem; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.payment-reserve b { display: block; margin-top: 0.24rem; color: var(--fg-3); font-family: var(--ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; overflow-wrap: anywhere; }
.payment-reserve strong { justify-self: end; font-family: var(--serif); font-size: 1.25rem; font-weight: 400; white-space: nowrap; color: var(--ink); }
.payment-scent-trail { max-width: 600px; margin: 0 auto clamp(1rem, 3vw, 1.4rem); }
.payment-scent-trail__labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 0.55rem; color: var(--fg-3); font-family: var(--ui); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.payment-scent-trail__labels span:nth-child(2) { text-align: center; }
.payment-scent-trail__labels span:nth-child(3) { text-align: right; }
.payment-scent-trail__track { position: relative; height: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--cream-soft); }
.payment-scent-trail__fill { position: relative; display: block; width: 46%; height: 100%; border-radius: inherit; background: var(--proof-complete); box-shadow: 0 0 0 1px rgba(47, 125, 79, 0.1) inset; transition: width 0.58s cubic-bezier(.22,.8,.22,1); }
.payment-scent-trail__fill::after { content: ""; position: absolute; right: -1.7rem; top: -2px; width: 3.2rem; height: calc(100% + 4px); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent); filter: blur(0.2px); animation: payment-scent-glow 1.35s ease-in-out infinite; }
.payment-scent-trail__fill.is-loading::after { animation-duration: 0.78s; }
.payment-screen[data-payment-step-state="proof"] .payment-scent-trail__fill { width: 72%; }
.payment-screen[data-payment-step-state="selected"] .payment-scent-trail__fill { width: 86%; }
.payment-screen[data-payment-step-state="complete"] .payment-scent-trail__fill { width: 100%; background: var(--proof-complete); }
.payment-screen[data-payment-step-state="complete"] .payment-scent-trail__fill::after { display: none; }

/* --- pre-save "saving order" screen: clean and ultra minimal, per Darwin's --- */
/* --- direction — nothing on screen but the typed line, dead center. A       --- */
/* --- typewriter note in the brand's own serif, not a spinner borrowed from  --- */
/* --- elsewhere: Elora already treats handwriting as its premium signal      --- */
/* --- (Elaine's script signature on every product note).                     --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* fixed full-viewport overlay, centered regardless of scroll position or the
   ancestor page structure's own padding/max-width — true center of the
   screen, not just centered within the checkout column. */
.is-saving-screen {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter);
  background: var(--cream);
  text-align: center;
  animation: coSavingIn var(--d3) var(--ease);
}
@keyframes coSavingIn { from { opacity: 0; } to { opacity: 1; } }

.saving-title {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.04em; line-height: 0.92;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  color: var(--ink-pure);
  text-wrap: balance;
}
.typewriter-cursor { display: inline-block; width: 3px; height: 0.76em; margin-left: 0.08em; vertical-align: -0.05em; background: currentColor; animation: coCursorBlink 0.9s step-end infinite; }
@keyframes coCursorBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

@keyframes payment-scent-glow {
  0% { transform: translateX(-0.65rem); opacity: 0.15; }
  45% { opacity: 1; }
  100% { transform: translateX(0.8rem); opacity: 0.15; }
}
.payment-panel { min-width: 0; padding: clamp(1.4rem, 4vw, 2.8rem); text-align: center; }
.payment-panel--pay { background: var(--cream-soft); }
.payment-panel--proof { background: var(--cream); }
.payment-screen[data-payment-step-state="proof"] .payment-actions,
.payment-screen[data-payment-step-state="selected"] .payment-actions { border-color: var(--proof-accent-soft); }
.payment-panel__step { display: flex; align-items: center; justify-content: center; gap: 0.6rem; color: var(--fg-2); font-family: var(--ui); font-size: clamp(0.88rem, 1.4vw, 1.05rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 0.95rem; margin-bottom: 1.65rem; }
.payment-summary-header { font-family: var(--serif); font-size: clamp(2.15rem, 5vw, 3rem); font-weight: 400; color: var(--ink); margin-bottom: 0.8rem; }
.payment-summary-header .payment-amount { color: var(--proof-accent-deep); font-weight: 550; background: linear-gradient(180deg, transparent 54%, rgba(216, 170, 61, 0.3) 54%); }
.payment-panel > p { max-width: 45ch; margin: 0.8rem auto 0; color: var(--fg-2); font-size: var(--t-support); }
.payment-panel .btn--fill { min-height: 56px; font-size: 0.78rem; letter-spacing: 0.16em; }
.payment-qr { display: flex; flex-direction: column; align-items: center; margin: clamp(1.2rem, 3vw, 2rem) auto 0; padding: 1.2rem; background: var(--cream-deep); border: 1px solid var(--line); max-width: 100%; }
.payment-qr__top { width: min(100%, 340px); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.8rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); font-family: var(--ui); }
.payment-qr__top span { color: var(--fg-3); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.payment-qr__top b { color: var(--ink); font-family: var(--serif); font-size: 1.35rem; font-weight: 400; white-space: nowrap; }
.payment-qr__crop { width: clamp(220px, 29vw, 275px); aspect-ratio: 1; overflow: hidden; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; }
.payment-qr__image { width: 100%; height: 100%; max-width: none; display: block; object-fit: contain; background: var(--white); }
.payment-qr figcaption { margin-top: 0.55rem; text-align: center; color: var(--fg-3); font-family: var(--ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.payment-qr__error { max-width: 32ch; border: 1px solid var(--ink); padding: 1rem; color: var(--ink); font-family: var(--ui); font-size: 0.8rem; }
.proof-upload-card { --proof-helper-accent: #c98278; --proof-helper-deep: #7a3833; --proof-helper-soft: #f1d1c8; --proof-helper-wash: #fbebe4; margin: 1rem auto 0; padding: 1rem; border: 1px solid var(--proof-helper-soft); background: var(--proof-helper-wash); text-align: center; }
.proof-upload-card > span { display: block; max-width: 43ch; margin: 0 auto; color: var(--fg-2); font-size: var(--t-support); line-height: 1.45; }
.proof-upload-card strong { color: var(--proof-helper-deep); font-weight: 800; }
.proof-picker { display: flex; flex-direction: column; align-items: center; margin-top: 1.2rem; text-align: center; }
.proof-picker__preview { width: min(100%, 260px); max-height: 300px; object-fit: contain; background: var(--white); border: 1px solid var(--line); padding: 0.35rem; }
.proof-picker__preview[hidden] { display: none !important; }
.proof-picker__file { margin-top: 0.75rem; font-family: var(--ui); font-size: 0.75rem; line-height: 1.45; }
.proof-picker__file b, .proof-picker__file span { display: block; overflow-wrap: anywhere; }
.proof-picker__file span { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.proof-picker__actions { display: flex; align-items: stretch; flex-direction: column; gap: 0.65rem; margin-top: 1rem; width: 100%; }
.proof-picker__actions .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.proof-picker__actions .btn.btn--fill { min-height: 56px; }
.proof-picker__actions .btn[disabled] { cursor: not-allowed; opacity: 0.38; }
.proof__status { min-height: 1.25rem; margin-top: 0.75rem; color: var(--fg-2); font-family: var(--ui); font-size: 0.78rem; line-height: 1.45; }
.proof-success { margin-top: 1.2rem; border: 1px solid var(--ink); padding: 1rem; background: var(--cream-deep); }
.proof-success h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.proof-success p { margin-top: 0.45rem; color: var(--fg-2); font-size: var(--t-support); line-height: 1.5; }
.payment-fallback { margin-top: 1.2rem !important; font-family: var(--ui); font-size: 0.72rem !important; text-align: center; width: 100%; }
.payment-fallback a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

@media (prefers-reduced-motion: reduce) {
  .payment-scent-trail__fill { transition: none; }
  .payment-scent-trail__fill::after { animation: none; opacity: 0.35; }
}

/* Compact receipt sits below the payment actions. */
.receipt-compact { max-width: 600px; margin: clamp(1.5rem, 4vw, 3rem) auto 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 1.2rem 0; }
.receipt-compact__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.receipt-compact__head h2 { margin-top: 0.2rem; font-family: var(--serif); font-size: 1.55rem; font-weight: 400; }
.receipt-compact__total { text-align: right; }
.receipt-compact__total span { display: block; color: var(--fg-3); font-family: var(--ui); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.receipt-compact__total b { display: block; margin-top: 0.2rem; font-family: var(--serif); font-size: 1.8rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.receipt-compact__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.receipt-compact__meta span { color: var(--fg-3); font-family: var(--ui); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.receipt-compact__meta b { display: block; margin-top: 0.25rem; color: var(--ink); font-size: 0.74rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.receipt__items { padding: 0.5rem 0; }
.ritem { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); }
.ritem__d b { font-family: var(--serif); font-weight: 400; font-size: 1rem; }
.ritem__d span { display: block; font-family: var(--ui); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-top: 0.2rem; }
.ritem__p { font-family: var(--ui); font-variant-numeric: tabular-nums; font-size: 0.86rem; font-weight: 600; white-space: nowrap; }
.receipt__sum { margin-top: 0.5rem; }
.rrow { display: flex; justify-content: space-between; align-items: baseline; padding: 0.42rem 0; font-family: var(--ui); font-size: 0.9rem; letter-spacing: 0.02em; color: var(--fg-2); }
.rrow span:last-child { font-variant-numeric: tabular-nums; color: var(--fg-1); }
.receipt__ship { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--line); font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.02em; color: var(--fg-3); line-height: 1.55; }
.receipt__ship b { color: var(--fg-2); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.64rem; }
.receipt-compact details { margin-top: 0.9rem; border-top: 1px solid var(--line); padding-top: 0.75rem; }
.receipt-compact summary { cursor: pointer; color: var(--fg-3); font-family: var(--ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.receipt-compact pre { margin-top: 0.8rem; border: 1px solid var(--line); background: var(--cream-soft); padding: 0.8rem; white-space: pre-wrap; font-family: var(--ui); font-size: 0.72rem; line-height: 1.55; }
.receipt-compact details .btn { margin-top: 0.7rem; }

/* ===================================================== PHARMACIST / FOUNDER */
.pharm-founder-hero { padding-block: clamp(2rem, 4vw, 3.4rem) clamp(3.2rem, 7vw, 7rem); border-bottom: 1px solid var(--line); }
.pharm-founder { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(22rem, 0.86fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; margin-top: clamp(2rem, 5vw, 4.8rem); }
.pharm-founder__copy { min-width: 0; }
.pharm-founder__copy .kicker { max-width: 38rem; }
.pharm-founder__title { max-width: 10ch; margin-top: 1.1rem; font-family: var(--serif); font-size: clamp(3rem, 7vw, 6.6rem); font-weight: 500; line-height: 0.92; letter-spacing: -0.028em; }
.pharm-founder__lead { max-width: 52ch; margin-top: 1.45rem; }
.pharm-founder__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.pharm-founder__media { min-width: 0; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-deep); }
.pharm-founder__media img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; display: block; }
.pharm-founder__media figcaption, .pharm-evidence__media figcaption { position: absolute; z-index: 3; left: clamp(0.9rem, 2vw, 1.4rem); bottom: clamp(0.9rem, 2vw, 1.4rem); padding: 0.45rem 0.7rem; background: rgba(246,243,237,0.9); color: var(--ink); font-family: var(--ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.pharm-origin__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.82fr); gap: clamp(2rem, 7vw, 8rem); align-items: center; }
.pharm-origin__copy h2, .pharm-process__head h2, .pharm-evidence__copy h2 { max-width: 15ch; margin-top: 0.8rem; font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.022em; }
.pharm-origin__copy h2 + .lead { margin-top: clamp(1.25rem, 1.8vw, 1.6rem); }
.pharm-origin__copy p:not(.lead) { max-width: 58ch; margin-top: 1.05rem; color: var(--fg-2); }
.pharm-facts { min-width: 0; padding: clamp(1.2rem, 2.5vw, 1.7rem); background: var(--cream); }
.pharm-facts__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.pharm-facts__head .data { font-family: var(--ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.pharm-facts__mark { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line-strong); font-family: var(--serif); font-size: 1.1rem; }
.pharm-facts__row { padding: 1rem 0; border-bottom: 1px solid var(--line-soft); }
.pharm-facts__row:last-child { border-bottom: 0; padding-bottom: 0; }
.pharm-facts__row b { display: block; font-family: var(--serif); font-size: 1.32rem; font-weight: 400; line-height: 1.08; }
.pharm-facts__row span { display: block; margin-top: 0.35rem; color: var(--fg-2); font-size: var(--t-support); line-height: 1.45; }
.pharm-proof-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.pharm-proof-strip > div { min-width: 0; padding: clamp(1.3rem, 2.5vw, 2rem) clamp(1rem, 3vw, 2.2rem); border-left: 1px solid var(--line); }
.pharm-proof-strip > div:first-child { border-left: 0; padding-left: 0; }
.pharm-proof-strip .data { display: block; font-family: var(--ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.pharm-proof-strip strong { display: block; margin-top: 0.38rem; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 400; line-height: 1; }
.pharm-proof-strip p { margin-top: 0.45rem; color: var(--fg-2); font-size: var(--t-support); }
.pharm-process__head { max-width: 54rem; }
.pharm-process__head .lead { max-width: 62ch; margin-top: 1.35rem; }
.pharm-process__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line-strong); }
.pharm-step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.55rem 0 1.8rem; border-bottom: 1px solid var(--line); }
.pharm-step__no { font-family: var(--ui); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: var(--fg-3); }
.pharm-step h3 { font-family: var(--serif); font-size: clamp(1.35rem, 2.3vw, 1.85rem); font-weight: 400; line-height: 1.05; }
.pharm-step h3 + p { margin-top: 0.75rem; }
.pharm-step p { margin-top: 0.55rem; color: var(--fg-2); font-size: var(--t-body); line-height: 1.5; }
.pharm-evidence-section { background: var(--cream-deep); }
.pharm-evidence { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.82fr); gap: clamp(2rem, 7vw, 8rem); align-items: center; }
.pharm-evidence__media { min-width: 0; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cream-warm); }
.pharm-evidence__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pharm-evidence__copy .lead { max-width: 48ch; margin-top: 1.25rem; }
.pharm-evidence__copy p:not(.lead) { max-width: 48ch; margin-top: 1rem; color: var(--fg-2); }
.pharm-evidence__copy .linku { margin-top: 1.6rem; }
.pharm-note { border-top: 1px solid var(--line); }
.pharm-note__quote { max-width: 22ch; margin: 1.2rem auto 0; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.018em; }
.pharm-note__byline { margin-top: 1.35rem; font-family: var(--ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.pharm-note__byline span { color: var(--fg-3); font-size: 0.62rem; }
.pharm-close { border-top: 1px solid rgba(246,243,237,0.16); }
.pharm-close .kicker { color: rgba(246,243,237,0.64); }
.pharm-close__big { margin-top: 0; font-family: var(--serif); font-size: clamp(2.7rem, 6vw, 5.6rem); font-weight: 400; line-height: 0.96; letter-spacing: -0.025em; }
.pharm-close__big em { font-style: italic; }
.pharm-close__sub { max-width: 42ch; margin: 1.35rem auto 0; color: rgba(246,243,237,0.72); }
.pharm-close__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.pharm-close .btn--fill { --bg: var(--cream); --fg: var(--ink); --bd: var(--cream); }
.pharm-close .btn--fill:hover { --bg: var(--white); --bd: var(--white); }
.pharm-close .btn--ghost { --fg: var(--cream); --bd: rgba(246,243,237,0.48); }
.pharm-close .btn--ghost:hover { --bg: var(--cream); --fg: var(--ink); --bd: var(--cream); }

@media (max-width: 760px) {
  .pharm-founder { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.3rem; }
  .pharm-founder__title { max-width: 12ch; font-size: clamp(3rem, 15vw, 5rem); }
  .pharm-founder__media { order: -1; aspect-ratio: 4 / 4.7; }
  .pharm-founder__cta, .pharm-close__cta { align-items: stretch; flex-direction: column; }
  .pharm-founder__cta .btn, .pharm-close__cta .btn { width: 100%; }
  .pharm-origin__grid, .pharm-evidence { grid-template-columns: 1fr; gap: 2.4rem; }
  .pharm-origin__copy h2, .pharm-process__head h2, .pharm-evidence__copy h2 { max-width: 13ch; }
  .pharm-proof-strip { grid-template-columns: 1fr; }
  .pharm-proof-strip > div, .pharm-proof-strip > div:first-child { padding: 1.25rem 0; border-left: 0; }
  .pharm-proof-strip > div + div { border-top: 1px solid var(--line); }
  .pharm-process__steps { grid-template-columns: 1fr; }
  .pharm-step { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .pharm-evidence__media { order: -1; aspect-ratio: 4 / 3; }
  .pharm-note__quote { max-width: 15ch; }
}

@media (prefers-reduced-motion: reduce) {
  .pharm-founder .reveal, .pharm-origin .reveal, .pharm-process .reveal, .pharm-evidence .reveal, .pharm-note .reveal, .pharm-close .reveal { animation: none; transition: none; }
}

@media (max-width: 820px) {
  .payment-actions { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .is-payment-screen main > .section--tight { padding-top: 0.8rem; }
  .payment-rail { padding: 0.5rem 0; }
  .payment-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(0.35rem, 1.5vw, 0.65rem); }
  .payment-rail li { gap: 0.28rem; font-size: 0.55rem; letter-spacing: 0.05em; line-height: 1.2; }
  .payment-rail li > span:last-child { min-width: 0; }
  .payment-rail__dot { width: 1.35rem; height: 1.35rem; font-size: 0.52rem; }
  .payment-rail__dot { flex-basis: 1.35rem; }
  .payment-screen__header { padding: 0.55rem 0 0.45rem; }
  .payment-screen__title { margin-top: 0.55rem; font-size: clamp(2.5rem, 13vw, 3.35rem); }
  .payment-screen__header p { margin-top: 0.4rem; font-size: 0.9rem; line-height: 1.22; }
  .payment-scent-trail { display: none; }
  .payment-scent-trail__labels { gap: 0.45rem; font-size: 0.49rem; letter-spacing: 0.06em; }
  .payment-scent-trail__track { height: 8px; }
  .proof-success-hero { padding: 1rem; }
  .proof-success-hero h1 { font-size: clamp(2.1rem, 11vw, 3rem); }
  .success-sticker { min-width: 2.8rem; min-height: 2.8rem; font-size: 0.62rem; }
  .elaine-slip { padding: 0.9rem; }
  .elaine-slip > span { padding: 0.15rem 0.2rem 0.5rem; font-size: 0.55rem; }
  .elaine-note-copy { margin-top: 0.65rem; font-size: 0.9rem; line-height: 1.5; }
  .elaine-signature { margin-top: 0.75rem; }
  .elaine-signature img { width: min(58%, 180px); }
  .payment-reserve { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0.55rem; padding: 0.55rem; }
  .payment-reserve img { width: 44px; height: 44px; }
  .payment-reserve span { font-size: 0.94rem; line-height: 1.05; }
  .payment-reserve b { margin-top: 0.16rem; font-size: 0.54rem; }
  .payment-reserve strong { grid-column: auto; justify-self: end; font-size: 1rem; }
  .payment-panel { padding: 0.6rem; }
  .payment-panel__step { font-size: 0.76rem; padding-bottom: 0.45rem; margin-bottom: 0.55rem; }
  .payment-summary-header { font-size: 1.9rem; margin-bottom: 0.25rem; }
  .payment-panel > p { margin-top: 0.28rem; font-size: 0.95rem; line-height: 1.3; }
  .payment-qr { margin-top: 0.5rem; padding: 0.55rem; }
  .payment-qr__crop { width: min(100%, 160px); }
  .payment-qr__top { width: min(100%, 200px); align-items: baseline; flex-direction: row; gap: 0.45rem; padding-bottom: 0.4rem; margin-bottom: 0.45rem; }
  .payment-qr__top span { font-size: 0.54rem; }
  .payment-qr__top b { font-size: 1.1rem; }
  .payment-qr figcaption { margin-top: 0.28rem; font-size: 0.48rem; letter-spacing: 0.07em; }
  #qrDownload { margin-top: 0.4rem !important; min-height: 38px; }
  #btnNext { margin-top: 0.55rem !important; min-height: 46px; }
  .proof-picker__actions { flex-direction: column; }
  .receipt-compact__meta { grid-template-columns: 1fr; gap: 0.7rem; }
  .receipt-compact__head { align-items: flex-start; }
}

/* A 320px CSS viewport is commonly produced by a 640px phone at 2x DPR.
   Keep the payment task itself in the first view on these short phones. */
@media (max-width: 560px) and (max-height: 720px) {
  .is-payment-screen main > .section--tight { padding-top: 0.35rem; }
  .payment-rail { padding: 0.28rem 0; }
  .payment-rail li { gap: 0.18rem; font-size: 0.48rem; letter-spacing: 0.035em; }
  .payment-rail__dot { width: 1.15rem; height: 1.15rem; font-size: 0.46rem; }
  .payment-rail__dot { flex-basis: 1.15rem; }
  .payment-screen__header { padding: 0.28rem 0 0.2rem; }
  .payment-screen__header .kicker { font-size: 0.46rem; }
  .payment-screen__title { margin-top: 0.22rem; font-size: clamp(2rem, 11vw, 2.45rem); }
  .payment-screen__header p { display: none; }
  .proof-success-hero { margin-top: 0.45rem; padding: 0.75rem; }
  .success-sticker { width: 2.25rem; min-width: 2.25rem; min-height: 2.25rem; margin-bottom: 0.35rem; font-size: 0.52rem; }
  .proof-success-hero h1 { max-width: 15ch; margin-top: 0.35rem; font-size: clamp(1.85rem, 10vw, 2.4rem); }
  .proof-success-hero__lede { display: none; }
  .elaine-slip { margin-top: 0.7rem; padding: 0.75rem; }
  .elaine-note-copy { margin-top: 0.55rem; font-size: 0.82rem; line-height: 1.42; }
  .payment-reserve { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 0.35rem; padding: 0.35rem; }
  .payment-reserve img { width: 32px; height: 32px; }
  .payment-reserve span { font-size: 0.75rem; line-height: 1; }
  .payment-reserve b { margin-top: 0.1rem; font-size: 0.45rem; }
  .payment-reserve strong { font-size: 0.82rem; }
  .payment-panel { padding: 0.35rem; }
  .payment-panel__step { font-size: 0.58rem; padding-bottom: 0.25rem; margin-bottom: 0.3rem; }
  .payment-summary-header { font-size: 1.45rem; margin-bottom: 0; }
  .payment-panel > p { display: none; }
  .payment-qr { margin-top: 0.25rem; padding: 0.25rem; }
  .payment-qr__top { width: 100%; gap: 0.3rem; padding-bottom: 0.2rem; margin-bottom: 0.2rem; }
  .payment-qr__top span { font-size: 0.43rem; }
  .payment-qr__top b { font-size: 0.8rem; }
  .payment-qr__crop { width: min(100%, 120px); }
  .payment-qr figcaption { margin-top: 0.18rem; font-size: 0.38rem; letter-spacing: 0.045em; }
  #qrDownload { margin-top: 0.25rem !important; min-height: 32px; font-size: 0.52rem; }
  #btnNext { margin-top: 0.35rem !important; min-height: 38px; font-size: 0.52rem; }
}

@media (min-width: 561px) {
  .is-payment-screen main > .section--tight { padding-top: 1rem; }
  .payment-screen__header { padding-top: 1rem; padding-bottom: 0.8rem; }
  .payment-screen__header p { display: none; }
  .payment-screen__title { margin-top: 0.65rem; font-size: clamp(3.3rem, 5vw, 4rem); }
  .payment-scent-trail { display: none; }
  .payment-reserve { padding: 0.65rem; }
  .payment-reserve img { width: 50px; height: 50px; }
  .payment-panel { padding: 1.15rem; }
  .payment-panel__step { padding-bottom: 0.65rem; margin-bottom: 0.95rem; }
  .payment-summary-header { margin-bottom: 0.45rem; }
  .payment-panel > p { margin-top: 0.45rem; line-height: 1.35; }
  .payment-qr { margin-top: 0.75rem; padding: 0.75rem; }
  .payment-qr__crop { width: 200px; }
  .payment-qr__top { padding-bottom: 0.55rem; margin-bottom: 0.7rem; }
  .payment-qr figcaption { margin-top: 0.35rem; }
  #qrDownload { margin-top: 0.6rem !important; min-height: 44px; }
  #btnNext { margin-top: 0.8rem !important; min-height: 50px; }
}

@media (min-width: 861px) and (max-height: 800px) {
  .is-payment-screen main > .section--tight { padding-top: 0.55rem; }
  .payment-rail { padding: 0.42rem 0; }
  .payment-rail li { gap: 0.22rem; font-size: 0.6rem; }
  .payment-rail__dot { width: 1.38rem; height: 1.38rem; font-size: 0.54rem; }
  .payment-screen__header { padding-top: 0.5rem; padding-bottom: 0.35rem; }
  .payment-screen__title { margin-top: 0.4rem; font-size: clamp(2.6rem, 4vw, 3.1rem); }
  .payment-reserve { gap: 0.6rem; padding: 0.5rem; }
  .payment-reserve img { width: 44px; height: 44px; }
  .payment-reserve span { font-size: 0.95rem; }
  .payment-reserve b { margin-top: 0.12rem; }
  .payment-reserve strong { font-size: 1.05rem; }
  .payment-panel { padding: 0.65rem; }
  .payment-panel__step { font-size: 0.74rem; padding-bottom: 0.45rem; margin-bottom: 0.55rem; }
  .payment-summary-header { font-size: 2rem; margin-bottom: 0.2rem; }
  .payment-panel > p { margin-top: 0.25rem; font-size: 0.92rem; line-height: 1.25; }
  .payment-qr { margin-top: 0.45rem; padding: 0.5rem; }
  .payment-qr__top { width: min(100%, 190px); gap: 0.4rem; padding-bottom: 0.35rem; margin-bottom: 0.4rem; }
  .payment-qr__top span { font-size: 0.5rem; }
  .payment-qr__top b { font-size: 1rem; }
  .payment-qr__crop { width: 145px; }
  .payment-qr figcaption { margin-top: 0.25rem; font-size: 0.46rem; letter-spacing: 0.06em; }
  #qrDownload { margin-top: 0.4rem !important; min-height: 40px; }
  #btnNext { margin-top: 0.5rem !important; min-height: 46px; }
}

/* Short tablet landscape and short desktop windows need a tighter task card,
   while normal-height desktop keeps the larger editorial treatment. */
@media (min-width: 561px) and (max-height: 720px) {
  .is-payment-screen main > .section--tight { padding-top: 0.35rem; }
  .payment-rail { padding: 0.3rem 0; }
  .payment-rail li { gap: 0.18rem; font-size: 0.55rem; }
  .payment-rail__dot { width: 1.25rem; height: 1.25rem; font-size: 0.5rem; }
  .payment-screen__header { padding-top: 0.3rem; padding-bottom: 0.25rem; }
  .payment-screen__title { margin-top: 0.25rem; font-size: clamp(2.5rem, 4vw, 3.1rem); }
  .proof-success-hero { margin-top: 0.55rem; padding: 0.9rem; }
  .success-sticker { width: 2.5rem; min-width: 2.5rem; min-height: 2.5rem; margin-bottom: 0.45rem; }
  .proof-success-hero h1 { max-width: 17ch; margin-top: 0.4rem; font-size: clamp(2rem, 3.5vw, 2.7rem); }
  .proof-success-hero__lede { margin-top: 0.45rem; font-size: 0.9rem; }
  .elaine-slip { margin-top: 0.75rem; padding: 0.9rem; }
  .payment-reserve { padding: 0.45rem; }
  .payment-reserve img { width: 40px; height: 40px; }
  .payment-panel { padding: 0.45rem; }
  .payment-panel__step { padding-bottom: 0.3rem; margin-bottom: 0.35rem; }
  .payment-summary-header { font-size: 1.8rem; margin-bottom: 0.1rem; }
  .payment-panel > p { display: none; }
  .payment-qr { margin-top: 0.3rem; padding: 0.35rem; }
  .payment-qr__top { padding-bottom: 0.25rem; margin-bottom: 0.25rem; }
  .payment-qr__crop { width: 120px; }
  .payment-qr figcaption { margin-top: 0.2rem; font-size: 0.43rem; }
  #qrDownload { margin-top: 0.3rem !important; min-height: 38px; }
  #btnNext { margin-top: 0.4rem !important; min-height: 42px; }
}

/* ============================================================ JESUS LETTER */
/* The letter sits on the brand's double-keyline panel (same device as the
   scent-finder card) so it reads as a letter laid on the page, not floating
   text. Primary prose uses the universal lead role — this is the most
   reading-focused page on the site. Panel dissolves on phones. */
.letter-panel { position: relative; max-width: 54rem; margin-inline: auto; border: 1px solid var(--line); background: var(--cream-soft); padding: clamp(1.9rem, 6vw, 4.75rem) clamp(1.25rem, 5vw, 4.25rem); }
.letter-panel::after { content: ""; position: absolute; inset: clamp(7px, 1vw, 12px); border: 1px solid var(--line); pointer-events: none; }
.letter { position: relative; max-width: 60ch; margin-inline: auto; }
.letter p { margin-top: 1.15em; font-size: var(--t-lead); line-height: 1.72; color: var(--fg-1); }
.letter p.letter__salute { margin-top: 0; color: var(--ink); font-family: var(--serif); font-style: italic; font-size: clamp(1.65rem, 2.8vw, 2.15rem); line-height: 1.2; }
.letter h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.14; letter-spacing: -0.01em; margin-top: 2.7em; color: var(--ink); }
.letter h2 + p { margin-top: 1em; }
.letter b { font-weight: 600; color: var(--ink); }
.letter ul { margin-top: 1.15em; padding-left: 1.15em; display: grid; gap: 0.7em; list-style: disc; }
.letter ul li { font-size: var(--t-lead); line-height: 1.68; color: var(--fg-1); }
.letter .linku { font-size: 0.72rem; }
.letter__prayer { border: 1px solid var(--line-strong); background: var(--cream); padding: clamp(1.3rem, 2.6vw, 1.8rem) clamp(1.4rem, 3vw, 2rem); margin-top: 1.4em; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.72; color: var(--ink); }
.letter__sig { margin-top: 3rem; }
.letter__sig p { margin-top: 0; }
.letter__script { font-family: var(--script); font-size: clamp(2.6rem, 4.5vw, 3.4rem); line-height: 1.1; display: block; margin-top: 0.55rem; color: var(--ink); }
.letter__role { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-top: 0.7rem !important; }
@media (max-width: 560px) {
  .letter-panel { border: 0; background: transparent; padding: 0; }
  .letter-panel::after { display: none; }
}

.evidence { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 1.9rem; }
.evidence + .evidence { border-top: 0; margin-top: 0; }
.evidence summary { position: relative; cursor: pointer; list-style: none; padding: 1.05rem 2.2rem 1.05rem 0; font-family: var(--ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-2); transition: color var(--d2) var(--ease); }
.evidence summary:hover { color: var(--ink); }
.evidence summary::-webkit-details-marker { display: none; }
.evidence summary::after { content: "+"; position: absolute; top: 50%; right: 0; translate: 0 -50%; font-family: var(--ui); font-size: 1rem; font-weight: 400; }
.evidence[open] summary::after { content: "−"; }
.evidence__body { padding-bottom: 1.35rem; }
.evidence__body p { margin-top: 0; font-size: var(--t-body); line-height: 1.65; color: var(--fg-2); max-width: 58ch; }
.evidence__body p + p { margin-top: 0.8em; }

.respond { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; max-width: 40rem; margin: 1.9rem auto 0; }
.respond .btn { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 560px) { .respond { grid-template-columns: 1fr; } }

.sources h3 { font-family: var(--ui); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-top: 2.1rem; }
.sources ul { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.sources li { font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); }
.sources .linku { font-size: 0.72rem; }