/* =====================================================================================================
   3 Eli v17 visual identity (1 Oct 2026) - "warm editorial luxury with contemporary product presentation".
   Replaces the v16 warm override (one-colour swap) and the v15 footer addendum. Loaded last by
   mu-plugins/eli-warm-theme.php. Presentation only: no content, URL, SEO or workflow changes.

   Colour roles (all text pairings measured, WCAG 2.x):
   surface  ivory #FAF7F2 page | white #FFF reading panels, cards, forms | sand #F3ECE2 quiet UI fills
   ink      #202536 text (14.2:1 on ivory) | ink-2 #625F5B secondary text (5.9:1 ivory, 6.4:1 white)
   action   burnt #B83B24 primary buttons, white text 5.7:1 | hover #8E2C19 (white 8.3:1)
   link     burnt #B83B24 on ivory/white 5.3-5.7:1, underlined; never persimmon for small text
   accent   persimmon #EF7352 decorative only (shapes, dots, rules) - text only on ink (5.3:1)
   promo    apricot #F4C7AF footer, hero backdrop (ink 9.9:1, deep rust #8E2C19 headings 5.4:1)
   editorial sage #DCE6D8 / tint #ECF2E9, lilac #E6DFF1 / tint #F1ECF7 (ink 11.7-13:1)
   selected  ink fill + white text (chips, options, current tabs) - distinct from the primary action
   status   success #1E6A45 on #E4F1E7 5.6:1 ✓ | warning #6E4A00 on #FDF0D3 7.0:1 ! | error #A3172B on #FCE8EA 6.6:1 ×
   border   #E6DDD2 hairlines (decorative) | #8A8178 form controls 3.8:1 | focus ring ink, apricot on ink
   ===================================================================================================== */
:root {
  --id-ivory: #FAF7F2; --id-white: #FFFFFF; --id-sand: #F3ECE2; --id-ink: #202536; --id-ink-2: #625F5B; --id-ink-3: #57534E;
  --id-burnt: #B83B24; --id-burnt-dark: #8E2C19; --id-rust: #8E2C19; --id-persimmon: #EF7352; --id-apricot: #F4C7AF; --id-apricot-2: #F7D6C3;
  --id-apricot-tint: #FBE9DE; --id-sage: #DCE6D8; --id-sage-tint: #ECF2E9; --id-lilac: #E6DFF1; --id-lilac-tint: #F1ECF7; --id-lilac-ink: #6B5A93;
  --id-line: #E6DDD2; --id-line-2: #D8CDBF; --id-control: #8A8178;
  --id-ok: #1E6A45; --id-ok-bg: #E4F1E7; --id-warn: #6E4A00; --id-warn-bg: #FDF0D3; --id-bad: #A3172B; --id-bad-bg: #FCE8EA;
  --id-radius: 16px; --id-radius-sm: 10px; --id-ease: cubic-bezier(.2, .7, .2, 1); --id-t: 160ms;
  --id-shadow: 0 1px 2px rgba(32, 37, 54, .05); --id-shadow-hover: 0 1px 2px rgba(32, 37, 54, .05), 0 18px 36px -22px rgba(32, 37, 54, .28);

  /* legacy tokens mapped to roles (older stylesheets keep working) */
  --navy: var(--id-ink); --ink: var(--id-ink); --c-ink: var(--id-ink); --c-ink-2: var(--id-ink-2);
  --cobalt: var(--id-burnt); --cobalt-dark: var(--id-burnt-dark); --cobalt-50: var(--id-sand); --cobalt-100: #EADFD1;
  --violet: var(--id-lilac-ink); --violet-deep: #54467A; --violet-50: var(--id-lilac-tint); --violet-100: var(--id-lilac);
  --royal: var(--id-burnt); --coral: var(--id-persimmon); --coral-50: var(--id-apricot-tint);
  --porcelain: var(--id-ivory); --warm: var(--id-ivory); --warm-2: var(--id-sand); --c-bg: var(--id-ivory);
  --c-line: var(--id-line); --c-card-line: var(--id-line); --c-line-strong: var(--id-control); --c-focus: var(--id-ink);
  --lux-ink: var(--id-ink); --lux-navy: var(--id-ink); --lux-royal: var(--id-burnt); --lux-violet: var(--id-lilac-ink); --lux-blue: var(--id-burnt);
  --lux-mist: var(--id-sand); --lux-pearl: var(--id-ivory); --lux-surface: var(--id-white); --lux-line: var(--id-line);
  --lux-glow-blue: transparent; --lux-glow-violet: transparent; --tint: var(--id-sand);
  --lux-shadow: var(--id-shadow); --shadow-cobalt: 0 10px 22px -14px rgba(142, 44, 25, .55);
  --c-warn-bg: var(--id-warn-bg); --c-warn-ink: var(--id-warn); --c-error: var(--id-bad); --c-error-bg: var(--id-bad-bg);
  --mint-50: var(--id-ok-bg); --mint-ink: var(--id-ok); --mint: var(--id-sage); /* decorative step markers */
}

/* ---------- base surfaces and type ---------- */
html { background: var(--id-ivory); }
body { background: var(--id-ivory); color: var(--id-ink); }
h1, h2, h3, h4 { color: var(--id-ink); font-weight: 700; text-wrap: balance; }
h1 { letter-spacing: -.028em; line-height: 1.06; }
h2 { letter-spacing: -.022em; line-height: 1.12; }
h3 { font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
p, li, dd { text-wrap: pretty; }
.entry-content p, .prose p, .lead { max-width: 68ch; }
.muted, .hint, small { color: var(--id-ink-2); }
::selection { background: var(--id-apricot); color: var(--id-ink); }
.kicker, .eyebrow { font: 700 .75rem/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--id-burnt) !important; }
.eyebrow::before { background: var(--id-persimmon) !important; }

/* links: burnt, underline appears clearly; colour + underline (never colour alone) */
.prose a:not(.btn), .entry-content p > a:not(.btn):not(.arrow-link), .portal :is(p, td, dd, li) > a:not(.btn):not(.chip) { color: var(--id-burnt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:not(.btn):hover, .entry-content p > a:not(.btn):not(.arrow-link):hover, .portal :is(p, td, dd, li) > a:not(.btn):not(.chip):hover { color: var(--id-burnt-dark); text-decoration-thickness: 2px; }
.arrow-link, .section-head > a { color: var(--id-burnt) !important; text-decoration: none; }
.arrow-link:hover { color: var(--id-burnt-dark) !important; text-decoration: underline; text-underline-offset: 4px; }

/* one focus language everywhere: ink ring on light, apricot ring on ink */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--id-ink); outline-offset: 2px; }
:where(.loop, .on-ink) :where(a, button, input, select, summary):focus-visible { outline-color: var(--id-apricot); }

/* ---------- logo: never squeezed, correct file per background ---------- */
.site-header .logo { flex: 0 0 auto; padding-right: 4px; }
.site-header .logo__img { flex: none; max-width: none; width: auto; height: 34px; object-fit: contain; }
@media (max-width: 1180px) and (min-width: 900px) { .site-header .wrap { gap: var(--s3); } .site-header .logo__img { height: 30px; } }
.footer-logo img { width: 112px; height: auto; }

/* ---------- buttons: roles and states ---------- */
.btn { --b-bg: var(--id-burnt); --b-fg: #fff; --b-bd: var(--id-burnt); font-weight: 700; letter-spacing: .005em; transition: background-color var(--id-t) var(--id-ease), border-color var(--id-t) var(--id-ease), color var(--id-t) var(--id-ease), box-shadow var(--id-t) var(--id-ease), transform var(--id-t) var(--id-ease); }
.btn:hover { --b-bg: var(--id-burnt-dark); --b-bd: var(--id-burnt-dark); --b-fg: #fff; box-shadow: var(--shadow-cobalt); }
.btn::after { display: none; }
.btn--secondary { --b-bg: var(--id-white); --b-fg: var(--id-ink); --b-bd: var(--id-control); }
.btn--secondary:hover { --b-bg: var(--id-ink); --b-bd: var(--id-ink); --b-fg: #fff; box-shadow: none; }
.btn--ghost { --b-bg: transparent; --b-fg: var(--id-burnt); --b-bd: transparent; }
.btn--ghost:hover { --b-bg: var(--id-sand); --b-fg: var(--id-burnt-dark); --b-bd: transparent; box-shadow: none; }
.btn--light { --b-bg: var(--id-ivory); --b-fg: var(--id-ink); --b-bd: var(--id-ivory); }
.btn--light:hover { --b-bg: #fff; --b-bd: #fff; --b-fg: var(--id-ink); }
.btn--outline-light { --b-bg: transparent; --b-fg: #fff; --b-bd: rgba(255, 255, 255, .7); }
.btn--outline-light:hover { --b-bg: rgba(255, 255, 255, .12); --b-bd: #fff; --b-fg: #fff; }
.btn[disabled], .btn[aria-disabled="true"], button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn[aria-busy="true"], .btn.is-loading, form[aria-busy="true"] .btn[type=submit] { cursor: progress; opacity: .8; }
.btn.is-added, .qa-add.is-added { --b-bg: var(--id-ok); --b-bd: var(--id-ok); --b-fg: #fff; background: var(--id-ok); border-color: var(--id-ok); color: #fff; }
@media (prefers-reduced-motion: reduce) { .btn, .btn svg { transition: none !important; } }

/* ---------- header, navigation, dropdowns, search ---------- */
.site-header { background: rgba(255, 255, 255, .94) !important; border-bottom: 1px solid var(--id-line) !important; }
.nav__link, .nav__toggle { color: var(--id-ink); }
.nav__link:hover, .nav__toggle:hover { background: var(--id-sand); color: var(--id-ink); }
.nav__toggle[aria-expanded="true"] { background: var(--id-ink); color: #fff; }
.nav__link[aria-current="page"], .nav__toggle[data-current] { color: var(--id-burnt); }
.nav__link[aria-current="page"]::after, .nav__toggle[data-current]::after { background: var(--id-persimmon); }
.dropdown { border-color: var(--id-line) !important; box-shadow: 0 24px 48px -28px rgba(32, 37, 54, .35) !important; }
.mega__aside { background: var(--id-sand) !important; color: var(--id-ink) !important; }
.mega__aside::before { background: var(--id-apricot) !important; opacity: .7; }
.mega__aside :is(p, .mega__title, h2, h3) { color: var(--id-ink) !important; }
.mega__aside p:not(.mega__title) { color: var(--id-ink-3) !important; }
.mega__aside .eyebrow { color: var(--id-burnt) !important; }
.header-search input[type=search] { background: var(--id-ivory); border-color: var(--id-line-2); }
.header-search input[type=search]:focus { background: #fff; border-color: var(--id-ink); }
.finder__results [role=option][aria-selected="true"], .finder__results [role=option]:hover, [role=listbox] [role=option][aria-selected="true"] { background: var(--id-sand) !important; box-shadow: inset 3px 0 0 var(--id-burnt) !important; color: var(--id-ink); }
.mobile-bar { background: rgba(255, 255, 255, .96) !important; border-top: 1px solid var(--id-line); }

/* ---------- forms, controls, selection ---------- */
:is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=date], input[type=search], select, textarea) { border-color: var(--id-control); color: var(--id-ink); background-color: #fff; }
:is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=date], input[type=search], select, textarea):focus { border-color: var(--id-ink); box-shadow: 0 0 0 3px rgba(239, 115, 82, .35); outline: none; }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--id-bad) !important; box-shadow: 0 0 0 3px rgba(163, 23, 43, .16) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--id-ink); }
.field label, .field .label { color: var(--id-ink); }
.field .hint, .hint { color: var(--id-ink-2); }
.chip { border-color: var(--id-line-2); color: var(--id-ink); background: #fff; }
a.chip:hover { border-color: var(--id-ink); color: var(--id-ink); background: var(--id-sand); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--id-ink) !important; border-color: var(--id-ink) !important; color: #fff !important; }
.variant-option span { border-color: var(--id-control); }
.variant-option span:hover { border-color: var(--id-ink); background: var(--id-sand); }
.variant-option input:checked + span { background: var(--id-ink); border-color: var(--id-ink); color: #fff; }
.variant-option input:checked + span::before { background: var(--id-persimmon); }
.variant-option input:disabled + span { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.stepper, .qty-stepper { border-color: var(--id-control) !important; }
.stepper:focus-within, .qty-stepper:focus-within { border-color: var(--id-ink) !important; box-shadow: 0 0 0 3px rgba(239, 115, 82, .35) !important; }
.stepper button:hover, .qty-btn:hover { background: var(--id-sand) !important; }
.stepper button:active, .qty-btn:active { background: #EADFD1 !important; }
.qty-btn { background: var(--id-ivory) !important; color: var(--id-ink) !important; }
.pagination a, .pagination .page-numbers { border-color: var(--id-line-2); color: var(--id-ink); background: #fff; }
.pagination a:hover { border-color: var(--id-ink); background: var(--id-sand); }
.pagination [aria-current], .pagination .page-numbers.current, .portal-pager a[aria-current] { background: var(--id-ink) !important; border-color: var(--id-ink) !important; color: #fff !important; }
.filters input[type=checkbox] { accent-color: var(--id-ink); }
.filters label.check:has(input:checked) { background: var(--id-sand) !important; color: var(--id-ink) !important; border-color: var(--id-ink) !important; }

/* status: colour + symbol + wording, never colour alone */
.notice { border-color: var(--id-line); box-shadow: inset 4px 0 0 var(--id-ink); background: #fff; }
.notice--ok { background: var(--id-ok-bg) !important; color: var(--id-ok) !important; border-color: #BFDCC9 !important; box-shadow: inset 4px 0 0 var(--id-ok) !important; }
.notice--warn { background: var(--id-warn-bg) !important; color: var(--id-warn) !important; border-color: #EBD89F !important; box-shadow: inset 4px 0 0 var(--id-warn) !important; }
.notice--bad, .notice--error { background: var(--id-bad-bg) !important; color: var(--id-bad) !important; border-color: #F2C3C9 !important; box-shadow: inset 4px 0 0 var(--id-bad) !important; }
.notice--ok::before { content: '✓  '; font-weight: 800; }
.notice--warn::before { content: '!  '; font-weight: 800; }
.notice--bad::before, .notice--error::before { content: '×  '; font-weight: 800; }
.status-note { background: var(--id-lilac-tint) !important; border-color: var(--id-lilac) !important; color: var(--id-ink) !important; }
.status-note svg { color: var(--id-lilac-ink) !important; }
.portal-state { background: var(--id-sand); color: var(--id-ink); }
.portal-state--ok { background: var(--id-ok-bg); color: var(--id-ok); }
.portal-state--warn { background: var(--id-warn-bg); color: var(--id-warn); }
.portal-state--bad { background: var(--id-bad-bg); color: var(--id-bad); }
.portal-state--ok::before { content: '✓ '; }
.portal-state--warn::before { content: '● '; font-size: .7em; vertical-align: .12em; }
.portal-state--bad::before { content: '× '; }
.badge { background: var(--id-sand); color: var(--id-ink); }
.toast { background: var(--id-ink); }
/* add-to-enquiry toast: mixed inline text read as four flex columns on phones; flow it as one sentence */
.toast:not([hidden]) { display: block !important; position: fixed; padding: 12px 20px 12px 46px !important; line-height: 1.4; text-align: left; }
.toast::before { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; border-radius: 50%; }
.toast a { margin-left: 4px; text-decoration: underline; text-underline-offset: 2px; }
.toast::before { background: var(--id-apricot); color: var(--id-ink); }
.toast a { color: var(--id-apricot); }
.qa-status.is-ok { background: var(--id-ok-bg) !important; color: var(--id-ok) !important; }
.qa-status.is-ok::before { content: '✓ '; font-weight: 800; }
.qa-status.is-bad { background: var(--id-bad-bg) !important; color: var(--id-bad) !important; }
.qa-status.is-bad::before { content: '× '; font-weight: 800; }

/* ---------- product photography: white wells, full product, packaging colours untouched ---------- */
.product-card { background: #fff; border: 1px solid var(--id-line) !important; border-radius: var(--id-radius) !important; box-shadow: var(--id-shadow) !important; transition: border-color var(--id-t) var(--id-ease), box-shadow var(--id-t) var(--id-ease); }
.product-card:hover, .product-card:focus-within { border-color: var(--id-line-2) !important; box-shadow: var(--id-shadow-hover) !important; }
.product-card__media, .rail .product-card__media, .rec-rail .product-card__media, .split aside .product-card__media { background: #fff !important; aspect-ratio: 1 / 1 !important; padding: 7%; }
.product-card__media img { filter: none !important; object-fit: contain !important; transition: transform 320ms var(--id-ease) !important; }
.product-card:hover .product-card__media img { transform: scale(1.03) !important; }
.product-card__body { border-top: 1px solid var(--id-line) !important; }
.product-card__brand { color: var(--id-burnt) !important; letter-spacing: .1em; }
.product-card h3 { font: 600 1rem/1.35 var(--font-display) !important; color: var(--id-ink); text-wrap: pretty; }
.product-card h3 a { color: var(--id-ink); }
.product-card h3 a:hover { color: var(--id-burnt-dark); text-decoration: underline; text-underline-offset: 3px; }
.product-card__sizes { color: var(--id-ink-2) !important; font-variant-numeric: tabular-nums; }
.product__media, .product-gallery, .pdp-media { background: #fff !important; border: 1px solid var(--id-line); border-radius: 22px !important; }
.product__media img { filter: none !important; }
.qa-card { border-color: var(--id-line) !important; border-radius: var(--id-radius) !important; }
.qa-card .portal-product__media, .portal-product__media { background: #fff !important; border-bottom: 1px solid var(--id-line); }
.catvis--thumb, .catvis--set, .catvis--photo { background: #fff !important; }
@media (prefers-reduced-motion: reduce) { .product-card:hover .product-card__media img { transform: none !important; } }

/* ---------- cards and panels ---------- */
.card { border-color: var(--id-line); box-shadow: var(--id-shadow); }
.card--link:hover { border-color: var(--id-line-2); box-shadow: var(--id-shadow-hover); transform: none; }

/* =====================================================================================================
   HOMEPAGE COMPOSITION (top to bottom): ivory hero with apricot/persimmon set -> ink product strip ->
   ivory selection -> white category shelves on sage/lilac/apricot wells -> lilac brand index ->
   ivory process -> white sourcing split -> one burnt-orange call to action -> apricot footer
   ===================================================================================================== */
.hero7 { background: var(--id-ivory) !important; }
.hero7::before { display: none !important; }
.hero7 h1 { color: var(--id-ink); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; max-width: 12.5ch; }
.hero7 h1 em { background: linear-gradient(transparent 78%, rgba(239, 115, 82, .38) 78%, rgba(239, 115, 82, .38) 94%, transparent 94%) !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--id-burnt) !important; -webkit-text-fill-color: var(--id-burnt); font-style: normal; padding: 0 .04em; }
.hero7 .lead { color: var(--id-ink-3); }
.hero7__note { color: var(--id-ink-2) !important; }
.hero7__search { border-color: var(--id-line-2) !important; box-shadow: 0 14px 30px -24px rgba(32, 37, 54, .4) !important; }
.hero7__search:focus-within { outline: 3px solid var(--id-ink) !important; }
/* photographic set: apricot arch + persimmon sun behind the packs, never over labels */
.stage::before { content: '' !important; position: absolute; inset: 12% 13% 4% 24% !important; border-radius: 999px 999px 36px 36px !important; background: linear-gradient(180deg, var(--id-apricot) 0%, var(--id-apricot-2) 100%) !important; z-index: 0 !important; }
.stage__light { left: auto !important; right: 3% !important; top: 1% !important; bottom: auto !important; width: 21% !important; height: auto !important; aspect-ratio: 1; border-radius: 50% !important; background: var(--id-persimmon) !important; filter: none !important; z-index: 0 !important; opacity: .92; }
.stage__pack { border: 1px solid rgba(32, 37, 54, .07); border-radius: 22px !important; box-shadow: 0 1px 2px rgba(32, 37, 54, .06), 0 26px 44px -30px rgba(32, 37, 54, .45) !important; background: #fff !important; }
@media (max-width: 1023px) { .stage { height: clamp(250px, 64vw, 400px) !important; } .stage::before { inset: 10% 4% 2% 10% !important; } }

/* moving product strip: the one deep-ink surface on the page, packshots on white tiles */
.loop { background: var(--id-ink) !important; color: #fff; padding: 26px 0 30px !important; }
.loop__title { color: var(--id-apricot) !important; }
.loop__toggle { border-color: rgba(244, 199, 175, .6) !important; color: #fff !important; }
.loop__toggle:hover { background: rgba(244, 199, 175, .14) !important; }
.loop__card { background: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .12) !important; color: #fff !important; }
.loop__card:hover, .loop__card:focus-visible { background: rgba(255, 255, 255, .1) !important; border-color: rgba(244, 199, 175, .55) !important; }
.loop__txt small { color: var(--id-apricot) !important; }
.loop__txt b { color: #fff !important; }
.loop :is(span, b, small, h2) { -webkit-text-fill-color: currentColor; }

/* section frames */
.h7 { background: transparent; }
.h7--warm { background: var(--id-ivory) !important; }
.h7__head h2 { font-weight: 700; letter-spacing: -.03em; line-height: 1.06; }
.h7__head p { color: var(--id-ink-2) !important; }
.entry-content > section.h7:not(.h7--warm):not(.h7--navy) { background: var(--id-white); }

/* category shelves: white cards, wells alternate sage / lilac / apricot tints */
.shelf { border: 1px solid var(--id-line) !important; border-radius: 20px !important; box-shadow: none; transition: border-color var(--id-t) var(--id-ease), box-shadow var(--id-t) var(--id-ease), transform 220ms var(--id-ease); }
.shelf:hover { transform: translateY(-2px); box-shadow: var(--id-shadow-hover) !important; border-color: var(--id-line-2) !important; }
.shelves > li:nth-child(3n+1) .shelf__packs { background: var(--id-sage-tint) !important; }
.shelves > li:nth-child(3n+2) .shelf__packs { background: var(--id-lilac-tint) !important; }
.shelves > li:nth-child(3n) .shelf__packs { background: var(--id-apricot-tint) !important; }
.shelf__pack img { filter: drop-shadow(0 8px 10px rgba(32, 37, 54, .12)) !important; }
.shelf__body b { color: var(--id-ink); font-weight: 700; }
.shelf__body small { color: var(--id-ink-2) !important; }
.shelf__meta { color: var(--id-burnt) !important; }
@media (prefers-reduced-motion: reduce) { .shelf:hover { transform: none; } }

/* brand index: compact, confident, on muted lilac */
.h7--navy { background: var(--id-lilac-tint) !important; color: var(--id-ink) !important; }
.h7--navy :is(h2, h3) { color: var(--id-ink) !important; }
.h7--navy p { color: var(--id-ink-2) !important; }
.h7--navy .kicker { color: var(--id-burnt) !important; }
.h7--navy .arrow-link { color: var(--id-ink) !important; }
.bi { background: #fff !important; border: 1px solid #DDD4E8 !important; color: var(--id-ink) !important; border-radius: 12px !important; transition: border-color var(--id-t), box-shadow var(--id-t); }
.bi:hover, .bi:focus-visible { border-color: var(--id-ink) !important; box-shadow: var(--id-shadow-hover); color: var(--id-ink) !important; }
.bi__img { background: #fff !important; border: 1px solid var(--id-line); overflow: hidden; }
.bi__img img { width: 100% !important; height: 100% !important; object-fit: contain !important; } /* tall packs stay whole inside the tile */
.bi__name { color: var(--id-ink) !important; }
.bi__n { color: var(--id-ink-2) !important; font-variant-numeric: tabular-nums; }
/* brands stay compact on phones: two columns instead of one long list */
@media (max-width: 599px) {
  .brand-index { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .brand-index .bi { grid-template-columns: 38px minmax(0, 1fr) auto !important; gap: 8px !important; padding: 8px !important; min-height: 56px; }
  .brand-index .bi__img { width: 38px !important; height: 38px !important; flex: 0 0 38px; padding: 2px !important; }
  .brand-index .bi__name { font-size: 13.5px !important; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
  .brand-index .bi__n { font-size: 12px !important; }
}

/* process: large burnt numerals, persimmon rules */
.flow li::before { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--id-burnt) !important; -webkit-text-fill-color: var(--id-burnt); font-weight: 700 !important; }
.flow li::after, .flow--light li::after { background: linear-gradient(90deg, var(--id-persimmon), rgba(239, 115, 82, 0)) !important; height: 2px !important; }
.flow h3 { color: var(--id-ink) !important; }
.flow p { color: var(--id-ink-2) !important; }

/* sourcing + guides */
.src-form { border-color: var(--id-line-2) !important; }
.src-form:focus-within { outline: 3px solid var(--id-ink) !important; }
.guide-rows, .guide-rows li { border-color: var(--id-line) !important; }
.guide-rows b { color: var(--id-ink) !important; }
.guide-rows a:hover b { color: var(--id-burnt) !important; text-decoration: underline; text-underline-offset: 3px; }

/* the single strong colour statement */
.final-cta { background: var(--id-burnt) !important; color: #fff !important; position: relative; overflow: hidden; isolation: isolate; }
.final-cta::before { content: ''; position: absolute; z-index: -1; right: -110px; top: -150px; width: 280px; height: 280px; border-radius: 50%; background: var(--id-persimmon); opacity: .45; }
.final-cta h2 { color: #fff !important; }
.final-cta p { color: #FBE3D8 !important; }
.final-cta :focus-visible { outline-color: #fff !important; }
/* parent-theme (Blocksy) default palette was still blue and leaked into native submit-button hover,
   form focus and text selection. Re-point its variables at the identity; theme settings untouched. */
:root:root {
  --theme-palette-color-1: #B83B24; --theme-palette-color-2: #8E2C19; --theme-palette-color-3: #625F5B;
  --theme-palette-color-4: #202536; --theme-palette-color-5: #E6DDD2;
  --theme-link-initial-color: #B83B24; --theme-link-hover-color: #8E2C19;
  --theme-button-background-initial-color: #B83B24; --theme-button-background-hover-color: #8E2C19;
  --theme-button-border-hover-color: #8E2C19; --theme-button-text-initial-color: #fff; --theme-button-text-hover-color: #fff;
  --theme-form-field-border-focus-color: #202536; --theme-selection-background-color: #F4C7AF; --theme-selection-text-color: #202536;
}
/* inner-page CTA band (product, brand pages) = same strong statement, no old violet glow */
.cta-band { background: var(--id-burnt) !important; background-image: none !important; color: #fff !important; position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before { content: ''; position: absolute; z-index: -1; left: auto !important; bottom: auto !important; right: -90px !important; top: -140px !important; width: 240px; height: 240px; border-radius: 50%; background: var(--id-persimmon); opacity: .45; }
.cta-band h2 { color: #fff !important; }
.cta-band p { color: #FBE3D8 !important; }
.cta-band .eyebrow, .final-cta .eyebrow { color: #FFF5EF !important; } /* 5.3:1 on burnt (apricot is only 3.7:1, too low for small text) */
.cta-band :focus-visible { outline-color: #fff !important; }
/* "Beyond the catalogue" sourcing panel = calm lilac tint (category, brand pages) */
.beyond { background: #F1ECF7 !important; background-image: none !important; color: var(--id-ink) !important; border: 1px solid #DDD3EC; }
.beyond::before, .beyond::after, .cta-band::after { display: none !important; } /* old violet glow layers */
.site-footer details.footer-group { border-color: rgba(32, 37, 54, .28) !important; } /* mobile footer accordion lines were legacy blue */
.footer-legal__links button.linklike { padding: 2px 0 !important; } /* "Cookie settings" sits on the same baseline as the legal links */
.beyond h2 { color: var(--id-ink) !important; }
.beyond p { color: var(--id-ink-2) !important; }
.beyond .eyebrow { color: #6B5A93 !important; } /* 5.3:1 on lilac tint */
.beyond .beyond__mark span:nth-child(1) { background: #DDD3EC !important; }
.beyond .beyond__mark span:nth-child(2) { background: var(--id-ink) !important; }
.beyond .beyond__mark span:nth-child(3) { background: var(--id-persimmon) !important; }
.beyond .btn { background: var(--id-ink) !important; color: #fff !important; border-color: var(--id-ink) !important; }
.beyond .btn:hover { background: #000 !important; }

/* inner page heads: calm ivory with a sand panel, accent by role */
.page-head, .page-head--art, .page-head--card { background: var(--id-ivory) !important; }
.page-head::before { background: none !important; }
[data-page-kind="category"] .page-head, .tax-eli_type .page-head { --ph-tint: var(--id-sage-tint); --ph-accent: var(--id-burnt); }
[data-page-kind="range"] .page-head, .eli-range .page-head { --ph-tint: var(--id-lilac-tint); --ph-accent: var(--id-burnt); }
.page-head__art { background: #fff !important; border: 1px solid var(--id-line); box-shadow: 0 24px 44px -32px rgba(32, 37, 54, .4) !important; }
.page-head .eyebrow { color: var(--id-burnt) !important; }
/* category hero photos: no blurred/saturated copy of the photo behind it - real photo on a white well */
.catvis--photo::before, .catvis--photo::after { display: none !important; }
.catvis--photo { background: #fff !important; border: 1px solid var(--id-line) !important; box-shadow: 0 24px 44px -32px rgba(32, 37, 54, .4) !important; }
.catvis__img { filter: none !important; }
/* head-card (wholesale, guides) = the page's ink contrast card: solid ink, no blue glow; mint accents become apricot */
.head-card { background: var(--id-ink) !important; background-image: none !important; color: #fff !important; border: 0 !important; box-shadow: 0 24px 44px -32px rgba(32, 37, 54, .5) !important; }
.head-card__title { color: #fff !important; }
.head-card__steps li { color: #D9D4CC !important; }
.head-card .eyebrow { color: var(--id-apricot) !important; }
.head-card__steps li:last-child::before { background: var(--id-apricot) !important; color: var(--id-ink) !important; border-color: var(--id-apricot) !important; }
.head-card .btn:not(.btn--ghost) { background: #fff !important; color: var(--id-ink) !important; border-color: #fff !important; }
.head-card .btn--ghost { color: #fff !important; border-color: rgba(255, 255, 255, .55) !important; background: transparent !important; }
.head-card :focus-visible { outline-color: var(--id-apricot) !important; }
/* legacy "night" sections (About and editorial pages) = solid ink contrast surface, no blue glows */
.section--night { background: var(--id-ink) !important; background-image: none !important; color: #fff !important; }
.section--night :is(h2, h3, h4) { color: #fff !important; }
.section--night :is(p, li, dd) { color: #D9D4CC !important; } /* 10:1 on ink */
.section--night .eyebrow, .section--night a:not(.btn) { color: var(--id-apricot) !important; } /* 9.9:1 on ink */
.section--night :is(hr, [class*="card"], .wp-block-column) { border-color: rgba(255, 255, 255, .18) !important; }
.section--night :focus-visible { outline-color: var(--id-apricot) !important; }
.pillars__n { width: auto !important; height: auto !important; padding: 6px 12px; border-radius: 999px !important; background: var(--id-apricot) !important; color: var(--id-ink) !important; font: 700 12px/1.2 Manrope, sans-serif !important; letter-spacing: .04em; } /* label text no longer squeezed into a 40px circle */
/* switches (cookie preferences, "remember products"): off = warm control grey, on = ink; thumb position also shows state */
.switch input { background: var(--id-control) !important; }
.switch input:checked { background: var(--id-ink) !important; }
.switch input:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- footer: warm apricot, ink type, clear groups ---------- */
.site-footer.site-footer--v12 { background: var(--id-apricot) !important; background-image: none !important; color: var(--id-ink-3) !important; }
.site-footer.site-footer--v12::after { display: none; }
.site-footer.site-footer--v12 :is(a:not(.btn), .footer-legal__links button.linklike) { color: var(--id-ink) !important; }
.site-footer.site-footer--v12 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer.site-footer--v12 :is(h2, .country-pref label) { color: var(--id-rust) !important; }
.site-footer.site-footer--v12 .footer-group__chev { color: var(--id-rust); }
.site-footer.site-footer--v12 :is(.footer-brand p, .footer-legal__co, .country-pref__hint, .footer-copy, .footer-note) { color: var(--id-ink-3) !important; }
.site-footer.site-footer--v12 .footer-legal__co strong, .site-footer.site-footer--v12 .country-pref__status { color: var(--id-ink) !important; }
.site-footer.site-footer--v12 .footer-all a { color: var(--id-rust) !important; font-weight: 700; }
.site-footer.site-footer--v12 :is(.footer-main, .footer-meta, .footer-legal) { border-color: rgba(32, 37, 54, .16) !important; }
.site-footer.site-footer--v12 .footer-cta, .site-footer.site-footer--v12 .btn { --b-bg: var(--id-ink); --b-fg: #fff; --b-bd: var(--id-ink); color: #fff !important; }
.site-footer.site-footer--v12 .btn:hover { --b-bg: #333A52; --b-bd: #333A52; box-shadow: none; }
.site-footer.site-footer--v12 .country-pref select { background: rgba(255, 255, 255, .85) !important; color: var(--id-ink) !important; border-color: rgba(32, 37, 54, .35) !important; }
.site-footer.site-footer--v12 :focus-visible { outline-color: var(--id-ink) !important; }
@media (min-width: 900px) { .site-footer--v12 .footer-nav { column-gap: clamp(24px, 4vw, 56px); } }

/* ---------- consent ---------- */
.consent { background: #fff !important; color: var(--id-ink) !important; border: 1px solid var(--id-line) !important; box-shadow: 0 24px 60px -30px rgba(32, 37, 54, .45) !important; }

/* =====================================================================================================
   CUSTOMER ACCOUNT: the same identity, calmer - neutral surfaces, ink selection, colour only for actions/status
   ===================================================================================================== */
.acct-strip { background: var(--id-sand) !important; color: var(--id-ink) !important; border-bottom: 1px solid var(--id-line) !important; }
.acct-strip a, .acct-strip__out { color: var(--id-ink) !important; }
.acct-strip__home { border-right-color: var(--id-line-2) !important; }
.acct-strip__out { border-color: var(--id-control) !important; background: #fff !important; }
.acct-strip__out:hover { background: var(--id-ink) !important; color: #fff !important; border-color: var(--id-ink) !important; text-decoration: none !important; }
.acct-strip__count { background: var(--id-burnt) !important; color: #fff !important; }
.acct-strip__title { color: var(--id-ink-3); opacity: 1 !important; }
.acct-strip a:focus-visible, .acct-strip__out:focus-visible, .acct-strip select:focus-visible { outline-color: var(--id-ink) !important; }
.acct-strip__switch select { background: #fff !important; color: var(--id-ink) !important; border-color: var(--id-control) !important; }
.acct-strip .btn--ghost { color: var(--id-ink) !important; border: 1px solid var(--id-control) !important; }
/* list chooser (v17.0.1): the closed control shows a compact, ellipsed current name; the opened native list shows every
   full name with its line count, the current one marked "✓ … (current)" - works with touch, keyboard and screen readers */
.acct-strip__switch form { display: flex; align-items: center; gap: 8px; min-width: 0; }
.acct-strip__switch select { min-width: 0; max-width: 22rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right: 2rem; }
@media (max-width: 599px) {
  .acct-strip__switch { flex: 1 1 100%; min-width: 0; width: 100%; }
  .acct-strip__switch form { width: 100%; }
  .acct-strip__switch select { flex: 1 1 auto; max-width: none; width: auto; }
  .acct-strip__switch .btn { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 899px) { .acct-strip__nav { border-top-color: var(--id-line-2) !important; } }
.portal-panel { background: #fff !important; border: 1px solid var(--id-line) !important; box-shadow: var(--id-shadow) !important; border-radius: var(--id-radius) !important; }
.portal-panel--lead { background: #fff !important; border-top: 4px solid var(--id-persimmon) !important; }
.portal-panel--quiet { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.portal-nav a { background: #fff !important; border: 1px solid var(--id-line-2); color: var(--id-ink) !important; transition: background var(--id-t), border-color var(--id-t); }
.portal-nav a:hover { background: var(--id-sand) !important; border-color: var(--id-ink); }
.portal-nav a[aria-current="page"] { background: var(--id-ink) !important; border-color: var(--id-ink) !important; color: #fff !important; }
.portal-nav a:focus-visible { outline: 3px solid var(--id-ink) !important; }
.portal-count { background: var(--id-apricot) !important; color: var(--id-ink) !important; }
.portal-todo li { background: var(--id-ivory) !important; border-left-color: var(--id-persimmon) !important; }
.portal-upload { background: var(--id-ivory) !important; border: 1px dashed var(--id-line-2); }
.portal-product { border-color: var(--id-line) !important; }
.portal-import { border-color: var(--id-ink) !important; }
.portal table { font-variant-numeric: tabular-nums; }
.portal table th { color: var(--id-ink-3); font-weight: 600; }
.portal table :is(td, th).num, .portal-quote td:nth-last-child(-n+2) { text-align: right; }
.portal table tr { border-color: var(--id-line); }
.portal table tbody tr:hover { background: var(--id-ivory); }
/* account layout: grid tracks may shrink (a wide table used to push the panel past the screen edge on phones, v17.0.1) */
.portal > *, .portal-body > * { min-width: 0; }
/* draft list on phones: one card per product line; Quantity and Note keep visible labels */
@media (max-width: 599px) {
  .portal-list-table, .portal-list-table tbody, .portal-list-table tr, .portal-list-table td { display: block; width: 100%; }
  .portal-list-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .portal-list-table tr { border: 1px solid var(--id-line); border-radius: 12px; padding: 12px; margin: 0 0 12px; background: #fff; }
  .portal-list-table tbody tr:hover { background: #fff; }
  .portal-list-table td { padding: 6px 0 !important; border: 0 !important; text-align: left !important; }
  .portal-list-table td:nth-child(2)::before { content: 'Quantity (units)'; }
  .portal-list-table td:nth-child(3)::before { content: 'Note (optional)'; }
  .portal-list-table td:nth-child(2)::before, .portal-list-table td:nth-child(3)::before { display: block; font: 600 .8125rem/1.3 'Source Sans 3', sans-serif; color: var(--id-ink-3); margin-bottom: 4px; }
  .portal-list-table td input[type="text"] { width: 100%; }
  .portal-list-table code { overflow-wrap: anywhere; }
  .table-wrap:has(> .portal-list-table) { overflow: visible; }
}
/* quotation tables on phones: all four columns and every price visible without sideways scrolling */
@media (max-width: 599px) {
  :is(.portal-quote table, table.portal-quote) { font-size: .875rem; }
  :is(.portal-quote table, table.portal-quote) :is(th, td) { padding: 8px 6px !important; }
  :is(.portal-quote table, table.portal-quote) :is(th, td):not(:first-child) { white-space: nowrap; }
  :is(.portal-quote table, table.portal-quote) th { font-size: .8125rem; }
}
/* conversation: who wrote what is visible from label, edge and surface together */
.portal .msg { background: #fff !important; border: 1px solid var(--id-line); border-left: 4px solid var(--id-ink) !important; }
.portal .msg--staff { background: var(--id-lilac-tint) !important; border-left-color: var(--id-lilac-ink) !important; }
.portal .msg--system { background: var(--id-ivory) !important; border-style: dashed !important; border-left: 4px solid var(--id-line-2) !important; color: var(--id-ink-3); }
.portal .msg__meta { color: var(--id-ink-2); font-size: .8125rem; }
.req-card { background: var(--id-warn-bg) !important; border-color: #D9B25A !important; }
.offer-card { background: #fff !important; border: 1px solid var(--id-line) !important; border-left: 4px solid var(--id-burnt) !important; }
.offer-card__kind { color: var(--id-burnt) !important; }

/* ---------- motion vocabulary: short colour/elevation transitions; everything still works without it ---------- */
@media (prefers-reduced-motion: reduce) {
  .stage__pack, .rv { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .shelf, .bi, .product-card, .portal-nav a { transition: none !important; }
}