/* 3 Eli v13 (1 Oct 2026): luxurious, contemporary direction.
   Deep navy, rich blue and restrained violet; soft flowing gradients; white reading surfaces.
   Removes the grid / graph-paper / dotted and striped backgrounds from v11-v12. Loaded after 3eli.css. */

:root {
  --lux-ink: #0B1230;
  --lux-navy: #101A3F;
  --lux-blue: #1E3A8A;
  --lux-royal: #2F4FD8;
  --lux-violet: #5B43C9;
  --lux-mist: #EEF1FA;
  --lux-pearl: #F7F8FC;
  --lux-glow-blue: rgba(47, 79, 216, .16);
  --lux-glow-violet: rgba(91, 67, 201, .12);
  --lux-surface: #FFFFFF;
  --lux-line: rgba(16, 26, 63, .09);
  --lux-shadow: 0 1px 2px rgba(11, 18, 48, .04), 0 18px 40px -26px rgba(11, 18, 48, .28);
}

/* ---------- page canvas: one quiet, fixed wash behind everything (never behind reading text directly) */
body { background: var(--lux-pearl); }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 105% -10%, var(--lux-glow-violet), transparent 60%),
    radial-gradient(1000px 640px at -15% 8%, var(--lux-glow-blue), transparent 62%),
    linear-gradient(180deg, #F4F6FC 0%, var(--lux-pearl) 38%, #F6F5FC 100%);
}

/* ---------- remove geometric effects */
.hero5::before {
  background-image: none;
  background:
    radial-gradient(900px 520px at 88% 12%, rgba(91, 67, 201, .16), transparent 62%),
    radial-gradient(760px 460px at 8% 100%, rgba(47, 79, 216, .14), transparent 64%),
    linear-gradient(160deg, #F5F7FE 0%, #EEF1FB 55%, #F3F0FC 100%);
  background-size: auto; -webkit-mask-image: none; mask-image: none;
}
.hero5 { background: transparent; }
.sc-stage::after { display: none; }
.ph { background: linear-gradient(160deg, #F4F6FD 0%, #E9EDFA 100%); }
.page-head { background: transparent; border-bottom: 0; }
.page-head::before {
  width: auto; inset: 0; border-radius: 0;
  background:
    radial-gradient(760px 380px at 92% -20%, rgba(91, 67, 201, .13), transparent 65%),
    radial-gradient(680px 360px at 10% 120%, rgba(47, 79, 216, .10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.35));
}
.page-head--art, .page-head--card { background: transparent; }
.page-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--lux-line) 20%, var(--lux-line) 80%, transparent); }

/* Brand wall: separate soft tiles instead of a ruled grid */
.brand-wall { gap: 12px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.brand-wall li { box-shadow: none; background: transparent; }
.brand-wall a { border-radius: var(--r-md); background: var(--lux-surface); box-shadow: var(--lux-shadow); border: 1px solid var(--lux-line); transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t); }
.brand-wall a:hover { background: linear-gradient(135deg, var(--lux-royal), var(--lux-violet)); color: #fff; transform: translateY(-2px); }
.section--night .brand-wall { background: transparent; border: 0; }
.section--night .brand-wall li { box-shadow: none; }
.section--night .brand-wall a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); box-shadow: none; }
.section--night .brand-wall a:hover { background: rgba(255,255,255,.14); }

/* Process steps: a soft continuous line instead of dashes */
.steps li::after { background: linear-gradient(180deg, rgba(47,79,216,.45), rgba(91,67,201,.15)); }
@media (min-width: 900px) { .steps li::after { background: linear-gradient(90deg, rgba(47,79,216,.45), rgba(91,67,201,.15)); } }
.section--night .steps li::after, .section--band .steps li::after { background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.08)); }
@media (max-width: 899px) { .section--night .steps li::after, .section--band .steps li::after { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.08)); } }

/* ---------- night bands and footer: deep navy with a slow blue/violet light */
.section--night, .cta-band, .site-footer--v12 {
  background-color: var(--lux-ink);
  background-image:
    radial-gradient(1000px 520px at 110% -20%, rgba(91, 67, 201, .42), transparent 60%),
    radial-gradient(900px 480px at -15% 120%, rgba(47, 79, 216, .38), transparent 60%),
    linear-gradient(160deg, #0B1230 0%, #101A3F 55%, #16174A 100%);
}
.section--night::after, .site-footer--v12::after, .cta-band::after { opacity: .035; }

/* ---------- reading surfaces stay clean */
.section--white, .rail-section { background: rgba(255,255,255,.86); }
.rail-section { border-top: 0; box-shadow: 0 -1px 0 var(--lux-line); }
.card, .product-card, .cat-tile { border-color: var(--lux-line); box-shadow: var(--lux-shadow); }
.cat-tile:hover, .product-card:hover { box-shadow: 0 2px 6px rgba(11,18,48,.06), 0 30px 60px -30px rgba(11,18,48,.38); }
.cat-tile__art { background: linear-gradient(160deg, #F6F7FD, #ECEFFA); }
.cat-grid > li .cat-tile { --tint: #EEF1FA; }

/* ---------- featured rail: brand-sourcing card */
.brand-card .brand-card__media { background: radial-gradient(120% 90% at 50% 110%, #DCE3FF 0%, rgba(220,227,255,0) 60%), linear-gradient(160deg, #FFFFFF 0%, #F1F3FC 100%); display: grid; place-items: center; }
.brand-card .brand-card__media img { object-fit: contain; }
.brand-card .product-card__brand { color: var(--lux-violet); }

/* ---------- footer additions */
.footer-meta { display: grid; gap: var(--s4); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.1); }
@media (min-width: 900px) { .footer-meta { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.country-pref { display: grid; gap: 4px; max-width: 340px; }
.country-pref label { font: 700 .75rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.country-pref select { min-height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; padding: 0 12px; font: inherit; }
.country-pref select option, .country-pref select optgroup { color: var(--navy); background: #fff; }
.country-pref select:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.country-pref__hint { margin: 0; font-size: .8125rem; color: var(--on-navy-2); }
.footer-copy { margin: 0; font-size: .8125rem; color: var(--on-navy-2); }
.footer-legal__links button.linklike { background: none; border: 0; padding: 0; margin: 0; color: var(--on-navy); font: inherit; font-size: .8125rem; line-height: 1.5; cursor: pointer; text-decoration: none; vertical-align: baseline; }
.footer-legal__links button.linklike:hover, .footer-legal__links button.linklike:focus-visible { text-decoration: underline; color: #fff; }

/* ---------- consent */
.consent { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 980px; margin: 0 auto; border-radius: var(--r-lg); background: var(--lux-surface); color: var(--navy); box-shadow: 0 20px 60px -20px rgba(11,18,48,.45), 0 0 0 1px var(--lux-line); }
.consent__inner { display: grid; gap: var(--s4); padding: var(--s5); }
@media (min-width: 900px) { .consent__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.consent h2 { font-size: 1.0625rem; margin: 0 0 4px; }
.consent p { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-2); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.consent__actions .btn { min-height: 44px; }
body.has-mobile-bar .consent { bottom: 84px; }
@media (min-width: 900px) { body.has-mobile-bar .consent { bottom: 16px; } }
.consent-dialog { width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 32px); border: 0; border-radius: var(--r-lg); padding: 0; box-shadow: 0 30px 80px -20px rgba(11,18,48,.5); color: var(--navy); }
.consent-dialog::backdrop { background: rgba(11,18,48,.55); }
.consent-dialog__form { padding: var(--s6) var(--s5) var(--s5); display: grid; gap: var(--s3); }
.consent-dialog h2 { margin: 0; font-size: var(--fs-lg); }
.consent-cat { border: 1px solid var(--lux-line); border-radius: var(--r-md); padding: var(--s3) var(--s4); margin: 0; }
.consent-cat legend { font: 700 1rem var(--font-display); padding: 0 6px; display: flex; gap: 10px; align-items: center; }
.consent-cat p { margin: 0; }
.consent-cat__state { font: 600 .75rem var(--font-display); color: var(--c-ink-2); background: var(--lux-mist); border-radius: 999px; padding: 2px 8px; }
.consent-cat--off { background: var(--lux-pearl); }
.consent-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

/* ---------- market note on product pages */
.market-note { margin: var(--s3) 0; font-size: var(--fs-sm); line-height: 1.5; background: #FFF7E0; color: #5C4300; border-radius: var(--r-sm); padding: 10px 12px; max-width: 60ch; }

/* ---------- HTML sitemap */
.html-sitemap { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.html-sitemap__group { background: var(--lux-surface); border: 1px solid var(--lux-line); border-radius: var(--r-md); padding: var(--s5); box-shadow: var(--lux-shadow); }
.html-sitemap__group h2 { font-size: 1.125rem; }
.html-sitemap__group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.html-sitemap__group a { display: inline-block; padding: 4px 0; }

/* ---------- subtle pointer light: fine pointers only, never with reduced motion */
.btn::after { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .btn::after { display: block; } }
@media (prefers-reduced-motion: reduce) {
  [data-spotlight] { --mx: 80% !important; --my: 10% !important; }
  .brand-wall a:hover, .cat-tile:hover, .product-card:hover { transform: none; }
}
[data-motion="paused"] .brand-wall a:hover { transform: none; }

/* ---------- customer account area */
.portal { display: grid; gap: var(--s5); }
.portal-panel { background: var(--lux-surface); border: 1px solid var(--lux-line); border-radius: var(--r-md); padding: var(--s5); box-shadow: var(--lux-shadow); }
.portal-panel > h2:first-child, .portal-panel > h3:first-child { margin-top: 0; }
.portal-nav { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.portal-nav a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--lux-mist); color: var(--navy); text-decoration: none; font: 600 var(--fs-sm) var(--font-display); }
.portal-nav a[aria-current="page"] { background: var(--navy); color: #fff; }
.portal-state { display: inline-block; border-radius: 999px; padding: 2px 10px; font: 700 .75rem var(--font-display); background: var(--lux-mist); color: var(--navy); }
.portal-state--ok { background: var(--mint-50); color: var(--mint-ink); }
.portal-state--warn { background: #FFF3D1; color: #6B4E00; }
.portal-state--bad { background: #FDECEE; color: #A3172B; }
.portal table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.portal th, .portal td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--lux-line); vertical-align: top; }
.portal .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.portal .msg { border-radius: var(--r-sm); padding: var(--s3) var(--s4); background: var(--lux-pearl); margin: 0 0 var(--s3); white-space: pre-wrap; overflow-wrap: anywhere; }
.portal .msg--staff { background: #EEF1FF; }
.portal .msg--system { background: #F4F4F6; font-size: var(--fs-sm); }
.portal .msg__meta { font-size: .8125rem; color: var(--c-ink-2); margin: 0 0 4px; white-space: normal; }
.portal-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.portal-timeline li { display: flex; gap: 10px; align-items: baseline; }
.portal-timeline li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-line); transform: translateY(1px); }
.portal-timeline li.is-done::before { background: var(--lux-royal); }
.portal-timeline li.is-current::before { background: var(--lux-violet); box-shadow: 0 0 0 4px rgba(91,67,201,.18); }
.portal .field { margin-bottom: var(--s3); display: grid; gap: 4px; }
.portal input[type=text], .portal input[type=email], .portal input[type=password], .portal input[type=tel], .portal select, .portal textarea { width: 100%; min-height: 44px; }
.portal .table-wrap { overflow-x: auto; }
.portal .notice { margin: 0 0 var(--s4); }