/* ==========================================================================
   SUPREME LUXE — COMPONENTS
   Values transcribed from the approved .dc.html artifacts. Where the design
   used inline style strings and computed style helpers (chipStyle/toggleStyle/
   bigToggleStyle), those become classes driven by real form-control state.
   The visual result is identical; the semantics are not.
   ========================================================================== */

/* ==========================================================================
   WORDMARK  — two-line lockup, nowrap per line (regression case 5)
   ========================================================================== */

.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__name {
  font-family: var(--font-display);
  font-size: 27px;
  color: var(--bone);
  white-space: nowrap;
}
.wordmark__sub {
  font-size: 9px;
  letter-spacing: var(--ls-wordmark);
  color: var(--bone-50);
  margin-top: 5px;
  white-space: nowrap;
}
/* Build Your Supreme uses a slightly smaller lockup */
.nav--build .wordmark__name { font-size: 24px; }
.nav--build .wordmark__sub { font-size: 8.5px; letter-spacing: 0.18em; color: var(--bone-55); margin-top: 4px; }

/* ==========================================================================
   NAVIGATION — four variants, deliberately not unified (DESIGN_HANDOFF §1)
   ========================================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  box-sizing: border-box;
}

/* --- Homepage: grid, scroll-linked transparent → solid -------------------- */
.nav--home,
.nav--product {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 24px clamp(28px, 4vw, 64px);
}
.nav--home {
  background: rgba(10, 10, 10, 0);
  border-bottom: 1px solid rgba(245, 242, 235, 0);
  transition: background var(--t-nav), border-color var(--t-nav);
}
.nav--home.is-solid {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line-08);
}

/* --- PDP: identical layout, permanently solid, no scroll listener --------- */
.nav--product {
  background: var(--onyx);
  border-bottom: 1px solid var(--line-08);
}

/* --- Build: static, flows with the page, no centre links ------------------ */
.nav--build {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad-x-fluid);
  border-bottom: 1px solid var(--line-08);
}

/* --- Bespoke: fixed, scroll-linked, three items only ---------------------- */
.nav--bespoke {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad-x-fluid);
  background: rgba(10, 10, 10, 0);
  border-bottom: 1px solid rgba(245, 242, 235, 0);
  transition: background var(--t-nav), border-color var(--t-nav);
}
.nav--bespoke.is-solid {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line-08);
}
.nav__home-link { font-size: 12px; color: var(--bone); opacity: 0.8; }
.nav__centre-mark { font-family: var(--font-display); font-size: 22px; color: var(--bone); }

/* --- Nav pieces ---------------------------------------------------------- */
.nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 40px);
}
.nav__link {
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.85;
  white-space: nowrap;
  transition: opacity var(--t-button);
}
.nav__link:hover { opacity: 1; }

.nav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.nav--build .nav__actions { gap: 20px; }

.cart-button {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--bone);
  position: relative;
}
.cart-button__count {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--bone-60);
}
.cart-button__count:empty { display: none; }

.concierge-pill {
  font-size: var(--fs-nav);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--onyx);
  background: var(--bone);
  padding: 11px 20px;
  white-space: nowrap;
  transition: background var(--t-button);
}
.concierge-pill:hover { background: #fff; }
.nav--build .concierge-pill { font-size: 11.5px; padding: 10px 18px; }

/* --- Tablet nav (768–1023) -----------------------------------------------
   No tablet range was designed (DESIGN_HANDOFF §13), and at 768 the full
   desktop row — logo + five links + cart + Concierge pill — overruns the
   viewport and clips the pill. That is named regression case 7, so the row is
   tightened here rather than allowed to overflow. Nothing is removed: all five
   links, the cart and the pill survive down to 768. */

@media (max-width: 1023px) {
  .nav--home, .nav--product { gap: 16px; padding: 20px 24px; }
  .nav--home .nav__links, .nav--product .nav__links { gap: clamp(14px, 2vw, 40px); }
  .nav__link { font-size: 11.5px; letter-spacing: 0.04em; }
  .nav__actions { gap: 16px; }
  .concierge-pill { font-size: 11px; padding: 10px 14px; }
  .wordmark__name { font-size: 23px; }
  .wordmark__sub { font-size: 8px; letter-spacing: 0.18em; }
}

/* ==========================================================================
   MOBILE BARS
   The approved mobile screens pin these with flex inside a fixed-height device
   frame. Real mobile web has no such frame, so they become sticky/fixed with
   safe-area padding — the substitution DESIGN_HANDOFF §3 and §14 call for.
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
}
.topbar__mark { font-family: var(--font-display); font-size: 19px; color: var(--bone); }
.topbar__title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--bone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__icon { display: flex; padding: 8px; color: var(--bone); }

/* Persistent bottom Concierge bar (mobile only) */
.concierge-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-float);
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  padding-bottom: calc(15px + env(safe-area-inset-bottom));
  background: var(--onyx);
  border-top: 1px solid var(--line-14);
}
.concierge-bar__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bone);
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  /* Only the two navs that have a designed mobile replacement are hidden.
     Build and Bespoke have no mobile screen in the approved set, and their
     navs (logo + cart + pill / back + wordmark + cart) already work narrow. */
  .nav--home, .nav--product { display: none; }
  .topbar { display: flex; }
  .concierge-bar { display: flex; }
  /* Clear the fixed bottom bar so nothing is trapped underneath it. Only the
     homepage carries the Concierge bar — the PDP has the taller buy bar
     instead, and Build/Bespoke have neither. Values match each bar's rendered
     height, so the footer never sits under a bar. */
  .page--home { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .nav--bespoke { padding: 14px var(--pad-x-mobile); }
  .nav--build { padding: 16px var(--pad-x-mobile); }
}

/* ==========================================================================
   FLOATING WHATSAPP
   Side differs per screen in the approved files (right on Homepage, left on
   PDP-desktop and Build, absent on Bespoke and Cart). DESIGN_HANDOFF §14 says
   preserve and flag rather than silently unify — see IMPLEMENTATION_PLAN §K.18.
   ========================================================================== */

.wa-float {
  position: fixed;
  bottom: 28px;
  z-index: var(--z-float);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--onyx);
  border: 1px solid var(--line-22);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  transition: border-color var(--t-button), background var(--t-button), transform var(--t-button);
}
.wa-float:hover {
  border-color: var(--line-50);
  background: var(--surface);
  transform: scale(1.06);
}
.wa-float--right { right: 28px; }
.wa-float--left { left: 28px; }

/* The right-hand "utility lane" that keeps these controls off the purchase
   panel and the summary rail is defined in pages.css — it has to override a
   `padding` shorthand that lives there, and pages.css loads last. */

/* The bottom Concierge bar replaces it on mobile — never both at once
   (regression case 8: WhatsApp overlay collisions). */
@media (max-width: 767px) { .wa-float { display: none; } }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-btn);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 30px;
  transition: background var(--t-button), border-color var(--t-button), color var(--t-button);
}
.btn--primary { background: var(--crimson); color: var(--bone); }
.btn--primary:hover { background: var(--crimson-hover); color: var(--bone); }

.btn--outline { border: 1px solid var(--line-40); color: var(--bone); }
.btn--outline:hover { border-color: var(--bone); color: var(--bone); }

.btn--bone { background: var(--bone); color: var(--onyx); }
.btn--bone:hover { background: var(--crimson); color: var(--bone); }

.btn--block { display: flex; width: 100%; }

/* Burgundy section CTA inverts on hover, per the homepage Build teaser */
.btn--on-burgundy:hover { background: var(--bone); color: var(--burgundy); }

/* Underlined text link used for section-level actions */
.link-rule {
  display: inline-block;
  font-size: var(--fs-btn);
  letter-spacing: 0.04em;
  color: var(--bone);
  border-bottom: 1px solid var(--line-40);
  padding-bottom: 4px;
  white-space: nowrap;
  transition: border-color var(--t-button);
}
.link-rule:hover { border-bottom-color: var(--bone); color: var(--bone); }

.link-quiet { font-size: 12px; color: var(--bone-60); transition: color var(--t-button); }
.link-quiet:hover { color: var(--bone); }

/* ==========================================================================
   OPTION CONTROLS
   Real radios / checkboxes, restyled. State comes from :checked, so keyboard
   and screen-reader behaviour is native.
   ========================================================================== */

.option { position: relative; display: block; }

/* --- Size chip ----------------------------------------------------------- */
.chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  text-align: center;
  padding: 12px 10px;
  border: 1px solid var(--line-22);
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover), color var(--t-hover);
}
.chip__label { font-size: 13px; }
.chip__price { font-size: 12px; opacity: 0.7; }
.option-input:checked + .chip {
  border-color: var(--bone);
  background: var(--bone);
  color: var(--onyx);
}
.option-input:focus-visible + .chip { outline: 2px solid var(--bone); outline-offset: 3px; }

/* --- Toggle row (finish, letter decoration, add-ons) --------------------- */
.toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-22);
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover);
}
.toggle__label { font-size: 14px; }
.toggle__meta { font-size: 12px; opacity: 0.65; }
.option-input:checked + .toggle {
  border-color: var(--crimson);
  background: var(--crimson-wash);
}
.option-input:focus-visible + .toggle { outline: 2px solid var(--bone); outline-offset: 3px; }

/* --- Large finish tile (Build Your Supreme step 3) ----------------------- */
.toggle--big {
  flex-direction: column;
  align-items: stretch;
  padding: 18px;
  gap: 0;
}
.toggle--big .toggle__top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8px;
}
.toggle--big .toggle__label { font-size: 15px; }
.toggle--big .toggle__desc { font-size: 12.5px; opacity: 0.6; line-height: 1.5; }

/* --- Colour swatch (PDP) ------------------------------------------------- */
.swatch { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.swatch__dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--line-25);
  transition: border-color var(--t-hover);
}
.swatch__label {
  font-size: 11px;
  color: var(--bone-55);
  margin-top: 8px;
  /* Without this the label wraps at narrow widths ("Red &" / "Black"), which
     also collapses the tap target to the width of the dot. */
  white-space: nowrap;
  transition: color var(--t-hover);
}
.option-input:checked + .swatch .swatch__dot { border-color: var(--bone); }
.option-input:checked + .swatch .swatch__label { color: var(--bone); }
.option-input:focus-visible + .swatch .swatch__dot { outline: 2px solid var(--bone); outline-offset: 4px; }

.dot--red   { background: var(--swatch-red); }
.dot--blue  { background: var(--swatch-blue); }
.dot--pink  { background: var(--swatch-pink); }
.dot--white { background: var(--swatch-white); }

/* --- Colour tile (Build Your Supreme step 2) ----------------------------- */
.colour-tile { display: block; cursor: pointer; }
.colour-tile__media {
  height: 120px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--line-15);
  transition: border-color var(--t-hover);
}
.colour-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.colour-tile__pending {
  font-size: 10.5px;
  color: var(--bone-40);
  text-align: center;
  padding: 0 10px;
}
.colour-tile__label {
  font-size: 12px;
  margin-top: 9px;
  color: var(--bone-55);
  transition: color var(--t-hover);
}
.option-input:checked + .colour-tile .colour-tile__media { border-color: var(--bone); }
.option-input:checked + .colour-tile .colour-tile__label { color: var(--bone); }
.option-input:focus-visible + .colour-tile .colour-tile__media { outline: 2px solid var(--bone); outline-offset: 3px; }

/* --- Single-select chip (Bespoke occasion) ------------------------------- */
.pill {
  display: inline-block;
  padding: 10px 16px;
  font-size: 13px;
  border: 1px solid var(--line-25);
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover), color var(--t-hover);
}
.option-input:checked + .pill {
  border-color: var(--bone);
  background: var(--bone);
  color: var(--onyx);
}
.option-input:focus-visible + .pill { outline: 2px solid var(--bone); outline-offset: 3px; }

/* --- Field groups -------------------------------------------------------- */
.field-group { border: 0; margin: 0 0 28px; padding: 0; }
.field-group__legend {
  padding: 0;
  font-size: 12px;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--bone-55);
  margin-bottom: 12px;
}
.field-group--tight { margin-bottom: 22px; }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.swatch-row { display: flex; gap: 22px; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.wrap-8 { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Text inputs --------------------------------------------------------- */
.input,
.textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line-25);
  color: var(--bone);
  padding: 12px 14px;
  font-size: 13.5px;
  font-family: var(--font-ui);
}
.textarea { line-height: 1.5; }
.input:focus-visible, .textarea:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }

/* Bespoke uses underline-only inputs */
.input--underline {
  border: none;
  border-bottom: 1px solid var(--line-28);
  padding: 12px 2px;
  font-size: 15px;
}
.input--boxed { border: 1px solid var(--line-28); padding: 11px 13px; font-size: 14px; width: 220px; }

/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */

.product-card { display: block; color: var(--bone); text-decoration: none; }
.product-card__media {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-image);
}
.product-card:hover .product-card__media img { transform: scale(1.045); }
.product-card__tag {
  position: absolute;
  top: 16px; left: 16px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--onyx);
  color: var(--bone);
  padding: 6px 10px;
}
.product-card__body {
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.product-card__name { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin-bottom: 6px; }
.product-card__desc { font-size: 13px; color: var(--bone-55); }
.product-card__price { font-size: 16px; color: var(--bone); white-space: nowrap; font-weight: 500; }

/* ==========================================================================
   IMAGE TILES — occasions and moments
   ========================================================================== */

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-image); }
.tile:hover img { transform: scale(1.06); }
.tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 45%, rgba(10,10,10,0.85) 100%);
}
.tile__label {
  position: absolute;
  bottom: 22px; left: 24px;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--bone);
}
.tile__arrow { position: absolute; bottom: 24px; right: 22px; color: var(--bone); font-size: 18px; }

.moment { position: relative; overflow: hidden; }
.moment img { width: 100%; height: 100%; object-fit: cover; }
.moment__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 60%, rgba(10,10,10,0.8) 100%);
}
.moment__caption { position: absolute; bottom: 14px; left: 16px; right: 12px; font-size: 13px; color: var(--bone); }

/* ==========================================================================
   TRUST
   ========================================================================== */

.trust-item__icon { margin-bottom: 16px; }
.trust-item__title { font-size: 16px; color: var(--bone); margin-bottom: 8px; font-weight: 600; }
.trust-item__desc { font-size: 13.5px; line-height: 1.55; color: var(--bone-55); }

.trust-row { display: flex; align-items: center; gap: 12px; }
.trust-row svg { flex-shrink: 0; }
.trust-row span { font-size: 12.5px; color: var(--bone-65, rgba(245,242,235,0.65)); }

/* ==========================================================================
   CART DRAWER  (DESIGN_HANDOFF §9)
   ========================================================================== */

/* `visibility` is switched with a 0s transition rather than being animated:
   animating it means the drawer is not actually visible (or focusable) until
   the slide completes, which breaks focus-on-open and leaves the panel
   unusable if the transition is stalled or the tab is backgrounded. Opening is
   instant; hiding is delayed until the slide-out has finished. The 0.4s
   transform slide is unchanged. */

.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(10, 10, 10, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-drawer), visibility 0s linear var(--t-drawer);
  /* Decorative and inert, exactly as approved: there is no click-outside-to-close. */
  pointer-events: none;
}
.cart-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-drawer), visibility 0s;
}

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 100%);
  background: var(--onyx);
  border-left: 1px solid var(--line-14);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-drawer), visibility 0s linear var(--t-drawer);
}
.cart-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--t-drawer), visibility 0s;
}

.cart-drawer__head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line-10);
}
.cart-drawer__title { display: flex; align-items: baseline; gap: 10px; }
.cart-drawer__title strong { font-family: var(--font-display); font-weight: 400; font-size: 23px; color: var(--bone); }
.cart-drawer__title span { font-size: 12px; color: var(--bone-50); }
.cart-drawer__close { display: flex; padding: 6px; color: var(--bone); }

.cart-drawer__body { flex: 1; overflow-y: auto; padding: 22px 26px; -webkit-overflow-scrolling: touch; }
.cart-drawer__foot { flex: 0 0 auto; border-top: 1px solid var(--line-14); padding: 22px 26px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }

.cart-empty { padding: 60px 0; text-align: center; }
.cart-empty p { font-size: 14px; color: var(--bone-55); margin-bottom: 18px; }

.cart-line { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-10); }
.cart-line__media {
  flex: 0 0 80px;
  height: 96px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__pending {
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--bone-40);
  text-align: center;
  padding: 0 6px;
}
.cart-line__body { flex: 1; min-width: 0; }
.cart-line__top { display: flex; justify-content: space-between; gap: 10px; }
.cart-line__name { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--bone); }
.cart-line__total { font-size: 14px; white-space: nowrap; color: var(--bone); }
.cart-line__desc { font-size: 12px; color: var(--bone-55); margin: 3px 0 8px; }
.cart-line__extra { font-size: 11px; color: var(--crimson); margin-bottom: 8px; }
.cart-line__controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.qty {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-22);
  padding: 4px 10px;
}
.qty button { font-size: 15px; padding: 2px 6px; color: var(--bone); line-height: 1; }
.qty button[disabled] { opacity: 0.35; cursor: not-allowed; }
.qty output { font-size: 12.5px; min-width: 14px; text-align: center; color: var(--bone); }

.cart-line__remove {
  font-size: 11.5px;
  color: var(--bone-45);
  text-decoration: underline;
  transition: color var(--t-button);
}
.cart-line__remove:hover { color: var(--bone); }

.cart-section__label {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-50);
  margin-bottom: 12px;
}
.cart-delivery {
  font-size: 12px;
  color: var(--bone-55);
  line-height: 1.6;
  border-top: 1px solid var(--line-10);
  padding-top: 16px;
}

.cart-totals__row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--bone-60); }
.cart-totals__row--muted { color: var(--bone-55); }
.cart-totals__grand { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 18px; }
.cart-totals__grand dt { font-size: 14px; color: var(--bone-70); }
.cart-totals__grand dd { margin: 0; font-size: 24px; color: var(--bone); }

.cart-note {
  font-size: 11.5px;
  color: var(--bone-50);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 10px;
}

/* --- Bottom-right stacking order ----------------------------------------
   Three controls can want the bottom-right corner: the floating WhatsApp
   button, the transient "Reopen Cart" pill, and (on mobile) a bottom bar.
   They must never overlap, so one slot is defined per page.

   The WhatsApp control is persistent and never moves — a control that jumps
   is worse than one that sits still. The cart pill is transient, so it takes
   the slot above whatever already occupies the corner.                      */

.reopen-pill {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: var(--z-reopen);
  background: var(--bone);
  color: var(--onyx);
  padding: 15px 22px;
  display: none;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  letter-spacing: 0.03em;
}
.reopen-pill.is-visible { display: flex; }

/* The Concierge control is bottom-right on every page (52px tall, 28px from the
   edge, so it occupies 28–80). The transient cart pill always takes the slot
   above it — one rule, no per-page exceptions. */
.reopen-pill { bottom: 92px; }

@media (max-width: 767px) {
  /* No floating utilities on mobile. The Concierge control is already replaced
     by the bottom Concierge bar, and the cart pill would float over the size
     chips, swatches and finish toggles on the narrowest screens — the very
     controls a customer is trying to press. The header cart button opens the
     drawer on every mobile screen, so nothing is lost. The approved mobile
     designs carry no cart pill either. */
  .reopen-pill { display: none !important; }
}

/* ==========================================================================
   TOUCH TARGETS
   Several approved controls are icon-sized (a 19px cart glyph, a 30px drawer
   close, a 34px swatch dot). Rather than resize them — which would change the
   approved composition — an invisible 44x44 hit area is centred on each. The
   visual is untouched; the tap target meets the minimum.
   ========================================================================== */

.cart-button,
.cart-drawer__close,
.topbar__icon { position: relative; }

.cart-button::after,
.cart-drawer__close::after,
.topbar__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* The quantity stepper's minus and plus sit 12px apart, so a 44px overlay on
   each would overlap and steal taps from its neighbour. They are widened
   directly instead — comfortably past the 24px minimum, with no overlap. */
.qty button { min-width: 32px; min-height: 32px; }

@media (max-width: 767px) {
  /* One or two pixels short of the minimum in the approved padding. */
  .pill { display: inline-flex; align-items: center; min-height: 44px; }
  .nav--build .concierge-pill,
  .nav--bespoke .concierge-pill { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ==========================================================================
   CONCIERGE HANDOVER DIALOG
   Shows the composed WhatsApp message while the production number is still a
   placeholder. Not part of the approved screens — it exists so the Concierge
   handover can be demonstrated without dialling an invented number.
   ========================================================================== */

.wa-dialog {
  width: min(520px, calc(100vw - 40px));
  background: var(--onyx);
  color: var(--bone);
  border: 1px solid var(--line-22);
  padding: 32px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.wa-dialog::backdrop { background: rgba(10, 10, 10, 0.72); }
.wa-dialog form { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.wa-dialog__close { color: var(--bone-60); padding: 4px; transition: color var(--t-button); }
.wa-dialog__close:hover { color: var(--bone); }
.wa-dialog__title { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin-bottom: 12px; }
.wa-dialog__lede { font-size: 13px; line-height: 1.6; color: var(--bone-60); margin-bottom: 20px; }
.wa-dialog__message {
  margin: 0;
  border-left: 2px solid var(--crimson);
  background: var(--surface);
  padding: 16px 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.65;
  color: var(--bone);
  white-space: pre-wrap;
  word-break: break-word;
}
.wa-dialog__meta { font-size: 11.5px; color: var(--bone-45); margin-top: 14px; letter-spacing: 0.04em; }

/* ==========================================================================
   FOOTER  (reproduces the GVisuals FooterSystem content — DESIGN_HANDOFF §7a)
   ========================================================================== */

.footer {
  background: var(--onyx);
  border-top: 1px solid var(--footer-line);
  /* Extra bottom room so the floating Concierge control and the cart pill
     never come to rest on the copyright and legal line at the end of the page. */
  padding: 64px var(--pad-x-fixed) 160px;
}
.footer__inner { max-width: var(--max-home); margin: 0 auto; }
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 56px;
  flex-wrap: wrap;
  padding-bottom: 44px;
}
.footer__brand { max-width: 320px; }
.footer__brand .wordmark { margin-bottom: 16px; }
.footer__desc { font-size: 13px; line-height: 1.6; color: var(--ink-400); }
.footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__col-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-50);
  margin-bottom: 14px;
}
.footer__col li + li { margin-top: 10px; }
.footer__col a { font-size: 13px; color: var(--ink-400); transition: color var(--t-button); }
.footer__col a:hover { color: var(--bone); }
.footer__bottom {
  border-top: 1px solid var(--footer-line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-400);
}
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal a { color: var(--ink-400); transition: color var(--t-button); }
.footer__legal a:hover { color: var(--bone); }

@media (max-width: 767px) {
  .footer { padding: 44px var(--pad-x-mobile) 32px; }
  .footer__top { gap: 32px; padding-bottom: 32px; }
  .footer__cols { gap: 40px; }
}