/**
 * WumeHealth - Sylius Shop Bundle Brand Overrides
 * Loaded on every Sylius shop frontend page (account area, login/register/
 * verify, forgotten-password, order pages, checkout stages, the Stripe pay
 * page) AFTER the Encore-built shop bundle CSS, via
 * templates/shop/stylesheets.html.twig (?v cache-buster lives there).
 *
 * V01 styled the STOCK Sylius chrome (swan navbar, bundle footer) and
 * redefined the --wume-* tokens locally with drifted values (cream #F2F0EB,
 * sand #D4C9B0) because Sylius pages did not load wume.css back then.
 *
 * V02 — full WUME-layout takeover rewrite. Sylius pages now render inside
 * the wume marketing layout (templates/bundles/SyliusShopBundle/shared/
 * layout/base.html.twig), which brings wume.css and its :root tokens to
 * every page. Accordingly: (1) local --wume-* :root redefinitions DROPPED —
 * tokens come from wume.css (#F4F1EB cream, #E3DDCD sand) so Sylius pages
 * match the marketing pages exactly; (2) stock-chrome rules (navbar, bundle
 * footer, sylius logo) DROPPED — that chrome no longer renders; (3) every
 * rule scoped under body.is-sylius-page so nothing leaks into marketing
 * pages; (4) primary actions are SAGE with uppercase tracking (matching the
 * marketing "Sign In"/CTA buttons) instead of V01's black; (5) form fields
 * match the wume account page: square, 1px #7a7875 border, transparent
 * background, no focus glow; (6) NEW: page frame padding below the fixed
 * wume navbar, fixed flash overlay, list-group (account side menu),
 * dropdowns, invalid-feedback tone, modals. !important is kept only where
 * Bootstrap utilities carry it themselves (badge/text-* utilities) and on
 * the shop bundle's own !important-backed slots.
 *
 * V03 — CATEGORICAL palette takeover + wume type scale. V02 mapped a hand-
 * picked list of component classes, so anything not enumerated (button
 * variants like info/warning, focus glows, utility color classes, dropdown
 * active states, native widget accents, text selection, autofill tint) fell
 * through to Bootstrap's stock BLUE. V03 rethemes the SYSTEM instead:
 * (1) the full --bs-* semantic variable table at the scope root;
 * (2) EVERY .btn variant + outline variant via Bootstrap's own per-class
 *     --bs-btn-* slots (hover/active/focus-glow/disabled follow for free);
 * (3) every .alert variant via --bs-alert-*;
 * (4) every .text-bg-*, .bg-*, .text-*, .link-* utility (they carry
 *     !important in Bootstrap, so the overrides do too);
 * (5) interactive + native states: focus rings sage, accent-color sage
 *     (date picker / checkbox / radio / progress natives), ::selection sand,
 *     autofill tint neutralized to cream, dropdown/nav-pill/progress actives;
 * (6) type scale set to the wume standard: h1 = 2.2rem exactly matching
 *     .wume-section-title (1.8rem <992px), then h2 1.7rem, h3 1.35rem,
 *     h4 1.15rem, h5/h6 1rem (V02's h1 was an off-standard 2.6rem).
 * Palette: cream/sand/sage/lbrown/brown/black; #7a7875 input borders per the
 * figma account page; #8a3a2e error tone matching the shipped sign-in error.
 *
 * V04 — EXPLICIT typography fundamentals, so nothing is decided by whatever
 * Bootstrap/Sylius build happens to be installed: (1) body gains font-size
 * 1rem, font-weight var(--wume-w-body, 400), line-height
 * var(--wume-lead-body, 1.4) — weight and leading previously fell through to
 * the shop bundle's Bootstrap body rule (400/1.5; leading therefore tightens
 * to the wume-standard 1.4); (2) b/strong pinned to Medium 500 — we ship NO
 * 700 file (Unica77 Regular 400 + Medium 500 only), so Bootstrap's
 * b,strong{font-weight:bolder} made browsers synthesize a fake bold (the
 * dashboard customer name); (3) text inputs get the same explicit weight.
 * Pairs stylesheets.html.twig V07 (?v=6).
 *
 * V05 — account-page chrome standardization (user-reported): (1) navbar
 * pinned again — the shop bundle's compiled Bootstrap loads after wume.css
 * and its .navbar rule (position:relative + .5rem y-padding) beat the
 * site-wide sticky rule at equal specificity, so on Sylius pages ONLY the
 * navbar scrolled away with the page and stood 86px tall instead of 72;
 * re-asserted sticky / top:0 / padding 0 0 from this sheet (loads last,
 * carries the body-class specificity). (2) .wume-page top padding dropped
 * its nav-height term (120px -> 48px desktop, 96px -> 24px mobile): the
 * sticky navbar is IN-FLOW and already occupies its own height, so the old
 * calc double-counted it — first content sat 144px below the navbar vs the
 * ~67px marketing rhythm. Pairs stylesheets.html.twig V08 (?v=7).
 *
 * V06 — bottom double-count fix (user-reported, twin of V05's top fix): the
 * .wume-page min-height was a plain 100vh, but the sticky navbar is IN-FLOW
 * and already occupies 72px of the first viewport — the page ran exactly
 * 72px past one screen (measured: doc 1727px = 72 navbar + 1009 page + 646
 * footer reserve on a 1009px viewport), adding 72px of dead scroll beyond
 * the footer reveal. Now calc(100vh - var(--wume-nav-height, 72px)).
 * Pairs stylesheets.html.twig V09 (?v=8).
 *
 * V07 — customer order page "Total:" row off the heading serif (user-
 *       reported): the stock Sylius total templates carry Bootstrap class
 *       .h5, which the V03 type-scale rules send to Rhymes Text — a 16px
 *       DATA row in the display serif beside all-sans siblings. Overridden
 *       templates (templates/bundles/SyliusShopBundle/shared/order/show/
 *       summary/table_summary/total/) now use .wume-order-total, styled
 *       here: Unica 77 Medium 500, 1.05rem. Pairs stylesheets.html.twig
 *       V10 (?v=9).
 * V08 — account/dashboard footer now visible (user-reported): the marketing
 *       footer is position:fixed behind the page (reveal-on-scroll), and the
 *       .wume-page min-height:calc(100vh - nav) forced a full-screen scroll
 *       before it appeared — so on short account pages the WUME footer sat just
 *       past the fold even on a 2000px-tall window. On body.is-sylius-page the
 *       page is now a flex column >=100vh with the content flex-growing and the
 *       footer put back in normal flow, so the footer sits at the bottom of the
 *       viewport and is always visible. Marketing pages keep the reveal (scoped
 *       to is-sylius-page). Pairs stylesheets.html.twig V11 (?v=10).
 * V09 — account address-book page re-skinned to the premium look, scoped to
 *       .wume-addressbook (a wrapper added by the account/address_book/index.html.twig
 *       override): cream cards with generous padding, the recipient name on the
 *       heading face, muted address lines, a roomier sage "Default" pill, and the
 *       Edit / Set-as-default btn-outline-gray actions given the WUME black-outline
 *       treatment the global skin never covered. Pairs stylesheets.html.twig V12 (?v=11).
 */

/* ── Unica 77 LL Web Fonts (same files as wume.css; harmless duplicate,
      kept as a safety net should any shop surface ever render without the
      wume layout) ── */
@font-face {
    font-family: 'Unica77';
    src: url('/fonts/Unica77LLWeb-Regular.woff2') format('woff2'),
         url('/fonts/Unica77LLWeb-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unica77';
    src: url('/fonts/Unica77LLWeb-Medium.woff2') format('woff2'),
         url('/fonts/Unica77LLWeb-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ── Bootstrap semantic variable table — the FULL set, so no component can
      fall back to stock blue in any state ── */
body.is-sylius-page {
    --bs-primary: #949B88;
    --bs-primary-rgb: 148, 155, 136;
    --bs-secondary: #E3DDCD;
    --bs-secondary-rgb: 227, 221, 205;
    --bs-success: #949B88;
    --bs-success-rgb: 148, 155, 136;
    --bs-info: #E3DDCD;
    --bs-info-rgb: 227, 221, 205;
    --bs-warning: #715434;
    --bs-warning-rgb: 113, 84, 52;
    --bs-danger: #8a3a2e;
    --bs-danger-rgb: 138, 58, 46;
    --bs-light: #F4F1EB;
    --bs-light-rgb: 244, 241, 235;
    --bs-dark: #000000;
    --bs-dark-rgb: 0, 0, 0;

    --bs-primary-bg-subtle: #e9ece3;
    --bs-primary-border-subtle: #949B88;
    --bs-primary-text-emphasis: #4D3D2D;
    --bs-secondary-bg-subtle: #E3DDCD;
    --bs-secondary-border-subtle: #E3DDCD;
    --bs-secondary-text-emphasis: #000000;
    --bs-success-bg-subtle: #e9ece3;
    --bs-success-border-subtle: #949B88;
    --bs-success-text-emphasis: #4D3D2D;
    --bs-info-bg-subtle: #E3DDCD;
    --bs-info-border-subtle: #E3DDCD;
    --bs-info-text-emphasis: #000000;
    --bs-warning-bg-subtle: #ece4d4;
    --bs-warning-border-subtle: #715434;
    --bs-warning-text-emphasis: #4D3D2D;
    --bs-danger-bg-subtle: #f0e4e0;
    --bs-danger-border-subtle: #8a3a2e;
    --bs-danger-text-emphasis: #8a3a2e;

    --bs-body-color: #000000;
    --bs-body-color-rgb: 0, 0, 0;
    --bs-body-bg: #F4F1EB;
    --bs-body-bg-rgb: 244, 241, 235;
    --bs-link-color: #000000;
    --bs-link-color-rgb: 0, 0, 0;
    --bs-link-hover-color: #715434;
    --bs-link-hover-color-rgb: 113, 84, 52;
    --bs-border-color: #E3DDCD;
    --bs-focus-ring-color: rgba(148, 155, 136, 0.4);
    --bs-highlight-bg: #E3DDCD;

    --tblr-primary: #949B88;
    --tblr-primary-rgb: 148, 155, 136;

    /* Native widgets: date/time pickers, checkboxes, radios, progress. */
    accent-color: #949B88;
}

/* Text selection + browser autofill tint (both default to pale blue). */
body.is-sylius-page ::selection {
    background: var(--wume-sand);
    color: var(--wume-black);
}
body.is-sylius-page input:-webkit-autofill,
body.is-sylius-page input:-webkit-autofill:hover,
body.is-sylius-page input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--wume-cream) inset;
    -webkit-text-fill-color: var(--wume-black);
    transition: background-color 99999s ease-in-out 0s;
}
/* Keyboard focus outline (falls back to blue in most browsers). */
body.is-sylius-page :focus-visible {
    outline-color: var(--wume-sage);
}

/* ── Page frame: body, navbar re-assert, and content clearance ── */
/* The shop bundle's compiled Bootstrap loads AFTER wume.css; its .navbar
   rule (position:relative + .5rem y-padding) would otherwise beat the
   site-wide sticky navbar at equal specificity — the navbar then scrolls
   away with the page and stands 86px tall instead of 72. Same values as
   wume.css, re-declared from the last-loaded sheet. */
body.is-sylius-page .wume-navbar {
    position: sticky;
    top: 0;
    padding: 0 0;
}
body.is-sylius-page {
    background: var(--wume-cream) !important;
    color: var(--wume-black);
    font-family: var(--wume-font-body) !important;
    /* Explicit fundamentals — never inherited from the shop bundle's
       Bootstrap body rule (which says 400/1.5; the wume standard is 1.4). */
    font-size: 1rem;
    font-weight: var(--wume-w-body, 400);
    line-height: var(--wume-lead-body, 1.4);
    /* Account/dashboard footer visibility (V08): make the page a flex column at
       least one viewport tall so the content can grow and push the footer to the
       bottom of the viewport (see the .wume-page + .wume-footer overrides below). */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
body.is-sylius-page .wume-page {
    /* The sticky navbar is in-flow (occupies its own height) — this padding
       is purely the visual gap below it, tuned to the marketing rhythm. */
    padding-top: 48px;
    padding-bottom: 96px;
    /* The content flex-grows to fill the column, so the footer is pushed to the
       bottom of the viewport on short pages. No forced 100vh min-height (V07 and
       earlier) — that parked the in-flow footer just past the fold, so even a
       2000px-tall window never showed it. */
    flex: 1 0 auto;
    min-height: 0;
    background: var(--wume-cream);
}

/* The marketing footer is position:fixed behind the page (a reveal-on-scroll
   effect). That hides it below the fold on the account/dashboard pages, so put
   it back in normal flow here — it then sits directly under the content and is
   pushed to the bottom of the viewport by the flex-grow above. Marketing pages
   (no is-sylius-page) keep the reveal. */
body.is-sylius-page .wume-footer {
    position: static;
    z-index: auto;
}
@media (max-width: 991.98px) {
    body.is-sylius-page .wume-page {
        padding-top: 24px;
        padding-bottom: 64px;
    }
}

/* ── Typography ── */
body.is-sylius-page h1, body.is-sylius-page h2, body.is-sylius-page h3,
body.is-sylius-page h4, body.is-sylius-page h5, body.is-sylius-page h6,
body.is-sylius-page .h1, body.is-sylius-page .h2, body.is-sylius-page .h3,
body.is-sylius-page .h4, body.is-sylius-page .h5, body.is-sylius-page .h6 {
    font-family: var(--wume-font-heading) !important;
    font-weight: var(--wume-w-heading, 300);
    letter-spacing: var(--wume-tracking-heading, -0.03em);
    color: var(--wume-black);
}
/* Type scale = the wume standard: h1 mirrors .wume-section-title (2.2rem,
   1.8rem <992px per the marketing umbrella), then a modest descent. */
body.is-sylius-page h1, body.is-sylius-page .h1 { font-size: 2.2rem; margin-bottom: 16px; }
body.is-sylius-page h2, body.is-sylius-page .h2 { font-size: 1.7rem; }
body.is-sylius-page h3, body.is-sylius-page .h3 { font-size: 1.35rem; }
body.is-sylius-page h4, body.is-sylius-page .h4 { font-size: 1.15rem; }
body.is-sylius-page h5, body.is-sylius-page .h5,
body.is-sylius-page h6, body.is-sylius-page .h6 { font-size: 1rem; }
@media (max-width: 991.98px) {
    body.is-sylius-page h1, body.is-sylius-page .h1 { font-size: 1.8rem; }
}
/* Bold elements (e.g. the dashboard customer name): we ship NO 700-weight
   file — Unica77 Regular 400 + Medium 500 only — so Bootstrap's
   b,strong{font-weight:bolder} (=700) forces the browser to synthesize a
   fake bold. Pin to the real Medium cut instead. */
body.is-sylius-page b, body.is-sylius-page strong {
    font-weight: var(--wume-w-sub, 500);
}
body.is-sylius-page a { color: var(--wume-black); text-underline-offset: 3px; }
body.is-sylius-page a:hover { color: var(--wume-lbrown); }
body.is-sylius-page hr { border-color: #d9d2c2; opacity: 1; }
body.is-sylius-page .text-muted,
body.is-sylius-page .text-secondary { color: var(--wume-lbrown) !important; }
body.is-sylius-page .text-warning,
body.is-sylius-page .text-info,
body.is-sylius-page .text-success,
body.is-sylius-page .text-danger { color: var(--wume-black) !important; }

/* ── Buttons ── */
body.is-sylius-page .btn {
    border-radius: 0 !important;
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub, 500);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps, 0.06em);
    text-transform: uppercase;
    padding: 13px 26px;
}
body.is-sylius-page .btn-sm { padding: 9px 16px; font-size: 0.72rem; }
/* Every variant is rethemed through Bootstrap's own per-class --bs-btn-*
   slots, so hover / pressed / focus-glow / disabled states follow without
   per-state rules — and NOTHING keeps a stock blue state. */
body.is-sylius-page .btn-primary,
body.is-sylius-page .btn-success {
    --bs-btn-color: #F4F1EB;
    --bs-btn-bg: #949B88;
    --bs-btn-border-color: #949B88;
    --bs-btn-hover-color: #F4F1EB;
    --bs-btn-hover-bg: #4D3D2D;
    --bs-btn-hover-border-color: #4D3D2D;
    --bs-btn-active-color: #F4F1EB;
    --bs-btn-active-bg: #4D3D2D;
    --bs-btn-active-border-color: #4D3D2D;
    --bs-btn-disabled-color: #F4F1EB;
    --bs-btn-disabled-bg: #949B88;
    --bs-btn-disabled-border-color: #949B88;
    --bs-btn-focus-shadow-rgb: 148, 155, 136;
}
body.is-sylius-page .btn-dark {
    --bs-btn-color: #F4F1EB;
    --bs-btn-bg: #000000;
    --bs-btn-border-color: #000000;
    --bs-btn-hover-color: #F4F1EB;
    --bs-btn-hover-bg: #4D3D2D;
    --bs-btn-hover-border-color: #4D3D2D;
    --bs-btn-active-color: #F4F1EB;
    --bs-btn-active-bg: #4D3D2D;
    --bs-btn-active-border-color: #4D3D2D;
    --bs-btn-disabled-color: #F4F1EB;
    --bs-btn-disabled-bg: #000000;
    --bs-btn-disabled-border-color: #000000;
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
}
body.is-sylius-page .btn-secondary,
body.is-sylius-page .btn-info,
body.is-sylius-page .btn-light,
body.is-sylius-page .btn-outline-primary,
body.is-sylius-page .btn-outline-secondary,
body.is-sylius-page .btn-outline-success,
body.is-sylius-page .btn-outline-info,
body.is-sylius-page .btn-outline-light,
body.is-sylius-page .btn-outline-dark {
    --bs-btn-color: #000000;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #000000;
    --bs-btn-hover-color: #F4F1EB;
    --bs-btn-hover-bg: #000000;
    --bs-btn-hover-border-color: #000000;
    --bs-btn-active-color: #F4F1EB;
    --bs-btn-active-bg: #000000;
    --bs-btn-active-border-color: #000000;
    --bs-btn-disabled-color: #000000;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #000000;
    --bs-btn-focus-shadow-rgb: 148, 155, 136;
}
body.is-sylius-page .btn-warning,
body.is-sylius-page .btn-outline-warning {
    --bs-btn-color: #715434;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #715434;
    --bs-btn-hover-color: #F4F1EB;
    --bs-btn-hover-bg: #715434;
    --bs-btn-hover-border-color: #715434;
    --bs-btn-active-color: #F4F1EB;
    --bs-btn-active-bg: #715434;
    --bs-btn-active-border-color: #715434;
    --bs-btn-disabled-color: #715434;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #715434;
    --bs-btn-focus-shadow-rgb: 113, 84, 52;
}
body.is-sylius-page .btn-danger,
body.is-sylius-page .btn-outline-danger {
    --bs-btn-color: #8a3a2e;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #8a3a2e;
    --bs-btn-hover-color: #F4F1EB;
    --bs-btn-hover-bg: #8a3a2e;
    --bs-btn-hover-border-color: #8a3a2e;
    --bs-btn-active-color: #F4F1EB;
    --bs-btn-active-bg: #8a3a2e;
    --bs-btn-active-border-color: #8a3a2e;
    --bs-btn-disabled-color: #8a3a2e;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #8a3a2e;
    --bs-btn-focus-shadow-rgb: 138, 58, 46;
}
body.is-sylius-page .btn-link {
    --bs-btn-color: #000000;
    --bs-btn-hover-color: #715434;
    --bs-btn-active-color: #715434;
    --bs-btn-focus-shadow-rgb: 148, 155, 136;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: transparent;
}

/* ── Forms — match the wume /account sign-in fields ── */
body.is-sylius-page .form-control,
body.is-sylius-page .form-select,
body.is-sylius-page input[type="text"],
body.is-sylius-page input[type="email"],
body.is-sylius-page input[type="password"],
body.is-sylius-page input[type="number"],
body.is-sylius-page input[type="tel"],
body.is-sylius-page input[type="search"],
body.is-sylius-page textarea,
body.is-sylius-page select {
    background: transparent !important;
    border: 1px solid #7a7875 !important;
    border-radius: 0 !important;
    color: var(--wume-black) !important;
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-body, 400);
    font-size: 0.95rem;
    padding: 13px 16px;
    line-height: 1.45;
}
body.is-sylius-page .form-control:focus,
body.is-sylius-page .form-select:focus,
body.is-sylius-page input:focus,
body.is-sylius-page textarea:focus {
    background: transparent !important;
    border-color: var(--wume-black) !important;
    box-shadow: none !important;
    color: var(--wume-black) !important;
    outline: none;
}
body.is-sylius-page .form-control::placeholder { color: #7a7875; }
body.is-sylius-page .form-label,
body.is-sylius-page label.col-form-label,
body.is-sylius-page legend {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub, 500);
    font-size: 0.72rem;
    letter-spacing: var(--wume-tracking-caps, 0.06em);
    text-transform: uppercase;
    color: var(--wume-black);
    margin-bottom: 6px;
}
body.is-sylius-page .form-check-input {
    border-radius: 0;
    border-color: #7a7875;
    background-color: transparent;
}
body.is-sylius-page .form-check-input:checked {
    background-color: var(--wume-sage) !important;
    border-color: var(--wume-sage) !important;
}
body.is-sylius-page .form-check-input:focus { box-shadow: none; }
body.is-sylius-page .invalid-feedback,
body.is-sylius-page .form-error-message { color: #8a3a2e; }
body.is-sylius-page .form-control.is-invalid,
body.is-sylius-page .form-select.is-invalid { border-color: #8a3a2e !important; }
body.is-sylius-page .input-group-text {
    border-radius: 0;
    border: 1px solid #7a7875;
    background: var(--wume-sand);
    color: var(--wume-black);
}

/* ── Cards (dashboard blocks, addresses, order summary) ── */
body.is-sylius-page .card {
    background: transparent !important;
    border: 1px solid #d9d2c2 !important;
    border-radius: 0 !important;
    box-shadow: none;
    color: var(--wume-black);
}
body.is-sylius-page .card-header,
body.is-sylius-page .card-footer {
    background: transparent !important;
    border-color: #d9d2c2 !important;
    color: var(--wume-black);
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading, 300);
}
body.is-sylius-page .card-title {
    font-family: var(--wume-font-heading);
    color: var(--wume-black);
}

/* ── Account: address book (V09, premium re-skin — scoped to .wume-addressbook,
      a wrapper added by the account/address_book/index.html.twig override). The
      stock page renders Bootstrap cards (.card > .card-body) holding the address
      content (.d-flex.flex-column.mb-4), a sage "Default" .badge, and the Edit /
      Delete / Set-as-default actions (.d-flex.flex-sm-row). ── */
body.is-sylius-page .wume-addressbook .card {
    background: var(--wume-cream) !important;
    border: 1px solid var(--wume-sand) !important;
    margin-bottom: 18px;
}
body.is-sylius-page .wume-addressbook .card-body {
    padding: 24px 26px;
}
/* Recipient name (renders as <strong>) → heading face for hierarchy. */
body.is-sylius-page .wume-addressbook .card-body .d-flex.flex-column.mb-4 strong {
    display: block;
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading, 300);
    font-size: 1.15rem;
    color: var(--wume-black);
    margin-bottom: 6px;
}
/* Address lines: comfortable rhythm, gently muted. */
body.is-sylius-page .wume-addressbook .card-body .d-flex.flex-column.mb-4 {
    color: #5a5854;
    line-height: 1.7;
}
/* "Default" pill — already sage from the global .badge rule; give it room. */
body.is-sylius-page .wume-addressbook .badge {
    padding: 6px 12px;
    font-size: 0.68rem;
}
/* Actions row: sit clear of the address, tidy gap. */
body.is-sylius-page .wume-addressbook .card-body .d-flex.flex-sm-row {
    margin-top: 18px;
    gap: 10px;
}
/* Edit / Set-as-default use .btn-outline-gray, which the global skin never
   covered (they kept Bootstrap's grey) — give them the WUME black outline via
   Bootstrap's own per-button slots so hover/active follow automatically. */
body.is-sylius-page .wume-addressbook .btn-outline-gray {
    --bs-btn-color: var(--wume-black);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #b3afa6;
    --bs-btn-hover-color: #F4F1EB;
    --bs-btn-hover-bg: var(--wume-black);
    --bs-btn-hover-border-color: var(--wume-black);
    --bs-btn-active-color: #F4F1EB;
    --bs-btn-active-bg: var(--wume-black);
    --bs-btn-active-border-color: var(--wume-black);
    --bs-btn-focus-shadow-rgb: 148, 155, 136;
}
/* "Add address" button row (header) — space it from the list below. */
body.is-sylius-page .wume-addressbook .text-end.my-4 {
    margin-bottom: 22px !important;
}

/* ── Tables (order history, cart lines, order summary) ── */
body.is-sylius-page .table {
    color: var(--wume-black);
    background: transparent;
    border-color: #d9d2c2;
}
body.is-sylius-page .table > :not(caption) > * > * {
    background: transparent;
    border-color: #d9d2c2;
    padding: 14px 12px;
}
body.is-sylius-page .table thead th,
body.is-sylius-page .table > thead {
    background: transparent !important;
    border-bottom: 1px solid var(--wume-black) !important;
    color: var(--wume-black) !important;
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub, 500);
    font-size: 0.72rem;
    letter-spacing: var(--wume-tracking-caps, 0.06em);
    text-transform: uppercase;
}
body.is-sylius-page .table-hover > tbody > tr:hover > * {
    background-color: var(--wume-sand) !important;
    color: var(--wume-black);
}

/* ── Alerts + the fixed flash overlay ── */
body.is-sylius-page .alert {
    border-radius: 0 !important;
    font-family: var(--wume-font-body);
    /* Default slot values — cover ANY variant not listed below (primary,
       secondary, light, dark, plus plugin-invented ones). */
    --bs-alert-bg: var(--wume-sand);
    --bs-alert-color: var(--wume-black);
    --bs-alert-border-color: var(--wume-sand);
    --bs-alert-link-color: var(--wume-black);
}
body.is-sylius-page .alert-primary,
body.is-sylius-page .alert-secondary,
body.is-sylius-page .alert-info,
body.is-sylius-page .alert-light,
body.is-sylius-page .alert-dark {
    --bs-alert-bg: var(--wume-sand);
    --bs-alert-color: var(--wume-black);
    --bs-alert-border-color: var(--wume-sand);
    --bs-alert-link-color: var(--wume-black);
}
body.is-sylius-page .alert-success {
    --bs-alert-bg: #e9ece3;
    --bs-alert-color: var(--wume-black);
    --bs-alert-border-color: var(--wume-sage);
    --bs-alert-link-color: var(--wume-black);
}
body.is-sylius-page .alert-warning {
    --bs-alert-bg: #ece4d4;
    --bs-alert-color: var(--wume-black);
    --bs-alert-border-color: var(--wume-lbrown);
    --bs-alert-link-color: var(--wume-black);
}
body.is-sylius-page .alert-danger,
body.is-sylius-page .alert-error {
    --bs-alert-bg: #f0e4e0;
    --bs-alert-color: var(--wume-black);
    --bs-alert-border-color: #8a3a2e;
    --bs-alert-link-color: #8a3a2e;
}
body.is-sylius-page .alert .close { cursor: pointer; }

body.is-sylius-page .wume-sylius-flashes {
    position: fixed;
    top: calc(var(--wume-nav-height, 72px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1085;
    width: min(640px, calc(100vw - 32px));
}
body.is-sylius-page .wume-sylius-flashes .alert {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
body.is-sylius-page .wume-sylius-flashes:empty { display: none; }

/* ── Badges (VERIFIED, order states) ── */
body.is-sylius-page .badge {
    border-radius: 0 !important;
    font-weight: var(--wume-w-sub, 500);
    letter-spacing: var(--wume-tracking-caps, 0.06em);
    text-transform: uppercase;
    background-color: var(--wume-sage) !important;
    color: var(--wume-cream) !important;
}

/* ── Color utility classes — Bootstrap declares these with !important, so
      matching force is required. Every semantic slot lands on the palette. ── */
body.is-sylius-page .text-bg-primary,
body.is-sylius-page .text-bg-success {
    background-color: var(--wume-sage) !important;
    color: var(--wume-cream) !important;
}
body.is-sylius-page .text-bg-secondary,
body.is-sylius-page .text-bg-info,
body.is-sylius-page .text-bg-light {
    background-color: var(--wume-sand) !important;
    color: var(--wume-black) !important;
}
body.is-sylius-page .text-bg-warning {
    background-color: var(--wume-lbrown) !important;
    color: var(--wume-cream) !important;
}
body.is-sylius-page .text-bg-danger {
    background-color: #8a3a2e !important;
    color: var(--wume-cream) !important;
}
body.is-sylius-page .text-bg-dark {
    background-color: var(--wume-black) !important;
    color: var(--wume-cream) !important;
}
body.is-sylius-page .bg-primary,
body.is-sylius-page .bg-success { background-color: var(--wume-sage) !important; }
body.is-sylius-page .bg-secondary,
body.is-sylius-page .bg-info,
body.is-sylius-page .bg-light { background-color: var(--wume-sand) !important; }
body.is-sylius-page .bg-warning { background-color: var(--wume-lbrown) !important; }
body.is-sylius-page .bg-danger { background-color: #8a3a2e !important; }
body.is-sylius-page .bg-dark { background-color: var(--wume-black) !important; }
body.is-sylius-page .text-primary,
body.is-sylius-page .text-info { color: var(--wume-black) !important; }
body.is-sylius-page .link-primary,
body.is-sylius-page .link-secondary,
body.is-sylius-page .link-success,
body.is-sylius-page .link-info,
body.is-sylius-page .link-dark {
    color: var(--wume-black) !important;
}
body.is-sylius-page .link-primary:hover,
body.is-sylius-page .link-secondary:hover,
body.is-sylius-page .link-success:hover,
body.is-sylius-page .link-info:hover,
body.is-sylius-page .link-dark:hover {
    color: var(--wume-lbrown) !important;
}
body.is-sylius-page .link-danger { color: #8a3a2e !important; }
body.is-sylius-page .link-warning { color: var(--wume-lbrown) !important; }

/* ── List groups (account side menu) ── */
body.is-sylius-page .list-group { border-radius: 0; }
body.is-sylius-page .list-group-item {
    background: transparent;
    border-color: #d9d2c2;
    color: var(--wume-black);
}
body.is-sylius-page .list-group-item.active,
body.is-sylius-page .list-group-item.active:hover {
    background: var(--wume-sage);
    border-color: var(--wume-sage);
    color: var(--wume-cream);
}
body.is-sylius-page .list-group-item-action:hover { background: var(--wume-sand); }

/* ── Dropdowns / pagination ── */
body.is-sylius-page .dropdown-menu {
    border-radius: 0;
    border: 1px solid #d9d2c2;
    background: var(--wume-cream);
}
body.is-sylius-page .dropdown-item { color: var(--wume-black); }
body.is-sylius-page .dropdown-item:hover { background: var(--wume-sand); }
body.is-sylius-page .dropdown-item.active,
body.is-sylius-page .dropdown-item:active {
    background: var(--wume-sage);
    color: var(--wume-cream);
}
body.is-sylius-page .nav-pills .nav-link.active,
body.is-sylius-page .nav-pills .show > .nav-link {
    background: var(--wume-sage);
    color: var(--wume-cream);
}
body.is-sylius-page .nav-link { color: var(--wume-black); }
body.is-sylius-page .nav-link:hover { color: var(--wume-lbrown); }
body.is-sylius-page .nav-tabs { border-color: var(--wume-sand); }
body.is-sylius-page .nav-tabs .nav-link.active {
    background: transparent;
    border-color: var(--wume-sand) var(--wume-sand) var(--wume-cream);
    color: var(--wume-black);
}
body.is-sylius-page .progress { background: var(--wume-sand); border-radius: 0; }
body.is-sylius-page .progress-bar { background-color: var(--wume-sage); }
body.is-sylius-page .form-range::-webkit-slider-thumb { background: var(--wume-sage); }
body.is-sylius-page .form-range::-moz-range-thumb { background: var(--wume-sage); }
body.is-sylius-page .form-range::-webkit-slider-runnable-track { background: var(--wume-sand); }
body.is-sylius-page .form-range::-moz-range-track { background: var(--wume-sand); }
body.is-sylius-page .pagination .page-link,
body.is-sylius-page .page-link {
    color: var(--wume-black);
    background: transparent;
    border-color: #d9d2c2;
    border-radius: 0;
}
body.is-sylius-page .pagination .page-item.active .page-link,
body.is-sylius-page .active > .page-link,
body.is-sylius-page .page-link.active {
    background: var(--wume-sage);
    border-color: var(--wume-sage);
    color: var(--wume-cream);
}

/* ── Breadcrumbs ── */
body.is-sylius-page .breadcrumb {
    background: transparent;
    font-family: var(--wume-font-body);
    font-size: 0.72rem;
    letter-spacing: var(--wume-tracking-caps, 0.06em);
    text-transform: uppercase;
    color: var(--wume-black);
}
body.is-sylius-page .breadcrumb a { text-decoration: none; }
body.is-sylius-page .breadcrumb-item.active { color: var(--wume-lbrown); }
body.is-sylius-page .breadcrumb-item + .breadcrumb-item::before { color: #a49e8f; }

/* ── Modals + backdrop ── */
body.is-sylius-page .modal-content {
    background: var(--wume-cream) !important;
    border-radius: 0 !important;
    border: 1px solid #d9d2c2;
    color: var(--wume-black);
}
body.is-sylius-page .modal-backdrop.show {
    background: var(--wume-brown);
    opacity: 0.55;
}

/* ── Stripe payment element wrapper (pay page) ── */
body.is-sylius-page #payment-element,
body.is-sylius-page #stripe-payment-element,
body.is-sylius-page .stripe-payment {
    background: var(--wume-cream);
    border: 1px solid #d9d2c2;
    padding: 16px;
}

/* ── Order summary blocks ── */
body.is-sylius-page .order-summary,
body.is-sylius-page .order-totals,
body.is-sylius-page .cart-totals,
body.is-sylius-page .payment-summary {
    background: var(--wume-cream);
    border: 1px solid #d9d2c2;
    padding: 24px;
    color: var(--wume-black);
}

/* ── Customer order page: the summary's Total row (V07) ──
   The overridden total templates drop Bootstrap's .h5 in favor of this
   class: money totals are DATA, so they use the body face at Medium — not
   the display serif the type scale reserves for headings. */
body.is-sylius-page .wume-order-total {
    font-family: var(--wume-font-body) !important;
    font-weight: var(--wume-w-sub, 500);
    font-size: 1.05rem;
    letter-spacing: normal;
    color: var(--wume-black);
}