/* Beauty Reserve — app.css (M2 port of the approved prototype, 2026-08-16) */

/* Owner device report 2026-09-14: the wordmark rendered larger on a OnePlus 10R
   than on a Pixel — Android font boosting / iOS text inflation. Pin both. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---------- layout shell ---------- */
.br-shell{min-height:100vh;display:flex;flex-direction:column}
main.br-main{flex:1;display:flex;flex-direction:column;width:100%;box-sizing:border-box}
.br-container{max-width:var(--page-max);margin:0 auto;padding-left:var(--page-gutter);padding-right:var(--page-gutter);width:100%;box-sizing:border-box}

/* ---------- header ---------- */
.br-header{background:var(--surface-page);border-bottom:1px solid var(--border-default);position:sticky;top:0;z-index:50;box-shadow:0 0 6px #6C6C6C40}
.br-header__bar{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter);display:flex;align-items:center;justify-content:space-between;height:80px;position:relative}
/* Static SVG wordmark (owner checklist item 3, 2026-09-17): the Marcellus
   wordmark lives in assets/wordmark-en|fr.svg as paths — no per-letter JS,
   no webfont dependency, always present. Sizing mirrors the old 26px/23px TEXT:
   Marcellus glyphs are 0.742em tall (SVG viewBox 1519 units / upem 2048), so
   26px text = a 19.3px glyph box. Sizing the SVG at 26px would render the
   wordmark ~35% larger than the text it replaced (owner revert, 2026-09-19). */
.br-wm{line-height:0;user-select:none}
.br-wm a{display:block;color:var(--text-body);text-decoration:none}
.br-wm__svg{height:23.2px;width:auto;display:block} /* owner 2026-09-20: header logo +20% */
/* FR box is accent-topped ("La Réserve de Beauté", viewBox 1942 units vs EN 1519):
   same cap height needs a taller box — 24.7px = the old 26px text, 21.8px = 23px. */
.br-wm--fr .br-wm__svg{height:29.6px}
/* burger + mobile cart + mobile menu (mobile only) */
.br-burger{display:none;width:44px;height:44px;margin-left:calc(var(--page-gutter) * -1);border:none;background:none;cursor:pointer;padding:0 14px;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px}
.br-burger span{display:block;width:18px;height:1px;background:var(--br-black);transition:transform var(--dur-fast) var(--ease-brand),opacity var(--dur-fast) var(--ease-brand)}
.br-burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.br-burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.br-header__cart-m{display:none;color:var(--text-body);text-decoration:none;white-space:nowrap;margin-right:0}
.br-header__cart-m svg{display:block;width:19px;height:19px}
.br-cart-n{font-size:9px;line-height:1;color:var(--br-red);font-weight:600}
.br-mmenu{display:none}
.br-header__nav{display:flex;gap:28px;font-size:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase;position:absolute;left:50%;transform:translateX(-50%)}
.br-header__nav a,.br-header__actions a{color:var(--text-body);text-decoration:none}
.br-header__actions{display:flex;gap:24px;align-items:center;font-size:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase}

/* ---------- footer ---------- */
.br-footer{background:var(--surface-inverse);color:var(--text-inverse);flex:none}
.br-footer__inner{max-width:var(--page-max);margin:0 auto;padding:64px var(--page-gutter) 32px;display:flex;flex-direction:column;align-items:stretch}
.br-footer__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--br-offwhite);opacity:.55;margin:0 0 16px}
.br-footer__wm{display:none}
.br-footer__row2{display:contents}
.br-footer__copy--d{display:none}
.br-footer__legal .br-lang{display:none}
.br-footer__news{max-width:420px}
.br-footer__news .br-footer__label{color:var(--br-red);opacity:1;font-size:14px}
.br-footer__news-copy{font-size:16px;line-height:1.7;color:var(--br-offwhite);opacity:.75;margin:0 0 18px}
.br-footer__form{display:flex;align-items:center;border-bottom:1px solid var(--br-hairline-dark);max-width:360px}
.br-footer__form input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--br-white);font-family:inherit;font-size:14px;padding:10px 0}
.br-footer__form input::placeholder{color:var(--br-offwhite);opacity:.45}
.br-footer__form button{background:none;border:0;cursor:pointer;color:var(--br-red);font-size:18px;line-height:1;padding:10px 0 10px 14px;transition:opacity var(--dur-fast) var(--ease-brand)}
.br-footer__form button:hover{opacity:.65}
.br-footer__msg{font-size:11px;letter-spacing:.06em;color:var(--br-offwhite);opacity:.7;margin:10px 0 0}
.br-footer__rule{border:0;border-top:1px solid var(--br-hairline-dark);margin:36px 0 0;width:100%}
.br-footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:32px 20px;margin-top:32px}
.br-footer__col a{display:block;color:var(--br-offwhite);opacity:.8;text-decoration:none;font-size:13px;letter-spacing:.02em;padding:0 0 8px;transition:color var(--dur-fast) var(--ease-brand),opacity var(--dur-fast) var(--ease-brand)}
.br-footer__col a:hover{color:var(--br-white);opacity:1}
.br-footer__bottom{display:flex;flex-direction:column;margin-top:32px}
/* EN/FR moved into the copyright line, next to Privacy Policy (owner, 2026-09-07):
   its old spot here overlapped the fixed cookie-settings reopen tab at the
   viewport's bottom-left corner (.br-consent__reopen). .br-pay is now the only
   child, so flex-end keeps it right-aligned as before. */
.br-footer__meta{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap}
.br-footer__copy{font-size:8px;letter-spacing:.18em;text-transform:uppercase;opacity:.5;line-height:1;margin:28px 0 0}
.br-footer__copy a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color var(--dur-fast) var(--ease-brand)}
.br-footer__copy a:hover{border-bottom-color:currentColor}
.br-pay{display:inline-flex;gap:8px;align-items:center;justify-content:center;margin-top:0}
.br-pay img{height:16px;width:36px;object-fit:contain;display:block;background:var(--br-white);padding:3px 6px;box-sizing:content-box}
.br-footer .br-lang{font-size:9px}
.br-footer .br-lang a{color:var(--br-offwhite);opacity:.45;text-decoration:none}
.br-footer .br-lang a.is-active{color:var(--br-white);opacity:1;padding-bottom:2px;border-bottom:1px solid var(--br-red)}

/* footer: desktop = the signed-off prototype layout (slim: wordmark row, copy+links row, chips rail).
   The Bottega/Everist rebuild stays mobile-only. */
@media (min-width:769px){
	.br-footer__news{display:none}
	.br-footer__rule{display:none}
	.br-footer__copy--m{display:none}
	.br-footer__inner{padding:28px var(--page-gutter) 16px;gap:8px} /* item 11 (owner checklist 2026-09-17): content sat pinned to the top edge on desktop — real padding above the footer text */
	.br-footer__row2{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px 18px;width:100%}
	.br-footer__legal{display:flex;flex-direction:column;gap:4px}
	.br-footer__copy--d{display:block;margin:0}
	.br-footer__legal .br-lang{display:inline-flex}
	.br-footer__cols{display:flex;grid-template-columns:none;margin-top:0;gap:18px;flex-wrap:wrap;align-items:center}
	.br-footer__col{display:contents}
	.br-footer__label{display:none}
	.br-footer__col a{display:inline-block;position:relative;padding:0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-inverse);text-decoration:none;transition:color var(--dur-fast) var(--ease-brand)}
	.br-footer__col a:hover{color:var(--br-red)!important}
	.br-footer__col a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;opacity:0;transition:opacity var(--dur-fast) var(--ease-brand)}
	.br-footer__col a:hover::after{opacity:1}
	.br-footer__bottom{flex-direction:row;justify-content:center;align-items:center;margin-top:0;padding-top:2px}
	.br-footer__meta{display:flex;align-items:center;justify-content:flex-end;gap:24px;width:100%}
}

.br-pay span{font-size:8px;letter-spacing:.12em;opacity:.75;text-transform:uppercase;color:var(--text-inverse)}

/* ---------- motion (system-compliant: fades only, 150/300ms) ---------- */
@keyframes brFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes brFade{from{opacity:0}to{opacity:1}}
@keyframes brFadeScale{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.br-main,.br-screen{animation:brFadeUp var(--dur-med) var(--ease-brand) both}
.br-anim{animation:brFadeUp var(--dur-med) var(--ease-brand) both}
.br-anim-2{animation-delay:60ms}.br-anim-3{animation-delay:120ms}.br-anim-4{animation-delay:180ms}
.br-reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur-med) var(--ease-brand),transform var(--dur-med) var(--ease-brand)}
.br-reveal.br-in{opacity:1;transform:none}
/* micro-interactions */
.br-header__nav a,.br-header__actions a{display:inline-block;position:relative;transition:color var(--dur-fast) var(--ease-brand)}
.br-header__nav a:hover,.br-header__actions a:hover{color:var(--br-red)!important}
.br-header__nav a::after,.br-header__actions a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;opacity:0;transition:opacity var(--dur-fast) var(--ease-brand)}
.br-header__nav a:hover::after,.br-header__actions a:hover::after{opacity:1}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--br-red)!important}
input,textarea,select{transition:border-color var(--dur-fast) var(--ease-brand)}
button:active,a.br-tile__cart:active{opacity:.88} /* anchor CTA gets the same pressed feedback as buttons (tap acknowledgment, 2026-09-15) */

/* ---------- buttons ---------- */
.br-btn{font-family:var(--font-sans);font-size:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase;font-weight:500;padding:14px 32px;border:1px solid var(--border-strong);background:var(--br-black);color:var(--br-offwhite);cursor:pointer;transition:background var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand);display:inline-block;text-decoration:none;text-align:center;box-sizing:border-box}
.br-btn--accent{background:var(--br-red);border-color:var(--br-red);color:#fff}
/* Hover only on real pointer devices — on touch, :hover sticks after a tap and the
   CTA stayed deep-red after navigating back (owner, 2026-09-13). */
@media (hover:hover){
	.br-btn:hover{background:var(--br-offwhite);color:var(--br-black)}
	.br-btn--accent:hover{background:var(--br-red-deep);border-color:var(--br-red-deep);color:#fff}
}
.br-btn--sm{padding:10px 20px}
.br-btn--lg{padding:18px 40px}
.br-btn--block{display:block;width:100%}
.br-btn[disabled]{opacity:.4;cursor:default}

/* ---------- badge ---------- */
.br-badge{display:inline-flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border:1px solid currentColor}
.br-badge--live{color:var(--br-red)}
.br-badge--muted{color:var(--br-ink-3)}

/* ---------- home ---------- */
.br-hero{background:var(--surface-inverse);color:var(--text-inverse);flex:1;display:flex;position:relative;overflow:hidden;min-height:70vh;min-height:70svh} /* 70%-of-viewport floor on every device (owner liked the tall OnePlus hero, 2026-09-16); flex:1 still grows it further */
.br-hero__media{position:absolute;inset:0;background-size:cover;background-position:center}
.br-hero__media::after{content:'';position:absolute;inset:0;background:rgba(8,8,8,.28)}
/* Desktop hero overlay darkened ~17pts (owner checklist item 5, 2026-09-17):
   the busy banner video washed out the headline; mobile keeps the original grade. */
@media (min-width:769px){.br-hero__media::after{background:rgba(8,8,8,.45)}}
.br-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s var(--ease-brand)}
.br-hero__video.is-on{opacity:1}
.br-hero__inner{max-width:var(--page-max);margin:0 auto;padding:112px var(--page-gutter) 96px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;box-sizing:border-box;position:relative;z-index:1}
.br-hero__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.br-hero__title{margin:0;font-size:clamp(36px,6vw,72px);text-transform:uppercase;letter-spacing:.06em;font-weight:400;line-height:1.32;user-select:none}
@media (max-width:599px){ /* fit "Curated products" on one line at any phone width: the 2-line break holds everywhere (360px OnePluses wrapped it to 3 lines; owner wants the Pixel look on all devices, 2026-09-16). 11.4 = measured phrase width per 1px font-size. */ .br-hero__title{font-size:min(36px,calc((100vw - 2*var(--page-gutter))/11.4))} }
.br-hero__date{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--br-hairline)}
.br-count{display:inline-flex;align-items:baseline;gap:14px}
.br-count__label{font-size:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(246,243,236,.6)}
.br-count__time{font-size:var(--type-h2);letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--br-red);font-weight:500}
.br-count--light .br-count__label{color:var(--text-faint)}
.br-note{max-width:var(--page-max);margin:0 auto;padding:26px var(--page-gutter) 32px;flex:none}
/* ---------- HOW IT WORKS (owner checklist item 4, 2026-09-17; blocks restyle
   owner 2026-09-19: "How it works" promoted to a real section header, the three
   tile texts sit on uniformly sized surface-card blocks (equal grid cells, equal
   heights), CTA below, less white space. Desktop keeps the one-screen scroll-2
   fit from the same day. ---------- */
.br-how{background:var(--surface-inverse);flex:none;border-bottom:1px solid var(--br-hairline-dark)} /* dark band + white title + header-colour boxes = the unified design (owner 2026-09-19: "same as the PDP" on Home + The Reserve too) */
.br-how__inner{max-width:var(--page-max);margin:0 auto;padding:44px var(--page-gutter) 48px;display:flex;flex-direction:column;align-items:center;gap:26px}
.br-how .br-how__title{margin:0;font-size:20px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--text-inverse);opacity:1} /* .br-how-scoped: must out-rank `.br-pdp-seo h2` on the PDP — including its opacity:.55 */
.br-how__grid{display:grid;grid-template-columns:1fr;gap:14px;width:100%;max-width:420px}
.br-how__tile{background:var(--surface-page);border:1px solid var(--border-default);padding:24px 20px;display:flex;flex-direction:column;gap:8px;text-align:center;align-items:center;justify-content:center;box-sizing:border-box} /* boxes in the header surface, dark type */
.br-how__tile-t{margin:0;font-size:12px;letter-spacing:var(--track-label);text-transform:uppercase;font-weight:600;color:var(--text-body)}
.br-how__tile-p{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted)}
.br-how__cta{margin-top:2px}
@media (max-width:768px){
	.br-how__inner{padding:36px var(--page-gutter) 40px;gap:22px}
}
/* Owner (2026-09-19, desktop): scroll 1 = the hero video alone, scroll 2 = How
   it works alone — exactly one CTA box per screen. The hero fills the viewport
   minus the sticky header (app.js measures it into --br-header-h); How it works
   fills the next screen, content centered. Desktop-gated: phones keep the §78
   70vh floor and the CTA-centering law below is the mobile one mirrored. */
@media (min-width:769px){
	.br-hero{min-height:calc(100vh - var(--br-header-h,80px));min-height:calc(100svh - var(--br-header-h,80px))}
	.br-hero__inner .br-anim-4{margin-top:auto;margin-bottom:auto;padding:24px 0}
	.home .br-how__inner{min-height:calc(100vh - var(--br-header-h,80px));min-height:calc(100svh - var(--br-header-h,80px));justify-content:center;box-sizing:border-box} /* homepage scroll-2 fit (owner 2026-09-19) — home-scoped so The Reserve/PDP render the section at content height */
	.br-how .br-how__title{font-size:32px;letter-spacing:.06em}
	.br-how__grid{grid-template-columns:repeat(3,1fr);gap:24px;max-width:1280px}
	.br-how__tile{padding:40px 32px;min-height:280px}
	.br-how__tile-t{font-size:13px}
/* The Reserve: the how section sits between the product tiles (row 2) and
   the footer band (owner 2026-09-19) — a full-width grid row of its own. */
.br-cat .br-how{grid-column:1/-1;grid-row:3}
.br-cat .br-how__inner{padding:56px var(--page-gutter)}
}
.br-note p{max-width:39ch;margin:0 auto 8px;text-align:center;font-size:16px;line-height:1.6;color:var(--text-muted)}
.br-note__flag{max-width:39ch;margin:0 auto;text-align:center;font-size:16px;line-height:1.6;color:var(--br-red)}
.br-closed{background:var(--surface-inverse);color:var(--text-inverse);flex:1}
.br-closed__inner{max-width:var(--page-max);margin:0 auto;padding:160px var(--page-gutter);text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.br-closed__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.br-closed__title{margin:0;font-size:clamp(36px,5vw,64px);text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.br-closed__date{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--br-hairline)}

/* ---------- The Reserve (catalog) — black editorial ---------- */
/* Inner scroll removed (owner, 2026-09-12): the catalog flows in the normal page
   scroll — no nested scroll box, no scroll-snap, and no forced screen-tall
   sections. Each section sizes to its content, so the page is compact and only
   scrolls if the content itself exceeds the viewport (as any normal page does). */
.br-cat{background:var(--surface-inverse);color:var(--text-inverse)}
.br-cat-sec{padding:clamp(20px,4vh,52px) 0;box-sizing:border-box;background:var(--surface-inverse);display:flex;align-items:center;justify-content:center}
.br-cat-sec--first{flex-direction:column;justify-content:flex-start;align-items:center}
.br-cat-head{width:100%;max-width:var(--page-max);box-sizing:border-box;padding:24px var(--page-gutter) 0}
.br-cat-title{margin:0;font-size:18.2px;text-transform:uppercase;letter-spacing:.08em;font-weight:400;color:var(--text-inverse)} /* owner: 70% of the 26px header wordmark (2026-09-14) */
.br-cat-flex{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;justify-content:center}
.br-cat-flex .br-cat-row{height:78%;margin:auto 0}
.br-cat-flex .br-footer{flex:none;width:100%;border-top:1px solid var(--br-hairline-dark);margin-top:auto}
.br-cat-row{width:80%;display:flex;gap:48px;height:78%}
.br-cat-row--one{flex:1;min-height:0;height:auto;width:100%;max-width:var(--page-max);box-sizing:border-box;padding:16px var(--page-gutter) 32px;justify-content:center;align-items:stretch}
.br-cat-row--one .br-tile{flex:0 0 80%;height:auto}
/* tiles carry no plate (owner, 2026-09-07): the transparent product cutout floats
   directly on the catalog black, matching the PDP frame (.br-pdp__imgwrap). The
   offwhite/offwhite-2 grounds are gone, so tile text must read on black. */
.br-tile{flex:1;min-width:0;text-decoration:none;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%}
.br-tile--alt{background:transparent}
.br-tile__num{font-family:var(--font-logo);font-size:clamp(64px,7.5vw,100px);color:var(--br-hairline);line-height:1}
.br-cat-row--pair .br-tile__num{font-size:clamp(44px,5vw,70px)}
.br-tile__name{font-size:14.3px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-inverse)} /* owner: +30% (2026-09-14) */
/* shop-grid Option B (owner, 2026-09-12): every tile carries name + price + Add-to-Cart.
   The product image/name/price link is .br-tile__view; the cart button is a sibling so
   it isn't nested inside the product <a>. .br-tile stays the flex-column centering shell. */
.br-tile__view{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:inherit;text-align:center} /* text-align:center: a wrapped product name must center EACH line, not just the block (OnePlus 360px vs Pixel 412px wrap difference, owner report 2026-09-16) */
.br-tile__price{display:flex;align-items:baseline;gap:12px;justify-content:center}
.br-tile__price .insider{font-family:var(--font-logo);font-size:19px;color:var(--br-red);letter-spacing:.02em}
.br-tile__price .listed{font-size:12px;color:rgba(246,243,236,.55);text-decoration:line-through}
.br-tile__cart{margin-top:2px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--br-white);background:var(--br-red);border:1px solid var(--br-red);padding:11px 24px;text-decoration:none;transition:background var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand)}
.br-tile__cart:hover{background:var(--br-red-deep);border-color:var(--br-red-deep)}
.br-tile__cart--busy{opacity:.55;pointer-events:none}
/* add-to-cart transition veil — same backdrop language as the consent dialog */
.br-veil{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(14,13,11,.55);opacity:0;transition:opacity var(--dur-fast) var(--ease-brand)}
.br-veil--on{opacity:1}
.br-veil__label{font-family:Marcellus,serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#F6F3EC;animation:br-veil-pulse 1.6s ease-in-out infinite}
@keyframes br-veil-pulse{0%,100%{opacity:1}50%{opacity:.45}}
/* catalog header variant: full header, black background (final decision) */

/* ---------- PDP — black one-viewport under the global header (user: header+footer on every page) ---------- */
.br-pdp{flex:1;background:var(--surface-inverse);color:var(--text-inverse);display:flex;flex-direction:column;height:calc(100vh - var(--br-header-h,80px));overflow:hidden}
.br-pdp__back{max-width:var(--page-max);margin:0 auto;padding:6px var(--page-gutter) 14px;width:100%;box-sizing:border-box}
.br-pdp__back a{font-size:18.2px;letter-spacing:.08em;text-transform:uppercase;color:var(--br-hairline);text-decoration:none} /* owner: same size as the Reserve page title (2026-09-14) */
.br-pdp__row{flex:1;min-height:0;max-width:var(--page-max);margin:0 auto;padding:2px var(--page-gutter) 12px;width:100%;box-sizing:border-box;display:flex;gap:28px;align-items:stretch;overflow:hidden}
/* Item 13 (owner checklist 2026-09-17): PDP desktop splits into two even halves —
   image left 50%, text/details right 50%. Previously the info column was a fixed
   227px strip beside a dominant image side. */
.br-pdp__top{display:flex;gap:28px;align-items:stretch;justify-content:center;flex:1 1 50%;min-width:0;min-height:0}
.br-pdp__thumbs{flex:0 0 64px;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow-x:hidden;max-height:100%}
.br-thumb{flex:none;width:64px;height:64px;background:var(--br-offwhite-2);border:1px solid var(--br-hairline-dark);display:flex;align-items:center;justify-content:center;font-family:var(--font-logo);font-size:20px;color:var(--br-ink-3);cursor:pointer}
.br-thumb.is-active{border-color:var(--br-black)}
/* gallery images are transparent cutouts (2026-09-06): the product floats on the black screen, monasterymade-style, so the frame carries no plate of its own; the frame is a bounded 4:5 window (52vh x 65vh) so portrait cutouts can't run past the fold */
.br-pdp__imgwrap{flex:0 1 auto;width:min(100%,52vh);height:min(100%,65vh);margin:0 auto;min-width:0;align-self:stretch;position:relative;background:transparent;border:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-logo);font-size:120px;color:var(--br-ink-3)}
.br-pdp__imgwrap img:not(.br-pdp__slide){width:100%;height:100%;object-fit:cover}  /* slides govern their own fit — see .br-pdp__slide */
.br-pdp__frame{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.br-pdp__frame.br-anim-img{animation:brFadeScale var(--dur-med) var(--ease-brand)}
.br-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;background:var(--br-black);color:var(--br-white);font-size:22px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center}
.br-arrow--prev{left:16px}.br-arrow--next{right:16px}
/* PDP gallery arrows sit OUTSIDE the image frame (owner, 2026-09-07): at 16px in
   they overlapped the product cutout. Scoped to the PDP so the reviews carousel
   (.br-carousel .br-arrow) keeps its own inset placement. Mobile re-insets them
   below, where the frame is full-bleed and there is no room outside. */
.br-pdp__imgwrap .br-arrow--prev{left:auto;right:100%;margin-right:12px}
.br-pdp__imgwrap .br-arrow--next{right:auto;left:100%;margin-left:12px}
.br-pdp__info{flex:1 1 50%;max-width:50%;margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px} /* item 13: even halves (2026-09-17) */
.br-pdp__kicker{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--br-hairline)}
.br-pdp__name{margin:0;font-size:var(--type-h1);text-transform:uppercase;letter-spacing:.06em;font-weight:400;color:var(--text-inverse)}
/* Shade as row 2 under the product name (owner, 2026-09-19); sticky CTA keeps the inline suffix */
.br-pdp__info .br-pdp__shade{display:block;font-size:.68em;margin-top:6px}
/* Price block, Quince-style (owner, 2026-09-18): stacked column — insider price,
   "You save N%", traditional retail price + label. No strikethrough anywhere. */
.br-pdp__price{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px} /* owner 2026-09-20: Quince layout, the two prices side by side for easy comparison */
.br-pdp__pricecol{display:flex;flex-direction:column;align-items:center;gap:4px}
.br-pdp__price{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0;width:100%} /* owner 2026-09-20: two 50% columns, prices equidistant from the center axis */
.br-pdp__pricecol{display:flex;flex-direction:column;align-items:center;gap:4px;width:50%}
.br-pdp__price .insider{font-size:24px;color:var(--br-red);font-weight:400} /* owner 2026-09-20: no bold on any price */
.br-pdp__price .br-save{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,243,236,.7)}
.br-pdp__price .br-retail{display:flex;flex-direction:column;align-items:center;gap:4px}
.br-pdp__price .listed{font-size:24px;color:rgba(246,243,236,.55);font-weight:400;text-decoration:line-through} /* owner 2026-09-20: traditional price carries a strikethrough (supersedes the 09-18 no-strikethrough rule) */
.br-pdp__price .br-retail__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,243,236,.7)} /* same size as You save (owner, 2026-09-20) */
/* Farewell Formula badge (owner checklist item 6): label under the prices with an
   info-i at its top right; click opens the explanation (native <details>, no JS). */
.br-farewell{position:relative;width:100%;max-width:360px}
.br-farewell summary{list-style:none;cursor:pointer;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:2px 20px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--br-hairline)}
.br-farewell summary::-webkit-details-marker{display:none}
.br-farewell__i{position:absolute;top:-2px;right:6px;width:13px;height:13px;border:1px solid var(--br-hairline);color:var(--br-hairline);font-size:9px;line-height:12px;text-align:center;font-style:normal;letter-spacing:0;text-transform:none;font-family:var(--font-sans)}
.br-farewell[open] .br-farewell__i{background:var(--br-red);border-color:var(--br-red);color:#fff}
.br-farewell__pop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:5;width:min(320px,84vw);box-sizing:border-box;background:var(--surface-card);border:1px solid var(--border-default);padding:12px 14px;font-size:12px;line-height:1.6;letter-spacing:0;text-transform:none;color:var(--br-ink);animation:brFade var(--dur-fast) var(--ease-brand)}
.br-pdp .br-qty{display:flex;align-items:center;justify-content:center;border:1px solid var(--br-hairline-dark);width:120px;margin:0 0 24px} /* owner 2026-09-20: visible space between the stepper and the CTA (desktop; mobile keeps 14px) */
.br-pdp .br-qty button{width:36px;height:36px;border:none;background:transparent;color:var(--text-inverse);font-size:16px;font-weight:700;cursor:pointer}
.br-pdp .br-qty__val{flex:1;text-align:center;font-size:14px}
/* Shade swatches (owner, 2026-09-19): text chips under the delivery note,
   zero radius, hairline borders, red ring on the selected shade */
.br-pdp .br-shades{margin:0 0 16px}
.br-pdp .br-shades__label{display:block;font-size:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-faint);margin-bottom:8px}
.br-pdp .br-shades__row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.br-pdp .br-shades__swatch{border:1px solid var(--br-hairline-dark);background:transparent;color:var(--text-inverse);font-family:var(--font-sans);font-size:var(--type-small);letter-spacing:var(--track-caps);padding:7px 14px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand),box-shadow var(--dur-fast) var(--ease-brand)}
.br-pdp .br-shades__swatch:hover{border-color:var(--text-inverse)}
.br-pdp .br-shades__swatch.is-active{border-color:var(--br-red);box-shadow:inset 0 0 0 1px var(--br-red);color:var(--br-white)}
.br-pdp .br-shades__swatch.is-soldout{opacity:.45} /* shade-level sold out (owner, 2026-09-20) */
.br-shade-cta--soldout{opacity:.45;cursor:default} /* tile variant */
.br-pdp__gatebox{border:1px solid var(--br-hairline-dark);padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;box-sizing:border-box}
.br-pdp__gateline{font-size:13px;color:var(--br-hairline)}
.br-pdp__gatelink{cursor:pointer;text-decoration:underline;font-size:14px;color:var(--text-inverse)}
.br-pdp .br-btn--block{width:100%;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.br-pdp__info form.cart{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center} /* capped so the CTA doesn't stretch the whole half (item 13) */
.br-pdp .br-footer{flex:none;border-top:1px solid var(--br-hairline-dark)}
/* Item 11 (owner checklist 2026-09-17): the Reserve page footer had no separating
   line; the PDP footer already does. And the fixed Add-to-Cart bar (58px) covered
   the footer bottom at full scroll — page-level bottom padding fixes it. */
.br-cat .br-footer{border-top:1px solid var(--br-hairline-dark)}
body.single-product .br-footer{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));box-sizing:border-box}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
	.br-main,.br-screen,.br-anim,.br-pdp__frame.br-anim-img{animation:none}
	.br-reveal{opacity:1;transform:none;transition:none}
	.br-index{scroll-behavior:auto}
	.br-hero__video{display:none}
}

/* ---------- mobile (≤768) — full msite layer ---------- */
@media (max-width:768px){
	/* header (prototype law): row 1 wordmark full width; row 2 four links flex-wrap +
	   space-between — a widening "Cart (1)" shrinks the middle gaps evenly, edges stay flush */
	/* mobile header law: burger left + centered wordmark + cart right */
	.br-header__bar{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding:12px var(--page-gutter);height:auto;position:relative}
	.br-burger{display:flex}
	.br-wm{position:absolute;left:50%;transform:translateX(-50%);max-width:74vw;text-align:center}
	/* Mobile wordmark sizing must be in vw: the absolute wrapper shrink-to-fits the
	   space from left:50% to the bar edge (50vw), so a fixed CSS height only
	   letterboxes — the glyphs always render 50vw wide. 55vw = owner 2026-09-19
	   "+10% bigger"; height:auto keeps each language's aspect undistorted. */
	.br-wm__svg{width:60vw;height:auto;display:block} /* owner 2026-09-20: mobile logo +9% (55vw -> 60vw) */
	.br-wm--fr .br-wm__svg{width:60vw;height:auto}
	.br-header__nav{display:none}
	.br-header__actions{display:none}
	.br-header__cart-m{display:inline-flex}
	.br-header__cart-m svg{width:21px;height:21px}
	.br-mmenu{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--surface-page);border-bottom:1px solid var(--border-default);flex-direction:column;padding:6px var(--page-gutter) 24px;z-index:60;box-shadow:0 12px 24px rgba(14,13,11,.06);animation:brMenuIn .2s var(--ease-brand) both}
	.br-mmenu[hidden]{display:none!important}
	.br-mmenu .br-badge{align-self:flex-start;margin:10px 0 2px}
	.br-mmenu a{font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-body);text-decoration:none;padding:15px 0;border-bottom:1px solid var(--border-default)}
	.br-mmenu .br-lang{margin-top:18px;font-size:10px}
	/* home */
	.br-hero__inner{padding:64px var(--page-gutter) 60px;gap:20px}
	/* CTA: exactly centered in the space between the now-open line and the section end */
	.br-hero__inner .br-anim-4{margin-top:auto;margin-bottom:auto;padding:24px 0}
	.br-hero__date{margin-top:30px}
	.br-note{padding:48px var(--page-gutter) 24px}
	.br-closed__inner{padding:72px var(--page-gutter)}
	/* catalog: pairs stack inside their section (no inner scroll — see base rule) */
	.br-cat-head{padding:14px var(--page-gutter) 0}
	.br-cat-title{font-size:16.1px} /* 70% of the 23px mobile wordmark */
	/* mobile (HTML law): equal tiles, even 24px rhythm — top / between / bottom */
	.br-cat-sec{align-items:stretch;padding:var(--sp-5) 0}
	.br-cat-row{width:92%;margin:0 auto;flex-direction:column;gap:var(--sp-5);height:auto}
	.br-cat-sec--first .br-cat-row--one{flex:1;min-height:0;padding:12px 0 20px}
	.br-cat-flex .br-cat-row{flex:1;min-height:0;margin:0 auto;padding-bottom:var(--sp-4)}
	.br-tile{height:auto;flex:1;min-height:0}
	.br-cat-row--pair .br-tile__num{font-size:clamp(40px,9vw,64px)}
	/* PDP (prototype law): .br-pdp__top = [51px thumb strip | image] side by side,
	   info block below padded 63px so kicker/name/price/CTA center on the IMAGE centerline */
	/* mobile PDP (finalized law): image full width, carousel centered UNDER it, all info centered */
	.br-pdp__row{flex-direction:column;gap:16px;overflow-y:auto;padding:2px var(--page-gutter) 20px}
	.br-pdp__top{flex-direction:column-reverse;gap:14px;align-items:center}
	.br-pdp__thumbs{flex:none;width:100%;max-height:none;flex-direction:row;justify-content:center;gap:10px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
	.br-thumb{width:51px;height:51px;font-size:16px;flex:none}
	.br-pdp__imgwrap{flex:none;width:100%;max-width:none;height:min(88vw,460px);font-size:70px}
	.br-arrow{width:35px;height:35px;font-size:18px}
	/* mobile frame is full-bleed — arrows return inside, flush to the edges */
	.br-pdp__imgwrap .br-arrow--prev{right:auto;left:4px;margin-right:0}
	.br-pdp__imgwrap .br-arrow--next{left:auto;right:4px;margin-left:0}
	.br-pdp__info{flex:none;width:100%;max-width:100%;margin:0;padding:0 0 8px;box-sizing:border-box;gap:0} /* max-width:100% added 2026-09-20: the desktop 50% cap survived here and squeezed the column to 175px, reading as left-aligned */
	.br-pdp__kicker{margin-bottom:6px}
	/* item 14 (owner checklist 2026-09-17): smaller product name so the Add-to-Cart
	   shows without scrolling; quantity selector sits above the CTA now */
	.br-pdp__name{font-size:17px;margin-bottom:18px}
	.br-pdp__info .br-pdp__shade{font-size:13px}
	/* owner 2026-09-20 (Msite): uniform 18px rhythm through the info column, and the
	   two price columns spread ~10% outward (gap 20 -> 80) for the side-by-side compare */
	.br-pdp__price{margin-bottom:18px;gap:0} /* 50/50 columns give the equidistant spread (owner, 2026-09-20) */
	.br-pdp__sizerow{margin-bottom:18px}
	.br-pdp .br-delivery-note{margin:0 0 18px}
	.br-pdp .br-shades{margin:0 0 18px}
	.br-pdp .br-qty{margin:0 0 18px}
	.br-farewell{max-width:300px}
	.br-farewell__pop{font-size:11px}
	/* footer: uniform centered columns + Dior marks */
	.br-footer__inner{padding:64px var(--page-gutter) 28px}
	.br-footer__cols{grid-template-columns:1fr 1fr;gap:30px 20px}
	.br-footer__rule{margin:32px 0 0}
}

/* ---------- generic pages (M2) ---------- */
.br-page{flex:1}
.br-page__inner{max-width:640px;margin:0 auto;padding:64px var(--page-gutter) 110px;width:100%;box-sizing:border-box}
.br-page__title{font-size:var(--type-h2);text-transform:uppercase;letter-spacing:.06em;font-weight:400;margin:0 0 22px}
.br-page__body h2{font-size:15px;text-transform:uppercase;letter-spacing:.08em;font-weight:400;margin:28px 0 8px}
.br-page__body p,.br-page__body li{font-size:14px;line-height:1.65;color:var(--text-muted)}
.br-page__body ul{padding-left:18px;margin:8px 0}
.br-page__body a{color:var(--text-body)}

/* ---------- about (prototype screenAbout law: 1100px row, copy 420, emblem 440 sticky) ---------- */
.br-about{display:flex;align-items:flex-start;gap:48px;max-width:1100px;margin:0 auto;padding:56px var(--page-gutter) 56px;width:100%;box-sizing:border-box}
.br-about__copy{flex:0 0 420px;min-width:0}
.br-about__copy h1{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--br-red);font-weight:400;margin:0 0 16px}
.br-about__copy h2{font-size:26px;text-transform:uppercase;letter-spacing:.06em;font-weight:400;margin:0 0 22px}
.br-about__copy p{font-size:15px;line-height:1.7;color:var(--text-muted);margin:0 0 18px}
.br-about__copy p strong{color:var(--text-body)}
.br-about__emblem{flex:1;min-width:0;width:440px;max-width:100%;height:440px;margin:0 auto;position:sticky;top:calc(50vh - 220px);align-self:flex-start}
.br-about__emblem img{width:440px;max-width:100%;height:440px;object-fit:contain;opacity:0;transform:scale(.96);transition:opacity var(--dur-med) var(--ease-brand),transform var(--dur-med) var(--ease-brand)}
.br-about__emblem.br-in img{opacity:1;transform:none}
.br-faq__title{margin:32px 0 8px!important;font-size:20px!important;text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.br-faq__item{border-top:1px solid var(--border-default)}
.br-faq__item:last-child{border-bottom:1px solid var(--border-default)}
.br-faq__q{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;font-family:var(--font-sans);font-size:14px;color:var(--text-body);text-align:left}
.br-faq__sym{color:var(--text-faint);font-size:16px}
.br-faq__a{display:none;padding:0 0 10px}
.br-faq__a p{margin:0;font-size:13px;color:var(--text-body);line-height:1.5}
.br-faq__item--open .br-faq__a{display:block;animation:brFade var(--dur-fast) var(--ease-brand) both}
@media (max-width:768px){.br-about{flex-direction:column;gap:32px;padding:40px var(--page-gutter) 48px}.br-about__copy{flex:none;width:100%}.br-about__emblem{flex:none;width:220px;height:220px;position:static;margin:0 auto}.br-about__emblem img{width:220px;height:220px}}

/* ---------- forms ---------- */
.br-form{display:flex;flex-direction:column;gap:14px}
.br-field{display:flex;flex-direction:column;gap:6px}
.br-field__label{font-size:var(--type-micro);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-faint)}
.br-field input,.br-field select,.br-field textarea{border:1px solid var(--border-default);background:var(--surface-card);padding:12px 14px;font-family:var(--font-sans);font-size:14px;color:var(--text-body);border-radius:0;box-sizing:border-box;width:100%}
.br-field__check{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--text-muted)}

/* ---------- sign-in dialog ---------- */
.br-dialog{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}
.br-dialog[hidden]{display:none!important}
.br-dialog__overlay{position:absolute;inset:0;background:rgba(14,13,11,.55);opacity:0;transition:opacity var(--dur-fast) var(--ease-brand)}
.br-dialog__panel{position:relative;background:var(--surface-card);border:1px solid var(--br-black);width:min(400px,90vw);padding:32px;opacity:0;transform:scale(.985);transition:opacity var(--dur-med) var(--ease-brand),transform var(--dur-med) var(--ease-brand)}
.br-dialog--open .br-dialog__overlay{opacity:1}
.br-dialog--open .br-dialog__panel{opacity:1;transform:none}
.br-dialog__title{font-size:var(--type-h3);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:600;margin-bottom:18px}
.br-dialog__sub{font-size:12px;line-height:1.55;color:var(--text-muted);margin:-10px 0 16px}
.br-dialog__close{position:absolute;top:12px;right:14px;background:var(--br-red);border:none;width:24px;height:24px;color:var(--br-white);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.br-dialog__alt{font-size:12px;color:var(--text-muted);margin:12px 0 0}
.br-dialog__alt a{color:var(--br-red);font-weight:700;text-decoration:none;text-transform:uppercase;font-size:11px;letter-spacing:.1em}

/* ---------- account ---------- */
.br-acct{flex:1;display:flex;flex-direction:column;max-width:var(--page-max);margin:0 auto;width:100%;box-sizing:border-box;padding:0 var(--page-gutter)}
.br-acct__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 12px}
.br-acct__title{font-size:var(--type-h2);text-transform:uppercase;letter-spacing:.06em;font-weight:400;margin:0}
.br-acct__backlink a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);text-decoration:none}
.br-acct__signout{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--br-red);font-weight:700;text-decoration:none}
.br-acct__grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(320px,380px) 1fr;gap:var(--sp-8);padding:4px 0 20px}
.br-acct__card{background:var(--surface-card);border:1px solid var(--border-default);padding:var(--sp-5);align-self:start}
.br-acct__h2{font-size:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-faint);font-weight:400;margin:0 0 14px}
.br-acct__addr{font-size:14px;line-height:1.6;color:var(--text-body)}
.br-acct__editlink{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--br-red);font-weight:700;text-decoration:none}
.br-acct__order{background:var(--surface-page);padding:var(--sp-4);display:flex;justify-content:space-between;align-items:baseline;font-size:13px;gap:var(--sp-5);border-bottom:1px solid var(--border-default)}
.br-acct__orderstatus{color:var(--text-faint)}
.br-acct__statusval{color:var(--br-red)}
.br-acct__empty{font-size:13px;color:var(--text-muted);margin:0 0 14px}
.br-acct__auth-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);max-width:880px;margin:0 auto;padding:56px 0 110px;width:100%}
.br-acct__sub{font-size:13px;color:var(--text-muted);margin:0 0 18px}
@media (max-width:768px){
 .br-acct__grid{grid-template-columns:1fr;overflow-y:auto}
 .br-acct__auth-wrap{grid-template-columns:1fr;gap:32px;padding:40px 0 80px}
}

/* ---------- cart (one-scroll) ---------- */
.br-cart{flex:1;display:flex;flex-direction:column;max-width:var(--page-max);margin:0 auto;width:100%;box-sizing:border-box;padding:0 var(--page-gutter)}
.br-cart__count{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.br-cart__grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 340px;gap:var(--sp-8);padding:4px 0 var(--sp-4)}
.br-cart__titlerow{display:flex;justify-content:space-between;align-items:baseline;padding-right:56px}
.br-cart__items .br-acct__backlink{margin:var(--sp-3) 0 var(--sp-5)}
.br-cart__rows{display:flex;flex-direction:column;gap:var(--sp-5);min-height:0}
.br-cart__items{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.br-cart__row{display:flex;gap:var(--sp-5);padding:var(--sp-5) 0;border-bottom:1px solid var(--border-default);align-items:flex-start}
.br-cart__thumb{flex:0 0 64px;height:64px;background:var(--br-offwhite-2);border:1px solid var(--border-default);display:flex;align-items:center;justify-content:center;font-family:var(--font-logo);font-size:22px;color:var(--br-ink-3)}
.br-cart__thumb img{width:100%;height:100%;object-fit:cover}
.br-cart__meta{flex:1;min-width:0}
.br-cart__name{font-size:var(--type-h3);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:500;margin:4px 0 8px}
.br-cart__qty{display:flex;align-items:center;gap:12px}
.br-cart__qtylabel{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.br-qty--sm button{width:22px;height:22px;font-size:12px}
.br-cart__remove{background:none;border:none;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);text-decoration:underline;cursor:pointer;padding:0}
.br-cart__lineprices{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:64px}
.br-cart__lineprices .insider{font-size:14px;color:var(--br-red);font-weight:600}
.br-cart__lineprices .listed{font-size:11px;color:var(--text-faint);text-decoration:line-through}
.br-cart__summary{background:var(--surface-card);border:1px solid var(--border-default);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);min-height:0}
.br-cart__sumrow{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--text-muted)}
.br-cart__total{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:600;color:var(--text-body);border-top:1px solid var(--border-default);margin-top:var(--sp-1);padding-top:var(--sp-3)}
.br-cart__total span:last-child{color:var(--br-red)}
.br-cart__cta{margin-top:auto;padding-top:18px}
.br-cart__emptystate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:var(--text-muted)}
@media (max-width:768px){
 .br-cart__grid{grid-template-columns:1fr;overflow-y:auto}
 .br-cart__summary{position:static}
}

/* ---------- checkout ---------- */
.br-checkout{flex:1;width:100%;box-sizing:border-box}
.br-checkout__inner{max-width:600px;margin:0 auto;padding:10px var(--page-gutter) 16px;width:100%;box-sizing:border-box}
.br-checkout__title{margin:0 0 8px;font-size:18px;text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.br-checkout form.checkout{display:flex;flex-direction:column;gap:6px}
.br-checkout .woocommerce-billing-fields h3,.br-checkout .woocommerce-additional-fields h3{display:none}
.br-checkout .woocommerce-billing-fields{display:block}
/* grid lives on Woo's __field-wrapper (its only child) — prototype law:
   First/Last 50:50 (1/3 + 3/5 of 1.4+.3+.7+1), Address/City/Postal 1.4:1:1 */
.br-checkout .woocommerce-billing-fields__field-wrapper{display:grid;grid-template-columns:1.4fr .3fr .7fr 1fr;gap:8px;align-items:start}
/* explicit rows (DOM order differs from visual order): 1 First|Last 50:50,
   2 Address|City|Postal 1.4:1:1, 3 Country|Province 50:50, 4 Email full */
.br-checkout #billing_first_name_field{grid-row:1;grid-column:1/3}
.br-checkout #billing_last_name_field{grid-row:1;grid-column:3/5}
.br-checkout #billing_address_1_field{grid-row:2;grid-column:1/2}
.br-checkout #billing_city_field{grid-row:2;grid-column:2/4}
.br-checkout #billing_postcode_field{grid-row:2;grid-column:4/5}
.br-checkout #billing_country_field{grid-row:3;grid-column:1/3}
.br-checkout #billing_state_field{grid-row:3;grid-column:3/5}
.br-checkout #billing_email_field{grid-row:4;grid-column:1/5}
.br-checkout .form-row{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;width:100%!important}
.br-checkout .form-row label{font-size:var(--type-micro);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-faint)}
.br-checkout .form-row .optional{letter-spacing:0;text-transform:none}
.br-checkout input.input-text,.br-checkout textarea,.br-checkout select{border:1px solid var(--border-default);background:var(--surface-card);padding:0 14px;height:48px;font-family:var(--font-sans);font-size:14px;color:var(--text-body);border-radius:0;width:100%;box-sizing:border-box}
.br-checkout #customer_details{margin:0}
.br-checkout #order_review{border-top:1px solid var(--border-default);margin-top:20px;padding-top:16px}
.br-checkout .woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;font-size:13px}
.br-checkout .woocommerce-checkout-review-order-table th,.br-checkout .woocommerce-checkout-review-order-table td{text-align:left;padding:7px 0;border-bottom:1px solid var(--border-default)}
.br-checkout .woocommerce-checkout-review-order-table .order-total td{color:var(--br-red);font-weight:600;font-size:15px}
.br-checkout #payment{margin-top:14px}
.br-checkout #payment ul.payment_methods{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.br-checkout #payment ul.payment_methods li{border:1px solid var(--border-default);background:var(--surface-card);padding:12px 14px;display:flex;align-items:center;gap:10px;font-size:14px}
.br-checkout #place_order{
	width:auto;margin:6px auto 0;display:flex;align-items:center;justify-content:center;
	background:var(--br-red);border:1px solid var(--br-red);color:#fff;cursor:pointer;
	font-family:var(--font-sans);font-size:var(--type-label);letter-spacing:var(--track-label);
	text-transform:uppercase;font-weight:500;padding:14px 32px;box-sizing:border-box;
	transition:background var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand)
}
.br-checkout #place_order:hover{background:var(--br-red-deep);border-color:var(--br-red-deep);color:#fff}
.br-checkout__trust{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.br-pay--light span{display:inline-flex;align-items:center;height:18px;padding:0 8px;border:1px solid var(--border-default);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-body)}
.br-pay--light{gap:6px}
.br-checkout__secure{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.br-checkout__policies{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);text-align:center}
.br-checkout__policies a{color:var(--text-body)}
@media (max-width:768px){
 .br-checkout .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr 1fr}
 .br-checkout #billing_first_name_field{grid-row:1;grid-column:1/2}
 .br-checkout #billing_last_name_field{grid-row:1;grid-column:2/3}
 .br-checkout #billing_address_1_field{grid-row:2;grid-column:1/3}
 .br-checkout #billing_city_field{grid-row:3;grid-column:1/2}
 .br-checkout #billing_postcode_field{grid-row:3;grid-column:2/3}
 .br-checkout #billing_country_field{grid-row:4;grid-column:1/3}
 .br-checkout #billing_state_field{grid-row:5;grid-column:1/3}
 .br-checkout #billing_email_field{grid-row:6;grid-column:1/3}
}
.br-checkout #ship-to-different-address,.br-checkout .woocommerce-shipping-fields{display:none!important}

/* ---------- Google SSO (prototype law: "or" divider + secondary button) ---------- */
.br-or{display:flex;align-items:center;gap:12px}
.br-or::before,.br-or::after{content:'';flex:1;height:1px;background:var(--border-default)}
.br-or span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.br-btn--ghost{background:var(--surface-card);color:var(--br-black)}
.br-btn--ghost:hover{background:var(--br-black);color:var(--br-offwhite)}
.br-google-note{margin:0;font-size:11px;line-height:1.5;color:var(--text-faint);text-align:center;animation:brFade var(--dur-fast) var(--ease-brand) both}

/* account shipping form (prototype law: 2-col name + province/postal rows) */
.br-acct__form{display:flex;flex-direction:column;gap:var(--sp-3)}
.br-acct__formrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.br-acct__form .br-btn{align-self:flex-start}
@media (max-width:768px){.br-acct__formrow{grid-template-columns:1fr}}

/* qty steppers: glyph-perfect centering (HTML law) */
.br-qty button{display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.br-qty__val{display:flex;align-items:center;justify-content:center;line-height:1}

/* cart stepper + CTA per final HTML/image */
.br-qty--sm{width:auto;height:auto;display:inline-flex;align-items:center;border:1px solid var(--br-hairline-dark)}
.br-qty--sm button{width:22px;height:22px;flex:none;font-size:12px}
.br-qty--sm .br-qty__val{width:20px;flex:none;font-size:12px;border-left:none;border-right:none}
.br-cart__cta .br-btn{display:flex;align-items:center;justify-content:center}

/* ---------- My Account: contrast lift (brand tokens, WCAG-friendly) ---------- */
/* sign-in / create-account panels become true surface cards */
.br-acct--auth .br-acct__auth{background:var(--surface-card);border:1px solid var(--border-default);padding:var(--sp-6)}
.br-acct--auth .br-acct__title{letter-spacing:.08em}
/* labels: muted ink instead of faint gray (7:1 on white) */
.br-acct__form .br-field__label,.br-acct--auth .br-field__label{color:var(--text-muted)}
/* section headings: ink + hairline underline */
.br-acct__h2{color:var(--text-body);letter-spacing:.12em;border-bottom:1px solid var(--border-default);padding-bottom:10px;margin:0 0 6px}
/* dashboard rows + empty states: readable */
.br-acct__empty{color:var(--text-muted)}
.br-acct__order{background:var(--surface-card);border:1px solid var(--border-default);padding:var(--sp-4)}
.br-acct__orders .br-acct__empty{border:1px solid var(--border-default);background:var(--surface-card);padding:var(--sp-4)}
/* bar links: muted, red on hover (was too faint) */
.br-acct__signout,.br-acct__backlink a{color:var(--text-muted)}
.br-acct__lost a{color:var(--text-muted)}
/* card + form spacing */
.br-acct__card{gap:var(--sp-4)}
.br-acct__form .br-btn{margin-top:6px}

/* ---------- Sitewide contrast lift (brand voice: quiet, but legible) ---------- */
/* dark surfaces: near-invisible hairline text -> muted offwhite */
.br-hero__date,.br-closed__date{color:rgba(246,243,236,.78)}
.br-count__label{color:rgba(246,243,236,.7)}
.br-pdp__kicker,.br-pdp__back a{color:rgba(246,243,236,.72)}
.br-pdp__price .listed{color:rgba(246,243,236,.6)}
/* light surfaces: faint gray labels -> muted ink (7:1) */
.br-field__label{color:var(--text-muted)}
.br-checkout .form-row label{color:var(--text-muted)}
.br-checkout__secure,.br-checkout__policies{color:var(--text-muted)}
.br-card__meta,.br-cart__qtylabel,.br-cart__sumnote{color:var(--text-muted)}
.br-badge--muted{color:var(--text-muted)}
.br-google-note,.br-or span{color:var(--text-muted)}
input::placeholder,textarea::placeholder{color:var(--br-ink-3);opacity:1}

/* all form fields render pure white — incl. selects and browser autofill */
.br-field input,.br-field select,.br-field textarea,
.br-checkout input.input-text,.br-checkout textarea,.br-checkout select,
.br-dialog input,.br-dialog select{background:#FFFFFF!important}
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #FFFFFF inset!important;
  -webkit-text-fill-color:var(--text-body)!important;
  transition:background-color 99999s ease-in-out 0s!important;
}

/* ---------- Thank-you (order received) — prototype law ---------- */
.br-thankyou{flex:1;display:flex;align-items:center;justify-content:center;padding:64px var(--page-gutter);background:var(--surface-page)}
.br-thankyou__card{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:44ch}
.br-thankyou__label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--br-red)}
.br-thankyou__title{margin:0;font-size:clamp(28px,4vw,40px);text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.br-thankyou__line{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted)}
.br-thankyou__meta{font-size:13px;color:var(--text-muted)}
.br-thankyou__sep{padding:0 8px;color:var(--br-ink-3)}
/* delivery value wraps onto its own left-aligned lines — "days" sits under the D */
.br-thankyou__delivery{display:inline-block;text-align:left}
.br-thankyou__cta{margin-top:12px}

/* ---------- Body copy contrast (WCAG AA+): reading text = ink, faint remnants = muted ---------- */
/* body/reading copy: muted #55524C (7.0:1) -> ink #1A1917 (15.9:1) on off-white */
.br-page__body p,.br-page__body li{color:var(--text-body)}
.br-about__copy p{color:var(--text-body)}
.br-note p{color:var(--text-body)}
.br-thankyou__line,.br-thankyou__meta{color:var(--text-body)}
/* informational text still on faint #8A867E (3.3:1 — fails AA) -> muted #55524C (7.0:1) */
.br-acct__orderstatus{color:var(--text-muted)}
.br-cart__count{color:var(--text-muted)}
.br-cart__remove{color:var(--text-muted)}
.br-cart__lineprices .listed{color:var(--text-muted)}
/* deliberate exceptions (decorative/supplementary, WCAG-exempt): .br-faq__sym "+" glyph,
   .br-thankyou__sep dot, thumb numerals, input placeholders (every field has a visible label) */

/* ---------- Contact page ---------- */
.br-contact__form{max-width:520px;margin-top:var(--sp-5)}
.br-contact__form textarea{min-height:132px;resize:vertical}
.br-contact__form .br-btn{align-self:flex-start}
.br-contact__note{border:1px solid var(--border-default);background:var(--surface-card);padding:var(--sp-4);font-size:14px;color:var(--text-body);max-width:520px}
.br-contact__note--error{border-color:var(--br-red);color:var(--br-red)}
.br-contact__alt{margin-top:var(--sp-5);font-size:13px;color:var(--text-muted)}
.br-hp{position:absolute!important;left:-9999px!important}

/* ---------- WooCommerce notices — brand system (no default blue/green boxes) ---------- */
.woocommerce-info,.woocommerce-message,.woocommerce-error,.woocommerce-notice{
	background:var(--surface-card);border:1px solid var(--border-default);border-radius:0;
	color:var(--text-body);font-size:14px;line-height:1.6;padding:var(--sp-4);margin:0 0 var(--sp-4);
	list-style:none;box-shadow:none;box-sizing:border-box
}
.woocommerce-error{border-color:var(--br-red);color:var(--br-red)}
.woocommerce-info::before,.woocommerce-message::before,.woocommerce-error::before{content:none}
.woocommerce-info a,.woocommerce-message a{color:var(--br-red)}
.woocommerce-info .button,.woocommerce-message .button,.woocommerce-error .button{
	display:inline-block;background:var(--br-black);color:var(--br-offwhite);border:1px solid var(--border-strong);
	border-radius:0;font-family:var(--font-sans);font-size:10px;letter-spacing:var(--track-label);
	text-transform:uppercase;font-weight:500;padding:10px 20px;margin:0;text-decoration:none;cursor:pointer
}
/* branded login form (woocommerce_login_form override), e.g. order-received */
.br-loginform{max-width:520px}
.br-loginform .br-or,.br-loginform .br-google-btn{margin-top:2px}
.br-google-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.br-google-btn .br-google-g{width:18px;height:18px;flex:none}

/* delivery estimate note (CPA pre-order disclosure) */
.br-delivery-note{font-size:11px;letter-spacing:.06em;color:var(--text-muted)}
.br-pdp .br-delivery-note{margin-top:-4px;color:var(--text-inverse)}
.br-cart__summary .br-delivery-note{padding-top:2px}
.br-delivery-note--checkout{text-align:center;margin-top:10px}

/* PDP unit counter (item 1, owner checklist 2026-09-17: "UNITS IN RESERVE: N",
   smaller than the old 11px units line) */
.br-pdp__units{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--br-white)}
.br-pdp__sourcing{font-size:11px;letter-spacing:.06em;color:var(--text-muted);font-style:italic}
/* Trust strip (2026-09-15 owner): one quiet line under the buy row, above the accordions */
.br-pdp__trust{font-size:11px;letter-spacing:.14em;color:var(--text-inverse);opacity:.6;text-align:center;text-wrap:balance;padding:0 var(--page-gutter);margin:6px auto 0;max-width:var(--page-max);width:100%;box-sizing:border-box}
/* HP: now-open line — attention weight */
.br-hero__date--open{font-weight:700;font-size:17px;letter-spacing:.14em;color:var(--br-white)}
/* ---------- HP reviews (quiet register: hairline cards, red dot marks) ---------- */
.br-carousel__frame{min-height:160px;width:100%;max-width:520px;display:flex;align-items:center;justify-content:center}
.br-reviews{background:var(--surface-page);flex:none;padding:26px var(--page-gutter) 88px}
.br-reviews__inner{max-width:var(--page-max);margin:0 auto;width:100%;box-sizing:border-box}
.br-reviews__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);text-align:center;margin-bottom:24px}
.br-carousel{position:relative;display:flex;justify-content:center;padding:0 52px;box-sizing:border-box;width:100%}
.br-carousel__frame{max-width:520px;width:100%}
.br-carousel .br-arrow{position:absolute;top:50%;transform:translateY(-50%);left:0;width:32px;height:32px;font-size:16px}
.br-carousel .br-arrow--next{left:auto;right:0}
.br-review{display:none;margin:0;width:100%;background:var(--surface-card);border:1px solid var(--border-default);padding:28px 32px;flex-direction:column;gap:14px;align-items:center;text-align:center;height:160px;box-sizing:border-box}
.br-review.is-active{display:flex;animation:brFadeScale var(--dur-med) var(--ease-brand)}
.br-review__dots{display:flex;gap:3px;justify-content:center}
.br-review__dots span{width:auto;height:auto;background:none;font-size:13px;line-height:1;color:var(--br-red)}
.br-review__dots span::before{content:'★'}
.br-review__quote{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted);margin-top:auto;margin-bottom:auto}
.br-review__name{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-top:auto}
@media (max-width:768px){
 .br-reviews{padding:26px var(--page-gutter) 64px}
 .br-carousel{padding:0 20px}
 .br-carousel__frame{max-width:100%}
 .br-carousel__frame{min-height:240px}
 /* every review card identical size: fixed height, quote centered, name pinned to bottom */
 .br-review{padding:24px 18px;height:240px;box-sizing:border-box}
 .br-review__quote{margin-top:auto;margin-bottom:auto}
 .br-pay img{height:12px;width:32px;object-fit:contain;padding:2px 4px}
 .br-carousel .br-arrow{width:28px;height:28px;font-size:14px}
}
/* ---------- Review requests (popup + page) ---------- */
.br-review-form__stars{display:flex;justify-content:center;gap:6px;padding:6px 0 10px}
.br-star{width:36px;height:36px;border:none;background:none;font-size:28px;line-height:1;color:var(--border-default);cursor:pointer;padding:0;transition:color var(--dur-fast) var(--ease-brand)}
.br-star:hover{transform:scale(1.1)}
.br-star.is-on{color:var(--br-red)}
.br-review-later{display:block;margin:12px auto 0;background:none;border:none;font-family:var(--font-sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px 8px}
.br-review-later:hover{color:var(--text-body)}
.br-review-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--border-default);background:var(--surface-card);padding:12px 14px;font-family:var(--font-sans);font-size:14px;color:var(--text-body);border-radius:0}
.br-review-form .br-btn{margin-top:6px}
.br-reviewpage{flex:1;display:flex;align-items:center;justify-content:center;padding:64px var(--page-gutter);background:var(--surface-page)}
.br-reviewpage__card{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:52ch}
.br-reviewpage__label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--br-red)}
.br-reviewpage__title{margin:0;font-size:clamp(24px,3.5vw,34px);text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.br-reviewpage__line{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted)}
.br-reviewpage .br-review-form{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:8px}
/* ---------- language toggle (top right) ---------- */
.br-lang{display:inline-flex;gap:8px;align-items:center;font-size:9px;letter-spacing:.14em}
.br-lang a{color:var(--text-body);text-decoration:none;opacity:.45}
.br-lang a.is-active{opacity:1;color:var(--br-red);font-weight:600}
.br-lang a:hover{opacity:1}

/* ---------- Authenticity: zoom walkthrough (Cellcosmet studio-shot register) ---------- */
.br-auth{max-width:var(--page-max);margin:0 auto;padding:72px var(--page-gutter) 88px;display:flex;flex-direction:column;gap:64px}
.br-auth__hero{display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.br-auth__lede{max-width:560px;font-size:15px;line-height:1.75;color:var(--text-muted);margin:0}
.br-insp{display:flex;flex-direction:column;align-items:center;width:100%}
.br-insp__stage{position:relative;width:100%;max-width:560px;margin:0 auto;background:radial-gradient(58% 52% at 50% 44%,rgba(252,251,248,.055),rgba(252,251,248,0) 72%)}
.br-insp__canvas{display:block;width:100%;aspect-ratio:4/3;touch-action:none;cursor:grab}
.br-insp__canvas.dragging{cursor:grabbing}
.br-insp__canvas.is-zoomed{cursor:zoom-out}
.br-insp__hintline{margin:0 0 8px;text-align:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);pointer-events:none;transition:opacity .6s ease;white-space:nowrap}
.br-insp__hintline.is-gone{opacity:0}
@media (prefers-reduced-motion:reduce){.br-insp__hintline{transition:none}}
.br-insp__tabs{display:flex;width:100%;max-width:560px;border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default);margin-top:36px}
.br-insp__tab{flex:1;appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 8px;font-family:inherit;font-size:10.5px;letter-spacing:.1em;line-height:1.6;text-transform:uppercase;color:var(--text-faint);cursor:pointer;white-space:normal;transition:color var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand)}
.br-insp__tab:hover{color:var(--text-muted)}
.br-insp__tab.is-on{color:var(--text-body);border-bottom-color:var(--br-red)}
.br-insp__illus{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin:0 0 18px;text-align:center}
.br-insp__panel{display:none;flex-direction:column;align-items:center;text-align:center;max-width:520px;padding-top:28px}
.br-insp__panel.is-on{display:flex}
.br-insp__title{font-family:var(--font-logo);font-size:clamp(22px,3vw,30px);letter-spacing:.04em;font-weight:400;line-height:1.2;margin:0 0 12px}
.br-insp__copy{font-size:15px;line-height:1.75;color:var(--text-muted);margin:0 0 16px}
.br-auth__trace{display:flex;flex-direction:column;align-items:center;gap:28px;padding-top:8px}

/* stage + zoom engine */
.br-zoom{display:flex;flex-direction:column;align-items:center;width:100%}
.br-zoom__stage{width:min(300px,80vw);aspect-ratio:3/4;overflow:hidden;position:relative;border:1px solid var(--border-default);background:linear-gradient(180deg,#FCFBF8 0%,#F4F1EA 100%)}
.br-zoom__img{width:100%;height:100%;object-fit:cover;display:block}
.br-zoom__inner{position:absolute;inset:0;transition:transform var(--dur-med) var(--ease-brand)}
.br-zoom__cap{min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.6;color:var(--text-muted);margin:14px 0 0;max-width:420px;transition:opacity var(--dur-fast) var(--ease-brand)}
.br-zoom__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;width:100%}
.br-zoom__dots{display:flex;gap:6px}
.br-zoom__dots span{width:6px;height:6px;border-radius:50%;background:var(--border-default)}
.br-zoom__dots span.is-on{background:var(--br-red)}

/* zoom stages: 1 full studio shot, 2 shade sticker (side), 3 barcode (side), 4 batch (front bottom) */
/* serum dieline: front panel -> barcode -> embossed batch code on the flap */
.br-zoom.is-s1 .br-zoom__inner{transform:scale(1)}
.br-zoom.is-s2 .br-zoom__inner{transform:scale(2.2);transform-origin:25% 76%}
.br-zoom.is-s3 .br-zoom__inner{transform:scale(2.8);transform-origin:49% 40%}
.br-zoom.is-s4 .br-zoom__inner{transform:scale(3.4);transform-origin:50% 48%}

@media (max-width:768px){
	.br-auth{padding:56px var(--page-gutter) 64px;gap:52px}
	.br-insp__stage{max-width:440px}
	.br-insp__hintline{font-size:9px;letter-spacing:.14em}
	.br-insp__tabs{margin-top:28px}
	.br-insp__tab{font-size:10px;letter-spacing:.12em;padding:12px 2px}
	.br-insp__panel{padding-top:22px}
		.br-zoom__stage{width:min(290px,78vw)}
}

/* ===== PDP SEO continuation (2026-09-04 SEO build) — renders only with seeded content ===== */
/* Answer-first line in the PDP info column */
.br-pdp__answer{font-size:13px;line-height:1.6;color:var(--br-hairline);border-left:2px solid var(--br-red);padding-left:10px;text-align:left;max-width:360px;margin:0} /* widened to breathe in the 50% info half (item 13) */

/* Body class flips the PDP from fixed viewport to natural flow so the page scrolls */
.has-pdp-seo .br-pdp{height:auto;min-height:calc(100vh - var(--br-header-h,80px))}
.has-pdp-seo .br-pdp__row{overflow:visible;align-items:flex-start}
.has-pdp-seo .br-pdp__imgwrap{height:62vh;min-height:420px;flex:0 1 auto;width:min(100%,calc(62vh * 0.8));margin:0 auto}
.has-pdp-seo .br-pdp__info{justify-content:flex-start;padding:48px 0}
/* (2026-09-17) the old pinned 227px info column needed a hand-tuned 222px image
   margin to keep the gap sane; with the even 50/50 halves the image simply centers
   in its own half, so that margin rule is gone. */

/* Sections below the viewport screen — black continuation, hairline dividers */
.br-pdp-seo{background:var(--surface-inverse);color:var(--text-inverse)}
.br-pdp-seo__section{max-width:820px;margin:0 auto;padding:56px var(--page-gutter) 24px;border-top:1px solid var(--br-hairline-dark)}
.br-pdp-seo__section:first-child{border-top:none}
.br-pdp-seo h2{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--br-offwhite);opacity:.55;margin:0 0 20px;font-weight:500}
.br-pdp-seo__prose p{font-size:14px;line-height:1.75;color:var(--text-inverse);margin:0 0 14px}
.br-pdp-seo__prose--sm p{font-size:12px;line-height:1.7;color:var(--br-hairline)}
.br-pdp-seo__note{font-size:12px;letter-spacing:.02em;color:var(--br-hairline);border-top:1px solid var(--br-hairline-dark);padding-top:12px;margin-top:8px}

/* FAQ — native details, hairline rows, no JS */
.br-pdp-seo__qa{border-top:1px solid var(--br-hairline-dark)}
.br-pdp-seo__qa:last-child{border-bottom:1px solid var(--br-hairline-dark)}
.br-pdp-seo__qa summary{list-style:none;cursor:pointer;font-size:14px;color:var(--text-inverse);padding:16px 0;position:relative;padding-right:28px}
.br-pdp-seo__qa summary::-webkit-details-marker{display:none}
.br-pdp-seo__qt{font:inherit;color:inherit;margin:0;display:inline} /* h3 inside FAQ summaries (2026-09-14 SEO audit) */
.br-pdp-seo__qa summary::after{content:'+';position:absolute;right:4px;top:14px;font-size:18px;color:var(--br-red);transition:transform var(--dur-fast) var(--ease-brand)}
.br-pdp-seo__qa[open] summary::after{transform:rotate(45deg)}
.br-pdp-seo__a{padding:0 0 18px;font-size:13px;line-height:1.7;color:var(--br-hairline)}

/* Footer now follows the PDP/SEO flow — keep its dark hairline */
.br-pdp-seo + .br-footer{border-top:1px solid var(--br-hairline-dark)}
.has-pdp-seo .br-pdp .br-footer{border-top:1px solid var(--br-hairline-dark)}

@media (max-width:820px){
	.has-pdp-seo .br-pdp__imgwrap{height:auto;min-height:340px;aspect-ratio:4/5}
	.has-pdp-seo .br-pdp__row{overflow:visible}
	.br-pdp-seo__section{padding:40px var(--page-gutter) 16px}
}

/* PDP sections — three vertical columns below the viewport (hairline dividers, red +, fade-only) */
.br-pdp-accs{max-width:var(--page-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);align-items:start;padding:40px var(--page-gutter) 64px}
.br-pdp-acc{border-left:1px solid var(--br-hairline-dark);padding:6px 34px 10px}
.br-pdp-acc:first-child{border-left:none;padding-left:0}
.br-pdp-acc summary{list-style:none;cursor:pointer;display:block;text-align:center;position:relative;padding:0 28px 18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-inverse);font-weight:500}
.br-pdp-acc summary::-webkit-details-marker{display:none}
.br-pdp-acc__t{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;margin:0;display:inline} /* h2 inside the accordion summary: semantic heading, identical look (2026-09-14 SEO audit) */
.br-pdp-acc__x{position:absolute;right:0;top:0;font-size:18px;font-weight:300;color:var(--br-red);line-height:1;transition:transform var(--dur-fast) var(--ease-brand)}
.br-pdp-acc__x::after{content:'+'}
.br-pdp-acc[open] .br-pdp-acc__x{transform:rotate(45deg)}
.br-pdp-acc[open] .br-pdp-acc__body{animation:brAccFade var(--dur-med) var(--ease-brand)}
.br-pdp-acc .br-pdp-seo__prose p{font-size:14px;line-height:1.75;color:var(--text-inverse);margin:0 0 13px}
.br-pdp-acc .br-pdp-seo__prose--sm p{font-size:12px;line-height:1.7;color:var(--br-hairline)}
.br-pdp-acc .br-pdp-seo__note{margin-top:14px}
@keyframes brAccFade{from{opacity:0}to{opacity:1}}
/* PDP cursor policy: arrow everywhere; pointer only on clickables; text cursor only in editable fields */
body.single-product, body.single-product *{cursor:default}
body.single-product a, body.single-product button, body.single-product summary, body.single-product .br-thumb, body.single-product [role="button"]{cursor:pointer}
body.single-product input, body.single-product textarea, body.single-product select{cursor:auto}
@media (max-width:900px){
.br-pdp-accs{grid-template-columns:1fr;padding:24px var(--page-gutter) 48px}
.br-pdp-acc{border-left:none;border-top:1px solid var(--br-hairline-dark);padding:20px 0 14px}
.br-pdp-acc:first-child{border-top:none;padding-top:0}
.br-pdp-acc summary{padding:0 0 14px}
}
@media (max-width:760px){.br-pdp-acc{padding:0}.br-pdp-acc__body{padding:0 var(--page-gutter)}.br-pdp-acc summary{padding:18px 0}.br-pdp-acc__x{top:18px}} /* 2026-09-14 owner: + was pinned to the summary padding-box top, above the text line — now rides the 18px top padding so it centers on the text; 2026-09-15 owner (msite): Description/Instructions/Ingredients sat ~11px left of true screen center — the item kept inner 20px gutters inside the container's own gutters, so text-align:center centered on the wrong box; item side padding 0, open prose keeps its gutters via the body */

/* PDP size chip near price */
.br-pdp__sizerow{display:flex;justify-content:center}
.br-pdp__size{border:1px solid var(--br-hairline-dark);padding:6px 12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-inverse);white-space:nowrap}
/* smooth scroll target offset for the sticky-less header */
.br-pdp-acc{scroll-margin-top:96px}
/* mobile PDP corrections: base has-pdp-seo rules were desktop-tuned */
@media (max-width:768px){
	.has-pdp-seo .br-pdp__info{padding:16px 0 8px} /* item 14: tighter info column helps the CTA reach the first viewport */
	.has-pdp-seo .br-pdp__row{align-items:stretch}
	.has-pdp-seo .br-pdp__top{width:100%;flex:none}
	.has-pdp-seo .br-pdp{min-height:0}
	.has-pdp-seo .br-pdp__imgwrap{width:min(72vw,270px);flex:none;height:auto;min-height:0;aspect-ratio:4/5;margin:0 auto}
	.br-pdp__size{padding:4px 9px;font-size:10px}
	/* mobile PDP: arrows off (swipe changes slides), more air between stock line, delivery line and CTA */
	.br-pdp .br-arrow{display:none}
	.br-pdp .br-delivery-note{margin-top:10px}
	.br-pdp__info form.cart{margin-top:16px}
}

/* PDP real-image slides — fade-only, transparent product shots contained on the ground.
   img.br-pdp__slide + !important: WooCommerce's .woocommerce div.product div.images img{height:auto}
   (loaded on every PDP) out-specifies a bare class selector and collapses the slides back to
   auto height — that was the desktop gallery bug. */
.br-pdp__frame{position:relative}
.br-pdp__frame img.br-pdp__slide{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:contain;padding:14px;opacity:0;transition:opacity var(--dur-med) var(--ease-brand)}
.br-pdp__frame img.br-pdp__slide.is-active{opacity:1;cursor:zoom-in}
@media (max-width:768px){.br-pdp__frame img.br-pdp__slide{padding:6px}}

/* gallery thumbs show the actual product image, not a text chip */
.br-thumb{overflow:hidden;padding:0}
.br-thumb .br-thumb__img{width:100%;height:100%;object-fit:cover;display:block}

/* click-to-zoom: the product opens full-screen on the brand black; fade-only, zero radius */
@keyframes brLightIn{from{opacity:0}to{opacity:1}}
.br-lightbox{position:fixed;inset:0;z-index:10000;background:rgba(14,13,11,.96);display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:24px;box-sizing:border-box;animation:brLightIn var(--dur-med) var(--ease-brand)}
.br-lightbox img{max-width:94vw;max-height:92vh;width:auto;height:auto;object-fit:contain}
html.br-zoom-locked{overflow:hidden}
@media (max-width:768px){.br-lightbox{padding:12px}.br-lightbox img{max-width:100vw;max-height:86vh}}

/* The Reserve tiles: transparent product cutouts float on the tile ground; the
   stack auto-rotates through the product's images (fade-only, 2026-09-06);
   pieces without photos keep the numeral placeholder */
.br-tile__slider{position:relative;width:min(56%,440px);height:min(58vh,520px)}
.br-cat-row--pair .br-tile__slider{width:58%;height:min(44vh,380px)}
.br-tile__slider .br-tile__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;display:block;opacity:0;transition:opacity var(--dur-med) var(--ease-brand)}
.br-tile__slider .br-tile__img.is-visible{opacity:1}
@media (max-width:820px){
	.br-tile__slider{width:64%;height:44vh}
	.br-cat-row--pair .br-tile__slider{width:70%;height:32vh}
}


/* Sold-out pieces in the showcase: a quiet "Sold Out" tag takes the Add-to-Cart
   place (owner, 2026-09-14 — MAC Whirl marked sold out). Not a link. */
.br-tile__cart--soldout{background:transparent;color:var(--br-hairline);border:1px solid var(--br-hairline-dark);cursor:default}

@media(max-width:768px){.br-pdp__back a{font-size:16.1px}} /* mirrors the mobile Reserve title */

/* ---- Product sections (owner, 2026-09-14 fourth pass): product 1 = first
   scroll, product 2 = second; one main image (4:5, full shot) + title + price
   + CTA per section. No rotation. ---- */
/* ---- Reserve tagline (owner 2026-09-17): one line pinned under the header,
   above the catalog. Item 12 (owner checklist 2026-09-17): Instrument Sans now —
   Marcellus is reserved for the wordmark/emblem — larger than the original 12px,
   and the three phrases fade in one after another (staggered sequential fade). ---- */
.br-cat-tag{margin:0;padding:20px var(--page-gutter) 0;text-align:center;font-family:var(--font-sans);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-inverse)}
.br-cat-tag__p{animation:brTagIn var(--dur-med) var(--ease-brand) both} /* fill both: holds the from-state during its delay; killing the animation (reduced motion, bfcache snap) leaves it fully visible */
.br-cat-tag__p:nth-child(1){animation-delay:.2s}
.br-cat-tag__p:nth-child(2){animation-delay:.9s}
.br-cat-tag__p:nth-child(3){animation-delay:1.6s}
@keyframes brTagIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.br-cat-tag__p{animation:none}}
.br-cat-sec--piece{min-height:calc(100vh - 80px);box-sizing:border-box}
.br-cat-sec--piece .br-cat-row--one{align-items:center}
.br-tile--piece .br-piece-img{width:min(80vw,400px);aspect-ratio:4/5;object-fit:contain;display:block} /* sizes attr matches 400px */
.br-tile--piece .br-tile__cart{margin-top:6px}
@media(max-width:768px){
	.br-tile--piece .br-piece-img{width:74vw}
	/* owner: the full-viewport sections left a large dead gap between the two
	   products on phones — sections hug their content instead (2026-09-14) */
	.br-cat-sec--piece{min-height:0}
}
/* ---- Desktop 3-column catalog (owner, 2026-09-16): Kiehl's col 1, MAC col 2,
   col 3 empty — a third product auto-fills it when one lands. Sections and rows
   dissolve via display:contents so the TILES become the grid items; the footer
   band spans all 3 columns in row 2. Mobile (≤768) keeps the stacked
   per-product sections exactly as-is: every rule here is desktop-gated. ---- */
@media(min-width:769px){
	/* 5 tracks: side 1fr gutters + 3 product columns. The footer spans 1/-1 across
	   the FULL grid (no horizontal padding on .br-cat), so its inner content
	   centers at the same 1440px measure as every other page (owner 2026-09-16:
	   the §75 tracks-only footer read as compressed toward center). */
	.br-cat{display:grid;grid-template-columns:minmax(var(--page-gutter),1fr) repeat(3,minmax(0,400px)) minmax(var(--page-gutter),1fr);grid-template-rows:auto 1fr auto auto;align-items:center;column-gap:clamp(24px,3vw,48px);row-gap:clamp(56px,9vh,112px);min-height:calc(100vh - var(--br-header-h,80px));box-sizing:border-box;padding:clamp(20px,4vh,52px) 0 0}
	.br-cat-tag{grid-column:1/-1;grid-row:1;padding:0;font-size:15px} /* row 1 pins it under the header; the tile row keeps 1fr below */
	.br-cat-sec--piece,.br-cat-row--one{display:contents}
	.br-cat-sec--piece:nth-of-type(1) .br-tile--piece{grid-column:2;grid-row:2}
	.br-cat-sec--piece:nth-of-type(2) .br-tile--piece{grid-column:3;grid-row:2}
	.br-cat-sec--piece:nth-of-type(3) .br-tile--piece{grid-column:4;grid-row:2} /* a 3rd product fills the visual column 3 */
	/* Item 2 (owner checklist 2026-09-17): the whole card (image top → CTA bottom)
	   fits inside one viewport, and the two cards' elements align row-for-row.
	   Every block gets a fixed height — viewport-capped image, 2-line name slot
	   (a 1-line name keeps an empty second row) — so price and CTA land on the
	   same lines across cards no matter how the names wrap. */
	.br-tile--piece .br-piece-img{width:auto;max-width:100%;height:clamp(240px,calc(100svh - 470px),500px);aspect-ratio:4/5;object-fit:contain;margin:0 auto} /* supersedes the vw-based + max-height:820 media widths */
	.br-tile--piece .br-tile__name{min-height:3.3em;display:flex;align-items:flex-start;justify-content:center;text-align:center} /* 3.3em = real 2-line height; flex-start pins every first line to the same row (owner, 2026-09-20) */ /* 3.3em = real 2-line height at line-height 1.6 (2026-09-19): wrapped names no longer push price/CTA off the shared rows */
	.br-cat .br-footer{grid-column:1/-1;grid-row:4}
}

/* ---------- Other Products In The Reserve (owner, 2026-09-20): PDP foot
   cross-sell band, matched to .br-how; white cards, fade rotation every 3s ---------- */
.br-other{background:var(--surface-inverse);flex:none;border-top:1px solid var(--br-hairline-dark)}
.br-other__inner{max-width:var(--page-max);margin:0 auto;padding:44px var(--page-gutter) 48px;display:flex;flex-direction:column;align-items:center;gap:26px}
.br-other__title{margin:0;font-size:20px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--text-inverse)}
.br-other__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;width:100%;max-width:1280px}
.br-other__card{background:var(--surface-card);text-decoration:none;display:flex;flex-direction:column;box-sizing:border-box;width:400px;max-width:100%}
.br-other__imgs{position:relative;display:block;aspect-ratio:4/5;overflow:hidden}
.br-other__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity var(--dur-med) var(--ease-brand)}
.br-other__img.is-visible{opacity:1}
.br-other__name{display:flex;min-height:3.3em;align-items:flex-start;justify-content:center;text-align:center;padding:14px 16px 4px;font-size:14.3px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-body)} /* 2-line slot, top-aligned: prices land on the same row across cards (owner, 2026-09-20) */
@media(max-width:768px){
	.br-other__imgs{aspect-ratio:8/7} /* owner 2026-09-20: mobile card height down 30% from the 4/5 base */
}
/* Reserve tile shade itemization (owner, 2026-09-20): one direct-add CTA per shade */
.br-shade-ctas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.br-shade-cta{border:1px solid var(--br-hairline-dark);color:var(--text-inverse);font-size:11.5px;letter-spacing:var(--track-caps);text-transform:uppercase;text-decoration:none;padding:7px 12px;transition:border-color var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand)}
.br-shade-cta:hover{border-color:var(--text-inverse);color:var(--text-accent)}
.br-other__price{display:flex;gap:8px;justify-content:center;align-items:baseline;padding:2px 16px 18px}
.br-other__price .insider{color:var(--br-red);font-size:15px;font-weight:600}
.br-other__price .listed{color:var(--text-faint);font-size:12.5px}
@media(min-width:769px){
	.br-other__title{font-size:32px;letter-spacing:.06em}
	.br-other__imgs{aspect-ratio:5/4} /* owner 2026-09-20: box height down 20% on desktop (400w x 320h) */
}

/* ---------- sticky PDP CTA (2026-09-15 owner): once the in-column Add to Cart
   has scrolled past the top of the viewport, a slim bar pins to the screen bottom
   with the same action; it hides again as soon as the CTA is back in view.
   Surface = the header's own --surface-page + light hairline (owner, same day:
   "background the colour of the header, so it is visible and differentiable");
   name in ink for the cream field; fade-only transition; no radius. ---------- */
.br-stickycta{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--surface-page);border-top:var(--hairline);display:flex;align-items:center;gap:14px;padding:10px var(--page-gutter) calc(10px + env(safe-area-inset-bottom,0px));box-sizing:border-box;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-med) var(--ease-brand),visibility 0s linear var(--dur-med)}
.br-stickycta.is-visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur-med) var(--ease-brand)}
.br-stickycta__thumb{width:46px;height:46px;flex:none;object-fit:cover;background:var(--br-offwhite-2)}
.br-stickycta__meta{flex:1;min-width:0;text-align:left}
.br-stickycta__name{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:400;color:var(--br-black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-stickycta__price{font-size:15px;color:var(--br-red);font-weight:400;margin-top:2px} /* owner 2026-09-20: no bold on prices */
.br-stickycta .br-btn{flex:none;padding:12px 28px}
@media (prefers-reduced-motion:reduce){.br-stickycta,.br-stickycta.is-visible{transition:none}}
@media (max-width:768px){
	.br-stickycta{gap:10px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px))}
	.br-stickycta__thumb{width:40px;height:40px}
	.br-stickycta__name{font-size:11.5px}
	.br-stickycta__price{font-size:14px;margin-top:1px}
	.br-stickycta .br-btn{padding:13px 18px}
}